@digilogiclabs/create-saas-app 1.0.1

package/src/templates/web/ui-auth-payments-ai/template/src/app/dashboard/page.tsx

@@ -0,0 +1,236 @@
+import { Suspense } from 'react'
+import { 
+  Button, 
+  Card, 
+  DashboardLayout,
+  CommandPalette,
+  Tour 
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  User, 
+  Settings, 
+  CreditCard, 
+  Activity, 
+  Home,
+  Brain,
+  Users,
+  BarChart,
+  Plus,
+  Search
+} from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+import Link from 'next/link'
+
+// Example of server component data fetching
+async function getUserStats(userId: string) {
+  // Simulate API call
+  await new Promise(resolve => setTimeout(resolve, 100))
+  
+  return {
+    totalPosts: 42,
+    totalViews: 1337,
+    totalLikes: 256,
+    joinedDate: '2024-01-15'
+  }
+}
+
+function StatsCard({ title, value, icon: Icon, href }: {
+  title: string
+  value: string | number
+  icon: React.ComponentType<any>
+  href?: string
+}) {
+  const content = (
+    <Card className="p-6 hover:shadow-lg transition-shadow">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
+          <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
+        </div>
+        <Icon className="h-8 w-8 text-blue-600 dark:text-blue-400" />
+      </div>
+    </Card>
+  )
+
+  if (href) {
+    return <Link href={href}>{content}</Link>
+  }
+
+  return content
+}
+
+async function UserStats({ userId }: { userId: string }) {
+  const stats = await getUserStats(userId)
+  
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      <StatsCard
+        title="Total Posts"
+        value={stats.totalPosts}
+        icon={Activity}
+      />
+      <StatsCard
+        title="Total Views"
+        value={stats.totalViews.toLocaleString()}
+        icon={Activity}
+      />
+      <StatsCard
+        title="Total Likes"
+        value={stats.totalLikes}
+        icon={Activity}
+      />
+      <StatsCard
+        title="Member Since"
+        value={new Date(stats.joinedDate).getFullYear()}
+        icon={User}
+      />
+    </div>
+  )
+}
+
+function UserStatsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      {[...Array(4)].map((_, i) => (
+        <Card key={i} className="p-6">
+          <div className="animate-pulse">
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2"></div>
+            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export default async function DashboardPage() {
+  // Server-side authentication requirement
+  const user = await requireAuth()
+
+  const sidebarNavigation = [
+    { name: 'Overview', href: '/dashboard', icon: Home, current: true },
+    { name: 'Profile', href: '/profile', icon: User },
+    { name: 'Settings', href: '/settings', icon: Settings },
+    { name: 'Billing', href: '/billing', icon: CreditCard },
+    { name: 'Analytics', href: '/analytics', icon: BarChart }
+  ]
+
+  const tourSteps = [
+    {
+      target: '[data-tour="overview"]',
+      title: 'Dashboard Overview',
+      content: 'Get a quick overview of your account stats and recent activity.'
+    },
+    {
+      target: '[data-tour="stats"]',
+      title: 'Account Statistics',
+      content: 'View your key metrics and performance indicators here.'
+    },
+    {
+      target: '[data-tour="actions"]',
+      title: 'Quick Actions',
+      content: 'Access your most commonly used features from these cards.'
+    }
+  ]
+
+  return (
+    <DashboardLayout
+      navigation={sidebarNavigation}
+      headerActions={[
+        <CommandPalette key="command-palette" />,
+        <Tour key="tour" steps={tourSteps} />
+      ]}
+    >
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8" data-tour="overview">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            Welcome back, {user.name || user.email}!
+          </h1>
+          <p className="text-gray-600 dark:text-gray-300 mt-2">
+            Here's what's happening with your account today.
+          </p>
+        </div>
+
+        {/* Stats - Streaming with Suspense */}
+        <div data-tour="stats">
+          <Suspense fallback={<UserStatsSkeleton />}>
+            <UserStats userId={user.id} />
+          </Suspense>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8" data-tour="actions">
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <User className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Profile</h3>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              Update your personal information and preferences
+            </p>
+            <Link href="/profile">
+              <Button className="w-full">Manage Profile</Button>
+            </Link>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <Settings className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Settings</h3>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              Configure your account settings and security options
+            </p>
+            <Link href="/settings">
+              <Button variant="outline" className="w-full">Open Settings</Button>
+            </Link>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <CreditCard className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Billing</h3>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              View your subscription and payment information
+            </p>
+            <Link href="/billing">
+              <Button variant="outline" className="w-full">View Billing</Button>
+            </Link>
+          </Card>
+        </div>
+
+        {/* Recent Activity */}
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Recent Activity</h3>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
+              <div className="flex items-center">
+                <div className="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
+                <span className="text-gray-900 dark:text-white">Account created</span>
+              </div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">2 days ago</span>
+            </div>
+            <div className="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
+              <div className="flex items-center">
+                <div className="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
+                <span className="text-gray-900 dark:text-white">Profile updated</span>
+              </div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">1 week ago</span>
+            </div>
+            <div className="flex items-center justify-between py-3">
+              <div className="flex items-center">
+                <div className="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
+                <span className="text-gray-900 dark:text-white">Subscription started</span>
+              </div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">2 weeks ago</span>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+    </DashboardLayout>
+  )
+}