@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

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

@@ -2,63 +2,50 @@
 
 import React, { useState } from 'react';
 import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
-import { useAuth } from '@digilogiclabs/app-sdk';
 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 { signUp, signInWithOAuth, loading, error, user } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const router = useRouter();
 
-  // Redirect if already logged in
-  React.useEffect(() => {
-    if (user) {
-      router.push('/');
-    }
-  }, [user, router]);
-
   const handleSignup = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+    setLoading(true);
+    setError(null);
+
     if (password !== confirmPassword) {
-      alert('Passwords do not match');
+      setError('Passwords do not match');
+      setLoading(false);
       return;
     }
 
     try {
-      await signUp(email, password);
+      // 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) {
-      console.error('Signup error:', err);
+      setError(err instanceof Error ? err.message : 'An error occurred during sign up');
+    } finally {
+      setLoading(false);
     }
   };
 
-  const handleGoogleSignup = async () => {
-    try {
-      await signInWithOAuth('google');
-    } catch (err) {
-      console.error('Google signup error:', err);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-100">
-        <div>Loading...</div>
-      </div>
-    );
-  }
-
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+    <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">Sign Up</h1>
-        
+        <h1 className="text-2xl font-bold text-center mb-6 text-foreground">Sign Up</h1>
+
         {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
+          <div className="mb-4 p-3 rounded border border-destructive/50 bg-destructive/10 text-destructive text-sm">
+            {error}
           </div>
         )}
 
@@ -102,27 +89,17 @@ export default function SignupPage() {
           <Button type="submit" className="w-full" disabled={loading}>
             {loading ? 'Signing Up...' : 'Sign Up'}
           </Button>
-          <Button 
-            type="button" 
-            variant="outline" 
-            className="w-full"
-            onClick={handleGoogleSignup}
-            disabled={loading}
-          >
-            Sign up with Google
-          </Button>
         </form>
 
         <div className="mt-4 text-center">
-          <p className="text-sm text-gray-600">
+          <p className="text-sm text-muted-foreground">
             Already have an account?{' '}
-            <a href="/login" className="text-blue-600 hover:underline">
+            <Link href="/login" className="text-primary hover:underline">
               Sign in
-            </a>
+            </Link>
           </p>
         </div>
       </Card>
     </div>
   );
 }
-

package/dist/templates/web/ui-auth/template/src/components/providers/app-providers.tsx

@@ -2,7 +2,12 @@
 
 import { ThemeProvider } from 'next-themes'
 import { Toaster } from '@digilogiclabs/saas-factory-ui'
-import { DLLProvider } from '@digilogiclabs/app-sdk'
+import { MockAuthProvider } from '@/components/mock-auth-provider'
+
+// TODO: [REAL_DATA] Replace MockAuthProvider with your auth provider:
+//   Supabase:  import { AuthProvider } from '@/providers/auth-provider'
+//   NextAuth:  import { SessionProvider } from 'next-auth/react'
+//   Keycloak:  import { KeycloakProvider } from '@/providers/keycloak'
 
 interface AppProvidersProps {
   children: React.ReactNode
@@ -11,10 +16,10 @@ interface AppProvidersProps {
 export function AppProviders({ children }: AppProvidersProps) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-      <DLLProvider>
+      <MockAuthProvider>
         {children}
         <Toaster />
-      </DLLProvider>
+      </MockAuthProvider>
     </ThemeProvider>
   )
 }

package/dist/templates/web/ui-auth/template/src/components/shared/header.tsx

