user's screen ui v1

app/_layout.tsx

@@ -1,5 +1,15 @@
+
 import { Stack } from 'expo-router';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import React from 'react';
 
 export default function Layout() {
-  return <Stack screenOptions={{ headerShown: false}} />;
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <Stack screenOptions={{ headerShown: false}} />
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
 }

app/components/ProductCard.tsx

@@ -0,0 +1,116 @@
+import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
+import { useRouter } from 'expo-router';
+import { ChevronRight } from 'lucide-react-native';
+import COLORS from "@/app/constants/colors";
+
+interface ProductCardProps {
+  id: string;
+  name: string;
+  image: string;
+  description: string;
+  price: number;
+  inStock?: boolean;
+}
+
+export default function ProductCard({
+  id,
+  name,
+  image,
+  description,
+  price,
+  inStock = true,
+}: ProductCardProps) {
+  const router = useRouter();
+
+  return (
+    <TouchableOpacity
+      style={styles.card}
+    >
+      <Image source={{ uri: image }} style={styles.image} />
+      <View style={styles.content}>
+        <View>
+          <Text style={styles.title}>{name}</Text>
+          <Text style={styles.blend}>
+            {description}
+          </Text>
+        </View>
+        <View style={styles.rightContent}>
+            <ChevronRight size={20} color="#666" />
+            <Text style={[styles.stock, { color: inStock ? '#22C55E' : '#EF4444' }]}>
+                {inStock ? 'En Stock' : 'Hors Stock'}
+            </Text>
+            <View style={styles.priceContainer}>
+                <Text style={styles.price}>{price}</Text>
+                <Text style={styles.unit}>TND/kg</Text>
+            </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: COLORS.secondary,
+    borderRadius: 12,
+    marginBottom: 14,
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  image: {
+    width: 75,
+    height: 120,
+    borderRadius: 8,
+  },
+  content: {
+    flex: 1,
+    marginLeft: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '700',
+    color: '#333',
+    marginBottom: 4,
+  },
+  blend: {
+    fontSize: 12,
+    color: '#666',
+  },
+  rightContent: {
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    height: 110, // Assure un espacement vertical régulier
+  },
+  priceContainer: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+},
+  price: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+  },
+  unit: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#000',
+    marginLeft: 3,
+  },
+  stock: {
+    fontSize: 12,
+    color: '#22C55E',
+  },
+});

app/constants/colors.ts

@@ -1,7 +1,8 @@
 const COLORS = {
     background_user: '#FFFFFF', 
     text: '#FFFFFF',     
-    primary: '#B17741',  
+    primary: '#B17741',
+    secondary: '#F7F1E9',  
   };
   
 export default COLORS;

app/index.tsx

