@digilogiclabs/create-saas-app 1.0.1

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

@@ -0,0 +1,668 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, Dimensions, RefreshControl, Animated } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { BlurView } from 'expo-blur';
+import * as Haptics from 'expo-haptics';
+
+// UI Components
+import {
+  NativeCard as Card,
+  NativeMobileContainer as MobileContainer,
+  NativeChart as Chart,
+  NativeStatCard as StatCard,
+  NativeButton as Button,
+  NativeSegmentedControl as SegmentedControl,
+  NativePageTransition as PageTransition,
+  NativeMobileHero as MobileHero,
+  NativePullToRefresh as PullToRefresh,
+  useTheme
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Icons
+import { 
+  TrendingUp, 
+  TrendingDown,
+  Users,
+  ShoppingBag,
+  DollarSign,
+  Eye,
+  BarChart3,
+  PieChart,
+  Calendar
+} from 'react-native-heroicons/outline';
+
+const { width } = Dimensions.get('window');
+
+interface AnalyticsData {
+  overview: {
+    revenue: { current: number; previous: number; change: number };
+    orders: { current: number; previous: number; change: number };
+    customers: { current: number; previous: number; change: number };
+    conversionRate: { current: number; previous: number; change: number };
+  };
+  chartData: {
+    revenue: Array<{ date: string; value: number }>;
+    orders: Array<{ date: string; value: number }>;
+    traffic: Array<{ date: string; value: number }>;
+  };
+  topProducts: Array<{
+    id: string;
+    name: string;
+    sales: number;
+    revenue: number;
+  }>;
+}
+
+const mockAnalyticsData: AnalyticsData = {
+  overview: {
+    revenue: { current: 12450, previous: 11200, change: 11.2 },
+    orders: { current: 156, previous: 142, change: 9.9 },
+    customers: { current: 1249, previous: 1180, change: 5.8 },
+    conversionRate: { current: 3.2, previous: 2.8, change: 14.3 }
+  },
+  chartData: {
+    revenue: [
+      { date: 'Jan 1', value: 1200 },
+      { date: 'Jan 8', value: 1800 },
+      { date: 'Jan 15', value: 2100 },
+      { date: 'Jan 22', value: 1600 },
+      { date: 'Jan 29', value: 2400 },
+      { date: 'Feb 5', value: 2800 },
+      { date: 'Feb 12', value: 1900 }
+    ],
+    orders: [
+      { date: 'Jan 1', value: 15 },
+      { date: 'Jan 8', value: 22 },
+      { date: 'Jan 15', value: 28 },
+      { date: 'Jan 22', value: 18 },
+      { date: 'Jan 29', value: 32 },
+      { date: 'Feb 5', value: 38 },
+      { date: 'Feb 12', value: 25 }
+    ],
+    traffic: [
+      { date: 'Jan 1', value: 450 },
+      { date: 'Jan 8', value: 680 },
+      { date: 'Jan 15', value: 820 },
+      { date: 'Jan 22', value: 590 },
+      { date: 'Jan 29', value: 920 },
+      { date: 'Feb 5', value: 1100 },
+      { date: 'Feb 12', value: 750 }
+    ]
+  },
+  topProducts: [
+    { id: '1', name: 'Premium Widget', sales: 45, revenue: 2250 },
+    { id: '2', name: 'Starter Kit', sales: 38, revenue: 1520 },
+    { id: '3', name: 'Pro Bundle', sales: 29, revenue: 1450 },
+    { id: '4', name: 'Basic Plan', sales: 52, revenue: 1040 }
+  ]
+};
+
+export default function AnalyticsScreen() {
+  const [data, setData] = useState<AnalyticsData>(mockAnalyticsData);
+  const [selectedPeriod, setSelectedPeriod] = useState<string>('7d');
+  const [selectedChart, setSelectedChart] = useState<string>('revenue');
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const { theme, isDark } = useTheme();
+  
+  // Animation values
+  const fadeAnim = useState(new Animated.Value(0))[0];
+  const slideAnim = useState(new Animated.Value(50))[0];
+
+  const periodOptions = [
+    { label: '7D', value: '7d' },
+    { label: '30D', value: '30d' },
+    { label: '90D', value: '90d' }
+  ];
+
+  const chartOptions = [
+    { label: 'Revenue', value: 'revenue' },
+    { label: 'Orders', value: 'orders' },
+    { label: 'Traffic', value: 'traffic' }
+  ];
+
+  useEffect(() => {
+    // Fetch analytics data based on selected period
+    fetchAnalyticsData();
+    
+    // Entrance animations
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 600,
+        useNativeDriver: true,
+      }),
+      Animated.spring(slideAnim, {
+        toValue: 0,
+        tension: 50,
+        friction: 8,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [selectedPeriod]);
+
+  const fetchAnalyticsData = async () => {
+    setLoading(true);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    setLoading(false);
+  };
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    await fetchAnalyticsData();
+    setRefreshing(false);
+  };
+
+  const renderStatCard = (
+    title: string,
+    icon: React.ReactNode,
+    current: number,
+    change: number,
+    format: 'currency' | 'number' | 'percentage' = 'number'
+  ) => {
+    const formatValue = (value: number) => {
+      switch (format) {
+        case 'currency':
+          return `$${value.toLocaleString()}`;
+        case 'percentage':
+          return `${value}%`;
+        default:
+          return value.toLocaleString();
+      }
+    };
+
+    const isPositive = change >= 0;
+    const TrendIcon = isPositive ? TrendingUp : TrendingDown;
+
+    return (
+      <StatCard
+        title={title}
+        value={formatValue(current)}
+        icon={icon}
+        change={`${isPositive ? '+' : ''}${change.toFixed(1)}%`}
+        changeType={isPositive ? 'positive' : 'negative'}
+        style={styles.statCard}
+      />
+    );
+  };
+
+  return (
+    <PageTransition type="fade">
+      <View style={styles.mainContainer}>
+        {/* Enhanced gradient background with floating elements */}
+        <LinearGradient
+          colors={isDark 
+            ? ['#0F172A', '#1E293B', '#334155']
+            : ['#F8FAFC', '#E2E8F0', '#CBD5E1']
+          }
+          style={styles.gradientBackground}
+        />
+        
+        {/* Floating animated elements */}
+        <Animated.View style={[styles.floatingElement, styles.element1, {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }]
+        }]}>
+          <LinearGradient
+            colors={['rgba(139, 92, 246, 0.3)', 'rgba(79, 70, 229, 0.3)']}
+            style={styles.gradientOrb}
+          />
+        </Animated.View>
+        
+        <Animated.View style={[styles.floatingElement, styles.element2, {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }]
+        }]}>
+          <LinearGradient
+            colors={['rgba(16, 185, 129, 0.3)', 'rgba(5, 150, 105, 0.3)']}
+            style={styles.gradientOrb}
+          />
+        </Animated.View>
+
+        <Animated.View style={[styles.floatingElement, styles.element3, {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }]
+        }]}>
+          <LinearGradient
+            colors={['rgba(59, 130, 246, 0.3)', 'rgba(37, 99, 235, 0.3)']}
+            style={styles.gradientOrb}
+          />
+        </Animated.View>
+
+        <PullToRefresh
+          onRefresh={onRefresh}
+          refreshing={refreshing}
+        >
+          <ScrollView 
+            style={styles.scrollView}
+            showsVerticalScrollIndicator={false}
+            refreshControl={
+              <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+            }
+          >
+            <MobileContainer style={styles.container}>
+              {/* Hero Section */}
+              <Animated.View style={{
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }}>
+                <MobileHero
+                  badge={{
+                    text: "📊 Analytics Dashboard",
+                    variant: "secondary"
+                  }}
+                  title={{
+                    text: "Business Insights",
+                    size: "lg"
+                  }}
+                  description="Track your performance with real-time analytics and detailed reports."
+                  className="text-center mb-6"
+                />
+              </Animated.View>
+              {/* Period Selector with Glass Effect */}
+              <Animated.View style={[styles.periodSelector, {
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }]}>
+                <BlurView intensity={20} style={styles.periodSelectorBlur}>
+                  <SegmentedControl
+                    options={periodOptions}
+                    selectedValue={selectedPeriod}
+                    onValueChange={setSelectedPeriod}
+                  />
+                </BlurView>
+              </Animated.View>
+
+              {/* Overview Stats with Glass Cards */}
+              <Animated.View style={[styles.statsSection, {
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }]}>
+                <Text style={styles.sectionTitle}>Overview</Text>
+                <View style={styles.statsGrid}>
+                  {renderStatCard(
+                    'Revenue',
+                    <DollarSign width={24} height={24} color="#10b981" />,
+                    data.overview.revenue.current,
+                    data.overview.revenue.change,
+                    'currency'
+                  )}
+                  {renderStatCard(
+                    'Orders',
+                    <ShoppingBag width={24} height={24} color="#3b82f6" />,
+                    data.overview.orders.current,
+                    data.overview.orders.change
+                  )}
+                  {renderStatCard(
+                    'Customers',
+                    <Users width={24} height={24} color="#f59e0b" />,
+                    data.overview.customers.current,
+                    data.overview.customers.change
+                  )}
+                  {renderStatCard(
+                    'Conversion',
+                    <TrendingUp width={24} height={24} color="#ef4444" />,
+                    data.overview.conversionRate.current,
+                    data.overview.conversionRate.change,
+                    'percentage'
+                  )}
+                </View>
+              </Animated.View>
+
+              {/* Chart Section with Glass Effect */}
+              <Animated.View style={{
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }}>
+                <BlurView intensity={30} style={styles.chartCardBlur}>
+                  <Card style={styles.chartCard}>
+                    <View style={styles.chartHeader}>
+                      <Text style={styles.chartTitle}>
+                        {chartOptions.find(opt => opt.value === selectedChart)?.label} Trends
+                      </Text>
+                      <SegmentedControl
+                        options={chartOptions}
+                        selectedValue={selectedChart}
+                        onValueChange={setSelectedChart}
+                        size="sm"
+                      />
+                    </View>
+                    
+                    <Chart
+                      data={data.chartData[selectedChart as keyof typeof data.chartData]}
+                      type="line"
+                      xKey="date"
+                      yKey="value"
+                      height={200}
+                      style={styles.chart}
+                      loading={loading}
+                    />
+                  </Card>
+                </BlurView>
+              </Animated.View>
+
+              {/* Top Products with Glass Effect */}
+              <Animated.View style={{
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }}>
+                <BlurView intensity={25} style={styles.topProductsBlur}>
+                  <Card style={styles.topProductsCard}>
+                    <View style={styles.cardHeader}>
+                      <Text style={styles.cardTitle}>Top Products</Text>
+                      <Button variant="ghost" size="sm">
+                        <Eye width={16} height={16} />
+                        <Text>View All</Text>
+                      </Button>
+                    </View>
+                    
+                    <View style={styles.productsList}>
+                      {data.topProducts.map((product, index) => (
+                        <View key={product.id} style={styles.productItem}>
+                          <View style={styles.productRank}>
+                            <Text style={styles.rankNumber}>{index + 1}</Text>
+                          </View>
+                          <View style={styles.productInfo}>
+                            <Text style={styles.productName}>{product.name}</Text>
+                            <View style={styles.productStats}>
+                              <Text style={styles.productSales}>{product.sales} sales</Text>
+                              <Text style={styles.productRevenue}>
+                                ${product.revenue.toLocaleString()}
+                              </Text>
+                            </View>
+                          </View>
+                          <View style={styles.productChart}>
+                            <BarChart3 width={20} height={20} color="#64748b" />
+                          </View>
+                        </View>
+                      ))}
+                    </View>
+                  </Card>
+                </BlurView>
+              </Animated.View>
+
+              {/* Additional Metrics with Glass Effect */}
+              <Animated.View style={[styles.additionalMetrics, {
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }]}>
+                <BlurView intensity={20} style={[styles.metricCardBlur, { marginRight: 6 }]}>
+                  <Card style={styles.metricCard}>
+                    <View style={styles.metricHeader}>
+                      <PieChart width={20} height={20} color="#3b82f6" />
+                      <Text style={styles.metricTitle}>Traffic Sources</Text>
+                    </View>
+                    <View style={styles.metricValue}>
+                      <Text style={styles.metricNumber}>68%</Text>
+                      <Text style={styles.metricLabel}>Direct</Text>
+                    </View>
+                  </Card>
+                </BlurView>
+
+                <BlurView intensity={20} style={[styles.metricCardBlur, { marginLeft: 6 }]}>
+                  <Card style={styles.metricCard}>
+                    <View style={styles.metricHeader}>
+                      <Calendar width={20} height={20} color="#10b981" />
+                      <Text style={styles.metricTitle}>Avg. Order Value</Text>
+                    </View>
+                    <View style={styles.metricValue}>
+                      <Text style={styles.metricNumber}>$79.85</Text>
+                      <Text style={styles.metricLabel}>+12.5%</Text>
+                    </View>
+                  </Card>
+                </BlurView>
+              </Animated.View>
+
+              {/* Export Button with Glass Effect */}
+              <Animated.View style={{
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }}>
+                <BlurView intensity={15} style={styles.exportButtonBlur}>
+                  <Button
+                    variant="outline"
+                    style={styles.exportButton}
+                    onPress={() => {
+                      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                    }}
+                  >
+                    Export Analytics Report
+                  </Button>
+                </BlurView>
+              </Animated.View>
+            </MobileContainer>
+          </ScrollView>
+        </PullToRefresh>
+      </View>
+    </PageTransition>
+  );
+}
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  gradientBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  floatingElement: {
+    position: 'absolute',
+    borderRadius: 100,
+  },
+  element1: {
+    top: 100,
+    right: 50,
+    width: 120,
+    height: 120,
+  },
+  element2: {
+    top: 300,
+    left: 30,
+    width: 80,
+    height: 80,
+  },
+  element3: {
+    bottom: 200,
+    right: 80,
+    width: 100,
+    height: 100,
+  },
+  gradientOrb: {
+    flex: 1,
+    borderRadius: 100,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  container: {
+    padding: 16,
+    paddingBottom: 100,
+  },
+  periodSelector: {
+    marginBottom: 24,
+  },
+  periodSelectorBlur: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    padding: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  statsSection: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#1e293b',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  statsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginHorizontal: -8,
+  },
+  statCard: {
+    width: (width - 48) / 2,
+    marginHorizontal: 8,
+    marginBottom: 16,
+  },
+  chartCardBlur: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    marginBottom: 16,
+  },
+  chartCard: {
+    padding: 20,
+    backgroundColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  chartHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  chartTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#1e293b',
+  },
+  chart: {
+    marginTop: 12,
+  },
+  topProductsBlur: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    marginBottom: 16,
+  },
+  topProductsCard: {
+    padding: 20,
+    backgroundColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#1e293b',
+  },
+  productsList: {
+    gap: 12,
+  },
+  productItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  productRank: {
+    width: 32,
+    height: 32,
+    backgroundColor: '#f1f5f9',
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  rankNumber: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#475569',
+  },
+  productInfo: {
+    flex: 1,
+  },
+  productName: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#1e293b',
+    marginBottom: 2,
+  },
+  productStats: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  productSales: {
+    fontSize: 12,
+    color: '#64748b',
+  },
+  productRevenue: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: '#10b981',
+  },
+  productChart: {
+    marginLeft: 12,
+  },
+  additionalMetrics: {
+    flexDirection: 'row',
+    gap: 12,
+    marginBottom: 24,
+  },
+  metricCardBlur: {
+    flex: 1,
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  metricCard: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  metricHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 16,
+  },
+  metricTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#64748b',
+  },
+  metricValue: {
+    alignItems: 'flex-start',
+  },
+  metricNumber: {
+    fontSize: 24,
+    fontWeight: '800',
+    color: '#1e293b',
+    marginBottom: 4,
+  },
+  metricLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#10b981',
+  },
+  exportButtonBlur: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    marginTop: 8,
+  },
+  exportButton: {
+    margin: 16,
+    backgroundColor: 'transparent',
+  },
+});