app/_layout.tsx

@@ -1,15 +1,5 @@
-
 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 (
+  return <Stack screenOptions={{ headerShown: false}} />;
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <SafeAreaProvider>
-        <Stack screenOptions={{ headerShown: false}} />
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
-  );
 }

app/components/ProductCard.tsx

@@ -1,116 +0,0 @@
-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,8 +1,7 @@
 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="dark" />
+          <StatusBar style="auto" />
       <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,Check } from "lucide-react-native";
+import { Eye, EyeOff,ArrowLeft } 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,12 +62,13 @@ const SignInScreen = () => {
       keyboardShouldPersistTaps="handled"  // Ensures that taps on the inputs won't dismiss the keyboard
     >
       <View style={styles.container}>
-          <TouchableOpacity
+        <TouchableOpacity
-                style={styles.backButton}
+          style={styles.backButton}
-                onPress={() => router.back()}
+          onPress={() => setStep(1)}
-                >
+        >
-            <ArrowLeft size={24} color="#666" />
+          <ArrowLeft size={24} color="#666" />
-          </TouchableOpacity>
+        </TouchableOpacity>
+
         <Image source={require('../../../assets/images/logo.png')} style={styles.logo}/>
 
         <Text style={styles.title}>Se connecter</Text>
@@ -130,22 +131,18 @@ const SignInScreen = () => {
           </View>
 
           <View style={styles.optionsContainer}>
-          <Pressable
+            <Pressable
-            style={styles.rememberMe}
+              style={styles.rememberMe}
-            onPress={() => setForm({ ...form, rememberMe: !form.rememberMe })}
+              onPress={() => setForm({ ...form, rememberMe: !form.rememberMe })}
-          >
-            <View
-              style={[
-                styles.checkbox,
-                form.rememberMe && styles.checkboxChecked,
-              ]}
             >
-              {form.rememberMe && <Check size={16} color="white" />}
+              <View
-            </View>
+                style={[
-
+                  styles.checkbox,
-            <Text style={styles.rememberText}>Rester Connecté</Text>
+                  form.rememberMe && styles.checkboxChecked,
-          </Pressable>
+                ]}
-
+              />
+              <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,48 +1,13 @@
 import React, { useState } from 'react';
-import {View,Text,TextInput,TouchableOpacity,ScrollView,StyleSheet,SafeAreaView,Image,Pressable,Modal} from 'react-native';
+import {View,Text,TextInput,TouchableOpacity,ScrollView,StyleSheet,SafeAreaView,Image,Pressable,} from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import { ArrowLeft, Eye, EyeOff, MapPin,Check } from 'lucide-react-native';
+import { ArrowLeft, Eye, EyeOff, MapPin } 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() {
@@ -65,19 +30,6 @@ 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 => ({
@@ -86,19 +38,6 @@ 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);
   };
@@ -116,35 +55,27 @@ 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,
-        ownerId: user.uid, // pour les requêtes inverses si besoin
+        role: 'user',
         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.error(error);
+      console.log(error);
     }
-    
   };
   
 
@@ -173,30 +104,21 @@ export default function App() {
       </View>
 
       <View style={styles.inputGroup}>
-      <Text style={styles.label}>Numéro de téléphone</Text>
+        <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}
+          style={styles.input}
-          placeholder="00 000 000"
+          placeholder="+216 00 000 000"
           keyboardType="phone-pad"
-          value={formatPhoneNumber(formData.phone)}
+          value={formData.phone}
-          onChangeText={(value) => handlePhoneChange(value)}
+          onChangeText={(value) => handleInputChange('phone', 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)}
@@ -215,7 +137,6 @@ 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)}
@@ -269,7 +190,9 @@ export default function App() {
         <View style={styles.selectContainer}>
           <Pressable
             style={styles.select}
-            onPress={() => setShowCityPicker(true)}
+            onPress={() => {
+              // Add city picker logic here
+            }}
           >
             <Text style={styles.selectText}>
               {formData.city || 'Sélectionner une ville'}
@@ -278,62 +201,15 @@ 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={() => setShowDelegationPicker(true)}
+            onPress={() => {
+              // Add delegation picker logic here
+            }}
           >
             <Text style={styles.selectText}>
               {formData.delegation || 'Sélectionner une délégation'}
@@ -357,23 +233,17 @@ 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}>
@@ -484,7 +354,7 @@ const styles = StyleSheet.create({
   },
   selectText: {
     fontSize: 16,
-    color: '#000',
+    color: '#9ca3af',
   },
   checkboxContainer: {
     flexDirection: 'row',
@@ -495,14 +365,14 @@ const styles = StyleSheet.create({
     width: 20,
     height: 20,
     borderWidth: 2,
-    borderColor: "#B17741",
+    borderColor: '#d1d5db',
     borderRadius: 4,
     marginRight: 8,
     marginTop: 2,
   },
   checkboxChecked: {
-    backgroundColor: '#B17741',
+    backgroundColor: '#22C55E',
-    borderColor: "#B17741",
+    borderColor: '#22C55E',
   },
   checkboxLabel: {
     flex: 1,
@@ -534,61 +404,4 @@ 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

@@ -1,46 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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,113 +1,35 @@
-import { View, Text, StyleSheet, ScrollView, Image,Button } from 'react-native';
+import React from 'react';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { View, Text, StyleSheet, Button } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { router } from 'expo-router';
-import { useRouter } from 'expo-router';
+
 
 const UserHomeScreen = () => {
-  const router = useRouter();
-
   return (
     <View style={styles.container}>
-        <View style={styles.header}>
+      <Text style={styles.welcomeText}>UserHomeScreen</Text>
-          <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: '#F8F9FA',
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 20,
-  },
-  welcome: {
-    fontSize: 16,
-    color: '#666',
-  },
-  shopName: {
-    fontSize: 24,
-    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()}
       />
-*/
+    </View>
+  );
+};
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  welcomeText: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#000000',
+    marginBottom: 20,
+  },
+  
+});
+
+export default UserHomeScreen;

app/screens/user/_layout.tsx

@@ -1,78 +1,8 @@
-import { Tabs } from 'expo-router';
+import { Stack } from 'expo-router';
-import { Home, Coffee, User } from 'lucide-react-native';
-import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
 
 export default function UserLayout() {
   return (
-    <Tabs
+    <Stack screenOptions={{ headerShown: false }}>
-      screenOptions={{
+    </Stack>
-        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',
-  },
-});