@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

package/src/templates/web/base/template/src/app/dashboard/page.tsx

@@ -1,329 +1,145 @@
-'use client';
-
-import React, { useState } from 'react';
-import { useAuth } from '@digilogiclabs/app-sdk';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { 
-  PageTransition,
-  MobileContainer,
-  ResponsiveGrid,
-  PullToRefresh,
-  LazyImage,
-  VirtualScrollList,
-  SwipeableCard,
-  NetworkAwareContent,
-  OfflineWrapper,
-  useNetworkInfo,
-  useOfflineState,
-  DashboardLayout
-} from '@digilogiclabs/saas-factory-ui';
-import { 
-  BarChart3, 
-  Users, 
-  DollarSign, 
-  TrendingUp, 
-  Settings, 
-  Archive,
-  Star,
-  Trash2,
-  Wifi,
-  WifiOff
-} from 'lucide-react';
-
-// Mock data for demonstration
-const mockActivityData = Array.from({ length: 50 }, (_, i) => ({
-  id: i + 1,
-  title: `Activity ${i + 1}`,
-  description: `This is a sample activity item #${i + 1}`,
-  timestamp: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString(),
-  type: ['user', 'sale', 'system'][Math.floor(Math.random() * 3)],
-  avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`
-}));
-
-export default function DashboardPage() {
-  const { user } = useAuth();
-  
-  const lazyImageConfig = {
-    mobileOptimization: {
-      quality: 80,
-      format: "webp"
-    }
-  };
-  const networkInfo = useNetworkInfo();
-  const isOnline = useOfflineState();
-  const [activityData, setActivityData] = useState(mockActivityData);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-
-  const handleRefresh = async () => {
-    setIsRefreshing(true);
-    // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 1500));
-    setIsRefreshing(false);
-  };
-
-  const handleArchive = (id: number) => {
-    setActivityData(prev => prev.filter(item => item.id !== id));
-  };
-
-  const handleStar = (id: number) => {
-    console.log('Starred item:', id);
-  };
-
-  const handleDelete = (id: number) => {
-    setActivityData(prev => prev.filter(item => item.id !== id));
-  };
-
-  const stats = [
-    {
-      title: 'Total Users',
-      value: '2,543',
-      change: '+12%',
-      icon: Users,
-      color: 'blue'
-    },
-    {
-      title: 'Revenue',
-      value: '$12,456',
-      change: '+8%',
-      icon: DollarSign,
-      color: 'green'
-    },
-    {
-      title: 'Growth',
-      value: '23.5%',
-      change: '+2.1%',
-      icon: TrendingUp,
-      color: 'purple'
-    },
-    {
-      title: 'Analytics',
-      value: '1,234',
-      change: '+5%',
-      icon: BarChart3,
-      color: 'orange'
-    }
-  ];
-  const gridConfig = {
-    columns_1_2: { base: 1, md: 2 },
-    columns_1_3: { base: 1, md: 3 },
-    columns_1_sm2: { base: 1, sm: 2 },
-    columns_1_sm2_md3: { base: 1, sm: 2, md: 3 },
-    columns_1_sm2_md4: { base: 1, sm: 2, md: 4 },
-    columns_2_2: { base: 2, md: 2 },
-    columns_2_md3: { base: 2, md: 3 },
-    columns_2_md4: { base: 2, md: 4 }
-  };
-
-
-  return (
-    <DashboardLayout>
-      <PageTransition type="slide" direction="horizontal" duration={300}>
-        <OfflineWrapper
-          cacheStrategy="stale-while-revalidate"
-          showOfflineIndicator={true}
-          backgroundSync={true}
-        >
-          <PullToRefresh 
-            onRefresh={handleRefresh}
-            threshold={80}
-            loadingIndicator="spinner"
-            hapticOnTrigger={true}
-            networkAware={true}
-          >
-            <div className="min-h-screen bg-gray-50">
-              <MobileContainer className="py-6">
-                {/* Header */}
-                <div className="mb-6" data-tour="overview">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h1 className="text-2xl font-bold text-gray-900">
-                      Welcome back, {user?.email?.split('@')[0]}
-                    </h1>
-                    <p className="text-gray-600 flex items-center gap-2">
-                      {isOnline ? (
-                        <>
-                          <Wifi className="h-4 w-4 text-green-600" />
-                          <span>Online</span>
-                        </>
-                      ) : (
-                        <>
-                          <WifiOff className="h-4 w-4 text-red-600" />
-                          <span>Offline</span>
-                        </>
-                      )}
-                      {networkInfo?.effectiveType && (
-                        <span className="text-xs bg-gray-200 px-2 py-1 rounded">
-                          {networkInfo.effectiveType.toUpperCase()}
-                        </span>
-                      )}
-                    </p>
-                  </div>
-                  <Button variant="outline" size="icon">
-                    <Settings className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-
-              {/* Stats Grid */}
-              <div data-tour="stats">
-                <NetworkAwareContent
-                showOnSlow={
-                  <ResponsiveGrid columns={gridConfig.columns_2_2} gap={2} className="mb-6">
-                    {stats.slice(0, 2).map((stat, index) => (
-                      <Card key={index}>
-                        <CardContent className="p-4">
-                          <div className="flex items-center gap-2">
-                            <stat.icon className={`h-5 w-5 text-${stat.color}-600`} />
-                            <div>
-                              <p className="text-sm font-medium text-gray-600">{stat.title}</p>
-                              <p className="text-lg font-bold">{stat.value}</p>
-                            </div>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    ))}
-                  </ResponsiveGrid>
-                }
-              >
-                <ResponsiveGrid columns={gridConfig.columns_2_md4} gap={4} className="mb-6">
-                  {stats.map((stat, index) => (
-                    <Card key={index}>
-                      <CardContent className="p-4">
-                        <div className="flex items-center justify-between mb-2">
-                          <stat.icon className={`h-5 w-5 text-${stat.color}-600`} />
-                          <span className="text-sm text-green-600 font-medium">
-                            {stat.change}
-                          </span>
-                        </div>
-                        <div>
-                          <p className="text-sm font-medium text-gray-600">{stat.title}</p>
-                          <p className="text-2xl font-bold">{stat.value}</p>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  ))}
-                </ResponsiveGrid>
-              </NetworkAwareContent>
-              </div>
-
-              {/* Activity Feed */}
-              <Card className="mb-6" data-tour="activity">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <BarChart3 className="h-5 w-5" />
-                    Recent Activity
-                  </CardTitle>
-                  <CardDescription>
-                    Swipe left on items to archive or star them
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="p-0">
-                  <VirtualScrollList
-                    items={activityData}
-                    itemHeight={80}
-                    containerHeight={400}
-                    bufferSize={5}
-                    renderItem={(item) => (
-                      <SwipeableCard
-                        key={item.id}
-                        leftActions={[
-                          {
-                            id: 'archive',
-                            label: 'Archive',
-                            onAction: () => handleArchive(item.id),
-                            color: 'blue',
-                            icon: Archive
-                          },
-                          {
-                            id: 'star',
-                            label: 'Star',
-                            onAction: () => handleStar(item.id),
-                            color: 'yellow',
-                            icon: Star
-                          }
-                        ]}
-                        rightActions={[
-                          {
-                            id: 'delete',
-                            label: 'Delete',
-                            onAction: () => handleDelete(item.id),
-                            color: 'red',
-                            icon: Trash2
-                          }
-                        ]}
-                        threshold={50}
-                        hapticFeedback={true}
-                        showActionLabels={true}
-                      >
-                        <div className="flex items-center gap-3 p-4 border-b">
-                          <LazyImage
-                            src={item.avatar}
-                            alt={`Activity ${item.id}`}
-                            className="w-10 h-10 rounded-full"
-                            placeholder="skeleton"
-                            webpSupport={true}
-                            mobileOptimization={lazyImageConfig.mobileOptimization}
-                          />
-                          <div className="flex-1 min-w-0">
-                            <h4 className="font-medium text-gray-900 truncate">
-                              {item.title}
-                            </h4>
-                            <p className="text-sm text-gray-600 truncate">
-                              {item.description}
-                            </p>
-                            <p className="text-xs text-gray-400">
-                              {new Date(item.timestamp).toLocaleDateString()}
-                            </p>
-                          </div>
-                          <div className={`px-2 py-1 rounded-full text-xs ${
-                            item.type === 'user' ? 'bg-blue-100 text-blue-800' :
-                            item.type === 'sale' ? 'bg-green-100 text-green-800' :
-                            'bg-gray-100 text-gray-800'
-                          }`}>
-                            {item.type}
-                          </div>
-                        </div>
-                      </SwipeableCard>
-                    )}
-                    onEndReached={() => {
-                      console.log('Loading more items...');
-                    }}
-                    mobileOptimized={true}
-                  />
-                </CardContent>
-              </Card>
-
-              {/* Quick Actions */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Quick Actions</CardTitle>
-                  <CardDescription>
-                    Common tasks and shortcuts
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <ResponsiveGrid columns={gridConfig.columns_2_md3} gap={2}>
-                    <Button variant="outline" className="h-20 flex flex-col gap-2">
-                      <Users className="h-5 w-5" />
-                      <span className="text-xs">Manage Users</span>
-                    </Button>
-                    <Button variant="outline" className="h-20 flex flex-col gap-2">
-                      <DollarSign className="h-5 w-5" />
-                      <span className="text-xs">View Revenue</span>
-                    </Button>
-                    <Button variant="outline" className="h-20 flex flex-col gap-2">
-                      <BarChart3 className="h-5 w-5" />
-                      <span className="text-xs">Analytics</span>
-                    </Button>
-                  </ResponsiveGrid>
-                </CardContent>
-              </Card>
-            </MobileContainer>
-          </div>
-        </PullToRefresh>
-      </OfflineWrapper>
-    </PageTransition>
-    </DashboardLayout>
-  );
-}
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { LayoutDashboard, Users, CreditCard, Settings, ArrowUpRight, Activity, LogIn } from 'lucide-react';
+import Link from 'next/link';
+import { useMockAuth } from '@/components/mock-auth-provider';
+import {
+  MOCK_MODE,
+  MOCK_STATS,
+  MOCK_RECENT_ACTIVITY,
+} from '@/lib/mock';
+
+// TODO: [REAL_DATA] Replace with your actual data fetching
+// Example: const stats = await fetchDashboardStats()
+// Example: const activity = await fetchRecentActivity()
+const stats = [
+  { label: 'Total Users', value: MOCK_STATS.totalUsers.toLocaleString(), change: `+${MOCK_STATS.growth}%`, icon: Users },
+  { label: 'Revenue', value: `$${MOCK_STATS.revenue.toLocaleString()}`, change: `+${MOCK_STATS.growth}%`, icon: CreditCard },
+  { label: 'Active Now', value: MOCK_STATS.activeUsers.toLocaleString(), change: `+${MOCK_STATS.newSignups}`, icon: LayoutDashboard },
+];
+
+export default function DashboardPage() {
+  const { user, isAuthenticated } = useMockAuth();
+
+  if (!isAuthenticated) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+        <LogIn className="h-12 w-12 text-muted-foreground mb-4" />
+        <h1 className="text-2xl font-bold text-foreground mb-2">Sign in required</h1>
+        <p className="text-muted-foreground mb-6">You need to be signed in to view the dashboard.</p>
+        <Link href="/login" className="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+          Sign In
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-8">
+      <div className="mb-8 flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
+          <p className="text-muted-foreground mt-1">
+            Welcome back, {user?.name ?? 'User'}.
+          </p>
+        </div>
+        {MOCK_MODE && (
+          <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+            Mock Data
+          </span>
+        )}
+      </div>
+
+      {/* Stats */}
+      {/* TODO: [REAL_DATA] Fetch stats from your API/database */}
+      <div className="grid gap-4 md:grid-cols-3 mb-8">
+        {stats.map((stat) => (
+          <div
+            key={stat.label}
+            className="rounded-xl border border-border bg-card p-6"
+          >
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm text-muted-foreground">{stat.label}</span>
+              <stat.icon className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div className="text-2xl font-bold text-card-foreground">{stat.value}</div>
+            <p className="text-xs text-primary mt-1">{stat.change} from last month</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2 mb-8">
+        {/* Recent Activity */}
+        {/* TODO: [REAL_DATA] Fetch activity feed from your API/database */}
+        <div className="rounded-xl border border-border bg-card p-6">
+          <h2 className="text-lg font-semibold text-card-foreground mb-4 flex items-center gap-2">
+            <Activity className="h-5 w-5" />
+            Recent Activity
+          </h2>
+          <div className="space-y-3">
+            {MOCK_RECENT_ACTIVITY.map((item) => (
+              <div key={item.id} className="flex items-center justify-between py-2 border-b border-border last:border-0">
+                <div>
+                  <p className="text-sm font-medium text-foreground">{item.action}</p>
+                  <p className="text-xs text-muted-foreground">{item.user}</p>
+                </div>
+                <span className="text-xs text-muted-foreground">{item.timestamp}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="rounded-xl border border-border bg-card p-6">
+          <h2 className="text-lg font-semibold text-card-foreground mb-4">Quick Actions</h2>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <Button variant="outline" className="justify-start" asChild>
+              <Link href="/settings">
+                <Settings className="mr-2 h-4 w-4" />
+                Settings
+              </Link>
+            </Button>
+            <Button variant="outline" className="justify-start" asChild>
+              <Link href="/checkout">
+                <CreditCard className="mr-2 h-4 w-4" />
+                Upgrade Plan
+              </Link>
+            </Button>
+            <Button variant="outline" className="justify-start" asChild>
+              <Link href="/dashboard">
+                <Users className="mr-2 h-4 w-4" />
+                Team Members
+              </Link>
+            </Button>
+            <Button variant="outline" className="justify-start" asChild>
+              <Link href="https://docs.digilogiclabs.com" target="_blank">
+                <ArrowUpRight className="mr-2 h-4 w-4" />
+                Documentation
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Getting Started */}
+      <div className="rounded-xl border border-border bg-card p-6">
+        <h2 className="text-lg font-semibold text-card-foreground mb-4">Getting Started</h2>
+        <ol className="space-y-3 text-sm text-muted-foreground">
+          <li className="flex gap-3">
+            <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">1</span>
+            <span>Set <code className="text-primary">NEXT_PUBLIC_MOCK_MODE=false</code> in <code className="text-primary">.env.local</code></span>
+          </li>
+          <li className="flex gap-3">
+            <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">2</span>
+            <span>Configure your auth and database provider (see <code className="text-primary">.env.example</code>)</span>
+          </li>
+          <li className="flex gap-3">
+            <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">3</span>
+            <span>Search for <code className="text-primary">TODO: [REAL_DATA]</code> to find all mock→real integration points</span>
+          </li>
+        </ol>
+      </div>
+    </div>
+  );
+}

package/src/templates/web/base/template/src/app/layout.tsx

@@ -1,38 +1,40 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
-import { AppProviders } from '@/components/providers/app-providers'
-import { Header } from '@/components/shared/header'
-import { Footer } from '@/components/shared/footer'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: '{{titleCaseName}}',
-  description: '{{description}}',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
-        <AppProviders>
-          <div className="min-h-screen flex flex-col">
-            <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[90] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none">
-              Skip to content
-            </a>
-            <Header />
-            <main id="main-content" className="flex-1">
-              {children}
-            </main>
-            <Footer />
-          </div>
-        </AppProviders>
-      </body>
-    </html>
-  )
-}
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+import { Header } from '@/components/shared/header'
+import { Footer } from '@/components/shared/footer'
+import { MockBanner } from '@/components/mock-banner'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}}',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <AppProviders>
+          <MockBanner />
+          <div className="min-h-screen flex flex-col">
+            <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[90] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none">
+              Skip to content
+            </a>
+            <Header />
+            <main id="main-content" className="flex-1">
+              {children}
+            </main>
+            <Footer />
+          </div>
+        </AppProviders>
+      </body>
+    </html>
+  )
+}