ui

app/(tabs)/account.tsx

@@ -1,12 +1,22 @@
 import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useRouter } from "expo-router";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  ScrollView,
+  Image,
+} from "react-native";
+import { useNavigation, useRouter } from "expo-router";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Ionicons } from "@expo/vector-icons";
+import { useAuth } from "../../hooks/useAuth";
 
 export default function AccountScreen() {
   const router = useRouter();
   const insets = useSafeAreaInsets();
+  const { user, logout } = useAuth();
 
   const handleLogout = async () => {
     Alert.alert("Đăng xuất", "Bạn có chắc muốn đăng xuất?", [
@@ -18,28 +28,96 @@ export default function AccountScreen() {
         text: "Đăng xuất",
         style: "destructive",
         onPress: async () => {
-          await AsyncStorage.removeItem("authToken");
-          router.replace("/"); // quay về màn hình đăng nhập
+          const success = await logout();
+          if (success) {
+            router.replace("/");
+          }
         },
       },
     ]);
   };
 
-  return (
-    <View style={styles.container}>
-      {/* 🔘 Nút đăng xuất góc trên phải */}
-      <TouchableOpacity
-        style={[styles.logoutBtn, { top: insets.top + 10 }]} // đảm bảo không bị che bởi status bar
-        onPress={handleLogout}
-        activeOpacity={0.8}
-      >
-        <Text style={styles.logoutText}>Đăng xuất</Text>
-      </TouchableOpacity>
+  const menuItems = [
+    { id: "address", label: "Address", icon: "location" },
+    { id: "payment", label: "Payment method", icon: "card" },
+    { id: "voucher", label: "Voucher", icon: "ticket" },
+    { id: "wishlist", label: "My Wishlist", icon: "heart" , screen: "wishlist"},
+    { id: "rate", label: "Rate this app", icon: "star" },
+  ];
 
-      {/* Nội dung giữa màn hình */}
-      <View style={styles.centerContent}>
-        <Text style={styles.title}>Xin chào, User 👋</Text>
+  const navigation = useNavigation();
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      {/* Header with Settings Icon */}
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>My Profile</Text>
+        <TouchableOpacity style={styles.settingsBtn}>
+          <Ionicons name="settings" size={24} color="#333" />
+        </TouchableOpacity>
       </View>
+
+      <ScrollView showsVerticalScrollIndicator={false} style={styles.scrollView}>
+        {/* User Profile Section */}
+        <View style={styles.profileSection}>
+          <View style={styles.profileContent}>
+            {/* Avatar */}
+            <View style={styles.avatarContainer}>
+              <View style={styles.avatar}>
+                <Ionicons name="person" size={32} color="#fff" />
+              </View>
+            </View>
+
+            {/* User Info */}
+            <View style={styles.userInfo}>
+              <Text style={styles.userName}>
+                {user?.email?.split("@")[0] || "User"}
+              </Text>
+              <Text style={styles.userEmail}>{user?.email || "email@example.com"}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Menu Items */}
+        <View style={styles.menuContainer}>
+          {menuItems.map((item) => (
+            <TouchableOpacity
+              key={item.id}
+              style={styles.menuItem}
+              activeOpacity={0.7}
+              onPress={() => {
+                if (item.screen) {
+                  navigation.navigate(item.screen);
+                }
+              }}
+            >
+              <View style={styles.menuItemContent}>
+                <View style={styles.menuItemLeft}>
+                  <Ionicons name={item.icon} size={20} color="#9B9B9B" />
+                  <Text style={styles.menuItemText}>{item.label}</Text>
+                </View>
+                <Ionicons name="chevron-forward" size={20} color="#D0D0D0" />
+              </View>
+            </TouchableOpacity>
+          ))}
+
+          {/* Logout Button */}
+          <TouchableOpacity
+            style={[styles.menuItem, styles.logoutMenuItem]}
+            onPress={handleLogout}
+            activeOpacity={0.7}
+          >
+            <View style={styles.menuItemContent}>
+              <View style={styles.menuItemLeft}>
+                <Ionicons name="log-out" size={20} color="#9B9B9B" />
+                <Text style={[styles.menuItemText, styles.logoutText]}>
+                  Log out
+                </Text>
+              </View>
+              <Ionicons name="chevron-forward" size={20} color="#D0D0D0" />
+            </View>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
     </View>
   );
 }
@@ -47,34 +125,91 @@ export default function AccountScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: "#fff",
   },
-  centerContent: {
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0",
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: "#333",
+  },
+  settingsBtn: {
+    padding: 8,
+  },
+  scrollView: {
     flex: 1,
+  },
+  profileSection: {
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f5f5f5",
+  },
+  profileContent: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  avatarContainer: {
+    marginRight: 16,
+  },
+  avatar: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: "#D4A574",
     justifyContent: "center",
     alignItems: "center",
   },
-  title: {
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 20,
+  userInfo: {
+    flex: 1,
   },
-  logoutBtn: {
-    position: "absolute",
-    right: 16, // sát mép phải
-    backgroundColor: "#f44336",
+  userName: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: "#333",
+    marginBottom: 4,
+    textTransform: "capitalize",
+  },
+  userEmail: {
+    fontSize: 13,
+    color: "#999",
+  },
+  menuContainer: {
     paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
-    zIndex: 999,
-    elevation: 4,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.5,
+    paddingVertical: 16,
+  },
+  menuItem: {
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f5f5f5",
+  },
+  menuItemContent: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  menuItemLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  menuItemText: {
+    marginLeft: 16,
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#333",
+  },
+  logoutMenuItem: {
+    marginTop: 8,
   },
   logoutText: {
-    color: "#fff",
-    fontWeight: "700",
-    fontSize: 14,
+    color: "#E74C3C",
   },
-});
+});