@digilogiclabs/create-saas-app 1.14.1 → 1.17.1

package/src/templates/web/ui-auth-payments-ai/template/src/components/client/signup-form.tsx

@@ -1,7 +1,15 @@
 'use client'
 
 import React, { useState, useActionState } from 'react'
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui'
+import { 
+  Button, 
+  Card, 
+  Input, 
+  Label,
+  SingleStepForm,
+  FormField,
+  FormProvider
+} from '@digilogiclabs/saas-factory-ui'
 import { useAuth } from '@digilogiclabs/saas-factory-auth'
 import { useRouter } from 'next/navigation'
 import { signUpAction } from '@/lib/actions/auth'
@@ -92,84 +100,92 @@ export function SignupForm() {
           </div>
         )}
 
-        <form action={handleServerAction} className="space-y-4">
-          <div>
-            <Label htmlFor="name">Name</Label>
-            <Input
-              id="name"
+        {/* Enhanced form with enterprise form system */}
+        <FormProvider>
+          <SingleStepForm
+            onSubmit={async (formData) => {
+              try {
+                const result = await formAction(formData)
+                if (result?.success) {
+                  const emailValue = formData.get('email') as string
+                  const passwordValue = formData.get('password') as string
+                  await signUp(emailValue, passwordValue)
+                  router.push('/')
+                }
+              } catch (err) {
+                console.error('Sign up error:', err)
+              }
+            }}
+            className="space-y-4"
+            submitButton={{
+              text: loading ? 'Signing Up...' : 'Sign Up',
+              disabled: loading,
+              className: 'w-full'
+            }}
+            realTimeValidation={true}
+            debounceMs={300}
+            crossFieldValidation={{
+              passwordMatch: {
+                fields: ['password', 'confirmPassword'],
+                validator: (values) => values.password === values.confirmPassword,
+                message: 'Passwords must match'
+              }
+            }}
+          >
+            <FormField
               name="name"
               type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Enter your name"
-              required
+              label="Name"
+              placeholder="Enter your full name"
+              validation={['required', 'minLength:2']}
               disabled={loading}
+              className="mb-4"
             />
-            {actionState?.fieldErrors?.name && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.name[0]}</p>
-            )}
-          </div>
-          <div>
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
+            
+            <FormField
               name="email"
               type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
+              label="Email"
               placeholder="Enter your email"
-              required
+              validation={['required', 'email']}
               disabled={loading}
+              className="mb-4"
             />
-            {actionState?.fieldErrors?.email && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.email[0]}</p>
-            )}
-          </div>
-          <div>
-            <Label htmlFor="password">Password</Label>
-            <Input
-              id="password"
+            
+            <FormField
               name="password"
               type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
+              label="Password"
               placeholder="Enter your password"
-              required
+              validation={['required', 'minLength:8', 'hasUppercase', 'hasLowercase', 'hasNumber']}
               disabled={loading}
+              className="mb-4"
+              showPasswordStrength={true}
+              helpText="Password must be at least 8 characters with uppercase, lowercase, and number"
             />
-            {actionState?.fieldErrors?.password && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.password[0]}</p>
-            )}
-          </div>
-          <div>
-            <Label htmlFor="confirmPassword">Confirm Password</Label>
-            <Input
-              id="confirmPassword"
+            
+            <FormField
               name="confirmPassword"
               type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
+              label="Confirm Password"
               placeholder="Confirm your password"
-              required
+              validation={['required']}
               disabled={loading}
+              className="mb-6"
             />
-            {actionState?.fieldErrors?.confirmPassword && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.confirmPassword[0]}</p>
-            )}
-          </div>
-          <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>
+          </SingleStepForm>
+        </FormProvider>
+
+        {/* Social Auth */}
+        <Button 
+          type="button" 
+          variant="outline" 
+          className="w-full mt-4"
+          onClick={handleGoogleSignUp}
+          disabled={loading}
+        >
+          Sign up with Google
+        </Button>
 
         <div className="mt-4 text-center">
           <p className="text-sm text-gray-600 dark:text-gray-300">

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

