@digilogiclabs/create-saas-app 2.9.0 → 2.10.0

package/dist/templates/web/ai-platform/template/src/app/dashboard/page.tsx

@@ -1,142 +1,142 @@
-import { Suspense } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { MessageSquare, Zap, Key, CreditCard, BarChart, Settings } from 'lucide-react'
-import { requireAuth } from '@/lib/auth-server'
-import Link from 'next/link'
-
-async function getUsageStats(userId: string) {
-  await new Promise(resolve => setTimeout(resolve, 100))
-  return {
-    apiCalls: 1234,
-    tokensUsed: 45678,
-    modelsUsed: 3,
-    creditsRemaining: 850,
-  }
-}
-
-function StatCard({ title, value, icon: Icon, description }: {
-  title: string
-  value: string | number
-  icon: React.ComponentType<{ className?: string }>
-  description?: string
-}) {
-  return (
-    <Card className="p-6 bg-white/5 border-white/10">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm font-medium text-gray-400">{title}</p>
-          <p className="text-2xl font-bold text-white">{value}</p>
-          {description && <p className="text-xs text-gray-500 mt-1">{description}</p>}
-        </div>
-        <div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
-          <Icon className="h-6 w-6 text-purple-400" />
-        </div>
-      </div>
-    </Card>
-  )
-}
-
-async function UsageStats({ userId }: { userId: string }) {
-  const stats = await getUsageStats(userId)
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-      <StatCard title="API Calls" value={stats.apiCalls.toLocaleString()} icon={Zap} description="This month" />
-      <StatCard title="Tokens Used" value={`${(stats.tokensUsed / 1000).toFixed(1)}K`} icon={MessageSquare} description="This month" />
-      <StatCard title="Models Used" value={stats.modelsUsed} icon={BarChart} />
-      <StatCard title="Credits" value={stats.creditsRemaining} icon={CreditCard} description="Remaining" />
-    </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 bg-white/5 border-white/10">
-          <div className="animate-pulse">
-            <div className="h-4 bg-gray-700 rounded w-1/2 mb-2"></div>
-            <div className="h-8 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-slate-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-white">Dashboard</h1>
-            <p className="text-gray-400 mt-1">Welcome back, {user.name || user.email}</p>
-          </div>
-          <Link href="/chat">
-            <Button className="bg-purple-600 hover:bg-purple-700">
-              <MessageSquare className="w-4 h-4 mr-2" />
-              New Chat
-            </Button>
-          </Link>
-        </div>
-
-        {/* Stats */}
-        <Suspense fallback={<StatsSkeleton />}>
-          <UsageStats userId={user.id} />
-        </Suspense>
-
-        {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-          <Card className="p-6 bg-white/5 border-white/10">
-            <div className="flex items-center mb-4">
-              <Key className="h-6 w-6 text-purple-400 mr-3" />
-              <h3 className="text-lg font-semibold text-white">API Keys</h3>
-            </div>
-            <p className="text-gray-400 mb-4">
-              Manage your API keys for programmatic access.
-            </p>
-            <Button className="w-full" variant="outline">Manage Keys</Button>
-          </Card>
-
-          <Card className="p-6 bg-white/5 border-white/10">
-            <div className="flex items-center mb-4">
-              <CreditCard className="h-6 w-6 text-purple-400 mr-3" />
-              <h3 className="text-lg font-semibold text-white">Billing</h3>
-            </div>
-            <p className="text-gray-400 mb-4">
-              View usage and manage your subscription.
-            </p>
-            <Button className="w-full" variant="outline">View Billing</Button>
-          </Card>
-
-          <Card className="p-6 bg-white/5 border-white/10">
-            <div className="flex items-center mb-4">
-              <Settings className="h-6 w-6 text-purple-400 mr-3" />
-              <h3 className="text-lg font-semibold text-white">Settings</h3>
-            </div>
-            <p className="text-gray-400 mb-4">
-              Configure your account preferences.
-            </p>
-            <Button className="w-full" variant="outline">Open Settings</Button>
-          </Card>
-        </div>
-
-        {/* Recent Activity */}
-        <Card className="p-6 bg-white/5 border-white/10">
-          <h3 className="text-lg font-semibold text-white mb-4">Recent Conversations</h3>
-          <div className="text-center py-8 text-gray-500">
-            <MessageSquare className="w-12 h-12 mx-auto mb-4 opacity-50" />
-            <p>No recent conversations. Start a new chat!</p>
-            <Link href="/chat">
-              <Button className="mt-4 bg-purple-600 hover:bg-purple-700">Start Chatting</Button>
-            </Link>
-          </div>
-        </Card>
-      </div>
-    </div>
-  )
-}
+import { Suspense } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { MessageSquare, Zap, Key, CreditCard, BarChart, Settings } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+import Link from 'next/link'
+
+async function getUsageStats(userId: string) {
+  await new Promise(resolve => setTimeout(resolve, 100))
+  return {
+    apiCalls: 1234,
+    tokensUsed: 45678,
+    modelsUsed: 3,
+    creditsRemaining: 850,
+  }
+}
+
+function StatCard({ title, value, icon: Icon, description }: {
+  title: string
+  value: string | number
+  icon: React.ComponentType<{ className?: string }>
+  description?: string
+}) {
+  return (
+    <Card className="p-6 bg-secondary border-border">
+      <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>
+          {description && <p className="text-xs text-muted-foreground mt-1">{description}</p>}
+        </div>
+        <div className="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center">
+          <Icon className="h-6 w-6 text-primary" />
+        </div>
+      </div>
+    </Card>
+  )
+}
+
+async function UsageStats({ userId }: { userId: string }) {
+  const stats = await getUsageStats(userId)
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      <StatCard title="API Calls" value={stats.apiCalls.toLocaleString()} icon={Zap} description="This month" />
+      <StatCard title="Tokens Used" value={`${(stats.tokensUsed / 1000).toFixed(1)}K`} icon={MessageSquare} description="This month" />
+      <StatCard title="Models Used" value={stats.modelsUsed} icon={BarChart} />
+      <StatCard title="Credits" value={stats.creditsRemaining} icon={CreditCard} description="Remaining" />
+    </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 bg-secondary border-border">
+          <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">Dashboard</h1>
+            <p className="text-muted-foreground mt-1">Welcome back, {user.name || user.email}</p>
+          </div>
+          <Link href="/chat">
+            <Button>
+              <MessageSquare className="w-4 h-4 mr-2" />
+              New Chat
+            </Button>
+          </Link>
+        </div>
+
+        {/* Stats */}
+        <Suspense fallback={<StatsSkeleton />}>
+          <UsageStats userId={user.id} />
+        </Suspense>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <Card className="p-6 bg-secondary border-border">
+            <div className="flex items-center mb-4">
+              <Key className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold text-foreground">API Keys</h3>
+            </div>
+            <p className="text-muted-foreground mb-4">
+              Manage your API keys for programmatic access.
+            </p>
+            <Button className="w-full" variant="outline">Manage Keys</Button>
+          </Card>
+
+          <Card className="p-6 bg-secondary border-border">
+            <div className="flex items-center mb-4">
+              <CreditCard className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold text-foreground">Billing</h3>
+            </div>
+            <p className="text-muted-foreground mb-4">
+              View usage and manage your subscription.
+            </p>
+            <Button className="w-full" variant="outline">View Billing</Button>
+          </Card>
+
+          <Card className="p-6 bg-secondary border-border">
+            <div className="flex items-center mb-4">
+              <Settings className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold text-foreground">Settings</h3>
+            </div>
+            <p className="text-muted-foreground mb-4">
+              Configure your account preferences.
+            </p>
+            <Button className="w-full" variant="outline">Open Settings</Button>
+          </Card>
+        </div>
+
+        {/* Recent Activity */}
+        <Card className="p-6 bg-secondary border-border">
+          <h3 className="text-lg font-semibold text-foreground mb-4">Recent Conversations</h3>
+          <div className="text-center py-8 text-muted-foreground">
+            <MessageSquare className="w-12 h-12 mx-auto mb-4 opacity-50" />
+            <p>No recent conversations. Start a new chat!</p>
+            <Link href="/chat">
+              <Button className="mt-4">Start Chatting</Button>
+            </Link>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/ai-platform/template/src/app/error.tsx

@@ -16,38 +16,38 @@ export default function Error({ error, reset }: ErrorProps) {
   }, [error])
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center p-4">
-      <Card className="p-8 max-w-lg w-full bg-white/5 border-white/10 backdrop-blur-sm">
+    <div className="min-h-screen bg-gradient-to-br from-background via-primary/5 to-background flex items-center justify-center p-4">
+      <Card className="p-8 max-w-lg w-full bg-secondary border-border backdrop-blur-sm">
         <div className="flex flex-col items-center space-y-6 text-center">
