order

components/CartItemCard.tsx

@@ -85,17 +85,17 @@ export default function CartItemCard({
   return (
     <View style={styles.container}>
       <Image
-        source={{ uri: item.productImage }}
+        source={{ uri: item.product.imageUrl }}
         style={styles.image}
         resizeMode="cover"
       />
       
       <View style={styles.info}>
         <Text style={styles.name} numberOfLines={2}>
-          {item.productName}
+          {item.product.productName}
         </Text>
         
-        <Text style={styles.price}>{formatPrice(item.price)}</Text>
+        <Text style={styles.price}>{formatPrice(item.product.price)}</Text>
         
         <View style={styles.footer}>
           <View style={styles.quantityContainer}>

components/ui/CartButton.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export default function CartButton() {
+  const router = useRouter();
+  const [cartCount, setCartCount] = useState(0);
+
+  useEffect(() => {
+    loadCartCount();
+    
+    // Refresh cart count khi focus
+    const interval = setInterval(loadCartCount, 3000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadCartCount = async () => {
+    try {
+      const token = await AsyncStorage.getItem('token');
+      if (!token) return;
+
+      const response = await fetch('http://YOUR_API_URL:8080/api/cart', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+
+      const data = await response.json();
+      if (data.success && data.data.cartItems) {
+        const totalItems = data.data.cartItems.reduce(
+          (sum: number, item: any) => sum + item.quantity,
+          0
+        );
+        setCartCount(totalItems);
+      }
+    } catch (error) {
+      console.error('Load cart count error:', error);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={() => router.push('/cart')}
+    >
+      <Ionicons name="cart-outline" size={24} color="#333" />
+      {cartCount > 0 && (
+        <View style={styles.badge}>
+          <Text style={styles.badgeText}>
+            {cartCount > 99 ? '99+' : cartCount}
+          </Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    padding: 8,
+  },
+  badge: {
+    position: 'absolute',
+    top: 4,
+    right: 4,
+    backgroundColor: '#FF6B6B',
+    borderRadius: 10,
+    minWidth: 18,
+    height: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 4,
+  },
+  badgeText: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: 'bold',
+  },
+});