@@ -9,7 +9,7 @@ const OpeningScreen = () => {
 
   return (
     <View style={styles.container}>
-          <StatusBar style="auto" />
+          <StatusBar style="dark" />
       <Image source={require('../assets/images/logo.png')} style={styles.logo} />
       <Text style={styles.welcomeText}>Bienvenue chez Brix Café</Text>
       <Image source={require('../assets/images/coffee_cup.jpg')} style={styles.coffeeImage} />

app/screens/auth/SignIn-Screen.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import {View,Text,TextInput,Pressable,StyleSheet,Image,Alert,TouchableOpacity,} from "react-native";
-import { Eye, EyeOff,ArrowLeft } from "lucide-react-native";
+import { Eye, EyeOff,ArrowLeft,Check } from "lucide-react-native";
 import { router } from "expo-router";
 import { signIn } from "../../../firebase/auth"; // Assure-toi que le chemin est correct
 import { Link } from "expo-router";
@@ -62,13 +62,12 @@ const SignInScreen = () => {
       keyboardShouldPersistTaps="handled"  // Ensures that taps on the inputs won't dismiss the keyboard
     >
       <View style={styles.container}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => setStep(1)}
-        >
-          <ArrowLeft size={24} color="#666" />
-        </TouchableOpacity>
-
+          <TouchableOpacity
+                style={styles.backButton}
+                onPress={() => router.back()}
+                >
+            <ArrowLeft size={24} color="#666" />
+          </TouchableOpacity>
         <Image source={require('../../../assets/images/logo.png')} style={styles.logo}/>
 
         <Text style={styles.title}>Se connecter</Text>
@@ -131,18 +130,22 @@ const SignInScreen = () => {
           </View>
 
           <View style={styles.optionsContainer}>
-            <Pressable
-              style={styles.rememberMe}
-              onPress={() => setForm({ ...form, rememberMe: !form.rememberMe })}
+          <Pressable
+            style={styles.rememberMe}
+            onPress={() => setForm({ ...form, rememberMe: !form.rememberMe })}
+          >
+            <View
+              style={[
+                styles.checkbox,
+                form.rememberMe && styles.checkboxChecked,
+              ]}
             >
-              <View
-                style={[
-                  styles.checkbox,
-                  form.rememberMe && styles.checkboxChecked,
-                ]}
-              />
-              <Text style={styles.rememberText}>Rester Connecté</Text>
-            </Pressable>
+              {form.rememberMe && <Check size={16} color="white" />}
+            </View>
+
+            <Text style={styles.rememberText}>Rester Connecté</Text>
+          </Pressable>
+
               <TouchableOpacity>            
                 <Text style={styles.forgotText}>Mot de passe oublié?</Text>
               </TouchableOpacity>

app/screens/auth/SignUpScreen.tsx

@@ -1,13 +1,48 @@
 import React, { useState } from 'react';
-import {View,Text,TextInput,TouchableOpacity,ScrollView,StyleSheet,SafeAreaView,Image,Pressable,} from 'react-native';
+import {View,Text,TextInput,TouchableOpacity,ScrollView,StyleSheet,SafeAreaView,Image,Pressable,Modal} from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import { ArrowLeft, Eye, EyeOff, MapPin } from 'lucide-react-native';
+import { ArrowLeft, Eye, EyeOff, MapPin,Check } from 'lucide-react-native';
 import { doc, setDoc } from 'firebase/firestore';
 import { db } from '../../../firebase/config';
 import { signUp } from '../../../firebase/auth';
 import { Alert } from 'react-native';
 import { router } from "expo-router";
 
+const cities = [
+  'Ariana', 'Ben Arous', 'Bizerte', 'Béja', 'El Kef', 'Ettadhamen', 'Gabes',
+  'Gafsa', 'Jendouba', 'Kairouan', 'Kasserine', 'Kebili', 'Mahdia', 'Medenine',
+  'Monastir', 'Nabeul', 'Sfax', 'Siliana', 'Sidi Bouzid', 'Sousse', 'Tataouine',
+  'Tozeur', 'Tunis', 'Zaghouan'
+];
+
+const delegationsByGouvernorat: Record<string, string[]> = {
+  Ariana: ['Ariana Medina', 'Ettadhamen', 'Kalaat El Andalous', 'Mnihla', 'Raoued', 'Sidi Thabet', 'Soukra'],
+  Béja: ['Amdoun', 'Beja North', 'Beja South', 'Goubellat', 'Mejez El Bab', 'Nefza', 'Teboursouk', 'Testour', 'Thibar'],
+  'Ben Arous': ['Ben Arous', 'Boumhel', 'El Mourouj', 'Ezzahra', 'Fouchana', 'Hammam Chott', 'Hammam Lif', 'M\'Hamdia', 'Medina Jedida', 'Mégrine', 'Mornag', 'Rades'],
+  Bizerte: ['Bizerte Nord', 'Bizerte Sud', 'Joumine', 'El Alia', 'Ghar El Melh', 'Mateur', 'Menzel Bourguiba', 'Menzel Jemil', 'Ras Jebel', 'Sejnane', 'Tinja', 'Utique', 'Zarzouna','Manzel Abderrahmen','El Alia','Ghezala'],
+  Gabès: ['Gabès', 'El Hamma', 'Matmata', 'Mareth', 'Nouvelle Matmata', 'Chouchet'],
+  Gafsa: ['Gafsa', 'El Guettar', 'Mdhila', 'Redeyef', 'Metlaoui', 'Sidi Aich', 'Belkhir', 'Om Larayes'],
+  Jendouba: ['Jendouba', 'Ain Draham', 'Fernana', 'Ghardimaou', 'Tabarka', 'Balta Bou Aouane', 'Oued Meliz'],
+  Kairouan: ['Kairouan', 'Bou Hajla', 'Chebika', 'El Alaa', 'El Fahs', 'Haffouz', 'Nasrallah', 'Oueslatia', 'Sbiba', 'Sidi Alouane', 'Soliman', 'Thala'],
+  Kasserine: ['Kasserine', 'Foussana', 'Hassi El Ferid', 'Haidra', 'Sbeitla', 'Thala', 'Tounine', 'Sidi Bouali'],
+  Kébili: ['Kébili', 'Douz', 'Souk Lahad', 'El Faouar', 'Chbika'],
+  Kef: ['Kef', 'Dahmani', 'El Ksour', 'Kalaa Khasba', 'Nebeur', 'Sers', 'Tajerouine', 'Zouila'],
+  Mahdia: ['Mahdia', 'Bou Merdes', 'Chorbane', 'El Jem', 'Ksour Essef', 'Melloulèche', 'Rejiche', 'Sahline', 'Sidi Alouane'],
+  Manouba: ['Manouba', 'Borj El Amri', 'El Battan', 'Jedaida', 'Mornaguia', 'Tebourba'],
+  Medenine: ['Medenine', 'Ben Guerdane', 'Beni Khedache', 'Djerba', 'Zarzis', 'Ajim', 'Houmt Souk'],
+  Monastir: ['Monastir', 'Bekalta', 'Ksibet El Mediouni', 'Ksar Hellal', 'Menzel Harb', 'Sahline', 'Sayada', 'Téboulba'],
+  Nabeul: ['Nabeul', 'Hammamet', 'Kelibia', 'Korba', 'Menzel Temime', 'Takelsa', 'Soliman', 'Dar Chaâbane El Fehri', 'Bou Argoub'],
+  Sfax: ['Sfax', 'El Amra', 'El Hencha', 'El Ouardia', 'Kerkennah', 'Menzel Chaker', 'Skhira', 'Thyna'],
+  'Sidi Bouzid': ['Sidi Bouzid', 'Bir El Hafey', 'Menzel Bouzelfa', 'Meknassy', 'Regueb', 'Sidi Ali Ben Aoun', 'Sbiba'],
+  Siliana: ['Siliana', 'Bou Arada', 'Gaafour', 'Kesra', 'Makthar', 'Rouhia', 'Sidi Bou Rouis'],
+  Sousse: ['Sousse', 'Akouda', 'Enfidha', 'Hergla', 'Kalaa Sghira', 'Khezama', 'Msaken', 'Sidi Bou Ali', 'Sidi El Hani'],
+  Tataouine: ['Tataouine', 'Beni Khedache', 'Dhehiba', 'Ghomrassen', 'Ksar Ouled Soltane', 'Remada'],
+  Tozeur: ['Tozeur', 'Nefta', 'Degache', 'Chbika'],
+  Tunis: ['Tunis', 'Carthage', 'Le Bardo', 'La Goulette', 'La Marsa', 'Medina', 'El Omrane', 'El Menzah', 'Ettadhamen', 'El Kabaria', 'El Kram', 'Ezzahra', 'Fouchana', 'Hammam Chott', 'Hammam Linf', 'Mornag', 'Raoued', 'Sidi Thabet', 'Soukra','Boumhel', 'El Mourouj', 'Fouchana', 'Hammam Chott', 'Hammam Lif', 'M\'Hamdia', 'Medina Jedida', 'Mégrine'],
+  Zaghouan: ['Bir Mcherga', 'El Fahs', 'Nadhour', 'Saouaf', 'Zriba', 'Zaghouan']
+};
+
+
 
 
 export default function App() {
@@ -30,6 +65,19 @@ export default function App() {
     fiscalId: '',
     acceptTerms: false,
   });
+  const [showCityPicker, setShowCityPicker] = useState(false);
+  const [showDelegationPicker, setShowDelegationPicker] = useState(false);
+
+  const handleCitySelect = (city: string) => {
+    setFormData(prev => ({ ...prev, city, delegation: '' }));
+    setShowCityPicker(false);
+  };
+  
+  const handleDelegationSelect = (delegation: string) => {
+    setFormData(prev => ({ ...prev, delegation }));
+    setShowDelegationPicker(false);
+  };
+  
 
   const handleInputChange = (name: string, value: string | boolean) => {
     setFormData(prev => ({
@@ -38,6 +86,19 @@ export default function App() {
     }));
   };
 
+  const formatPhoneNumber = (phone: string) => {
+    const cleaned = phone.replace(/\D/g, "").slice(0, 8); // Garde que les chiffres (max 8)
+    const part1 = cleaned.slice(0, 2);
+    const part2 = cleaned.slice(2, 5);
+    const part3 = cleaned.slice(5, 8);
+    return [part1, part2, part3].filter(Boolean).join(" ");
+  };
+
+  const handlePhoneChange = (value: string) => {
+    const cleaned = value.replace(/\D/g, "").slice(0, 8); // que les chiffres, max 8
+    setFormData({ ...formData, phone: cleaned });
+  };  
+
   const handleNext = () => {
     setStep(2);
   };
@@ -55,27 +116,35 @@ export default function App() {
   
     try {
       const user = await signUp(formData.email, formData.password);
-  
+    
+      // 1. Stocker les infos utilisateur
       await setDoc(doc(db, 'users', user.uid), {
         fullName: formData.fullName,
         email: formData.email,
         phone: formData.phone,
+        role: 'user',
+        createdAt: new Date(),
+      });
+    
+      // 2. Stocker les infos café
+      await setDoc(doc(db, 'coffee_shops', user.uid), {
         cafeName: formData.cafeName,
         cafeAddress: formData.cafeAddress,
         city: formData.city,
         delegation: formData.delegation,
         fiscalId: formData.fiscalId,
-        role: 'user',
+        ownerId: user.uid, // pour les requêtes inverses si besoin
         createdAt: new Date(),
       });
-  
+    
       Alert.alert("Succès", "Compte créé avec succès !");
       router.replace("/screens/user/UserHomeScreen");
-  
+    
     } catch (error: any) {
       Alert.alert("Erreur", error.message);
-      console.log(error);
+      console.error(error);
     }
+    
   };
   
 
@@ -104,21 +173,30 @@ export default function App() {
       </View>
 
       <View style={styles.inputGroup}>
-        <Text style={styles.label}>Numéro de téléphone</Text>
-        <TextInput
-          style={styles.input}
-          placeholder="+216 00 000 000"
-          keyboardType="phone-pad"
-          value={formData.phone}
-          onChangeText={(value) => handleInputChange('phone', value)}
+      <Text style={styles.label}>Numéro de téléphone</Text>
+      <View style={styles.phoneContainer}>
+        <Image
+          source={require('../../../assets/images/Flag_Tunisia.png')} // Remplace par le chemin de ton image de drapeau
+          style={styles.flag}
         />
+        <Text style={styles.prefix}>+216</Text>
+        <TextInput
+          style={styles.phoneNum}
+          placeholder="00 000 000"
+          keyboardType="phone-pad"
+          value={formatPhoneNumber(formData.phone)}
+          onChangeText={(value) => handlePhoneChange(value)}
+          maxLength={11}
+          />
       </View>
+    </View>
 
       <View style={styles.inputGroup}>
         <Text style={styles.label}>Mot de passe</Text>
         <View style={styles.passwordContainer}>
           <TextInput
             style={styles.passwordInput}
+            placeholder="Entrez votre mot de passe"
             secureTextEntry={!showPassword}
             value={formData.password}
             onChangeText={(value) => handleInputChange('password', value)}
@@ -137,6 +215,7 @@ export default function App() {
         <View style={styles.passwordContainer}>
           <TextInput
             style={styles.passwordInput}
+            placeholder="Confirmez votre mot de passe"
             secureTextEntry={!showConfirmPassword}
             value={formData.confirmPassword}
             onChangeText={(value) => handleInputChange('confirmPassword', value)}
@@ -190,9 +269,7 @@ export default function App() {
         <View style={styles.selectContainer}>
           <Pressable
             style={styles.select}
-            onPress={() => {
-              // Add city picker logic here
-            }}
+            onPress={() => setShowCityPicker(true)}
           >
             <Text style={styles.selectText}>
               {formData.city || 'Sélectionner une ville'}
@@ -201,15 +278,62 @@ export default function App() {
           </Pressable>
         </View>
       </View>
+      <Modal
+        visible={showCityPicker}
+        transparent={true}
+        animationType="slide"
+        onRequestClose={() => setShowCityPicker(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
+            <Text style={styles.modalTitle}>Sélectionner une Ville</Text>
+            <ScrollView>
+              {cities.map((city, index) => (
+                <TouchableOpacity key={index} onPress={() => handleCitySelect(city)}>
+                  <Text style={styles.cityItem}>{city}</Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => setShowCityPicker(false)}
+            >
+              <Text style={styles.buttonText}>Fermer</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+      
+      <Modal
+        visible={showDelegationPicker}
+        transparent={true}
+        animationType="slide"
+        onRequestClose={() => setShowDelegationPicker(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
+            <Text style={styles.modalTitle}>Sélectionner une Délégation</Text>
+            <ScrollView>
+              {availableDelegations.map((del, index) => (
+                <TouchableOpacity key={index} onPress={() => handleDelegationSelect(del)}>
+                  <Text style={styles.cityItem}>{del}</Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+            <TouchableOpacity style={styles.closeButton} onPress={() => setShowDelegationPicker(false)} >
+              <Text style={styles.buttonText}>Fermer</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
 
       <View style={styles.inputGroup}>
         <Text style={styles.label}>Délégation</Text>
         <View style={styles.selectContainer}>
           <Pressable
             style={styles.select}
-            onPress={() => {
-              // Add delegation picker logic here
-            }}
+            onPress={() => setShowDelegationPicker(true)}
           >
             <Text style={styles.selectText}>
               {formData.delegation || 'Sélectionner une délégation'}
@@ -233,17 +357,23 @@ export default function App() {
         <Pressable
           style={[styles.checkbox, formData.acceptTerms && styles.checkboxChecked]}
           onPress={() => handleInputChange('acceptTerms', !formData.acceptTerms)}
-        />
+        >
+          {formData.acceptTerms && <Check size={16} color="white" />}
+        </Pressable>
+
         <Text style={styles.checkboxLabel}>
           J'accepte les conditions générales et la politique de confidentialité.
         </Text>
       </View>
 
+
       <TouchableOpacity style={styles.button} onPress={handleSubmit}>
         <Text style={styles.buttonText}>Valider</Text>
       </TouchableOpacity>
     </View>
   );
+  const availableDelegations = delegationsByGouvernorat[formData.city] || [];
+
 
   return (
     <SafeAreaView style={styles.container}>
@@ -354,7 +484,7 @@ const styles = StyleSheet.create({
   },
   selectText: {
     fontSize: 16,
-    color: '#9ca3af',
+    color: '#000',
   },
   checkboxContainer: {
     flexDirection: 'row',
@@ -365,14 +495,14 @@ const styles = StyleSheet.create({
     width: 20,
     height: 20,
     borderWidth: 2,
-    borderColor: '#d1d5db',
+    borderColor: "#B17741",
     borderRadius: 4,
     marginRight: 8,
     marginTop: 2,
   },
   checkboxChecked: {
-    backgroundColor: '#22C55E',
-    borderColor: '#22C55E',
+    backgroundColor: '#B17741',
+    borderColor: "#B17741",
   },
   checkboxLabel: {
     flex: 1,
@@ -404,4 +534,61 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: '#B77729',
   },
+  modalOverlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContainer: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderRadius: 10,
+    width: '90%',
+    height: '80%'
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 12,
+  },
+  cityItem: {
+    fontSize: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#d1d5db',
+  },
+  closeButton: {
+    backgroundColor: '#B77729',
+    borderRadius: 8,
+    padding: 10,
+    alignItems: 'center',
+    marginTop: 12,
+  },
+  phoneContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 8,
+    padding: 3,
+    borderWidth: 1,
+    borderColor: '#ddd',
+  },
+  flag: {
+    width: 18,
+    height: 12,
+    borderRadius: 2,
+    marginRight: 8,
+    marginLeft: 8,
+  },
+  prefix: {
+    fontSize: 16,
+    color: '#B77729',
+    marginRight: 5,
+  },
+  phoneNum:{
+    color: '#000',
+    fontSize: 16,
+    width: '100%',
+  }
 });

app/screens/user/CartScreen.tsx

@@ -0,0 +1,46 @@
+import { View, Text, StyleSheet, ScrollView,TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { ArrowLeft } from 'lucide-react-native';
+import { router } from "expo-router";
+
+
+export default function CartScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
+            <ArrowLeft size={24} color="#666" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Mon Panier</Text>
+        </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    marginTop:5,
+  },
+  backButton: {
+    position: 'absolute',
+    left: 20,
+    top: '50%',
+    transform: [{ translateY: -12 }],
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+  },
+});

app/screens/user/GrainsScreen.tsx

@@ -0,0 +1,94 @@
+import { View, Text, StyleSheet, ScrollView,TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { ArrowLeft } from 'lucide-react-native';
+import { router } from "expo-router";
+import ProductCard from '../../components/ProductCard';
+import COLORS from '@/app/constants/colors';
+
+const products = [
+  {
+    id: '1',
+    name: 'Café Brix Premium',
+    image: 'https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=200&h=300&fit=crop',
+    description: '50% robusta • 50% arabica',
+    price: 10,
+    inStock: true,
+  },
+  {
+    id: '2',
+    name: 'Café Brix Gold',
+    image: 'https://images.unsplash.com/photo-1587734361993-0275d60eb3d0?w=200&h=300&fit=crop',
+    description: '30% robusta • 70% arabica',
+    price: 12,
+    inStock: false,
+  },
+  {
+    id: '3',
+    name: 'Café Brix Prestige',
+    image: 'https://images.unsplash.com/photo-1559525839-b184a4d698c7?w=200&h=300&fit=crop',
+    description: '70% robusta • 30% arabica',
+    price: 11,
+    inStock: true,
+  },
+  {
+    id: '4',
+    name: 'Café Brix Turc',
+    image: 'https://images.unsplash.com/photo-1562447457-579fc34967fb?w=200&h=300&fit=crop',
+    description: '50% robusta • 50% arabica',
+    price: 10,
+    inStock: true,
+  },
+  
+];
+
+export default function GrainsScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
+            <ArrowLeft size={24} color="#666" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Grains de café</Text>
+        </View>
+
+      <ScrollView style={styles.content}>
+        {products.map((product) => (
+          <ProductCard key={product.id} {...product} />
+        ))}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    marginTop:5,
+  },
+  backButton: {
+    position: 'absolute',
+    left: 20,
+    top: '50%',
+    transform: [{ translateY: -12 }],
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+  },
+  content: {
+    flex: 1,
+    padding: 8,
+    backgroundColor:COLORS.background_user ,
+  },
+});

app/screens/user/ProfileScreen.tsx

@@ -0,0 +1,46 @@
+import { View, Text, StyleSheet, ScrollView,TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { ArrowLeft } from 'lucide-react-native';
+import { router } from "expo-router";
+
+
+export default function ProfileScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
+            <ArrowLeft size={24} color="#666" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Espace Personel</Text>
+        </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    marginTop:5,
+  },
+  backButton: {
+    position: 'absolute',
+    left: 20,
+    top: '50%',
+    transform: [{ translateY: -12 }],
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+  },
+});

app/screens/user/UserHomeScreen.tsx

@@ -1,35 +1,113 @@
-import React from 'react';
-import { View, Text, StyleSheet, Button } from 'react-native';
-import { router } from 'expo-router';
-
+import { View, Text, StyleSheet, ScrollView, Image,Button } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { useRouter } from 'expo-router';
 
 const UserHomeScreen = () => {
+  const router = useRouter();
+
   return (
     <View style={styles.container}>
-      <Text style={styles.welcomeText}>UserHomeScreen</Text>
-      <Button
-              title="Back to Opening Screen"
-              onPress={() => router.back()}
-      />
+        <View style={styles.header}>
+          <View>
+            <Text style={styles.welcome}>Bienvenue,</Text>
+            <Text style={styles.shopName}>Nom de Café</Text>
+          </View>
+        </View>
+
+        <Text style={styles.sectionTitle}>Nos Produits</Text>
+
+        <View style={styles.categories}>
+          <TouchableOpacity
+            style={styles.categoryCard}
+            onPress={() => router.push('/screens/user/GrainsScreen')}>
+
+            <Image
+              source={require('../../../assets/images/coffee_cup.jpg')} style={styles.categoryImage}
+            />
+            <Text style={styles.categoryTitle}>Grains de café</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.categoryCard}>
+            <Image
+                source={require('../../../assets/images/coffee_cup.jpg')} style={styles.categoryImage}
+            />
+            <Text style={styles.categoryTitle}>Matériels</Text>
+          </TouchableOpacity>
+        </View>
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: '#F8F9FA',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 20,
+    padding: 20,
   },
-  welcomeText: {
+  welcome: {
+    fontSize: 16,
+    color: '#666',
+  },
+  shopName: {
     fontSize: 24,
-    fontWeight: 'bold',
-    color: '#000000',
-    marginBottom: 20,
+    fontWeight: '600',
+    color: '#333',
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    marginHorizontal: 20,
+    marginBottom: 16,
+  },
+  categories: {
+    padding: 20,
+  },
+  categoryCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    marginBottom: 16,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  categoryImage: {
+    width: '100%',
+    height: 160,
+  },
+  categoryTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    padding: 16,
   },
-  
 });
 
 export default UserHomeScreen;
+
+
+/*
+    
+      <Button
+              title="Back to Opening Screen"
+              onPress={() => router.back()}
+      />
+*/
+

app/screens/user/_layout.tsx

@@ -1,8 +1,78 @@
-import { Stack } from 'expo-router';
+import { Tabs } from 'expo-router';
+import { Home, Coffee, User } from 'lucide-react-native';
+import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
 
 export default function UserLayout() {
   return (
-    <Stack screenOptions={{ headerShown: false }}>
-    </Stack>
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: '#fff',
+          borderTopWidth: 1,
+          borderTopColor: '#eee',
+          height: 60,
+        },
+        tabBarActiveTintColor: '#B07B4F',
+        tabBarInactiveTintColor: '#666',
+      }}
+    >
+      <Tabs.Screen
+        name="UserHomeScreen"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color, size }) => <Home size={size} color={color} />,
+        }}
+      />
+      
+
+      <Tabs.Screen
+        name="CartScreen"
+        options={{
+          title: 'Cart',
+          tabBarIcon: ({ color, size }) => <Coffee size={size} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="ProfileScreen"
+        options={{
+          title: 'Profile',
+          tabBarIcon: ({ color, size }) => <User size={size} color={color} />,
+        }}
+      />
+        <Tabs.Screen
+        name="GrainsScreen"
+        options={{
+          href: null, // 👈 not shown in bottom nav, but still navigable
+        }}
+      />
+
+    </Tabs>
   );
-}
+}
+
+const styles = StyleSheet.create({
+  shoppingButton: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#B07B4F',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 30, // Pushes it upwards to float
+    shadowColor: '#000',
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 6,
+  },
+  floatingWrapper: {
+    top: -20, // This helps it float halfway above navbar
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  shoppingText: {
+    fontSize: 24,
+    color: '#fff',
+  },
+});