-          <div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center">
-            <AlertTriangle className="w-8 h-8 text-red-400" />
+          <div className="w-16 h-16 bg-destructive/20 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-destructive" />
           </div>
 
           <div>
-            <h1 className="text-2xl font-bold text-white mb-2">
+            <h1 className="text-2xl font-bold text-foreground mb-2">
               Something went wrong!
             </h1>
-            <p className="text-gray-400 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-300">
+                <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground">
                   Error details (development only)
                 </summary>
-                <div className="mt-2 p-3 bg-black/30 rounded text-xs font-mono text-gray-400 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 className="text-gray-300">Message:</strong> {error.message}
+                    <strong className="text-foreground">Message:</strong> {error.message}
                   </div>
                   {error.digest && (
                     <div className="mb-2">
-                      <strong className="text-gray-300">Digest:</strong> {error.digest}
+                      <strong className="text-foreground">Digest:</strong> {error.digest}
                     </div>
                   )}
                   {error.stack && (
                     <div>
-                      <strong className="text-gray-300">Stack:</strong>
+                      <strong className="text-foreground">Stack:</strong>
                       <pre className="whitespace-pre-wrap mt-1">{error.stack}</pre>
                     </div>
                   )}
@@ -57,12 +57,12 @@ export default function Error({ error, reset }: ErrorProps) {
           </div>
 
           <div className="flex flex-col sm:flex-row gap-3 w-full">
-            <Button onClick={reset} className="flex-1 bg-purple-600 hover:bg-purple-700" size="lg">
+            <Button onClick={reset} className="flex-1" size="lg">
               <RefreshCw className="w-4 h-4 mr-2" />
               Try again
             </Button>
             <Link href="/" className="flex-1">
-              <Button variant="outline" className="w-full border-white/20 text-white hover:bg-white/10" size="lg">
+              <Button variant="outline" className="w-full" size="lg">
                 <Home className="w-4 h-4 mr-2" />
                 Go home
               </Button>

package/dist/templates/web/ai-platform/template/src/app/globals.css

@@ -1,34 +1,97 @@
-@import "tailwindcss";
-
-@theme {
-  --color-primary: oklch(60% 0.25 295);
-  --color-background: oklch(15% 0.02 256);
-  --color-foreground: oklch(95% 0 0);
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --radius: 0.5rem;
-}
-
-body {
-  font-family: var(--font-sans);
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-}
-
-/* Custom scrollbar for dark theme */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
+@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: 271 81% 56%;
+  --brand-via: 262 83% 58%;
+  --brand-to: 250 85% 60%;
+  --background: 0 0% 100%;
+  --foreground: 240 10% 4%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 4%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 4%;
+  --primary: 271 81% 56%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 5% 96%;
+  --secondary-foreground: 240 6% 10%;
+  --muted: 240 5% 96%;
+  --muted-foreground: 240 4% 46%;
+  --accent: 240 5% 96%;
+  --accent-foreground: 240 6% 10%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 240 6% 90%;
+  --input: 240 6% 90%;
+  --ring: 271 81% 56%;
+}
+
+.dark {
+  --brand-from: 271 91% 65%;
+  --brand-via: 262 90% 67%;
+  --brand-to: 250 90% 69%;
+  --background: 240 10% 4%;
+  --foreground: 0 0% 95%;
+  --card: 240 10% 6%;
+  --card-foreground: 0 0% 95%;
+  --popover: 240 10% 6%;
+  --popover-foreground: 0 0% 95%;
+  --primary: 271 91% 65%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 4% 16%;
+  --secondary-foreground: 0 0% 95%;
+  --muted: 240 4% 16%;
+  --muted-foreground: 240 5% 65%;
+  --accent: 240 4% 16%;
+  --accent-foreground: 0 0% 95%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 0 0% 95%;
+  --border: 240 4% 16%;
+  --input: 240 4% 16%;
+  --ring: 271 91% 65%;
+}
+
+@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/ai-platform/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/ai-platform/template/src/app/loading.tsx

