@digilogiclabs/create-saas-app 1.0.1

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

@@ -0,0 +1,252 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { LogOut, CreditCard, User, Settings, Home, Music, Headphones, Menu, X, Info } from 'lucide-react';
+import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { 
+  ResponsiveHeader,
+  MobileNavigation,
+  HamburgerIcon,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+
+export function Header() {
+  const { user, signOut } = useAuth();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  
+  const projectName = "{{titleCaseName}}";
+  
+  const handleSignOut = async () => {
+    try {
+      await signOut();
+    } catch (error) {
+      console.error('Sign out error:', error);
+    }
+  };
+
+  const navigationItems = [
+    { 
+      label: 'Home', 
+      href: '/',
+      icon: Home,
+      protected: false 
+    },
+    { 
+      label: 'AI Dashboard', 
+      href: '/ai',
+      icon: User,
+      protected: true 
+    },
+    { 
+      label: 'Dashboard', 
+      href: '/dashboard',
+      icon: User,
+      protected: true 
+    },
+    { 
+      label: 'Billing', 
+      href: '/billing',
+      icon: CreditCard,
+      protected: true 
+    },
+    { 
+      label: 'Checkout', 
+      href: '/checkout',
+      icon: CreditCard,
+      protected: false 
+    },
+    { 
+      label: 'Setup Guide', 
+      href: '/setup',
+      icon: Info,
+      protected: false 
+    },
+    { 
+      label: 'Settings', 
+      href: '/settings',
+      icon: Settings,
+      protected: true 
+    }
+  ];
+
+  const authActions = user ? [
+    {
+      label: 'Sign Out',
+      icon: LogOut,
+      onClick: handleSignOut,
+      variant: 'ghost' as const
+    }
+  ] : [
+    {
+      label: 'Login',
+      href: '/login',
+      variant: 'ghost' as const
+    },
+    {
+      label: 'Sign Up',
+      href: '/signup',
+      variant: 'default' as const
+    }
+  ];
+
+  // Filter navigation items based on user authentication
+  const visibleNavItems = navigationItems.filter(item => !item.protected || user);
+
+  return (
+    <>
+      {/* Network Status Banner */}
+      {!isOnline && (
+        <div className="bg-red-500 text-white text-center py-2 text-sm animate-pulse">
+          <span>🎵 Offline - Playing cached audio only</span>
+        </div>
+      )}
+      
+      {/* Audio Quality Banner */}
+      {isOnline && networkInfo?.effectiveType === '2g' && (
+        <div className="bg-yellow-500 text-white text-center py-2 text-sm">
+          <div className="animate-marquee whitespace-nowrap">
+            🎶 Slow connection - Audio quality optimized for better streaming • Lower bitrate enabled • Cached tracks prioritized
+          </div>
+        </div>
+      )}
+
+      {/* High Quality Audio Banner */}
+      {isOnline && (networkInfo?.effectiveType === '4g' || networkInfo?.effectiveType === '5g') && (
+        <div className="bg-green-500 text-white text-center py-2 text-sm">
+          <div className="animate-marquee whitespace-nowrap">
+            🎧 High-speed connection detected - Premium audio quality enabled • Lossless streaming available • Instant playback ready
+          </div>
+        </div>
+      )}
+
+      {/* Responsive Header with theme-aware gradient */}
+      <header className="bg-background/90 backdrop-blur-md shadow-lg border-b border-border/20 transition-all duration-300 animate-slide-down">
+        <div className="absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-secondary/10"></div>
+        <div className="container mx-auto px-4 relative">
+          <div className="flex justify-between items-center h-16">
+            {/* Logo with animation */}
+            <Link href="/" className="text-2xl font-bold text-foreground flex items-center gap-2 transition-all duration-300 hover:scale-105">
+              <Music className="w-6 h-6 transition-transform duration-300 hover:rotate-12 text-primary" />
+              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent transition-all duration-300">
+                {projectName}
+              </span>
+            </Link>
+
+            {/* Desktop Navigation */}
+            <nav className="hidden md:flex items-center gap-6">
+              {visibleNavItems.map((item, index) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 relative px-3 py-2 rounded-lg hover:bg-gradient-to-r hover:from-primary/10 hover:to-secondary/10 animate-fade-in-up"
+                >
+                  <item.icon className="w-4 h-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3" />
+                  <span className="relative">
+                    {item.label}
+                    <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-gradient-to-r from-primary to-secondary transition-all duration-300 group-hover:w-full"></span>
+                  </span>
+                </Link>
+              ))}
+              
+              {/* Auth Actions */}
+              <div className="flex items-center gap-2 ml-4 pl-4 border-l border-gray-200 dark:border-gray-600">
+                <ThemeToggle />
+                {user ? (
+                  <button
+                    onClick={handleSignOut}
+                    className="flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    Sign Out
+                  </button>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <Link
+                      href="/login"
+                      className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                    >
+                      Login
+                    </Link>
+                    <Link
+                      href="/signup"
+                      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                    >
+                      Sign Up
+                    </Link>
+                  </div>
+                )}
+              </div>
+            </nav>
+
+            {/* Mobile Menu Button */}
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="md:hidden p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+            >
+              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+            </button>
+          </div>
+
+          {/* Mobile Menu */}
+          {mobileMenuOpen && (
+            <div className="md:hidden border-t border-gray-200 dark:border-gray-600 py-4">
+              <nav className="flex flex-col space-y-3">
+                {visibleNavItems.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setMobileMenuOpen(false)}
+                    className="flex items-center gap-3 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+                  >
+                    <item.icon className="w-4 h-4" />
+                    {item.label}
+                  </Link>
+                ))}
+                
+                {/* Mobile Auth Actions */}
+                <div className="flex items-center gap-3 px-3 pt-3 border-t border-gray-200 dark:border-gray-600">
+                  <ThemeToggle />
+                  {user ? (
+                    <button
+                      onClick={() => {
+                        handleSignOut();
+                        setMobileMenuOpen(false);
+                      }}
+                      className="flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      Sign Out
+                    </button>
+                  ) : (
+                    <div className="flex flex-col gap-2 w-full">
+                      <Link
+                        href="/login"
+                        onClick={() => setMobileMenuOpen(false)}
+                        className="text-center py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+                      >
+                        Login
+                      </Link>
+                      <Link
+                        href="/signup"
+                        onClick={() => setMobileMenuOpen(false)}
+                        className="text-center py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                      >
+                        Sign Up
+                      </Link>
+                    </div>
+                  )}
+                </div>
+              </nav>
+            </div>
+          )}
+        </div>
+      </header>
+    </>
+  );
+}
+

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

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
+

