@digilogiclabs/create-saas-app 1.0.1

package/dist/templates/web/ui-auth-payments/template/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}} (with Platform Core + UI + Auth + Payments)",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
+  },
+  "dependencies": {
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@digilogiclabs/platform-core": "^0.1.0",
+    "@digilogiclabs/saas-factory-ui": "^0.27.3",
+    "@digilogiclabs/saas-factory-auth": "^1.0.6",
+    "@digilogiclabs/saas-factory-payments": "^1.2.8",
+    "stripe": "^14.0.0",
+    "@stripe/react-stripe-js": "^2.0.0",
+    "@stripe/stripe-js": "^2.0.0",
+    "tailwindcss": "^3.3.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
+    "tailwind-merge": "^2.0.0",
+    "next-themes": "^0.2.1",
+    "lucide-react": "^0.542.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^8.0.0",
+    "eslint-config-next": "^15.0.0",
+    "prettier": "^3.0.0",
+    "vitest": "^1.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "jsdom": "^24.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/dist/templates/web/ui-auth-payments/template/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+

package/dist/templates/web/ui-auth-payments/template/src/app/auth/callback/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const requestUrl = new URL(request.url);
+  
+  // Placeholder auth callback - requires @digilogiclabs/saas-factory-auth package
+  console.log('Auth callback triggered - requires auth package for full functionality');
+  
+  // URL to redirect to after sign in process completes
+  return NextResponse.redirect(requestUrl.origin);
+}

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

