@digilogiclabs/create-saas-app 1.14.0 → 1.17.0

package/src/templates/mobile/ui-auth-payments/template/app/(tabs)/orders.tsx

@@ -0,0 +1,402 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, FlatList, RefreshControl, Animated } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { BlurView } from 'expo-blur';
+import * as Haptics from 'expo-haptics';
+
+// UI Components - Updated for v0.22.0
+import {
+  NativeCard as Card,
+  NativeMobileContainer as MobileContainer,
+  NativeButton as Button,
+  NativeBadge as Badge,
+  NativeSearchBar as SearchBar,
+  NativeFilterChips as FilterChips,
+  PageTransition,
+  VirtualScrollList,
+  SwipeableCard,
+  PullToRefresh,
+  LazyImage,
+  useTheme
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Icons
+import { 
+  ShoppingBag,
+  Calendar,
+  DollarSign,
+  Truck,
+  Package,
+  Eye
+} from 'react-native-heroicons/outline';
+
+interface Order {
+  id: string;
+  number: string;
+  customerName: string;
+  customerEmail: string;
+  status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
+  total: number;
+  items: number;
+  date: string;
+  shippingAddress: string;
+}
+
+const mockOrders: Order[] = [
+  {
+    id: '1',
+    number: 'ORD-001234',
+    customerName: 'John Doe',
+    customerEmail: 'john@example.com',
+    status: 'processing',
+    total: 299.99,
+    items: 3,
+    date: '2024-01-15',
+    shippingAddress: '123 Main St, City, State'
+  },
+  {
+    id: '2',
+    number: 'ORD-001233',
+    customerName: 'Jane Smith',
+    customerEmail: 'jane@example.com',
+    status: 'shipped',
+    total: 159.50,
+    items: 2,
+    date: '2024-01-14',
+    shippingAddress: '456 Oak Ave, City, State'
+  },
+  {
+    id: '3',
+    number: 'ORD-001232',
+    customerName: 'Mike Johnson',
+    customerEmail: 'mike@example.com',
+    status: 'delivered',
+    total: 89.99,
+    items: 1,
+    date: '2024-01-13',
+    shippingAddress: '789 Pine St, City, State'
+  },
+  {
+    id: '4',
+    number: 'ORD-001231',
+    customerName: 'Sarah Wilson',
+    customerEmail: 'sarah@example.com',
+    status: 'pending',
+    total: 449.99,
+    items: 4,
+    date: '2024-01-12',
+    shippingAddress: '321 Elm St, City, State'
+  },
+];
+
+const statusConfig = {
+  pending: { color: '#f59e0b', bg: '#fef3c7', icon: Package },
+  processing: { color: '#3b82f6', bg: '#dbeafe', icon: ShoppingBag },
+  shipped: { color: '#8b5cf6', bg: '#ede9fe', icon: Truck },
+  delivered: { color: '#10b981', bg: '#dcfce7', icon: Package },
+  cancelled: { color: '#ef4444', bg: '#fee2e2', icon: Package }
+};
+
+export default function OrdersScreen() {
+  const [orders, setOrders] = useState<Order[]>(mockOrders);
+  const [filteredOrders, setFilteredOrders] = useState<Order[]>(mockOrders);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeFilter, setActiveFilter] = useState<string>('all');
+
+  const filters = [
+    { id: 'all', label: 'All Orders' },
+    { id: 'pending', label: 'Pending' },
+    { id: 'processing', label: 'Processing' },
+    { id: 'shipped', label: 'Shipped' },
+    { id: 'delivered', label: 'Delivered' }
+  ];
+
+  useEffect(() => {
+    filterOrders();
+  }, [searchQuery, activeFilter, orders]);
+
+  const filterOrders = () => {
+    let filtered = orders;
+
+    // Filter by status
+    if (activeFilter !== 'all') {
+      filtered = filtered.filter(order => order.status === activeFilter);
+    }
+
+    // Filter by search query
+    if (searchQuery) {
+      filtered = filtered.filter(order =>
+        order.number.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        order.customerName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        order.customerEmail.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+
+    setFilteredOrders(filtered);
+  };
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    setRefreshing(false);
+  };
+
+  const handleOrderPress = (order: Order) => {
+    // Navigate to order details
+    console.log('Order pressed:', order.id);
+  };
+
+  const renderOrderItem = ({ item: order }: { item: Order }) => {
+    const config = statusConfig[order.status];
+    const StatusIcon = config.icon;
+
+    return (
+      <Card style={styles.orderCard}>
+        <View style={styles.orderHeader}>
+          <View style={styles.orderInfo}>
+            <Text style={styles.orderNumber}>{order.number}</Text>
+            <Text style={styles.customerName}>{order.customerName}</Text>
+          </View>
+          <Badge
+            variant="outline"
+            style={[styles.statusBadge, { borderColor: config.color, backgroundColor: config.bg }]}
+          >
+            <StatusIcon width={12} height={12} color={config.color} />
+            <Text style={[styles.statusText, { color: config.color }]}>
+              {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
+            </Text>
+          </Badge>
+        </View>
+
+        <View style={styles.orderDetails}>
+          <View style={styles.orderMeta}>
+            <View style={styles.metaItem}>
+              <Calendar width={16} height={16} color="#64748b" />
+              <Text style={styles.metaText}>{order.date}</Text>
+            </View>
+            <View style={styles.metaItem}>
+              <Package width={16} height={16} color="#64748b" />
+              <Text style={styles.metaText}>{order.items} items</Text>
+            </View>
+            <View style={styles.metaItem}>
+              <DollarSign width={16} height={16} color="#64748b" />
+              <Text style={styles.metaText}>${order.total.toFixed(2)}</Text>
+            </View>
+          </View>
+
+          <Button
+            variant="outline"
+            size="sm"
+            style={styles.viewButton}
+            onPress={() => handleOrderPress(order)}
+          >
+            <Eye width={16} height={16} />
+            <Text>View</Text>
+          </Button>
+        </View>
+
+        <Text style={styles.shippingAddress} numberOfLines={1}>
+          Ship to: {order.shippingAddress}
+        </Text>
+      </Card>
+    );
+  };
+
+  const renderEmptyState = () => (
+    <View style={styles.emptyState}>
+      <ShoppingBag width={64} height={64} color="#94a3b8" />
+      <Text style={styles.emptyTitle}>No orders found</Text>
+      <Text style={styles.emptySubtitle}>
+        {searchQuery || activeFilter !== 'all'
+          ? 'Try adjusting your filters'
+          : 'Orders will appear here when customers make purchases'
+        }
+      </Text>
+    </View>
+  );
+
+  return (
+    <PageTransition type="fade">
+      <MobileContainer style={styles.container}>
+        {/* Search and Filters */}
+        <View style={styles.searchSection}>
+          <SearchBar
+            placeholder="Search orders..."
+            value={searchQuery}
+            onChangeText={setSearchQuery}
+            style={styles.searchBar}
+          />
+          <FilterChips
+            filters={filters}
+            activeFilter={activeFilter}
+            onFilterChange={setActiveFilter}
+            style={styles.filterChips}
+          />
+        </View>
+
+        {/* Enhanced Orders List with VirtualScrollList for Performance */}
+        <VirtualScrollList
+          data={filteredOrders}
+          renderItem={({ item, index }) => (
+            <SwipeableCard
+              key={item.id}
+              leftActions={[
+                {
+                  label: 'Archive',
+                  color: '#6b7280',
+                  onPress: () => console.log('Archive order:', item.id)
+                }
+              ]}
+              rightActions={[
+                {
+                  label: 'Edit',
+                  color: '#3b82f6',
+                  onPress: () => console.log('Edit order:', item.id)
+                },
+                {
+                  label: 'Delete',
+                  color: '#ef4444',
+                  onPress: () => console.log('Delete order:', item.id)
+                }
+              ]}
+              hapticFeedback={true}
+            >
+              {renderOrderItem({ item, index })}
+            </SwipeableCard>
+          )}
+          keyExtractor={(item) => item.id}
+          itemHeight={120} // Approximate height for performance optimization
+          onRefresh={onRefresh}
+          refreshing={refreshing}
+          ListEmptyComponent={renderEmptyState}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.listContent}
+          estimatedItemSize={120}
+          windowSize={10}
+          maxToRenderPerBatch={5}
+          updateCellsBatchingPeriod={50}
+          removeClippedSubviews={true}
+        />
+      </MobileContainer>
+    </PageTransition>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8fafc',
+  },
+  searchSection: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    backgroundColor: 'white',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e2e8f0',
+  },
+  searchBar: {
+    marginBottom: 16,
+  },
+  filterChips: {
+    marginBottom: 8,
+  },
+  listContent: {
+    padding: 16,
+    paddingBottom: 32,
+  },
+  orderCard: {
+    padding: 16,
+    marginBottom: 12,
+    backgroundColor: 'white',
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  orderHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 12,
+  },
+  orderInfo: {
+    flex: 1,
+  },
+  orderNumber: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1e293b',
+    marginBottom: 4,
+  },
+  customerName: {
+    fontSize: 14,
+    color: '#64748b',
+  },
+  statusBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  orderDetails: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  orderMeta: {
+    flexDirection: 'row',
+    gap: 16,
+  },
+  metaItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  metaText: {
+    fontSize: 12,
+    color: '#64748b',
+  },
+  viewButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  shippingAddress: {
+    fontSize: 12,
+    color: '#94a3b8',
+    fontStyle: 'italic',
+  },
+  emptyState: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 64,
+    paddingHorizontal: 32,
+  },
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#64748b',
+    marginTop: 16,
+    marginBottom: 8,
+  },
+  emptySubtitle: {
+    fontSize: 14,
+    color: '#94a3b8',
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+});