package/src/templates/web/ui-auth-payments-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-payments-ai/template/src/lib/actions/auth.ts

@@ -0,0 +1,246 @@
+'use server'
+
+import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { z } from 'zod'
+
+// Schema for form validation
+const signInSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+})
+
+const signUpSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+  confirmPassword: z.string(),
+  name: z.string().min(2, 'Name must be at least 2 characters').optional(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"],
+})
+
+// Response types
+type ActionResult = {
+  success: boolean
+  error?: string
+  fieldErrors?: Record<string, string[]>
+}
+
+/**
+ * Server action for signing in
+ * This works alongside the client-side @digilogiclabs/saas-factory-auth
+ */
+export async function signInAction(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    const rawData = {
+      email: formData.get('email') as string,
+      password: formData.get('password') as string,
+    }
+
+    // Validate form data
+    const validationResult = signInSchema.safeParse(rawData)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    const { email, password } = validationResult.data
+
+    // Note: The actual authentication is handled by the client-side library
+    // This server action is mainly for form validation and server-side processing
+    // You might want to add additional server-side logic here like:
+    // - Rate limiting
+    // - Logging
+    // - Analytics
+    
+    // For now, we'll return success and let the client handle the actual auth
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Sign in error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for signing up
+ */
+export async function signUpAction(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    const rawData = {
+      email: formData.get('email') as string,
+      password: formData.get('password') as string,
+      confirmPassword: formData.get('confirmPassword') as string,
+      name: formData.get('name') as string,
+    }
+
+    // Validate form data
+    const validationResult = signUpSchema.safeParse(rawData)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    const { email, password, name } = validationResult.data
+
+    // Additional server-side processing can go here
+    // - User existence check
+    // - Welcome email preparation
+    // - User analytics setup
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Sign up error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for signing out
+ */
+export async function signOutAction(): Promise<void> {
+  try {
+    const cookieStore = await cookies()
+    
+    // Clear auth cookies (adjust cookie names based on the auth library)
+    cookieStore.delete('saas-factory-auth-token')
+    cookieStore.delete('saas-factory-auth-user')
+    
+    // Additional cleanup can go here
+    // - Clear session data
+    // - Log sign out event
+    // - Clear cache
+    
+  } catch (error) {
+    console.error('Sign out error:', error)
+  }
+  
+  redirect('/')
+}
+
+/**
+ * Server action for OAuth redirect handling
+ */
+export async function handleOAuthCallback(provider: string, code: string): Promise<ActionResult> {
+  try {
+    // This would handle OAuth callback processing
+    // For now, we'll delegate to the client-side library
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('OAuth callback error:', error)
+    return {
+      success: false,
+      error: 'Authentication failed. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for password reset request
+ */
+export async function requestPasswordReset(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    const email = formData.get('email') as string
+    
+    if (!email) {
+      return {
+        success: false,
+        error: 'Email is required',
+      }
+    }
+
+    const emailSchema = z.string().email()
+    const validationResult = emailSchema.safeParse(email)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please enter a valid email address',
+      }
+    }
+
+    // Password reset logic would go here
+    // - Generate reset token
+    // - Send reset email
+    // - Log reset request
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Password reset error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for updating user profile
+ */
+export async function updateProfileAction(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    // This would require authentication check
+    const cookieStore = await cookies()
+    const authToken = cookieStore.get('saas-factory-auth-token')?.value
+    
+    if (!authToken) {
+      redirect('/login')
+    }
+
+    const name = formData.get('name') as string
+    const email = formData.get('email') as string
+    
+    const updateSchema = z.object({
+      name: z.string().min(2, 'Name must be at least 2 characters').optional(),
+      email: z.string().email('Invalid email address').optional(),
+    })
+    
+    const validationResult = updateSchema.safeParse({ name, email })
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    // Profile update logic would go here
+    // - Update user in database
+    // - Update auth cookies
+    // - Send confirmation email if email changed
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Profile update error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}

package/src/templates/web/ui-auth-payments-ai/template/src/lib/actions/index.ts

@@ -0,0 +1,14 @@
+// Re-export all server actions for easier imports
+export {
+  signInAction,
+  signUpAction,
+  signOutAction,
+  handleOAuthCallback,
+  requestPasswordReset,
+  updateProfileAction,
+} from './auth'
+
+// Add other action exports here as needed
+// export * from './posts'
+// export * from './profile'
+// export * from './settings'