@digilogiclabs/create-saas-app 1.5.0 → 1.5.2

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

@@ -1,211 +0,0 @@
-'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-video/template/src/app/checkout/page.tsx

@@ -1,142 +0,0 @@
-'use client';
-
-import React from 'react';
-import { usePayments, formatCurrency } from '@digilogiclabs/saas-factory-payments';
-import { Button, Card } from '@digilogiclabs/saas-factory-ui';
-
-export default function CheckoutPage() {
-  const { loading } = usePayments();
-
-  const handlePlanSelect = (planId: string) => {
-    console.log('Plan selected:', 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'
-    }
-  ];
-
-  return (
-    <div className="min-h-screen bg-gray-100 py-8">
-      <div className="max-w-6xl mx-auto px-4">
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">Choose Your Plan</h1>
-          <p className="text-xl text-gray-600">Select the perfect plan for your needs</p>
-        </div>
-        
-        {/* Subscription Plans */}
-        <div className="grid md:grid-cols-3 gap-6 mb-8">
-          {plans.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">
-                    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">
-                    <span className="text-green-500 mr-2">✓</span>
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-              <Button 
-                onClick={() => handlePlanSelect(plan.id)}
-                disabled={loading}
-                className="w-full"
-                variant={plan.popular ? 'default' : 'outline'}
-              >
-                {loading ? 'Processing...' : 'Select Plan'}
-              </Button>
-            </Card>
-          ))}
-        </div>
-
-        {/* Payment Form */}
-        <Card className="p-6 max-w-md mx-auto">
-          <h2 className="text-2xl font-bold mb-6">Payment Details</h2>
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium mb-2">Card Number</label>
-              <input 
-                type="text" 
-                placeholder="1234 5678 9012 3456"
-                className="w-full p-3 border rounded-lg"
-                disabled
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium mb-2">Expiry Date</label>
-                <input 
-                  type="text" 
-                  placeholder="MM/YY"
-                  className="w-full p-3 border rounded-lg"
-                  disabled
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-2">CVC</label>
-                <input 
-                  type="text" 
-                  placeholder="123"
-                  className="w-full p-3 border rounded-lg"
-                  disabled
-                />
-              </div>
-            </div>
-            <Button 
-              onClick={handlePayment}
-              disabled={loading}
-              className="w-full"
-            >
-              {loading ? 'Processing...' : 'Complete Payment'}
-            </Button>
-            <p className="text-sm text-gray-600 text-center">
-              This is a demo. Payment processing requires Stripe integration.
-            </p>
-          </div>
-        </Card>
-      </div>
-    </div>
-  );
-}
-

package/dist/templates/web/ui-auth-payments-video/template/src/app/error.tsx

@@ -1,67 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { RefreshCw, Home, AlertCircle } from 'lucide-react'
-
-interface ErrorProps {
-  error: Error & { digest?: string }
-  reset: () => void
-}
-
-export default function Error({ error, reset }: ErrorProps) {
-  useEffect(() => {
-    // Log the error to an error reporting service
-    console.error('Application error:', error)
-  }, [error])
-
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md p-8 text-center">
-        <div className="mb-6">
-          <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-4">
-            <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-400" />
-          </div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-            Something went wrong
-          </h1>
-          <p className="text-gray-600 dark:text-gray-300 mb-6">
-            We apologize for the inconvenience. Please try again or return to the home page.
-          </p>
-        </div>
-
-        <div className="space-y-3">
-          <Button
-            onClick={reset}
-            className="w-full"
-            variant="default"
-          >
-            <RefreshCw className="w-4 h-4 mr-2" />
-            Try Again
-          </Button>
-          
-          <Button
-            onClick={() => window.location.href = '/'}
-            variant="outline"
-            className="w-full"
-          >
-            <Home className="w-4 h-4 mr-2" />
-            Go Home
-          </Button>
-        </div>
-
-        {process.env.NODE_ENV === 'development' && (
-          <details className="mt-6 text-left">
-            <summary className="text-sm font-medium text-gray-500 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">
-              Error Details (Development)
-            </summary>
-            <pre className="mt-2 text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded-md overflow-auto">
-              {error.message}
-              {error.stack}
-            </pre>
-          </details>
-        )}
-      </Card>
-    </div>
-  )
-}

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

@@ -1,42 +0,0 @@
-@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%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 84% 4.9%;
-    --border: 214.3 31.8% 91.4%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

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

@@ -1,33 +0,0 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
-import { AppProviders } from '@/components/providers/app-providers'
-import { Header } from '@/components/shared/header'
-import { Footer } from '@/components/shared/footer'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: '{{titleCaseName}}',
-  description: '{{description}}',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.className} min-h-screen flex flex-col`}>
-        <AppProviders>
-          <Header />
-          <main className="flex-1">
-            {children}
-          </main>
-          <Footer />
-        </AppProviders>
-      </body>
-    </html>
-  )
-}

package/dist/templates/web/ui-auth-payments-video/template/src/app/loading.tsx

@@ -1,20 +0,0 @@
-import { Card } from '@digilogiclabs/saas-factory-ui'
-import { Loader2 } from 'lucide-react'
-
-export default function Loading() {
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md p-8 text-center">
-        <div className="flex flex-col items-center">
-          <Loader2 className="h-8 w-8 animate-spin text-blue-600 dark:text-blue-400 mb-4" />
-          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
-            Loading
-          </h2>
-          <p className="text-sm text-gray-600 dark:text-gray-300">
-            Please wait while we load your content...
-          </p>
-        </div>
-      </Card>
-    </div>
-  )
-}

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

@@ -1,109 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
-import { useAuth } from '@digilogiclabs/saas-factory-auth';
-import { useRouter } from 'next/navigation';
-
-export default function LoginPage() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const { signIn, signInWithOAuth, loading, error, user } = useAuth();
-  const router = useRouter();
-
-  // Redirect if already logged in
-  React.useEffect(() => {
-    if (user) {
-      router.push('/');
-    }
-  }, [user, router]);
-
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      await signIn(email, password);
-      router.push('/');
-    } catch (err) {
-      console.error('Login error:', err);
-    }
-  };
-
-  const handleGoogleLogin = async () => {
-    try {
-      await signInWithOAuth('google', window.location.origin);
-    } catch (err) {
-      console.error('Google login 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 In</h1>
-        
-        {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
-          </div>
-        )}
-
-        <form onSubmit={handleLogin} 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>
-          <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? 'Signing In...' : 'Sign In'}
-          </Button>
-          <Button 
-            type="button" 
-            variant="outline" 
-            className="w-full"
-            onClick={handleGoogleLogin}
-            disabled={loading}
-          >
-            Sign in with Google
-          </Button>
-        </form>
-
-        <div className="mt-4 text-center">
-          <p className="text-sm text-gray-600">
-            Don&apos;t have an account?{' '}
-            <a href="/signup" className="text-blue-600 hover:underline">
-              Sign up
-            </a>
-          </p>
-        </div>
-      </Card>
-    </div>
-  );
-}
-