@digilogiclabs/create-saas-app 1.14.1 → 1.17.1

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

@@ -0,0 +1,757 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, RefreshControl, Dimensions, Animated } from 'react-native';
+import { useAuth } from '@digilogiclabs/saas-factory-auth/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,
+  NativeProgressRing as ProgressRing,
+  NativeChart as Chart,
+  NativeStatCard as StatCard,
+  NativeSkeletonCard as SkeletonCard,
+  NativeSkeletonText as SkeletonText,
+  PageTransition,
+  NetworkAwareContent,
+  NativeMobileHero as MobileHero,
+  VirtualScrollList,
+  LazyImage,
+  ProgressiveImage,
+  SwipeableCard,
+  NativeTour,
+  NativeFeatureHighlight,
+  NativeTooltip,
+  PullToRefresh,
+  useNetworkInfo,
+  useOfflineState,
+  useTheme
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Icons
+import { 
+  TrendingUp, 
+  ShoppingBag, 
+  CreditCard, 
+  Users, 
+  Bell,
+  Plus,
+  ArrowRight
+} from 'react-native-heroicons/outline';
+
+const { width } = Dimensions.get('window');
+
+interface DashboardData {
+  stats: {
+    totalOrders: number;
+    totalRevenue: number;
+    activeUsers: number;
+    conversionRate: number;
+  };
+  recentActivity: Array<{
+    id: string;
+    type: 'order' | 'user' | 'payment';
+    message: string;
+    timestamp: string;
+  }>;
+  chartData: Array<{
+    date: string;
+    revenue: number;
+    orders: number;
+  }>;
+}
+
+export default function HomeScreen() {
+  const { user } = useAuth();
+  const { colors, isDark } = useTheme();
+  const [data, setData] = useState<DashboardData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [showTour, setShowTour] = useState(false);
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
+  
+  // Animation values
+  const fadeAnim = useState(new Animated.Value(0))[0];
+  const slideAnim = useState(new Animated.Value(50))[0];
+
+  // Tour configuration for new users
+  const tourSteps = [
+    {
+      target: 'stats-section',
+      title: 'Your Business Stats',
+      content: 'Track key metrics like orders, revenue, and user growth at a glance.',
+      placement: 'bottom'
+    },
+    {
+      target: 'chart-section',
+      title: 'Performance Charts',
+      content: 'Visualize your business trends with interactive charts and analytics.',
+      placement: 'top'
+    },
+    {
+      target: 'activity-section',
+      title: 'Recent Activity',
+      content: 'Stay updated with real-time notifications about orders, users, and payments.',
+      placement: 'top'
+    }
+  ];
+
+  const fetchDashboardData = async (isRefresh = false) => {
+    try {
+      if (isRefresh) setRefreshing(true);
+      
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      const mockData: DashboardData = {
+        stats: {
+          totalOrders: 156,
+          totalRevenue: 12450,
+          activeUsers: 1249,
+          conversionRate: 3.2
+        },
+        recentActivity: [
+          {
+            id: '1',
+            type: 'order',
+            message: 'New order #1234 received',
+            timestamp: '2 minutes ago'
+          },
+          {
+            id: '2',
+            type: 'user',
+            message: 'New user registered',
+            timestamp: '5 minutes ago'
+          },
+          {
+            id: '3',
+            type: 'payment',
+            message: 'Payment of $299 processed',
+            timestamp: '10 minutes ago'
+          }
+        ],
+        chartData: [
+          { date: 'Mon', revenue: 1200, orders: 15 },
+          { date: 'Tue', revenue: 1800, orders: 22 },
+          { date: 'Wed', revenue: 2100, orders: 28 },
+          { date: 'Thu', revenue: 1600, orders: 18 },
+          { date: 'Fri', revenue: 2400, orders: 32 },
+          { date: 'Sat', revenue: 2800, orders: 38 },
+          { date: 'Sun', revenue: 1900, orders: 25 }
+        ]
+      };
+      
+      setData(mockData);
+    } catch (error) {
+      console.error('Failed to fetch dashboard data:', error);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchDashboardData();
+    
+    // Check if user is new and should see the tour
+    const checkForTour = async () => {
+      // In a real app, check AsyncStorage or user preferences
+      const hasSeenTour = false; // Replace with actual storage check
+      if (!hasSeenTour) {
+        setTimeout(() => setShowTour(true), 1500);
+      }
+    };
+    
+    // Entrance animations
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 800,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 600,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    checkForTour();
+  }, []);
+
+  const onRefresh = async () => {
+    await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    fetchDashboardData(true);
+  };
+
+  if (loading && !data) {
+    return (
+      <PageTransition type="fade">
+        <View style={styles.container}>
+          <LinearGradient
+            colors={
+              isDark
+                ? ['#0F172A', '#1E293B', '#334155']
+                : ['#F8FAFC', '#E2E8F0', '#CBD5E1']
+            }
+            style={styles.gradientBackground}
+          />
+          
+          <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent}>
+            <MobileContainer style={styles.content}>
+              {/* Hero skeleton */}
+              <View style={styles.heroSkeleton}>
+                <SkeletonText style={{ width: '60%', height: 24, marginBottom: 16 }} />
+                <SkeletonText style={{ width: '80%', height: 16, marginBottom: 24 }} />
+                <View style={styles.buttonSkeletonRow}>
+                  <SkeletonCard style={styles.buttonSkeleton} />
+                  <SkeletonCard style={styles.buttonSkeleton} />
+                </View>
+              </View>
+              
+              {/* Stats skeleton */}
+              <View style={styles.statsGrid}>
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <SkeletonCard key={i} style={styles.statCard} />
+                ))}
+              </View>
+              
+              {/* Chart skeleton */}
+              <SkeletonCard style={styles.chartCard} />
+              
+              {/* Actions skeleton */}
+              <SkeletonCard style={styles.actionsCard} />
+              
+              {/* Activity skeleton */}
+              <View style={styles.activitySkeleton}>
+                <SkeletonCard style={styles.activityCard} />
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <View key={i} style={styles.activityItemSkeleton}>
+                    <SkeletonCard style={styles.activityIconSkeleton} />
+                    <View style={styles.activityContentSkeleton}>
+                      <SkeletonText style={{ width: '70%', height: 14, marginBottom: 4 }} />
+                      <SkeletonText style={{ width: '40%', height: 12 }} />
+                    </View>
+                  </View>
+                ))}
+              </View>
+            </MobileContainer>
+          </ScrollView>
+        </View>
+      </PageTransition>
+    );
+  }
+
+  return (
+    <PageTransition type="fade">
+      <View style={styles.container}>
+        {/* Dynamic gradient background */}
+        <LinearGradient
+          colors={
+            isDark
+              ? ['#0F172A', '#1E293B', '#334155']
+              : ['#F8FAFC', '#E2E8F0', '#CBD5E1']
+          }
+          style={styles.gradientBackground}
+        />
+        
+        {/* Animated background elements */}
+        <View style={styles.backgroundElements}>
+          <Animated.View 
+            style={[
+              styles.floatingElement,
+              {
+                opacity: fadeAnim,
+                transform: [
+                  { translateY: slideAnim },
+                  { scale: fadeAnim }
+                ]
+              }
+            ]}
+          >
+            <LinearGradient
+              colors={[colors.primary + '40', colors.secondary + '20']}
+              style={[styles.gradientCircle, styles.circle1]}
+            />
+          </Animated.View>
+          
+          <Animated.View 
+            style={[
+              styles.floatingElement,
+              {
+                opacity: fadeAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [0, 0.6]
+                }),
+                transform: [
+                  { translateY: slideAnim },
+                  { scale: fadeAnim }
+                ]
+              }
+            ]}
+          >
+            <LinearGradient
+              colors={[colors.accent + '30', colors.primary + '10']}
+              style={[styles.gradientCircle, styles.circle2]}
+            />
+          </Animated.View>
+        </View>
+
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+          refreshControl={
+            <RefreshControl 
+              refreshing={refreshing} 
+              onRefresh={onRefresh}
+              tintColor={colors.primary}
+              colors={[colors.primary]}
+            />
+          }
+        >
+          <Animated.View 
+            style={[
+              styles.content,
+              {
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }
+            ]}
+          >
+          {/* Hero Section */}
+          <MobileHero
+            badge={{
+              text: "🚀 Dashboard",
+              variant: "secondary" as const,
+            }}
+            title={{
+              text: `Welcome back, ${user?.name || user?.email?.split('@')[0] || 'User'}!`,
+              size: "lg" as const
+            }}
+            description="Here's your business overview and key metrics for today."
+            actions={[
+              {
+                label: "View Analytics",
+                variant: "default",
+                size: "md",
+                onPress: () => {/* Navigate to analytics */}
+              },
+              {
+                label: "Add Order",
+                variant: "outline", 
+                size: "md",
+                onPress: () => {/* Navigate to new order */}
+              }
+            ]}
+            className="mb-8"
+          />
+
+          {/* Network Status (when offline) */}
+          {!isOnline && (
+            <BlurView intensity={80} style={styles.offlineCard}>
+              <LinearGradient
+                colors={['rgba(251, 191, 36, 0.1)', 'rgba(245, 158, 11, 0.05)']}
+                style={styles.gradientOverlay}
+              />
+              <Text style={styles.offlineText}>
+                🔴 You're offline. Some features may be limited.
+              </Text>
+            </BlurView>
+          )}
+
+          {/* Quick Stats */}
+          <NetworkAwareContent
+            showOnSlow={
+              <View style={styles.statsGrid}>
+                <StatCard
+                  title="Orders"
+                  value={data?.stats.totalOrders.toString() || '0'}
+                  icon={<ShoppingBag width={24} height={24} color="#3b82f6" />}
+                  change="+12%"
+                  changeType="positive"
+                  style={styles.statCard}
+                />
+                <StatCard
+                  title="Revenue"
+                  value={`$${data?.stats.totalRevenue.toLocaleString() || '0'}`}
+                  icon={<CreditCard width={24} height={24} color="#10b981" />}
+                  change="+8%"
+                  changeType="positive"
+                  style={styles.statCard}
+                />
+              </View>
+            }
+          >
+            <View style={styles.statsGrid}>
+              <StatCard
+                title="Orders"
+                value={data?.stats.totalOrders.toString() || '0'}
+                icon={<ShoppingBag width={24} height={24} color="#3b82f6" />}
+                change="+12%"
+                changeType="positive"
+                style={styles.statCard}
+              />
+              <StatCard
+                title="Revenue"
+                value={`$${data?.stats.totalRevenue.toLocaleString() || '0'}`}
+                icon={<CreditCard width={24} height={24} color="#10b981" />}
+                change="+8%"
+                changeType="positive"
+                style={styles.statCard}
+              />
+              <StatCard
+                title="Users"
+                value={data?.stats.activeUsers.toLocaleString() || '0'}
+                icon={<Users width={24} height={24} color="#f59e0b" />}
+                change="+15%"
+                changeType="positive"
+                style={styles.statCard}
+              />
+              <StatCard
+                title="Conversion"
+                value={`${data?.stats.conversionRate || '0'}%`}
+                icon={<TrendingUp width={24} height={24} color="#ef4444" />}
+                change="+2.1%"
+                changeType="positive"
+                style={styles.statCard}
+              />
+            </View>
+          </NetworkAwareContent>
+
+          {/* Chart Section */}
+          <Card style={styles.chartCard}>
+            <View style={styles.cardHeader}>
+              <Text style={styles.cardTitle}>Revenue This Week</Text>
+              <Button variant="ghost" size="sm">
+                View All
+              </Button>
+            </View>
+            <Chart
+              data={data?.chartData || []}
+              type="line"
+              xKey="date"
+              yKey="revenue"
+              height={200}
+              style={styles.chart}
+            />
+          </Card>
+
+          {/* Quick Actions */}
+          <Card style={styles.actionsCard}>
+            <Text style={styles.cardTitle}>Quick Actions</Text>
+            <View style={styles.actionsGrid}>
+              <Button
+                variant="outline"
+                style={styles.actionButton}
+                onPress={() => {/* Navigate to add product */}}
+              >
+                <Plus width={20} height={20} />
+                <Text style={styles.actionButtonText}>Add Product</Text>
+              </Button>
+              <Button
+                variant="outline"
+                style={styles.actionButton}
+                onPress={() => {/* Navigate to orders */}}
+              >
+                <ShoppingBag width={20} height={20} />
+                <Text style={styles.actionButtonText}>View Orders</Text>
+              </Button>
+              <Button
+                variant="outline"
+                style={styles.actionButton}
+                onPress={() => {/* Navigate to analytics */}}
+              >
+                <TrendingUp width={20} height={20} />
+                <Text style={styles.actionButtonText}>Analytics</Text>
+              </Button>
+            </View>
+          </Card>
+
+          {/* Recent Activity */}
+          <Card style={styles.activityCard}>
+            <View style={styles.cardHeader}>
+              <Text style={styles.cardTitle}>Recent Activity</Text>
+              <Button 
+                variant="ghost" 
+                size="sm"
+                onPress={() => {/* Navigate to full activity */}}
+              >
+                <ArrowRight width={16} height={16} />
+              </Button>
+            </View>
+            <View style={styles.activityList}>
+              {data?.recentActivity.map((activity) => (
+                <View key={activity.id} style={styles.activityItem}>
+                  <View style={[
+                    styles.activityIcon,
+                    { backgroundColor: 
+                      activity.type === 'order' ? '#dbeafe' :
+                      activity.type === 'user' ? '#dcfce7' : '#fef3c7'
+                    }
+                  ]}>
+                    {activity.type === 'order' && <ShoppingBag width={16} height={16} color="#3b82f6" />}
+                    {activity.type === 'user' && <Users width={16} height={16} color="#10b981" />}
+                    {activity.type === 'payment' && <CreditCard width={16} height={16} color="#f59e0b" />}
+                  </View>
+                  <View style={styles.activityContent}>
+                    <Text style={styles.activityMessage}>{activity.message}</Text>
+                    <Text style={styles.activityTime}>{activity.timestamp}</Text>
+                  </View>
+                </View>
+              ))}
+            </View>
+          </Card>
+          </Animated.View>
+        </ScrollView>
+
+        {/* Native Tour Overlay */}
+        {showTour && (
+          <NativeTour
+            steps={tourSteps}
+            isActive={showTour}
+            onComplete={() => {
+              setShowTour(false);
+              Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+            }}
+            onSkip={() => {
+              setShowTour(false);
+              Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+            }}
+            maskColor="rgba(0, 0, 0, 0.7)"
+            borderRadius={12}
+            enableHaptics={true}
+            showStepNumber={true}
+            showProgress={true}
+            animated={true}
+          />
+        )}
+      </View>
+    </PageTransition>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  gradientBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  backgroundElements: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  floatingElement: {
+    position: 'absolute',
+  },
+  gradientCircle: {
+    borderRadius: 150,
+  },
+  circle1: {
+    width: 300,
+    height: 300,
+    top: -100,
+    right: -150,
+  },
+  circle2: {
+    width: 200,
+    height: 200,
+    bottom: 100,
+    left: -100,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: 120, // Account for floating tab bar
+  },
+  content: {
+    paddingHorizontal: 20,
+    paddingTop: 20,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingText: {
+    fontSize: 16,
+    color: '#64748b',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  welcomeSection: {
+    flex: 1,
+  },
+  greeting: {
+    fontSize: 16,
+    color: '#64748b',
+  },
+  userName: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#1e293b',
+    marginTop: 4,
+  },
+  notificationButton: {
+    width: 44,
+    height: 44,
+  },
+  offlineCard: {
+    padding: 20,
+    marginBottom: 20,
+    marginHorizontal: 20,
+    borderRadius: 16,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: 'rgba(245, 158, 11, 0.2)',
+  },
+  gradientOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  offlineText: {
+    color: '#92400e',
+    textAlign: 'center',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  chartCard: {
+    padding: 20,
+    marginBottom: 20,
+    marginHorizontal: 20,
+    borderRadius: 20,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.2)',
+  },
+  statsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginHorizontal: -8,
+    marginBottom: 24,
+  },
+  statCard: {
+    width: (width - 48) / 2, // Account for container padding and gaps
+    marginHorizontal: 8,
+    marginBottom: 16,
+  },
+  chartCard: {
+    padding: 16,
+    marginBottom: 16,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1e293b',
+  },
+  chart: {
+    marginTop: 8,
+  },
+  actionsCard: {
+    padding: 16,
+    marginBottom: 16,
+  },
+  actionsGrid: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 16,
+    gap: 12,
+  },
+  actionButton: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingVertical: 16,
+    gap: 8,
+  },
+  actionButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  activityCard: {
+    padding: 16,
+  },
+  activityList: {
+    gap: 16,
+  },
+  activityItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  activityIcon: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  activityContent: {
+    flex: 1,
+  },
+  activityMessage: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#1e293b',
+  },
+  activityTime: {
+    fontSize: 12,
+    color: '#64748b',
+    marginTop: 2,
+  },
+  // Skeleton styles
+  heroSkeleton: {
+    marginBottom: 32,
+    paddingHorizontal: 20,
+  },
+  buttonSkeletonRow: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  buttonSkeleton: {
+    flex: 1,
+    height: 44,
+    borderRadius: 22,
+  },
+  activitySkeleton: {
+    padding: 16,
+  },
+  activityItemSkeleton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 16,
+  },
+  activityIconSkeleton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+  },
+  activityContentSkeleton: {
+    flex: 1,
+  },
+});