@digilogiclabs/create-saas-app 2.10.0 → 2.12.0

package/dist/templates/shared/legal/web/src/app/(legal)/privacy/page.tsx

@@ -23,16 +23,16 @@ export default function PrivacyPage() {
   } = LEGAL_CONFIG;
 
   return (
-    <main className="min-h-screen bg-white dark:bg-gray-950">
+    <main className="min-h-screen bg-background">
       <div className="mx-auto max-w-3xl px-4 py-16 sm:px-6 lg:px-8">
-        <h1 className="mb-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
+        <h1 className="mb-2 text-3xl font-bold tracking-tight text-foreground">
           Privacy Policy
         </h1>
-        <p className="mb-8 text-sm text-gray-500 dark:text-gray-400">
+        <p className="mb-8 text-sm text-muted-foreground">
           Effective: {effectiveDate}
         </p>
 
-        <div className="prose prose-gray dark:prose-invert max-w-none">
+        <div className="prose dark:prose-invert max-w-none">
           <section>
             <h2>1. Information We Collect</h2>
             <p>We collect information you provide directly:</p>

package/dist/templates/shared/legal/web/src/app/(legal)/terms/page.tsx

@@ -23,16 +23,16 @@ export default function TermsPage() {
   } = LEGAL_CONFIG;
 
   return (
-    <main className="min-h-screen bg-white dark:bg-gray-950">
+    <main className="min-h-screen bg-background">
       <div className="mx-auto max-w-3xl px-4 py-16 sm:px-6 lg:px-8">
-        <h1 className="mb-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
+        <h1 className="mb-2 text-3xl font-bold tracking-tight text-foreground">
           Terms of Service
         </h1>
-        <p className="mb-8 text-sm text-gray-500 dark:text-gray-400">
+        <p className="mb-8 text-sm text-muted-foreground">
           Effective: {effectiveDate}
         </p>
 
-        <div className="prose prose-gray dark:prose-invert max-w-none">
+        <div className="prose dark:prose-invert max-w-none">
           <section>
             <h2>1. Acceptance of Terms</h2>
             <p>

package/dist/templates/shared/loading/web/components/skeleton.tsx

@@ -13,7 +13,7 @@ export function Skeleton({
 }) {
   return (
     <div
-      className={`animate-pulse rounded bg-gray-200 dark:bg-gray-800 ${className}`}
+      className={`animate-pulse rounded bg-muted ${className}`}
     />
   );
 }
@@ -21,7 +21,7 @@ export function Skeleton({
 /** Skeleton for a card with title, description, and action area */
 export function CardSkeleton() {
   return (
-    <div className="rounded-lg border border-gray-200 p-6 dark:border-gray-800">
+    <div className="rounded-lg border border-border p-6">
       <Skeleton className="mb-4 h-4 w-3/4" />
       <Skeleton className="mb-2 h-3 w-full" />
       <Skeleton className="mb-4 h-3 w-5/6" />
@@ -46,7 +46,7 @@ export function TableSkeleton({ rows = 5 }: { rows?: number }) {
   return (
     <div className="space-y-3">
       {/* Header */}
-      <div className="flex gap-4 border-b border-gray-200 pb-3 dark:border-gray-800">
+      <div className="flex gap-4 border-b border-border pb-3">
         <Skeleton className="h-4 w-1/4" />
         <Skeleton className="h-4 w-1/3" />
         <Skeleton className="h-4 w-1/4" />
@@ -89,7 +89,7 @@ export function PageSkeleton() {
 export function LoadingSpinner() {
   return (
     <div className="flex min-h-[50vh] items-center justify-center">
-      <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400" />
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary" />
     </div>
   );
 }

package/dist/templates/shared/mock/web/.env.local

@@ -0,0 +1,55 @@
+# ═══════════════════════════════════════════════════════════════
+# MOCK MODE (default: enabled for local development)
+# ═══════════════════════════════════════════════════════════════
+# true  = Mock user, mock data, no auth required, all pages accessible
+# false = Real providers required (configure below)
+NEXT_PUBLIC_MOCK_MODE=true
+
+# ═══════════════════════════════════════════════════════════════
+# AUTH PROVIDER — uncomment and configure your chosen provider
+# ═══════════════════════════════════════════════════════════════
+
+# --- Supabase ---
+# NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+# NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+# SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
+
+# --- Firebase ---
+# NEXT_PUBLIC_FIREBASE_API_KEY=
+# NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+# NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+
+# --- Keycloak ---
+# KEYCLOAK_ISSUER=https://auth.yourdomain.com/realms/your-realm
+# KEYCLOAK_CLIENT_ID=your-client-id
+# KEYCLOAK_CLIENT_SECRET=your-client-secret
+
+# --- NextAuth / Auth.js ---
+# AUTH_SECRET=your-secret-here
+# NEXTAUTH_URL=http://localhost:3000
+
+# ═══════════════════════════════════════════════════════════════
+# DATABASE — uncomment and configure your chosen provider
+# ═══════════════════════════════════════════════════════════════
+
+# --- PostgreSQL (direct) ---
+# DATABASE_URL=postgres://user:password@localhost:5432/mydb
+
+# --- Supabase (uses same URL as auth above) ---
+
+# ═══════════════════════════════════════════════════════════════
+# PAYMENTS — uncomment when ready
+# ═══════════════════════════════════════════════════════════════
+
+# STRIPE_SECRET_KEY=sk_test_...
+# STRIPE_WEBHOOK_SECRET=whsec_...
+# NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
+
+# ═══════════════════════════════════════════════════════════════
+# OPTIONAL SERVICES
+# ═══════════════════════════════════════════════════════════════
+
+# REDIS_URL=redis://localhost:6379
+# RESEND_API_KEY=re_...
+# OPENAI_API_KEY=sk-...
+# ANTHROPIC_API_KEY=sk-ant-...

package/dist/templates/shared/mock/web/src/components/mock-auth-provider.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import { MOCK_MODE, MOCK_USER, type MockUser } from '@/lib/mock';
+
+/**
+ * Mock Auth Context — provides login/logout state for mock mode.
+ *
+ * When MOCK_MODE=true:
+ *   - User starts as "logged in" with MOCK_USER
+ *   - signOut() sets user to null (shows logged-out UI)
+ *   - signIn() restores mock user (shows logged-in UI)
+ *   - All pages still accessible (no real redirects)
+ *
+ * When MOCK_MODE=false:
+ *   - This provider is a passthrough (renders children only)
+ *   - TODO: [REAL_DATA] Replace with your real auth provider
+ */
+
+type MockAuthState = {
+  user: MockUser | null;
+  isAuthenticated: boolean;
+  signIn: (email?: string, password?: string) => void;
+  signOut: () => void;
+  loading: boolean;
+};
+
+const MockAuthContext = createContext<MockAuthState | undefined>(undefined);
+
+export function MockAuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<MockUser | null>(MOCK_MODE ? MOCK_USER : null);
+  const [loading] = useState(false);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const signIn = useCallback((_email?: string, _password?: string) => {
+    // TODO: [REAL_DATA] Replace with your auth provider's sign in
+    setUser(MOCK_USER);
+  }, []);
+
+  const signOut = useCallback(() => {
+    // TODO: [REAL_DATA] Replace with your auth provider's sign out
+    setUser(null);
+  }, []);
+
+  return (
+    <MockAuthContext.Provider value={{ user, isAuthenticated: !!user, signIn, signOut, loading }}>
+      {children}
+    </MockAuthContext.Provider>
+  );
+}
+
+/**
+ * Hook to access mock auth state.
+ * Works identically to a real useAuth() hook — same shape, same behavior.
+ *
+ * TODO: [REAL_DATA] When switching to a real auth provider, replace
+ * useMockAuth() calls with your provider's hook (e.g. useAuth(), useSession()).
+ */
+export function useMockAuth() {
+  const context = useContext(MockAuthContext);
+  if (context === undefined) {
+    // Fallback for non-mock mode or missing provider
+    return {
+      user: null,
+      isAuthenticated: false,
+      signIn: () => {},
+      signOut: () => {},
+      loading: false,
+    };
+  }
+  return context;
+}

package/dist/templates/shared/mock/web/src/components/mock-banner.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+/**
+ * Mock mode indicator banner.
+ * Shown at the top of every page when NEXT_PUBLIC_MOCK_MODE=true.
+ * Uses useEffect to render only on the client (avoids SSR double-render).
+ */
+export function MockBanner() {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    setShow(process.env.NEXT_PUBLIC_MOCK_MODE === 'true');
+  }, []);
+
+  if (!show) return null;
+
+  return (
+    <div className="bg-primary/10 border-b border-primary/20 px-4 py-2 text-center text-xs text-primary">
+      <strong>Mock Mode</strong> — Showing demo data. All pages accessible without auth.
+      <span className="hidden sm:inline">
+        {' '}Set <code className="rounded bg-primary/10 px-1 py-0.5 font-mono">NEXT_PUBLIC_MOCK_MODE=false</code> and
+        configure your providers to use real data. Search for{' '}
+        <code className="rounded bg-primary/10 px-1 py-0.5 font-mono">TODO: [REAL_DATA]</code> in the code.
+      </span>
+    </div>
+  );
+}

package/dist/templates/shared/mock/web/src/lib/mock.ts

@@ -0,0 +1,147 @@
+/**
+ * Mock Mode — for local development and template smoke testing.
+ *
+ * Set NEXT_PUBLIC_MOCK_MODE=true in .env.local to enable.
+ * Provides mock user, mock data, and bypasses all auth/provider checks
+ * so you can explore every page without any backend configuration.
+ *
+ * ┌─────────────────────────────────────────────────────────────┐
+ * │  TO CONNECT REAL PROVIDERS:                                 │
+ * │                                                             │
+ * │  1. Set NEXT_PUBLIC_MOCK_MODE=false in .env.local           │
+ * │  2. Configure your auth provider (see .env.example)         │
+ * │  3. Configure your database provider                        │
+ * │  4. Search for "TODO: [REAL_DATA]" in this codebase         │
+ * │     to find all mock→real integration points                │
+ * └─────────────────────────────────────────────────────────────┘
+ *
+ * This file is provider-agnostic — works with Supabase, Firebase,
+ * Keycloak, Auth0, NextAuth, or any custom auth/database solution.
+ */
+
+// ═══════════════════════════════════════════════════════════════
+// CORE
+// ═══════════════════════════════════════════════════════════════
+
+export const MOCK_MODE = process.env.NEXT_PUBLIC_MOCK_MODE === 'true';
+
+// ═══════════════════════════════════════════════════════════════
+// MOCK USER
+// ═══════════════════════════════════════════════════════════════
+
+export const MOCK_USER = {
+  id: 'mock-user-000-0000-000000000000',
+  email: 'demo@example.com',
+  name: 'Demo User',
+  avatar_url: null,
+  role: 'admin' as const,
+  plan: 'pro' as const,
+  createdAt: '2025-01-15T00:00:00Z',
+};
+
+export type MockUser = typeof MOCK_USER;
+
+// ═══════════════════════════════════════════════════════════════
+// MOCK DASHBOARD DATA
+// ═══════════════════════════════════════════════════════════════
+
+export const MOCK_STATS = {
+  totalUsers: 1_234,
+  activeUsers: 847,
+  revenue: 12_580,
+  mrr: 4_250,
+  growth: 12.5,
+  churn: 2.1,
+  newSignups: 42,
+  avgSessionMinutes: 8.3,
+};
+
+export const MOCK_RECENT_ACTIVITY = [
+  { id: '1', action: 'New signup', user: 'alice@example.com', timestamp: '2 min ago' },
+  { id: '2', action: 'Plan upgraded', user: 'bob@corp.io', timestamp: '15 min ago' },
+  { id: '3', action: 'Invoice paid', user: 'carol@startup.co', timestamp: '1 hour ago' },
+  { id: '4', action: 'Support ticket', user: 'dave@agency.com', timestamp: '2 hours ago' },
+  { id: '5', action: 'New signup', user: 'eve@freelance.dev', timestamp: '3 hours ago' },
+];
+
+// ═══════════════════════════════════════════════════════════════
+// MOCK BILLING DATA
+// ═══════════════════════════════════════════════════════════════
+
+export const MOCK_SUBSCRIPTION = {
+  plan: 'Pro',
+  status: 'active' as const,
+  price: '$29/month',
+  nextBilling: '2025-04-15',
+  cardLast4: '4242',
+  cardBrand: 'Visa',
+};
+
+export const MOCK_INVOICES = [
+  { id: 'inv_001', date: '2025-03-01', amount: '$29.00', status: 'paid' as const },
+  { id: 'inv_002', date: '2025-02-01', amount: '$29.00', status: 'paid' as const },
+  { id: 'inv_003', date: '2025-01-01', amount: '$29.00', status: 'paid' as const },
+];
+
+// ═══════════════════════════════════════════════════════════════
+// MOCK PRODUCTS (for marketplace/checkout)
+// ═══════════════════════════════════════════════════════════════
+
+export const MOCK_PRODUCTS = [
+  {
+    id: 'prod_1',
+    name: 'Starter',
+    price: 9,
+    features: ['1,000 users', 'Basic analytics', 'Email support'],
+  },
+  {
+    id: 'prod_2',
+    name: 'Pro',
+    price: 29,
+    features: ['Unlimited users', 'Advanced analytics', 'Priority support', 'Custom domains'],
+  },
+  {
+    id: 'prod_3',
+    name: 'Enterprise',
+    price: 99,
+    features: ['Everything in Pro', 'SSO/SAML', 'Dedicated support', 'SLA guarantee'],
+  },
+];
+
+// ═══════════════════════════════════════════════════════════════
+// MOCK NOTIFICATIONS
+// ═══════════════════════════════════════════════════════════════
+
+export const MOCK_NOTIFICATIONS = [
+  {
+    id: 'n1',
+    title: 'Welcome!',
+    message: 'Your account is set up and ready to go.',
+    read: true,
+    timestamp: '1 day ago',
+  },
+  {
+    id: 'n2',
+    title: 'New feature',
+    message: 'Check out our latest dashboard improvements.',
+    read: false,
+    timestamp: '2 hours ago',
+  },
+];
+
+// ═══════════════════════════════════════════════════════════════
+// HELPERS
+// ═══════════════════════════════════════════════════════════════
+
+/**
+ * Returns mock data when in mock mode, or calls the real fetcher.
+ * Use this to wrap any data-fetching function for easy mock→real transition.
+ *
+ * @example
+ * // TODO: [REAL_DATA] Replace mockData with your actual API call
+ * const stats = await mockOr(MOCK_STATS, () => fetchDashboardStats());
+ */
+export async function mockOr<T>(mockData: T, realFetcher: () => Promise<T>): Promise<T> {
+  if (MOCK_MODE) return mockData;
+  return realFetcher();
+}

package/dist/templates/shared/payments/web/src/app/api/webhooks/stripe/route.ts

@@ -15,9 +15,11 @@ import { enforceRateLimit, AppRateLimits } from '@/lib/api-security';
 
 export const dynamic = 'force-dynamic';
 
-const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
-  apiVersion: '2025-02-24.acacia',
-});
+function getStripe() {
+  return new Stripe(process.env.STRIPE_SECRET_KEY!, {
+    apiVersion: '2025-02-24.acacia',
+  });
+}
 
 /**
  * Check if this webhook event has already been processed (idempotency).
@@ -49,7 +51,11 @@ export async function POST(request: NextRequest) {
 
   let event: Stripe.Event;
   try {
-    event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!);
+    event = getStripe().webhooks.constructEvent(
+      body,
+      signature,
+      process.env.STRIPE_WEBHOOK_SECRET!,
+    );
   } catch (err) {
     console.error('[Stripe Webhook] Signature verification failed:', err);
     return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });

package/dist/templates/shared/redis/web/src/lib/redis.ts

@@ -32,7 +32,7 @@ export function getRedisClient(): RedisClient | null {
 
   try {
     // Dynamic require — only loads if ioredis is installed
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    // eslint-disable-next-line
     const Redis = require('ioredis');
     _client = new Redis(url, {
       keyPrefix: process.env.REDIS_KEY_PREFIX || 'app:',

package/dist/templates/web/ai-platform/template/src/app/api/auth/route.ts

@@ -0,0 +1,57 @@
+/**
+ * Demo auth API routes.
+ *
+ * POST /api/auth — Login or Signup
+ * DELETE /api/auth — Logout
+ *
+ * Replace with your real auth provider (Auth.js, Supabase Auth, etc.)
+ * when configuring your app for production.
+ */
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { email, password, action } = body
+
+    if (!email || !password) {
+      return NextResponse.json(
+        { error: 'Email and password are required' },
+        { status: 400 }
+      )
+    }
+
+    // Demo: accept any email/password combination.
+    // Replace with real authentication (database lookup, bcrypt compare, etc.)
+    const user = {
+      id: crypto.randomUUID(),
+      email,
+      name: email.split('@')[0],
+    }
+
+    const session = JSON.stringify({ user })
+    const cookieStore = await cookies()
+
+    cookieStore.set('session', session, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/',
+      maxAge: 60 * 60 * 24 * 7, // 7 days
+    })
+
+    return NextResponse.json({ user })
+  } catch {
+    return NextResponse.json(
+      { error: 'Authentication failed' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function DELETE() {
+  const cookieStore = await cookies()
+  cookieStore.delete('session')
+  return NextResponse.json({ success: true })
+}

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

@@ -0,0 +1,112 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { Bot } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      const res = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, action: 'login' }),
+      })
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || 'Failed to sign in')
+      }
+      router.push('/dashboard')
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to sign in')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <Link href="/" className="flex items-center justify-center gap-2 mb-8 hover:opacity-80 transition-opacity">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+            <Bot className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-xl">AI Platform</span>
+        </Link>
+
+        <Card className="border border-border">
+          <CardContent className="p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold">Welcome back</h1>
+              <p className="text-muted-foreground mt-2">Sign in to access AI models</p>
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive p-3 rounded-lg mb-6 text-sm" role="alert">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1.5">
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="you@example.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1.5">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="Enter your password"
+                  required
+                />
+              </div>
+
+              <Button type="submit" className="w-full h-11 text-base cursor-pointer hover:brightness-110 active:scale-[0.98] transition-all duration-200" disabled={loading}>
+                {loading ? 'Signing in...' : 'Sign In'}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-muted-foreground text-sm">
+                Don&apos;t have an account?{' '}
+                <Link href="/signup" className="text-primary hover:underline font-medium">
+                  Create an account
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}