@@ -2,19 +2,19 @@ import { Card, SkeletonText } from '@digilogiclabs/saas-factory-ui'
 
 export default function Loading() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+    <div className="min-h-screen bg-gradient-to-br from-background via-primary/5 to-background">
       {/* Header skeleton */}
-      <div className="border-b border-white/10 bg-black/20 backdrop-blur-sm px-4 py-4">
+      <div className="border-b border-border bg-card/50 backdrop-blur-sm px-4 py-4">
         <div className="max-w-7xl mx-auto flex items-center justify-between">
-          <SkeletonText className="h-8 w-48 bg-white/10" />
+          <SkeletonText className="h-8 w-48" />
           <div className="flex gap-6">
-            <SkeletonText className="h-4 w-16 bg-white/10" />
-            <SkeletonText className="h-4 w-20 bg-white/10" />
-            <SkeletonText className="h-4 w-12 bg-white/10" />
+            <SkeletonText className="h-4 w-16" />
+            <SkeletonText className="h-4 w-20" />
+            <SkeletonText className="h-4 w-12" />
           </div>
           <div className="flex gap-2">
-            <SkeletonText className="h-8 w-20 bg-white/10" />
-            <SkeletonText className="h-8 w-24 bg-white/10" />
+            <SkeletonText className="h-8 w-20" />
+            <SkeletonText className="h-8 w-24" />
           </div>
         </div>
       </div>
