@digilogiclabs/create-saas-app 2.8.0 → 2.9.0

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

@@ -1,128 +1,128 @@
-'use client';
-
-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';
-
-export default function SignupPage() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const { signUp, signInWithOAuth, loading, error, user } = useAuth();
-  const router = useRouter();
-
-  // Redirect if already logged in
-  React.useEffect(() => {
-    if (user) {
-      router.push('/');
-    }
-  }, [user, router]);
-
-  const handleSignup = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (password !== confirmPassword) {
-      alert('Passwords do not match');
-      return;
-    }
-
-    try {
-      await signUp(email, password);
-      router.push('/');
-    } catch (err) {
-      console.error('Signup error:', err);
-    }
-  };
-
-  const handleGoogleSignup = async () => {
-    try {
-      await signInWithOAuth('google', window.location.origin);
-    } 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">
-      <Card className="w-full max-w-md p-8">
-        <h1 className="text-2xl font-bold text-center mb-6">Sign Up</h1>
-        
-        {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
-          </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>
-          <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">
-            Already have an account?{' '}
-            <a href="/login" className="text-blue-600 hover:underline">
-              Sign in
-            </a>
-          </p>
-        </div>
-      </Card>
-    </div>
-  );
-}
-
+'use client';
+
+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';
+
+export default function SignupPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const { signUp, signInWithOAuth, loading, error, user } = useAuth();
+  const router = useRouter();
+
+  // Redirect if already logged in
+  React.useEffect(() => {
+    if (user) {
+      router.push('/');
+    }
+  }, [user, router]);
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (password !== confirmPassword) {
+      alert('Passwords do not match');
+      return;
+    }
+
+    try {
+      await signUp(email, password);
+      router.push('/');
+    } catch (err) {
+      console.error('Signup error:', err);
+    }
+  };
+
+  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">
+      <Card className="w-full max-w-md p-8">
+        <h1 className="text-2xl font-bold text-center mb-6">Sign Up</h1>
+        
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {error.message}
+          </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>
+          <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">
+            Already have an account?{' '}
+            <a href="/login" className="text-blue-600 hover:underline">
+              Sign in
+            </a>
+          </p>
+        </div>
+      </Card>
+    </div>
+  );
+}
+

package/dist/templates/web/ui-auth-ai/template/src/app/globals.css

@@ -1,40 +1,35 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Import SaaS Factory UI styles */
-@import '@digilogiclabs/saas-factory-ui/dist/index.css';
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@import "tailwindcss";
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

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

@@ -1,5 +1,6 @@
 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'

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

@@ -113,7 +113,7 @@ export default function CheckoutPage() {
             {/* Subscription Plans */}
             <NetworkAwareContent
               showOnSlow={
-                <ResponsiveGrid columns={gridConfig.columns_1_2} gap="lg" className="mb-8">
+                <ResponsiveGrid columns={gridConfig.columns_1_2} gap={6} className="mb-8">
                   {plans.slice(0, 2).map((plan) => (
                     <Card key={plan.id} className={`p-6 relative ${plan.popular ? 'ring-2 ring-blue-500' : ''}`}>
                       {plan.popular && (
@@ -151,7 +151,7 @@ export default function CheckoutPage() {
                 </ResponsiveGrid>
               }
             >
-              <ResponsiveGrid columns={gridConfig.columns_1_3} gap="lg" className="mb-8">
+              <ResponsiveGrid columns={gridConfig.columns_1_3} gap={6} className="mb-8">
           {plans.map((plan) => (
             <SwipeableCard
               key={plan.id}
@@ -260,7 +260,7 @@ export default function CheckoutPage() {
                       hapticFeedback={true}
                     />
                   </div>
-                  <ResponsiveGrid columns={gridConfig.columns_2} gap="md">
+                  <ResponsiveGrid columns={gridConfig.columns_2} gap={4}>
                     <div>
                       <label className="block text-sm font-medium mb-2">Expiry Date</label>
                       <TouchInput 

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

@@ -1,20 +1,14 @@
 import { Suspense } from 'react'
-import { 
-  Button, 
-  Card, 
-  DashboardLayout,
-  CommandPalette,
-  Tour 
+import {
+  Button,
+  Card,
+  DashboardLayout
 } from '@digilogiclabs/saas-factory-ui'
-import { 
-  User, 
-  Settings, 
-  CreditCard, 
-  Activity,
-  Home,
-  BarChart,
-  FileText,
-  ShoppingCart
+import {
+  User,
+  Settings,
+  CreditCard,
+  Activity
 } from 'lucide-react'
 import { requireAuth } from '@/lib/auth-server'
 import Link from 'next/link'
@@ -105,41 +99,8 @@ export default async function DashboardPage() {
   // Server-side authentication requirement
   const user = await requireAuth()
 
-  const sidebarNavigation = [
-    { name: 'Overview', href: '/dashboard', icon: Home, current: true },
-    { name: 'Orders', href: '/dashboard/orders', icon: ShoppingCart },
-    { name: 'Analytics', href: '/dashboard/analytics', icon: BarChart },
-    { name: 'Reports', href: '/dashboard/reports', icon: FileText },
-    { name: 'Settings', href: '/settings', icon: Settings },
-    { name: 'Billing', href: '/billing', icon: CreditCard }
-  ]
-
-  const tourSteps = [
-    {
-      target: '[data-tour="overview"]',
-      title: 'Dashboard Overview',
-      content: 'Get a comprehensive view of your business metrics and activity.'
-    },
-    {
-      target: '[data-tour="stats"]',
-      title: 'Key Statistics',
-      content: 'Monitor your most important business metrics at a glance.'
-    },
-    {
-      target: '[data-tour="actions"]',
-      title: 'Quick Actions',
-      content: 'Access your most frequently used features and settings.'
-    }
-  ]
-
   return (
-    <DashboardLayout
-      navigation={sidebarNavigation}
-      headerActions={[
-        <CommandPalette key="command-palette" />,
-        <Tour key="tour" steps={tourSteps} />
-      ]}
-    >
+    <DashboardLayout>
       <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 */}