@@ -0,0 +1,211 @@
+'use client';
+
+import React from 'react';
+import { usePayments, formatCurrency, formatDate } from '@digilogiclabs/saas-factory-payments';
+import { Button, Card } from '@digilogiclabs/saas-factory-ui';
+
+export default function BillingPage() {
+  const { loading } = usePayments();
+
+  const handleSubscriptionChange = () => {
+    console.log('Subscription change requested');
+    // Handle subscription changes (upgrade, downgrade, cancel, resume)
+  };
+
+  const handlePaymentMethodUpdate = () => {
+    console.log('Payment method update requested');
+    // Handle payment method updates (add, edit, delete, set default)
+  };
+
+  const handleInvoiceDownload = (invoiceId: string) => {
+    console.log('Download invoice:', invoiceId);
+    // Handle invoice download
+  };
+
+  // Mock current subscription data - in real app this would come from your backend
+  const currentSubscription = {
+    plan: 'Pro Plan',
+    price: 1999,
+    interval: 'month',
+    status: 'active',
+    nextBilling: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000)
+  };
+
+  // Mock payment methods - in real app this would come from your backend
+  const paymentMethods = [
+    {
+      id: 'pm_123',
+      type: 'card',
+      last4: '4242',
+      brand: 'visa',
+      expiryMonth: 12,
+      expiryYear: 2025,
+      isDefault: true
+    },
+    {
+      id: 'pm_456',
+      type: 'card',
+      last4: '0005',
+      brand: 'mastercard',
+      expiryMonth: 8,
+      expiryYear: 2026,
+      isDefault: false
+    }
+  ];
+
+  // Mock billing history - in real app this would come from your backend
+  const invoices = [
+    {
+      id: 'inv_123',
+      amount: 1999,
+      currency: 'usd',
+      status: 'paid',
+      date: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+      description: 'Pro Plan - Monthly'
+    },
+    {
+      id: 'inv_456',
+      amount: 1999,
+      currency: 'usd',
+      status: 'paid',
+      date: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000),
+      description: 'Pro Plan - Monthly'
+    },
+    {
+      id: 'inv_789',
+      amount: 999,
+      currency: 'usd',
+      status: 'paid',
+      date: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000),
+      description: 'Basic Plan - Monthly'
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-100 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">Billing & Subscription</h1>
+          <p className="text-xl text-gray-600">Manage your subscription and billing information</p>
+        </div>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+          {/* Current Subscription */}
+          <Card className="p-6">
+            <h2 className="text-2xl font-bold mb-6">Current Subscription</h2>
+            <div className="space-y-4">
+              <div>
+                <h3 className="font-semibold">{currentSubscription.plan}</h3>
+                <p className="text-2xl font-bold">
+                  {formatCurrency(currentSubscription.price)}
+                  <span className="text-sm font-normal">/{currentSubscription.interval}</span>
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Status</p>
+                <span className="inline-block px-2 py-1 bg-green-100 text-green-800 rounded text-sm">
+                  {currentSubscription.status}
+                </span>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Next billing date</p>
+                <p>{formatDate(currentSubscription.nextBilling)}</p>
+              </div>
+              <Button 
+                onClick={handleSubscriptionChange}
+                disabled={loading}
+                variant="outline"
+                className="w-full"
+              >
+                Change Plan
+              </Button>
+            </div>
+          </Card>
+
+          {/* Payment Methods */}
+          <Card className="p-6">
+            <h2 className="text-2xl font-bold mb-6">Payment Methods</h2>
+            <div className="space-y-4">
+              {paymentMethods.map((method) => (
+                <div key={method.id} className="flex items-center justify-between p-3 border rounded-lg">
+                  <div className="flex items-center">
+                    <div className="w-8 h-8 bg-blue-100 rounded flex items-center justify-center mr-3">
+                      💳
+                    </div>
+                    <div>
+                      <p className="font-medium">
+                        {method.brand.toUpperCase()} •••• {method.last4}
+                      </p>
+                      <p className="text-sm text-gray-600">
+                        Expires {method.expiryMonth}/{method.expiryYear}
+                        {method.isDefault && <span className="ml-2 text-blue-600">(Default)</span>}
+                      </p>
+                    </div>
+                  </div>
+                  <Button 
+                    onClick={handlePaymentMethodUpdate}
+                    disabled={loading}
+                    variant="outline"
+                    size="sm"
+                  >
+                    Edit
+                  </Button>
+                </div>
+              ))}
+              <Button 
+                onClick={handlePaymentMethodUpdate}
+                disabled={loading}
+                variant="outline"
+                className="w-full"
+              >
+                Add Payment Method
+              </Button>
+            </div>
+          </Card>
+        </div>
+
+        {/* Billing History */}
+        <Card className="p-6">
+          <h2 className="text-2xl font-bold mb-6">Billing History</h2>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b">
+                  <th className="text-left py-2">Date</th>
+                  <th className="text-left py-2">Description</th>
+                  <th className="text-left py-2">Amount</th>
+                  <th className="text-left py-2">Status</th>
+                  <th className="text-left py-2">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {invoices.map((invoice) => (
+                  <tr key={invoice.id} className="border-b">
+                    <td className="py-3">{formatDate(invoice.date)}</td>
+                    <td className="py-3">{invoice.description}</td>
+                    <td className="py-3">{formatCurrency(invoice.amount)}</td>
+                    <td className="py-3">
+                      <span className="inline-block px-2 py-1 bg-green-100 text-green-800 rounded text-sm">
+                        {invoice.status}
+                      </span>
+                    </td>
+                    <td className="py-3">
+                      <Button
+                        onClick={() => handleInvoiceDownload(invoice.id)}
+                        variant="outline"
+                        size="sm"
+                      >
+                        Download
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,318 @@
+'use client';
+
+import React, { useState } from 'react';
+import { usePayments, formatCurrency } from '@digilogiclabs/saas-factory-payments';
+import { 
+  Button, 
+  Card,
+  PageTransition,
+  MobileContainer,
+  ResponsiveGrid,
+  SwipeableCard,
+  NetworkAwareContent,
+  OfflineWrapper,
+  TouchInput,
+  MobileForm,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui';
+import { CreditCard, Check, Star, Wifi, WifiOff, ArrowLeft, ArrowRight } from 'lucide-react';
+
+export default function CheckoutPage() {
+  const { loading } = usePayments();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
+  const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
+
+  const handlePlanSelect = (planId: string) => {
+    console.log('Plan selected:', planId);
+    setSelectedPlan(planId);
+    // Handle plan selection - redirect to payment processing
+  };
+
+  const handlePayment = () => {
+    console.log('Processing payment...');
+    // Handle payment processing
+  };
+
+  // Example pricing plans - in real app these would come from your backend/Stripe
+  const plans = [
+    {
+      id: 'basic',
+      name: 'Basic Plan',
+      price: 999, // in cents
+      interval: 'month',
+      features: ['Feature 1', 'Feature 2', 'Feature 3'],
+      stripePriceId: 'price_basic_monthly'
+    },
+    {
+      id: 'pro',
+      name: 'Pro Plan', 
+      price: 1999, // in cents
+      interval: 'month',
+      features: ['All Basic features', 'Feature 4', 'Feature 5', 'Priority support'],
+      popular: true,
+      stripePriceId: 'price_pro_monthly'
+    },
+    {
+      id: 'enterprise',
+      name: 'Enterprise Plan',
+      price: 4999, // in cents
+      interval: 'month',
+      features: ['All Pro features', 'Custom integrations', 'Dedicated support', 'SLA guarantee'],
+      stripePriceId: 'price_enterprise_monthly'
+    }
+  ];
+  const gridConfig = {
+    columns_1_2: { base: 1, md: 2 },
+    columns_1_3: { base: 1, md: 3 },
+    columns_1_sm2: { base: 1, sm: 2 },
+    columns_1_sm2_md3: { base: 1, sm: 2, md: 3 },
+    columns_1_sm2_md4: { base: 1, sm: 2, md: 4 },
+    columns_2: { base: 2 },
+    columns_2_md3: { base: 2, md: 3 }
+  };
+
+
+  return (
+    <PageTransition type="slide" direction="up" duration={350}>
+      <OfflineWrapper
+        cacheStrategy="cache-first"
+        showOfflineIndicator={true}
+      >
+        <div className="min-h-screen bg-gray-100">
+          <MobileContainer className="py-8">
+            {/* Network Status */}
+            <div className="flex justify-center mb-4">
+              <div className="flex items-center gap-2 text-sm px-3 py-1 rounded-full bg-white shadow-sm">
+                {isOnline ? (
+                  <>
+                    <Wifi className="w-4 h-4 text-green-600" />
+                    <span>Secure Connection</span>
+                    {networkInfo?.effectiveType && (
+                      <span className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
+                        {networkInfo.effectiveType.toUpperCase()}
+                      </span>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <WifiOff className="w-4 h-4 text-red-600" />
+                    <span>Offline - Plans cached</span>
+                  </>
+                )}
+              </div>
+            </div>
+
+            <div className="text-center mb-12">
+              <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Choose Your Plan</h1>
+              <p className="text-lg md:text-xl text-gray-600">Select the perfect plan for your needs</p>
+            </div>
+            
+            {/* Subscription Plans */}
+            <NetworkAwareContent
+              showOnSlow={
+                <ResponsiveGrid columns={gridConfig.columns_1_2} gap="lg" 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 && (
+                        <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                          <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1">
+                            <Star className="w-3 h-3" />
+                            Most Popular
+                          </span>
+                        </div>
+                      )}
+                      <h3 className="text-xl font-bold mb-2">{plan.name}</h3>
+                      <div className="text-3xl font-bold mb-4">
+                        {formatCurrency(plan.price)} 
+                        <span className="text-sm font-normal">/{plan.interval}</span>
+                      </div>
+                      <ul className="mb-6 space-y-2">
+                        {plan.features.slice(0, 3).map((feature, index) => (
+                          <li key={index} className="flex items-center">
+                            <Check className="text-green-500 mr-2 w-4 h-4" />
+                            {feature}
+                          </li>
+                        ))}
+                      </ul>
+                      <Button 
+                        onClick={() => handlePlanSelect(plan.id)}
+                        disabled={loading}
+                        className="w-full"
+                        variant={plan.popular ? "default" : "outline"}
+                        size="lg"
+                      >
+                        {loading ? 'Processing...' : 'Select Plan'}
+                      </Button>
+                    </Card>
+                  ))}
+                </ResponsiveGrid>
+              }
+            >
+              <ResponsiveGrid columns={gridConfig.columns_1_3} gap="lg" className="mb-8">
+          {plans.map((plan) => (
+            <SwipeableCard
+              key={plan.id}
+              leftActions={[
+                { 
+                  id: 'info', 
+                  label: 'More Info', 
+                  onAction: () => console.log('Show plan details'),
+                  color: 'blue'
+                }
+              ]}
+              rightActions={[
+                { 
+                  id: 'select', 
+                  label: 'Quick Select', 
+                  onAction: () => handlePlanSelect(plan.id),
+                  color: 'green',
+                  icon: ArrowRight
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <Card className={`p-6 relative ${plan.popular ? 'ring-2 ring-blue-500' : ''} ${selectedPlan === plan.id ? 'bg-blue-50 border-blue-200' : ''}`}>
+                {plan.popular && (
+                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                    <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1">
+                      <Star className="w-3 h-3" />
+                      Most Popular
+                    </span>
+                  </div>
+                )}
+                <h3 className="text-xl font-bold mb-2">{plan.name}</h3>
+                <div className="text-3xl font-bold mb-4">
+                  {formatCurrency(plan.price)} 
+                  <span className="text-sm font-normal">/{plan.interval}</span>
+                </div>
+                <ul className="mb-6 space-y-2">
+                  {plan.features.map((feature, index) => (
+                    <li key={index} className="flex items-center">
+                      <Check className="text-green-500 mr-2 w-4 h-4" />
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+                <Button 
+                  onClick={() => handlePlanSelect(plan.id)}
+                  disabled={loading}
+                  className="w-full"
+                  variant={selectedPlan === plan.id ? "default" : plan.popular ? "default" : "outline"}
+                  size="lg"
+                >
+                  {loading ? 'Processing...' : selectedPlan === plan.id ? 'Selected' : 'Select Plan'}
+                </Button>
+                <p className="text-xs text-center text-gray-500 mt-2">
+                  Swipe left for details • Swipe right to select
+                </p>
+              </Card>
+            </SwipeableCard>
+          ))}
+              </ResponsiveGrid>
+            </NetworkAwareContent>
+
+            {/* Mobile-Optimized Payment Form */}
+            <SwipeableCard
+              leftActions={[
+                { 
+                  id: 'back', 
+                  label: 'Back', 
+                  onAction: () => window.history.back(),
+                  color: 'gray',
+                  icon: ArrowLeft
+                }
+              ]}
+              rightActions={[
+                { 
+                  id: 'pay', 
+                  label: 'Pay Now', 
+                  onAction: handlePayment,
+                  color: 'green',
+                  icon: CreditCard
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+              className="max-w-md mx-auto"
+            >
+              <Card className="p-6">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-2 bg-blue-100 rounded-full">
+                    <CreditCard className="w-5 h-5 text-blue-600" />
+                  </div>
+                  <h2 className="text-2xl font-bold">Payment Details</h2>
+                </div>
+                
+                <MobileForm className="space-y-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Card Number</label>
+                    <TouchInput 
+                      type="text" 
+                      placeholder="1234 5678 9012 3456"
+                      disabled
+                      mobileOptimized={true}
+                      hapticFeedback={true}
+                    />
+                  </div>
+                  <ResponsiveGrid columns={gridConfig.columns_2} gap="md">
+                    <div>
+                      <label className="block text-sm font-medium mb-2">Expiry Date</label>
+                      <TouchInput 
+                        type="text" 
+                        placeholder="MM/YY"
+                        disabled
+                        mobileOptimized={true}
+                        hapticFeedback={true}
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium mb-2">CVC</label>
+                      <TouchInput 
+                        type="text" 
+                        placeholder="123"
+                        disabled
+                        mobileOptimized={true}
+                        hapticFeedback={true}
+                      />
+                    </div>
+                  </ResponsiveGrid>
+                  
+                  {selectedPlan && (
+                    <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium">Selected Plan:</span>
+                        <span className="text-blue-600 font-bold">
+                          {plans.find(p => p.id === selectedPlan)?.name}
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                  
+                  <Button 
+                    onClick={handlePayment}
+                    disabled={loading || !isOnline}
+                    className="w-full"
+                    size="lg"
+                  >
+                    {loading ? 'Processing...' : !isOnline ? 'Offline - Cannot Process' : 'Complete Payment'}
+                  </Button>
+                  
+                  <div className="space-y-2 text-sm text-gray-600 text-center">
+                    <p>This is a demo. Payment processing requires Stripe integration.</p>
+                    <p className="text-xs">Swipe left to go back • Swipe right to pay now</p>
+                  </div>
+                </MobileForm>
+              </Card>
+            </SwipeableCard>
+          </MobileContainer>
+        </div>
+      </OfflineWrapper>
+    </PageTransition>
+  );
+}
+

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

@@ -0,0 +1,22 @@
+import { requireAuth } from '@/lib/auth-server'
+import { redirect } from 'next/navigation'
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // Ensure user is authenticated at the layout level
+  try {
+    await requireAuth()
+  } catch (error) {
+    // This will happen if requireAuth redirects, but just in case
+    redirect('/login')
+  }
+
+  return (
+    <div className="dashboard-layout">
+      {children}
+    </div>
+  )
+}