@@ -4,6 +4,7 @@ import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -27,6 +28,7 @@ export function AppProviders({ children }: AppProvidersProps) {
         <PaymentsProvider>
           <AppThemeProvider themeColor={themeColor}>
             {children}
+            <Toaster />
           </AppThemeProvider>
         </PaymentsProvider>
       </AuthProvider>

package/src/templates/web/ui-auth-payments-audio/template/package.json

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.18.4",
+    "@digilogiclabs/saas-factory-ui": "^0.21.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.1",
     "@digilogiclabs/saas-factory-payments": "^1.1.0",
     "stripe": "^14.0.0",

package/src/templates/web/ui-auth-payments-audio/template/src/app/dashboard/page.tsx

@@ -1,6 +1,22 @@
 import { Suspense } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { User, Settings, CreditCard, Activity } from 'lucide-react'
+import { 
+  Button, 
+  Card, 
+  DashboardLayout,
+  CommandPalette,
+  Tour 
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  User, 
+  Settings, 
+  CreditCard, 
+  Activity,
+  Home,
+  Music,
+  Headphones,
+  Mic,
+  BarChart
+} from 'lucide-react'
 import { requireAuth } from '@/lib/auth-server'
 import Link from 'next/link'
 
@@ -90,26 +106,63 @@ export default async function DashboardPage() {
   // Server-side authentication requirement
   const user = await requireAuth()
 
+  const sidebarNavigation = [
+    { name: 'Overview', href: '/dashboard', icon: Home, current: true },
+    { name: 'Audio Library', href: '/dashboard/library', icon: Music },
+    { name: 'Recording Studio', href: '/dashboard/studio', icon: Mic },
+    { name: 'Playback', href: '/dashboard/player', icon: Headphones },
+    { name: 'Analytics', href: '/dashboard/analytics', icon: BarChart },
+    { name: 'Settings', href: '/settings', icon: Settings },
+    { name: 'Billing', href: '/billing', icon: CreditCard }
+  ]
+
+  const tourSteps = [
+    {
+      target: '[data-tour="overview"]',
+      title: 'Audio Dashboard',
+      content: 'Welcome to your audio production dashboard. Manage your tracks and recordings here.'
+    },
+    {
+      target: '[data-tour="stats"]',
+      title: 'Audio Statistics',
+      content: 'View your audio production metrics and usage statistics.'
+    },
+    {
+      target: '[data-tour="actions"]',
+      title: 'Audio Tools',
+      content: 'Quick access to recording, mixing, and audio management tools.'
+    }
+  ]
+
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Header */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-            Welcome back, {user.name || user.email}!
-          </h1>
-          <p className="text-gray-600 dark:text-gray-300 mt-2">
-            Here's what's happening with your account today.
-          </p>
-        </div>
+    <DashboardLayout
+      navigation={sidebarNavigation}
+      headerActions={[
+        <CommandPalette key="command-palette" />,
+        <Tour key="tour" steps={tourSteps} />
+      ]}
+    >
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          {/* Header */}
+          <div className="mb-8" data-tour="overview">
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              Welcome back, {user.name || user.email}!
+            </h1>
+            <p className="text-gray-600 dark:text-gray-300 mt-2">
+              Here's what's happening with your audio projects today.
+            </p>
+          </div>
 
         {/* Stats - Streaming with Suspense */}
-        <Suspense fallback={<UserStatsSkeleton />}>
-          <UserStats userId={user.id} />
-        </Suspense>
+        <div data-tour="stats">
+          <Suspense fallback={<UserStatsSkeleton />}>
+            <UserStats userId={user.id} />
+          </Suspense>
+        </div>
 
         {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8" data-tour="actions">
           <Card className="p-6">
             <div className="flex items-center mb-4">
               <User className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
@@ -179,5 +232,6 @@ export default async function DashboardPage() {
         </Card>
       </div>
     </div>
+    </DashboardLayout>
   )
 }

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

@@ -4,6 +4,7 @@ import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -27,6 +28,7 @@ export function AppProviders({ children }: AppProvidersProps) {
         <PaymentsProvider>
           <AppThemeProvider themeColor={themeColor}>
             {children}
+            <Toaster />
           </AppThemeProvider>
         </PaymentsProvider>
       </AuthProvider>

package/src/templates/web/ui-auth-payments-video/template/package.json

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.18.4",
+    "@digilogiclabs/saas-factory-ui": "^0.21.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.1",
     "@digilogiclabs/saas-factory-payments": "^1.1.0",
     "stripe": "^14.0.0",

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

@@ -4,6 +4,7 @@ import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -23,6 +24,7 @@ export function AppProviders({ children }: AppProvidersProps) {
         <PaymentsProvider>
           <AppThemeProvider themeColor="{{themeColor}}">
             {children}
+            <Toaster />
           </AppThemeProvider>
         </PaymentsProvider>
       </AuthProvider>