@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

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

@@ -1,193 +1,107 @@
-'use client'
-
-import { useState } from 'react'
-import { useAuth } from '@/hooks/useAuth'
-import { LoginForm } from '@/components/auth/login-form'
-import { Button } from '@/components/ui/button'
-{{#ai.enabled}}
-import { ChatPanel } from '@digilogiclabs/saas-factory-ai/react'
-{{#ai.hasAudio}}
-import { AudioGenerator } from '@/components/ai/audio-generator'
-{{/ai.hasAudio}}
-{{#ai.hasVideo}}
-import { VideoGenerator } from '@/components/ai/video-generator'
-{{/ai.hasVideo}}
-{{/ai.enabled}}
-
-export default function HomePage() {
-  const { user, signOut } = useAuth()
-  {{#ai.enabled}}
-  const [activeTab, setActiveTab] = useState<'chat' | 'audio' | 'video'>('chat')
-  {{/ai.enabled}}
-
-  if (!user) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
-        <div className="max-w-md w-full space-y-8">
-          <div className="text-center">
-            <h2 className="text-3xl font-extrabold text-gray-900">
-              Welcome to {{titleCaseName}}
-            </h2>
-            {{#ai.enabled}}
-            <p className="mt-2 text-sm text-gray-600">
-              AI-powered SaaS application with {{ai.capabilities.join(', ')}} capabilities
-            </p>
-            {{/ai.enabled}}
-            {{^ai.enabled}}
-            <p className="mt-2 text-sm text-gray-600">
-              Your modern SaaS application
-            </p>
-            {{/ai.enabled}}
-          </div>
-          <LoginForm />
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <header className="bg-white shadow">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center py-6">
-            <div className="flex items-center">
-              <h1 className="text-3xl font-bold text-gray-900">
-                {{titleCaseName}}
-              </h1>
-              {{#ai.enabled}}
-              <span className="ml-3 px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
-                AI-Powered
-              </span>
-              {{/ai.enabled}}
-            </div>
-            <div className="flex items-center space-x-4">
-              <span className="text-sm text-gray-700">
-                Welcome, {user.email}
-              </span>
-              <Button onClick={() => signOut()}>
-                Sign Out
-              </Button>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-        {{#ai.enabled}}
-        {/* AI Capabilities Navigation */}
-        <div className="px-4 py-6 sm:px-0">
-          <div className="border-b border-gray-200">
-            <nav className="-mb-px flex space-x-8">
-              {{#ai.hasText}}
-              <button
-                onClick={() => setActiveTab('chat')}
-                className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                  activeTab === 'chat'
-                    ? 'border-blue-500 text-blue-600'
-                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-                }`}
-              >
-                💬 AI Chat
-              </button>
-              {{/ai.hasText}}
-              {{#ai.hasAudio}}
-              <button
-                onClick={() => setActiveTab('audio')}
-                className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                  activeTab === 'audio'
-                    ? 'border-blue-500 text-blue-600'
-                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-                }`}
-              >
-                🎵 Audio Generation
-              </button>
-              {{/ai.hasAudio}}
-              {{#ai.hasVideo}}
-              <button
-                onClick={() => setActiveTab('video')}
-                className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                  activeTab === 'video'
-                    ? 'border-blue-500 text-blue-600'
-                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-                }`}
-              >
-                🎥 Video Generation
-              </button>
-              {{/ai.hasVideo}}
-            </nav>
-          </div>
-        </div>
-
-        {/* AI Content */}
-        <div className="px-4 py-6 sm:px-0">
-          {{#ai.hasText}}
-          {activeTab === 'chat' && (
-            <div className="bg-white shadow rounded-lg">
-              <div className="px-4 py-5 sm:p-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
-                  AI Assistant powered by {{ai.provider}}
-                </h3>
-                <ChatPanel 
-                  className="h-96"
-                  placeholder="Ask me anything..."
-                  onError={(error) => console.error('Chat error:', error)}
-                />
-              </div>
-            </div>
-          )}
-          {{/ai.hasText}}
-          
-          {{#ai.hasAudio}}
-          {activeTab === 'audio' && (
-            <div className="bg-white shadow rounded-lg">
-              <div className="px-4 py-5 sm:p-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
-                  AI Audio Generation
-                </h3>
-                <AudioGenerator />
-              </div>
-            </div>
-          )}
-          {{/ai.hasAudio}}
-          
-          {{#ai.hasVideo}}
-          {activeTab === 'video' && (
-            <div className="bg-white shadow rounded-lg">
-              <div className="px-4 py-5 sm:p-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
-                  AI Video Generation
-                </h3>
-                <VideoGenerator />
-              </div>
-            </div>
-          )}
-          {{/ai.hasVideo}}
-        </div>
-        {{/ai.enabled}}
-        
-        {{^ai.enabled}}
-        {/* Non-AI Content */}
-        <div className="px-4 py-6 sm:px-0">
-          <div className="bg-white shadow rounded-lg">
-            <div className="px-4 py-5 sm:p-6">
-              <h3 className="text-lg leading-6 font-medium text-gray-900">
-                Welcome to your SaaS application
-              </h3>
-              <p className="mt-1 text-sm text-gray-600">
-                This is your dashboard. Start building your application features here.
-              </p>
-              <div className="mt-5">
-                <Button>
-                  Get Started
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-        {{/ai.enabled}}
-      </main>
-    </div>
-  )
-}
+'use client'
+
+import Link from 'next/link'
+import { useMockAuth } from '@/components/mock-auth-provider'
+import { MOCK_MODE, MOCK_STATS, MOCK_RECENT_ACTIVITY } from '@/lib/mock'
+
+export default function HomePage() {
+  const { isAuthenticated } = useMockAuth()
+
+  if (isAuthenticated) {
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        <h1 className="text-3xl font-bold text-foreground mb-2">Dashboard</h1>
+        <p className="text-muted-foreground mb-8">Welcome back to your AI-powered workspace.</p>
+
+        {/* Stats */}
+        {MOCK_MODE && (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-8">
+            {MOCK_STATS.map((stat) => (
+              <div key={stat.label} className="rounded-lg border border-border bg-card p-6">
+                <p className="text-sm text-muted-foreground">{stat.label}</p>
+                <p className="text-2xl font-bold text-foreground">{stat.value}</p>
+                <p className="text-xs text-muted-foreground mt-1">{stat.change}</p>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Recent Activity */}
+        {MOCK_MODE && (
+          <div className="rounded-lg border border-border bg-card">
+            <div className="border-b border-border px-6 py-4">
+              <h2 className="text-lg font-semibold text-foreground">Recent Activity</h2>
+            </div>
+            <div className="divide-y divide-border">
+              {MOCK_RECENT_ACTIVITY.map((item, i) => (
+                <div key={i} className="flex items-center justify-between px-6 py-4">
+                  <div>
+                    <p className="text-sm font-medium text-foreground">{item.action}</p>
+                    <p className="text-xs text-muted-foreground">{item.detail}</p>
+                  </div>
+                  <span className="text-xs text-muted-foreground">{item.time}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {!MOCK_MODE && (
+          <div className="rounded-lg border border-border bg-card p-8 text-center">
+            <p className="text-muted-foreground">Connect your data source to see real activity here.</p>
+            <p className="text-xs text-muted-foreground mt-2">Search for TODO: [REAL_DATA] to find integration points.</p>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col">
+      {/* Hero */}
+      <section className="flex flex-col items-center justify-center px-4 py-20 text-center">
+        <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl">
+          AI-Powered SaaS
+          <span className="block text-primary mt-2">Built for Speed</span>
+        </h1>
+        <p className="mt-6 max-w-2xl text-lg text-muted-foreground">
+          {'{{titleCaseName}}'} combines intelligent AI capabilities with a modern platform
+          to help you build, ship, and scale faster than ever.
+        </p>
+        <div className="mt-8 flex gap-4">
+          <Link
+            href="/signup"
+            className="rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            Get Started
+          </Link>
+          <Link
+            href="/login"
+            className="rounded-md border border-border px-6 py-3 text-sm font-medium text-foreground hover:bg-muted transition-colors"
+          >
+            Sign In
+          </Link>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="border-t border-border bg-muted/50 px-4 py-16">
+        <div className="mx-auto max-w-6xl">
+          <h2 className="text-center text-2xl font-bold text-foreground mb-12">Features</h2>
+          <div className="grid gap-8 md:grid-cols-3">
+            {[
+              { title: 'AI Integration', desc: 'Built-in AI capabilities with provider abstraction for text, audio, and video generation.' },
+              { title: 'Authentication', desc: 'Secure user authentication with session management and protected routes.' },
+              { title: 'Modern Stack', desc: 'Next.js 15, React 19, Tailwind CSS 4, and TypeScript — optimized for developer experience.' },
+            ].map((f) => (
+              <div key={f.title} className="rounded-lg border border-border bg-card p-6">
+                <h3 className="text-lg font-semibold text-foreground mb-2">{f.title}</h3>
+                <p className="text-sm text-muted-foreground">{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/dist/templates/web/ui-auth-ai/template/src/app/signup/page.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+export default function SignupPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      // TODO: Replace with your auth provider (Supabase, NextAuth, etc.)
+      // Example with Supabase:
+      // const { error } = await supabase.auth.signUp({ email, password });
+      // if (error) throw error;
+      console.log('Sign up with:', email);
+      router.push('/');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred during sign up');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-muted">
+      <Card className="w-full max-w-md p-8">
+        <h1 className="text-2xl font-bold text-center mb-6 text-foreground">Sign Up</h1>
+
+        {error && (
+          <div className="mb-4 p-3 rounded border border-destructive/50 bg-destructive/10 text-destructive text-sm">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSignup} className="space-y-4">
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+              disabled={loading}
+            />
+          </div>
+          <div>
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+              disabled={loading}
+            />
+          </div>
+          <div>
+            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <Input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Confirm your password"
+              required
+              disabled={loading}
+            />
+          </div>
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Signing Up...' : 'Sign Up'}
+          </Button>
+        </form>
+
+        <div className="mt-4 text-center">
+          <p className="text-sm text-muted-foreground">
+            Already have an account?{' '}
+            <Link href="/login" className="text-primary hover:underline">
+              Sign in
+            </Link>
+          </p>
+        </div>
+      </Card>
+    </div>
+  );
+}