@digilogiclabs/create-saas-app 1.1.1 → 1.3.0

package/dist/templates/web/ui-auth-payments-audio/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-audio/template/src/app/checkout/page.tsx

@@ -0,0 +1,142 @@
+'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-audio/template/src/app/login/page.tsx

@@ -0,0 +1,109 @@
+'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>
+  );
+}
+

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

@@ -0,0 +1,181 @@
+'use client'
+
+import { Button, Card, AudioPlayer } from '@digilogiclabs/saas-factory-ui'
+import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User, Music } from 'lucide-react'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import Link from 'next/link'
+
+export default function Home() {
+  const { user, signOut, loading } = useAuth()
+
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (err) {
+      console.error('Sign out error:', err)
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto px-4 py-16">
+        {/* Auth Status Bar */}
+        <div className="flex justify-end mb-8">
+          {loading ? (
+            <div className="text-sm text-gray-600">Loading...</div>
+          ) : user ? (
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+                <User className="w-4 h-4" />
+                Welcome, {user.email}
+              </div>
+              <Button variant="outline" size="sm" onClick={handleSignOut}>
+                <LogOut className="w-4 h-4 mr-2" />
+                Sign Out
+              </Button>
+            </div>
+          ) : (
+            <div className="flex gap-2">
+              <Link href="/login">
+                <Button variant="outline" size="sm">Sign In</Button>
+              </Link>
+              <Link href="/signup">
+                <Button size="sm">Sign Up</Button>
+              </Link>
+            </div>
+          )}
+        </div>
+
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 mb-6">
+            <CheckCircle className="w-4 h-4 mr-2" />
+            Audio Player App - UI Package v0.10.0 + Auth v0.4.4 + Payments Integrated Successfully
+          </div>
+          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
+            Welcome to{' '}
+            <span className="text-blue-600 dark:text-blue-400">{{titleCaseName}}</span>
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
+            {{description}}. This audio streaming app template uses SaaS Factory UI package v0.10.0 with audio player components, authentication v0.4.4 and payments integration.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link href="/checkout">
+              <Button size="lg" className="text-lg px-8">
+                View Pricing
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </Button>
+            </Link>
+            <Button variant="outline" size="lg" className="text-lg px-8">
+              Learn More
+            </Button>
+          </div>
+        </div>
+
+        {/* Audio Player Showcase */}
+        <div className="max-w-4xl mx-auto mb-16">
+          <Card className="p-8">
+            <div className="text-center mb-8">
+              <div className="mx-auto w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mb-4">
+                <Music className="h-8 w-8 text-purple-600 dark:text-purple-400" />
+              </div>
+              <h2 className="text-3xl font-bold mb-4">Audio Player Component</h2>
+              <p className="text-gray-600 dark:text-gray-300">
+                Experience our feature-rich audio player with playlist support, advanced controls, and cross-platform compatibility
+              </p>
+            </div>
+            <AudioPlayer
+              playlist={[
+                {
+                  id: '1',
+                  title: 'Sample Audio Track',
+                  artist: 'Demo Artist',
+                  album: 'Demo Album',
+                  duration: 180,
+                  url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
+                  coverArt: 'https://via.placeholder.com/300x300?text=Demo+Track'
+                },
+                {
+                  id: '2',
+                  title: 'Another Great Song',
+                  artist: 'Sample Band',
+                  album: 'Greatest Hits',
+                  duration: 210,
+                  url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
+                  coverArt: 'https://via.placeholder.com/300x300?text=Track+2'
+                }
+              ]}
+              className="max-w-2xl mx-auto"
+            />
+          </Card>
+        </div>
+
+        {/* Component Showcase */}
+        <div className="grid md:grid-cols-4 gap-8 mb-16">
+          <Card className="text-center p-6">
+            <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
+              <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+            </div>
+            <h3 className="text-xl font-semibold mb-2">Audio UI Components</h3>
+            <p className="text-gray-600 dark:text-gray-300">
+              Audio Player, Button, and Card components from @digilogiclabs/saas-factory-ui v0.10.0
+            </p>
+          </Card>
+
+          <Card className="text-center p-6">
+            <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
+              <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
+            </div>
+            <h3 className="text-xl font-semibold mb-2">Authentication</h3>
+            <p className="text-gray-600 dark:text-gray-300">
+              Secure user authentication with @digilogiclabs/saas-factory-auth
+            </p>
+          </Card>
+
+          <Card className="text-center p-6">
+            <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+              <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <h3 className="text-xl font-semibold mb-2">TypeScript Ready</h3>
+            <p className="text-gray-600 dark:text-gray-300">
+              Full type safety with enhanced component definitions
+            </p>
+          </Card>
+
+          <Card className="text-center p-6">
+            <div className="mx-auto w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center mb-4">
+              <svg className="h-6 w-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+              </svg>
+            </div>
+            <h3 className="text-xl font-semibold mb-2">Payments Integration</h3>
+            <p className="text-gray-600 dark:text-gray-300">
+              Complete payment processing with @digilogiclabs/saas-factory-payments
+            </p>
+          </Card>
+        </div>
+
+        {/* Button Variants Showcase */}
+        <Card className="max-w-4xl mx-auto p-8">
+          <div className="text-center mb-6">
+            <h2 className="text-2xl font-bold mb-2">Full SaaS Package Integration</h2>
+            <p className="text-gray-600 dark:text-gray-300">
+              Complete integration of UI, Auth, and Payments packages
+            </p>
+          </div>
+          <div className="flex flex-wrap justify-center gap-4 mb-6">
+            <Button>Default Button</Button>
+            <Button variant="secondary">Secondary Button</Button>
+            <Button variant="outline">Outline Button</Button>
+            <Button disabled>Disabled Button</Button>
+          </div>
+          <div className="text-center">
+            <p className="text-sm text-gray-500">
+              All components from @digilogiclabs/saas-factory-ui v0.10.0 + auth v0.4.4 + payments
+            </p>
+          </div>
+        </Card>
+      </div>
+    </main>
+  )
+}