@@ -22,19 +22,19 @@ export default function Loading() {
       <div className="max-w-7xl mx-auto px-4 py-16">
         {/* Hero skeleton */}
         <div className="text-center mb-20">
-          <SkeletonText className="h-6 w-40 mx-auto mb-6 bg-purple-500/20" />
-          <SkeletonText className="h-16 w-80 mx-auto mb-6 bg-white/10" />
-          <SkeletonText className="h-6 w-96 mx-auto mb-8 bg-white/10" />
+          <SkeletonText className="h-6 w-40 mx-auto mb-6" />
+          <SkeletonText className="h-16 w-80 mx-auto mb-6" />
+          <SkeletonText className="h-6 w-96 mx-auto mb-8" />
         </div>
 
         {/* Feature cards skeleton */}
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
           {Array.from({ length: 4 }).map((_, i) => (
-            <Card key={i} className="p-6 bg-white/5 border-white/10">
+            <Card key={i} className="p-6 bg-secondary border-border">
               <div className="animate-pulse">
-                <SkeletonText className="h-12 w-12 mb-4 bg-white/10 rounded-lg" />
-                <SkeletonText className="h-5 w-24 mb-2 bg-white/10" />
-                <SkeletonText className="h-4 w-full bg-white/10" />
+                <SkeletonText className="h-12 w-12 mb-4 rounded-lg" />
+                <SkeletonText className="h-5 w-24 mb-2" />
+                <SkeletonText className="h-4 w-full" />
               </div>
             </Card>
           ))}
@@ -42,13 +42,13 @@ export default function Loading() {
 
         {/* Models skeleton */}
         <div className="mb-20">
-          <SkeletonText className="h-8 w-48 mb-8 bg-white/10" />
+          <SkeletonText className="h-8 w-48 mb-8" />
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
             {Array.from({ length: 4 }).map((_, i) => (
-              <Card key={i} className="p-4 bg-white/5 border-white/10">
+              <Card key={i} className="p-4 bg-secondary border-border">
                 <div className="animate-pulse">
-                  <SkeletonText className="h-5 w-20 mb-2 bg-white/10" />
-                  <SkeletonText className="h-4 w-16 bg-white/10" />
+                  <SkeletonText className="h-5 w-20 mb-2" />
+                  <SkeletonText className="h-4 w-16" />
                 </div>
               </Card>
             ))}
@@ -57,10 +57,10 @@ export default function Loading() {
 
         {/* Loading indicator */}
         <div className="flex justify-center">
-          <div className="flex items-center gap-3 text-gray-400">
+          <div className="flex items-center gap-3 text-muted-foreground">
             <div className="relative">
-              <div className="w-8 h-8 border-4 border-white/10 rounded-full"></div>
-              <div className="absolute top-0 left-0 w-8 h-8 border-4 border-purple-500 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">Loading AI platform...</p>
           </div>