@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

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/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/dist/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/dist/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/dist/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/dist/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/dist/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)
             );

package/dist/templates/web/base/template/src/app/checkout/page.tsx

@@ -1,119 +1,92 @@
 'use client';
 
-import React from 'react';
-import { usePayments } from '@digilogiclabs/app-sdk';
+import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { 
-  PageTransition,
-  MobileContainer,
-  TouchInput,
-  MobileForm,
-  SwipeableCard,
-  NetworkAwareContent,
-  useNetworkInfo
-} from '@digilogiclabs/saas-factory-ui';
-import { CreditCard, Zap } from 'lucide-react';
+import { CreditCard, Check, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { MOCK_MODE, MOCK_PRODUCTS } from '@/lib/mock';
 
 export default function CheckoutPage() {
-  const { handleCheckout } = usePayments();
-  const networkInfo = useNetworkInfo();
+  const [loading, setLoading] = useState(false);
+  const [selectedPlan, setSelectedPlan] = useState('prod_2');
 
   const onCheckout = async () => {
-    await handleCheckout({
-      priceId: 'price_12345', // Replace with your actual price ID
-      returnUrl: `${window.location.origin}/dashboard`,
-    });
+    setLoading(true);
+    try {
+      // TODO: [REAL_DATA] Create a Stripe checkout session via your API
+      // const res = await fetch('/api/checkout', {
+      //   method: 'POST',
+      //   headers: { 'Content-Type': 'application/json' },
+      //   body: JSON.stringify({ priceId: selectedPlan }),
+      // });
+      // const { url } = await res.json();
+      // window.location.href = url;
+
+      if (MOCK_MODE) {
+        alert('Mock Mode: Checkout would redirect to Stripe. Configure your payment provider to enable real payments.');
+      }
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
-    <PageTransition type="slide" direction="up" duration={350}>
-      <div className="flex items-center justify-center min-h-screen bg-gray-100">
-        <MobileContainer className="w-full max-w-md">
-          <NetworkAwareContent
-            showOnSlow={
-              <div className="p-6 bg-white rounded-lg shadow-md">
-                <div className="flex items-center gap-2 mb-4">
-                  <CreditCard className="h-6 w-6 text-blue-600" />
-                  <h1 className="text-xl font-bold">Checkout</h1>
-                </div>
-                <p className="mb-6 text-gray-600">
-                  Simplified checkout for slower connections.
-                </p>
-                <Button 
-                  onClick={onCheckout} 
-                  className="w-full"
-                  size="lg"
-                >
-                  Proceed to Checkout
-                </Button>
-              </div>
-            }
+    <div className="flex items-center justify-center min-h-screen bg-background">
+      <div className="w-full max-w-3xl mx-auto px-4 py-12">
+        <div className="mb-6">
+          <Link
+            href="/dashboard"
+            className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
           >
-            <SwipeableCard
-              leftActions={[
-                { 
-                  id: 'back', 
-                  label: 'Back', 
-                  onAction: () => window.history.back(),
-                  color: 'gray'
-                }
-              ]}
-              rightActions={[
-                { 
-                  id: 'proceed', 
-                  label: 'Pay Now', 
-                  onAction: onCheckout,
-                  color: 'green'
-                }
-              ]}
-              threshold={60}
-              hapticFeedback={true}
-              showActionLabels={true}
-            >
-              <div className="p-8 bg-white rounded-lg shadow-md">
-                <div className="flex items-center gap-3 mb-6">
-                  <div className="p-3 bg-blue-100 rounded-full">
-                    <Zap className="h-6 w-6 text-blue-600" />
-                  </div>
-                  <div>
-                    <h1 className="text-2xl font-bold">Premium Checkout</h1>
-                    <p className="text-sm text-gray-500">
-                      {networkInfo?.effectiveType && `${networkInfo.effectiveType.toUpperCase()} connection`}
-                    </p>
-                  </div>
-                </div>
-                
-                <div className="space-y-4 mb-6">
-                  <div className="p-4 bg-blue-50 rounded-lg">
-                    <h3 className="font-semibold text-blue-900">Pro Plan</h3>
-                    <p className="text-blue-700">$29/month • All features included</p>
-                  </div>
-                  
-                  <div className="text-sm text-gray-600">
-                    <p>✓ Touch-optimized checkout experience</p>
-                    <p>✓ Network-aware performance</p>
-                    <p>✓ Secure payment processing</p>
-                  </div>
-                </div>
+            <ArrowLeft className="h-3 w-3" />
+            Back to Dashboard
+          </Link>
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-bold text-foreground">Choose Your Plan</h1>
+            {MOCK_MODE && (
+              <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+                Mock Data
+              </span>
+            )}
+          </div>
+        </div>
 
-                <div className="space-y-3">
-                  <Button 
-                    onClick={onCheckout} 
-                    className="w-full"
-                    size="lg"
-                  >
-                    Proceed to Checkout
-                  </Button>
-                  
-                  <p className="text-xs text-center text-gray-500">
-                    Swipe left to go back • Swipe right to pay now
-                  </p>
-                </div>
+        {/* TODO: [REAL_DATA] Fetch plans from your payment provider */}
+        <div className="grid gap-4 md:grid-cols-3 mb-8">
+          {MOCK_PRODUCTS.map((plan) => (
+            <button
+              key={plan.id}
+              onClick={() => setSelectedPlan(plan.id)}
+              className={`rounded-xl border p-6 text-left transition-all ${
+                selectedPlan === plan.id
+                  ? 'border-primary ring-2 ring-primary bg-card'
+                  : 'border-border bg-card hover:border-primary/50'
+              }`}
+            >
+              <h3 className="text-lg font-semibold text-card-foreground">{plan.name}</h3>
+              <div className="mt-1 mb-4">
+                <span className="text-3xl font-bold text-foreground">${plan.price}</span>
+                <span className="text-muted-foreground">/mo</span>
               </div>
-            </SwipeableCard>
-          </NetworkAwareContent>
-        </MobileContainer>
+              <ul className="space-y-2">
+                {plan.features.map((feat) => (
+                  <li key={feat} className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Check className="h-4 w-4 text-primary shrink-0" />
+                    {feat}
+                  </li>
+                ))}
+              </ul>
+            </button>
+          ))}
+        </div>
+
+        <div className="flex justify-center">
+          <Button onClick={onCheckout} size="lg" disabled={loading} className="min-w-[200px]">
+            <CreditCard className="mr-2 h-4 w-4" />
+            {loading ? 'Processing...' : 'Continue to Payment'}
+          </Button>
+        </div>
       </div>
-    </PageTransition>
+    </div>
   );
 }