@@ -1,94 +1,229 @@
-'use client';
-
-import React, { useState } from 'react';
-import Link from 'next/link';
-import { LogOut, Search, Command } from 'lucide-react';
-import { SearchBar, CommandPalette, useToast } from '@digilogiclabs/saas-factory-ui';
-import { ThemeToggle } from '../ui/theme-toggle';
-
-export function Header() {
-  const user = null; // Placeholder for auth state
-  const [showSearch, setShowSearch] = useState(false);
-  const { toast } = useToast();
-  
-  const handleSignOut = () => {
-    alert('Sign out functionality requires @digilogiclabs/saas-factory-auth package');
-  };
-
-  const handleSearch = (query: string) => {
-    toast({
-      title: "Search",
-      description: `Searching for: ${query}`,
-    });
-  };
-
-  return (
-    <header className="bg-white dark:bg-gray-800 shadow-md">
-      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-        <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
-          {{titleCaseName}}
-        </Link>
-        <nav className="flex items-center gap-4">
-          {/* Search Bar */}
-          <div className="hidden md:block">
-            <SearchBar
-              placeholder="Search..."
-              onSearch={handleSearch}
-              debounceMs={300}
-              className="w-64"
-            />
-          </div>
-          
-          {/* Mobile search toggle */}
-          <button
-            onClick={() => setShowSearch(!showSearch)}
-            className="md:hidden p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
-          >
-            <Search className="h-5 w-5" />
-          </button>
-
-          <CommandPalette />
-          <ThemeToggle />
-          {user ? (
-            <>
-              <Link href="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                Dashboard
-              </Link>
-              <button 
-                onClick={handleSignOut}
-                className="p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
-              >
-                <LogOut className="h-5 w-5" />
-              </button>
-            </>
-          ) : (
-            <>
-              <Link href="/login" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                Login
-              </Link>
-              <Link 
-                href="/signup"
-                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-              >
-                Sign Up
-              </Link>
-            </>
-          )}
-        </nav>
-        
-        {/* Mobile search bar */}
-        {showSearch && (
-          <div className="md:hidden absolute top-full left-0 right-0 p-4 bg-white dark:bg-gray-800 border-t">
-            <SearchBar
-              placeholder="Search..."
-              onSearch={handleSearch}
-              debounceMs={300}
-              autoFocus
-            />
-          </div>
-        )}
-      </div>
-    </header>
-  );
-}
-
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+import { useMockAuth } from '@/components/mock-auth-provider';
+import { MOCK_MODE } from '@/lib/mock';
+import {
+  User, LogOut, ChevronDown, Menu, X, MoreHorizontal,
+  LayoutDashboard, Settings, CreditCard,
+} from 'lucide-react';
+
+/**
+ * Navigation links config.
+ * - `auth`: if true, only shown when user is authenticated
+ * - Links are shown in order; on desktop, the first MAX_DESKTOP_NAV
+ *   are in the top bar and extras overflow into the user dropdown.
+ */
+const NAV_LINKS = [
+  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard, auth: true },
+  { href: '/settings', label: 'Settings', icon: Settings, auth: true },
+  { href: '/checkout', label: 'Billing', icon: CreditCard, auth: true },
+  // Add more links here — extras automatically overflow to dropdown/mobile
+];
+
+/** Max nav links shown in the desktop top bar before overflow */
+const MAX_DESKTOP_NAV = 3;
+
+export function Header() {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const { user, signOut, isAuthenticated } = useMockAuth();
+  const pathname = usePathname();
+
+  const handleSignOut = () => {
+    signOut();
+    setDropdownOpen(false);
+    setMobileOpen(false);
+  };
+
+  // Filter links based on auth state
+  const visibleLinks = NAV_LINKS.filter((link) => !link.auth || isAuthenticated);
+  const desktopLinks = visibleLinks.slice(0, MAX_DESKTOP_NAV);
+  const overflowLinks = visibleLinks.slice(MAX_DESKTOP_NAV);
+
+  const isActive = (href: string) =>
+    pathname === href || (href !== '/' && pathname.startsWith(href));
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="mx-auto flex h-14 max-w-6xl items-center px-4">
+        {/* Logo — left */}
+        <Link href="/" className="mr-auto text-lg font-bold text-foreground">
+          {'{{titleCaseName}}'}
+        </Link>
+
+        {/* ═══ Desktop (md+) ═══ */}
+        <div className="hidden items-center gap-1 md:flex">
+          {/* Primary nav links */}
+          {desktopLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={`rounded-md px-3 py-2 text-sm transition-colors ${
+                isActive(link.href)
+                  ? 'bg-primary/10 text-primary font-medium'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+              }`}
+            >
+              {link.label}
+            </Link>
+          ))}
+
+          <div className="ml-2 flex items-center gap-2">
+            <ThemeToggle />
+
+            {isAuthenticated && user ? (
+              <div className="relative">
+                <button
+                  onClick={() => setDropdownOpen(!dropdownOpen)}
+                  className="flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-1.5 text-sm hover:bg-muted transition-colors"
+                >
+                  <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10">
+                    <User className="h-3.5 w-3.5 text-primary" />
+                  </div>
+                  <span className="text-foreground">{user.name}</span>
+                  {MOCK_MODE && (
+                    <span className="rounded bg-primary/10 px-1 py-0.5 text-[10px] text-primary font-medium">Mock</span>
+                  )}
+                  <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
+                </button>
+
+                {dropdownOpen && (
+                  <>
+                    <div className="fixed inset-0 z-40" onClick={() => setDropdownOpen(false)} />
+                    <div className="absolute right-0 top-full z-50 mt-1 w-56 rounded-lg border border-border bg-card shadow-lg">
+                      {/* User info */}
+                      <div className="border-b border-border px-4 py-3">
+                        <p className="text-sm font-medium text-foreground">{user.name}</p>
+                        <p className="text-xs text-muted-foreground">{user.email}</p>
+                      </div>
+
+                      {/* Overflow nav links (4th+ links go here) */}
+                      {overflowLinks.length > 0 && (
+                        <div className="border-b border-border py-1">
+                          {overflowLinks.map((link) => (
+                            <Link
+                              key={link.href}
+                              href={link.href}
+                              onClick={() => setDropdownOpen(false)}
+                              className={`flex items-center gap-2 px-4 py-2 text-sm transition-colors ${
+                                isActive(link.href)
+                                  ? 'text-primary bg-primary/5'
+                                  : 'text-foreground hover:bg-muted'
+                              }`}
+                            >
+                              <link.icon className="h-4 w-4 text-muted-foreground" />
+                              {link.label}
+                            </Link>
+                          ))}
+                        </div>
+                      )}
+
+                      {/* Sign out */}
+                      <div className="py-1">
+                        <button
+                          onClick={handleSignOut}
+                          className="flex w-full items-center gap-2 px-4 py-2 text-sm text-destructive hover:bg-muted transition-colors"
+                        >
+                          <LogOut className="h-4 w-4" /> Sign Out
+                        </button>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            ) : (
+              <>
+                <Link href="/login" className="rounded-md px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors">
+                  Sign In
+                </Link>
+                <Link href="/signup" className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+                  Sign Up
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* ═══ Mobile (<md) ═══ */}
+        <div className="flex items-center gap-2 md:hidden">
+          <ThemeToggle />
+          <button
+            className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-muted"
+            onClick={() => { setMobileOpen(!mobileOpen); setDropdownOpen(false); }}
+            aria-label="Toggle menu"
+          >
+            {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+        </div>
+      </div>
+
+      {/* ═══ Mobile overlay panel ═══ */}
+      {mobileOpen && (
+        <>
+          <div className="fixed inset-0 top-14 z-40 bg-background/80 backdrop-blur-sm md:hidden" onClick={() => setMobileOpen(false)} />
+          <div className="fixed inset-x-0 top-14 z-50 border-b border-border bg-background shadow-lg md:hidden">
+            {/* Nav links — filtered by auth */}
+            {visibleLinks.length > 0 && (
+              <nav className="px-4 py-2">
+                {visibleLinks.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    onClick={() => setMobileOpen(false)}
+                    className={`flex items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors ${
+                      isActive(link.href)
+                        ? 'bg-primary/10 text-primary font-medium'
+                        : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                    }`}
+                  >
+                    <link.icon className="h-4 w-4" />
+                    {link.label}
+                  </Link>
+                ))}
+              </nav>
+            )}
+
+            {/* User section */}
+            <div className="border-t border-border px-4 py-3">
+              {isAuthenticated && user ? (
+                <>
+                  <div className="flex items-center gap-3 px-3 py-2">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
+                      <User className="h-4 w-4 text-primary" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-medium text-foreground truncate">{user.name}</p>
+                      <p className="text-xs text-muted-foreground truncate">{user.email}</p>
+                    </div>
+                    {MOCK_MODE && (
+                      <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary font-medium">Mock</span>
+                    )}
+                  </div>
+                  <button
+                    onClick={handleSignOut}
+                    className="mt-1 flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-destructive hover:bg-muted transition-colors"
+                  >
+                    <LogOut className="h-4 w-4" /> Sign Out
+                  </button>
+                </>
+              ) : (
+                <div className="flex gap-2">
+                  <Link href="/login" onClick={() => setMobileOpen(false)} className="flex-1 text-center rounded-md border border-border px-3 py-2.5 text-sm text-foreground hover:bg-muted transition-colors">
+                    Sign In
+                  </Link>
+                  <Link href="/signup" onClick={() => setMobileOpen(false)} className="flex-1 text-center rounded-md bg-primary px-3 py-2.5 text-sm text-primary-foreground hover:bg-primary/90 transition-colors">
+                    Sign Up
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </header>
+  );
+}

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

@@ -1,45 +1,38 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import '@digilogiclabs/saas-factory-ui/dist/index.css'
-import './globals.css'
-{{#ai.enabled}}
-import { AIProvider } from '@digilogiclabs/saas-factory-ai/react'
-{{/ai.enabled}}
-import { AuthProvider } from '@/providers/auth-provider'
-
-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">
-      <body className={inter.className}>
-        <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>
-        <AuthProvider>
-          {{#ai.enabled}}
-          <AIProvider 
-            config={{
-              gatewayUrl: process.env.NEXT_PUBLIC_AI_GATEWAY_URL || 'http://localhost:3001',
-            }}
-          >
-            {children}
-          </AIProvider>
-          {{/ai.enabled}}
-          {{^ai.enabled}}
-          {children}
-          {{/ai.enabled}}
-        </AuthProvider>
-      </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 { MockBanner } from '@/components/mock-banner'
+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} min-h-screen flex flex-col`}>
+        <AppProviders>
+          <MockBanner />
+          <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 />
+        </AppProviders>
+      </body>
+    </html>
+  )
+}

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

@@ -0,0 +1,86 @@
+'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 LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      // TODO: Replace with your auth provider (Supabase, NextAuth, etc.)
+      // Example with Supabase:
+      // const { error } = await supabase.auth.signInWithPassword({ email, password });
+      // if (error) throw error;
+      console.log('Sign in with:', email);
+      router.push('/');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred during sign in');
+    } 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 In</h1>
+
+        {error && (
+          <div className="mb-4 p-3 rounded border border-destructive/50 bg-destructive/10 text-destructive text-sm">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleLogin} 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>
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Signing In...' : 'Sign In'}
+          </Button>
+        </form>
+
+        <div className="mt-4 text-center">
+          <p className="text-sm text-muted-foreground">
+            Don&apos;t have an account?{' '}
+            <Link href="/signup" className="text-primary hover:underline">
+              Sign up
+            </Link>
+          </p>
+        </div>
+      </Card>
+    </div>
+  );
+}