@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

package/src/templates/web/ui-auth-ai/template/src/components/auth/login-form.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import { createClient } from '@/lib/supabase'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -12,13 +12,17 @@ export function LoginForm() {
   const [loading, setLoading] = useState(false)
   const [isSignUp, setIsSignUp] = useState(false)
   const [message, setMessage] = useState('')
-  const supabase = createClient()
+  const supabase = useMemo(() => {
+    try { return createClient() } catch { return null }
+  }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setLoading(true)
     setMessage('')
 
+    if (!supabase) { setMessage('Supabase not configured'); setLoading(false); return }
+
     try {
       if (isSignUp) {
         const { error } = await supabase.auth.signUp({
@@ -95,7 +99,7 @@ export function LoginForm() {
               setIsSignUp(!isSignUp)
               setMessage('')
             }}
-            className="text-sm text-blue-600 hover:text-blue-500"
+            className="text-sm text-primary hover:text-primary/80"
           >
             {isSignUp ? 'Already have an account? Sign in' : "Don't have an account? Sign up"}
           </button>

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

@@ -0,0 +1,25 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
+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
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      <MockAuthProvider>
+        {children}
+        <Toaster />
+      </MockAuthProvider>
+    </ThemeProvider>
+  )
+}

package/src/templates/web/ui-auth-ai/template/src/components/shared/footer.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react'
+
+interface FooterProps {
+  className?: string
+}
+
+export function Footer({ className = '' }: FooterProps) {
+  return (
+    <footer className={`border-t bg-background py-4 ${className}`}>
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <span>&copy; {new Date().getFullYear()} {{titleCaseName}}</span>
+          </div>
+
+          <div className="flex items-center gap-2 text-xs">
+            <span>Generated with</span>
+            <a
+              href="https://docs.digilogiclabs.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-foreground transition-colors"
+            >
+              Digi Logic Labs
+            </a>
+            <span className="text-muted-foreground/60">
+              • UI v{{uiVersion}} • Auth v{{authVersion}} • {{generatedDate}}
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

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

@@ -0,0 +1,228 @@
+'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,
+  LayoutDashboard, Settings,
+} 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 },
+  // 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/src/templates/web/ui-auth-ai/template/src/components/ui/button.tsx

@@ -10,12 +10,12 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant = 'default', size = 'default', ...props }, ref) => {
     const variants = {
-      default: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-ring',
       destructive: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
-      outline: 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-blue-500',
-      secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
-      ghost: 'hover:bg-gray-100 text-gray-700 focus:ring-gray-500',
-      link: 'underline-offset-4 hover:underline text-blue-600'
+      outline: 'border border-border bg-background text-foreground hover:bg-muted focus:ring-ring',
+      secondary: 'bg-muted-foreground text-white hover:bg-muted-foreground/80 focus:ring-ring',
+      ghost: 'hover:bg-muted text-foreground focus:ring-ring',
+      link: 'underline-offset-4 hover:underline text-primary'
     }
 
     const sizes = {

package/src/templates/web/ui-auth-ai/template/src/components/ui/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

package/src/templates/web/ui-auth-ai/template/src/components/ui/select.tsx

@@ -9,7 +9,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
     return (
       <select
         className={cn(
-          "flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

package/src/templates/web/ui-auth-ai/template/src/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

package/src/templates/web/ui-auth-ai/template/src/components/ui/theme-toggle.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@digilogiclabs/saas-factory-ui"
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  const toggleTheme = () => {
+    if (theme === 'light') {
+      setTheme('dark')
+    } else if (theme === 'dark') {
+      setTheme('system')
+    } else {
+      setTheme('light')
+    }
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={toggleTheme}
+      className="h-9 w-9"
+    >
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

package/src/templates/web/ui-auth-ai/template/src/lib/supabase.ts

@@ -1,8 +1,10 @@
 import { createBrowserClient } from '@supabase/ssr'
 
 export function createClient() {
-  return createBrowserClient(
-    process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
-  )
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL
+  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+  if (!url || !key) {
+    throw new Error('Missing Supabase environment variables. Set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.')
+  }
+  return createBrowserClient(url, key)
 }

package/src/templates/web/ui-auth-ai/template/src/providers/auth-provider.tsx

@@ -15,16 +15,18 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined)
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [user, setUser] = useState<User | null>(null)
   const [loading, setLoading] = useState(true)
-  const supabase = createClient()
+  const supabase = (() => {
+    try { return createClient() } catch { return null }
+  })()
 
   useEffect(() => {
-    // Get initial session
+    if (!supabase) { setLoading(false); return }
+
     supabase.auth.getSession().then(({ data: { session } }) => {
       setUser(session?.user ?? null)
       setLoading(false)
     })
 
-    // Listen for auth changes
     const {
       data: { subscription },
     } = supabase.auth.onAuthStateChange((_event, session) => {
@@ -33,10 +35,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     })
 
     return () => subscription.unsubscribe()
-  }, [supabase.auth])
+  }, [supabase])
 
   const signOut = async () => {
-    await supabase.auth.signOut()
+    await supabase?.auth.signOut()
   }
 
   return (