@digilogiclabs/create-saas-app 2.9.1 → 2.10.0

package/dist/templates/web/marketplace/template/src/app/dashboard/page.tsx

@@ -1,149 +1,149 @@
-import { Suspense } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { Package, DollarSign, ShoppingBag, TrendingUp, Plus } from 'lucide-react'
-import { requireAuth } from '@/lib/auth-server'
-import Link from 'next/link'
-
-async function getSellerStats(userId: string) {
-  await new Promise(resolve => setTimeout(resolve, 100))
-  return {
-    totalProducts: 12,
-    totalSales: 45,
-    revenue: 2340.50,
-    views: 1520,
-  }
-}
-
-function StatCard({ title, value, icon: Icon, trend }: {
-  title: string
-  value: string | number
-  icon: React.ComponentType<{ className?: string }>
-  trend?: string
-}) {
-  return (
-    <Card className="p-6">
-      <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>
-          {trend && <p className="text-sm text-green-600 mt-1">{trend}</p>}
-        </div>
-        <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
-          <Icon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-        </div>
-      </div>
-    </Card>
-  )
-}
-
-async function SellerStats({ userId }: { userId: string }) {
-  const stats = await getSellerStats(userId)
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-      <StatCard title="Total Products" value={stats.totalProducts} icon={Package} />
-      <StatCard title="Total Sales" value={stats.totalSales} icon={ShoppingBag} trend="+12% this week" />
-      <StatCard title="Revenue" value={`$${stats.revenue.toFixed(2)}`} icon={DollarSign} trend="+8% this month" />
-      <StatCard title="Product Views" value={stats.views.toLocaleString()} icon={TrendingUp} />
-    </div>
-  )
-}
-
-function StatsSkeleton() {
-  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() {
-  const user = await requireAuth()
-
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-7xl mx-auto px-4 py-8">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-              Seller Dashboard
-            </h1>
-            <p className="text-gray-600 dark:text-gray-300 mt-1">
-              Welcome back, {user.name || user.email}
-            </p>
-          </div>
-          <Link href="/products/new">
-            <Button>
-              <Plus className="w-4 h-4 mr-2" />
-              Add Product
-            </Button>
-          </Link>
-        </div>
-
-        {/* Stats */}
-        <Suspense fallback={<StatsSkeleton />}>
-          <SellerStats userId={user.id} />
-        </Suspense>
-
-        {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-          <Card className="p-6">
-            <div className="flex items-center mb-4">
-              <Package className="h-6 w-6 text-blue-600 mr-3" />
-              <h3 className="text-lg font-semibold">My Products</h3>
-            </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              Manage your product listings and inventory.
-            </p>
-            <Link href="/products/manage">
-              <Button className="w-full">View Products</Button>
-            </Link>
-          </Card>
-
-          <Card className="p-6">
-            <div className="flex items-center mb-4">
-              <ShoppingBag className="h-6 w-6 text-blue-600 mr-3" />
-              <h3 className="text-lg font-semibold">Orders</h3>
-            </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              View and manage customer orders.
-            </p>
-            <Link href="/orders">
-              <Button variant="outline" className="w-full">View Orders</Button>
-            </Link>
-          </Card>
-
-          <Card className="p-6">
-            <div className="flex items-center mb-4">
-              <DollarSign className="h-6 w-6 text-blue-600 mr-3" />
-              <h3 className="text-lg font-semibold">Payouts</h3>
-            </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              View earnings and payout history.
-            </p>
-            <Link href="/payouts">
-              <Button variant="outline" className="w-full">View Payouts</Button>
-            </Link>
-          </Card>
-        </div>
-
-        {/* Recent Orders */}
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4">Recent Orders</h3>
-          <div className="text-center py-8 text-gray-500">
-            <ShoppingBag className="w-12 h-12 mx-auto mb-4 opacity-50" />
-            <p>No orders yet. Share your products to start selling!</p>
-          </div>
-        </Card>
-      </div>
-    </div>
-  )
-}
+import { Suspense } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Package, DollarSign, ShoppingBag, TrendingUp, Plus } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+import Link from 'next/link'
+
+async function getSellerStats(userId: string) {
+  await new Promise(resolve => setTimeout(resolve, 100))
+  return {
+    totalProducts: 12,
+    totalSales: 45,
+    revenue: 2340.50,
+    views: 1520,
+  }
+}
+
+function StatCard({ title, value, icon: Icon, trend }: {
+  title: string
+  value: string | number
+  icon: React.ComponentType<{ className?: string }>
+  trend?: string
+}) {
+  return (
+    <Card className="p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <p className="text-2xl font-bold text-foreground">{value}</p>
+          {trend && <p className="text-sm text-green-600 mt-1">{trend}</p>}
+        </div>
+        <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+          <Icon className="h-6 w-6 text-primary" />
+        </div>
+      </div>
+    </Card>
+  )
+}
+
+async function SellerStats({ userId }: { userId: string }) {
+  const stats = await getSellerStats(userId)
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      <StatCard title="Total Products" value={stats.totalProducts} icon={Package} />
+      <StatCard title="Total Sales" value={stats.totalSales} icon={ShoppingBag} trend="+12% this week" />
+      <StatCard title="Revenue" value={`$${stats.revenue.toFixed(2)}`} icon={DollarSign} trend="+8% this month" />
+      <StatCard title="Product Views" value={stats.views.toLocaleString()} icon={TrendingUp} />
+    </div>
+  )
+}
+
+function StatsSkeleton() {
+  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-muted rounded w-1/2 mb-2"></div>
+            <div className="h-8 bg-muted rounded w-1/3"></div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export default async function DashboardPage() {
+  const user = await requireAuth()
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-foreground">
+              Seller Dashboard
+            </h1>
+            <p className="text-muted-foreground mt-1">
+              Welcome back, {user.name || user.email}
+            </p>
+          </div>
+          <Link href="/products/new">
+            <Button>
+              <Plus className="w-4 h-4 mr-2" />
+              Add Product
+            </Button>
+          </Link>
+        </div>
+
+        {/* Stats */}
+        <Suspense fallback={<StatsSkeleton />}>
+          <SellerStats userId={user.id} />
+        </Suspense>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <Package className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold">My Products</h3>
+            </div>
+            <p className="text-muted-foreground mb-4">
+              Manage your product listings and inventory.
+            </p>
+            <Link href="/products/manage">
+              <Button className="w-full">View Products</Button>
+            </Link>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <ShoppingBag className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold">Orders</h3>
+            </div>
+            <p className="text-muted-foreground mb-4">
+              View and manage customer orders.
+            </p>
+            <Link href="/orders">
+              <Button variant="outline" className="w-full">View Orders</Button>
+            </Link>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <DollarSign className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold">Payouts</h3>
+            </div>
+            <p className="text-muted-foreground mb-4">
+              View earnings and payout history.
+            </p>
+            <Link href="/payouts">
+              <Button variant="outline" className="w-full">View Payouts</Button>
+            </Link>
+          </Card>
+        </div>
+
+        {/* Recent Orders */}
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold mb-4">Recent Orders</h3>
+          <div className="text-center py-8 text-muted-foreground">
+            <ShoppingBag className="w-12 h-12 mx-auto mb-4 opacity-50" />
+            <p>No orders yet. Share your products to start selling!</p>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/marketplace/template/src/app/error.tsx

@@ -16,27 +16,27 @@ export default function Error({ error, reset }: ErrorProps) {
   }, [error])
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
       <Card className="p-8 max-w-lg w-full">
         <div className="flex flex-col items-center space-y-6 text-center">
-          <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
-            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          <div className="w-16 h-16 bg-destructive/10 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-destructive" />
           </div>
 
           <div>
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+            <h1 className="text-2xl font-bold text-foreground mb-2">
               Something went wrong!
             </h1>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-muted-foreground mb-4">
               We encountered an unexpected error. This has been logged and our team will look into it.
             </p>
 
             {process.env.NODE_ENV === 'development' && (
               <details className="mt-4 text-left">
-                <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground">
                   Error details (development only)
                 </summary>
-                <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-700 dark:text-gray-300 overflow-auto max-h-40">
+                <div className="mt-2 p-3 bg-muted rounded text-xs font-mono text-muted-foreground overflow-auto max-h-40">
                   <div className="mb-2">
                     <strong>Message:</strong> {error.message}
                   </div>

package/dist/templates/web/marketplace/template/src/app/globals.css

@@ -1,20 +1,97 @@
-@import "tailwindcss";
-
-@theme {
-  --color-primary: oklch(24% 0.15 256);
-  --color-background: oklch(100% 0 0);
-  --color-foreground: oklch(10% 0 0);
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --radius: 0.5rem;
-}
-
-.dark {
-  --color-background: oklch(15% 0.02 256);
-  --color-foreground: oklch(95% 0 0);
-}
-
-body {
-  font-family: var(--font-sans);
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-}
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+
+  --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-brand-from: hsl(var(--brand-from));
+  --color-brand-via: hsl(var(--brand-via));
+  --color-brand-to: hsl(var(--brand-to));
+}
+
+:root {
+  --brand-from: 221.2 83.2% 53.3%;
+  --brand-via: 232 75% 55%;
+  --brand-to: 243 75% 59%;
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+}
+
+.dark {
+  --brand-from: 217.2 91.2% 59.8%;
+  --brand-via: 232 85% 65%;
+  --brand-to: 243 85% 69%;
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 84% 4.9%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 48%;
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    font-family: var(--font-sans);
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}

package/dist/templates/web/marketplace/template/src/app/layout.tsx

@@ -19,6 +19,9 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <AppProviders>
+          <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>
           {children}
         </AppProviders>
       </body>

package/dist/templates/web/marketplace/template/src/app/loading.tsx

@@ -2,9 +2,9 @@ import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui
 
 export default function Loading() {
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="min-h-screen bg-background">
       {/* Header skeleton */}
-      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-4">
+      <div className="bg-card border-b border-border px-4 py-4">
         <div className="max-w-7xl mx-auto flex items-center justify-between">
           <SkeletonText className="h-8 w-48" />
           <SkeletonText className="h-10 w-64" />
@@ -44,10 +44,10 @@ export default function Loading() {
           <Card className="p-6">
             <div className="flex items-center gap-3">
               <div className="relative">
-                <div className="w-8 h-8 border-4 border-gray-200 dark:border-gray-700 rounded-full"></div>
-                <div className="absolute top-0 left-0 w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+                <div className="w-8 h-8 border-4 border-border rounded-full"></div>
+                <div className="absolute top-0 left-0 w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
               </div>
-              <p className="text-sm text-gray-600 dark:text-gray-300">Loading marketplace...</p>
+              <p className="text-sm text-muted-foreground">Loading marketplace...</p>
             </div>
           </Card>
         </div>