@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/templates/web/ai-platform/template/package.json

@@ -15,7 +15,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "@digilogiclabs/platform-core": "^1.14.0",
-    "@digilogiclabs/app-sdk": "^1.1.0",
     "@digilogiclabs/saas-factory-ui": "^1.8.1",
     "tailwindcss": "^4.1.0",
     "@tailwindcss/postcss": "^4.1.0",

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

@@ -3,7 +3,8 @@
 import { useState, useRef, useEffect } from 'react'
 import { Button, Card } from '@digilogiclabs/saas-factory-ui'
 import { Send, Bot, User, Loader2, Sparkles } from 'lucide-react'
-import { useAuth } from '@digilogiclabs/app-sdk'
+// TODO: Replace with direct @digilogiclabs/saas-factory-auth or Auth.js usage
+// import { useAuth } from '@digilogiclabs/app-sdk'
 import Link from 'next/link'
 
 interface Message {
@@ -20,7 +21,9 @@ const MODELS = [
 ]
 
 export default function ChatPage() {
-  const { user, loading: authLoading } = useAuth()
+  // TODO: Replace with direct auth provider usage
+  const user = null as any // placeholder — wire up your auth provider
+  const authLoading = false
   const [messages, setMessages] = useState<Message[]>([])
   const [input, setInput] = useState('')
   const [isLoading, setIsLoading] = useState(false)

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

@@ -3,7 +3,8 @@
 import { useState } from 'react'
 import { Button, Card } from '@digilogiclabs/saas-factory-ui'
 import { Play, Loader2, Clock, Hash, Bot } from 'lucide-react'
-import { useAuth } from '@digilogiclabs/app-sdk'
+// TODO: Replace with direct @digilogiclabs/saas-factory-auth or Auth.js usage
+// import { useAuth } from '@digilogiclabs/app-sdk'
 import Link from 'next/link'
 
 const MODELS = [
@@ -25,7 +26,9 @@ const DEMO_RESPONSES: Record<string, string> = {
 }
 
 export default function PlaygroundPage() {
-  const { user, loading: authLoading } = useAuth()
+  // TODO: Replace with direct auth provider usage
+  const user = null as any // placeholder — wire up your auth provider
+  const authLoading = false
   const [model, setModel] = useState(MODELS[0].id)
   const [systemPrompt, setSystemPrompt] = useState('You are a helpful AI assistant.')
   const [userMessage, setUserMessage] = useState('')

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

@@ -2,7 +2,6 @@
 
 import { ThemeProvider } from 'next-themes'
 import { Toaster } from '@digilogiclabs/saas-factory-ui'
-import { DLLProvider } from '@digilogiclabs/app-sdk'
 
 interface AppProvidersProps {
   children: React.ReactNode
@@ -11,10 +10,8 @@ interface AppProvidersProps {
 export function AppProviders({ children }: AppProvidersProps) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-      <DLLProvider>
-        {children}
-        <Toaster />
-      </DLLProvider>
+      {children}
+      <Toaster />
     </ThemeProvider>
   )
 }

package/src/templates/web/base/template/eslint.config.mjs

@@ -0,0 +1,14 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends('next/core-web-vitals')];
+
+export default eslintConfig;

package/src/templates/web/base/template/src/app/auth/callback/route.ts

@@ -16,7 +16,7 @@ export async function GET(request: NextRequest) {
       {
         cookies: {
           getAll: () => cookieStore.getAll(),
-          setAll: (cookiesToSet) => {
+          setAll: (cookiesToSet: Array<{ name: string; value: string; options?: Record<string, unknown> }>) => {
             cookiesToSet.forEach(({ name, value, options }) =>
               cookieStore.set(name, value, options)
             );