@digilogiclabs/create-saas-app 2.8.0 → 2.9.0

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

@@ -3,13 +3,11 @@
 import React, { useState } from 'react';
 import { usePayments } from '@digilogiclabs/app-sdk';
 import { formatCurrency, formatDate } from '@/lib/utils';
-import { 
-  Button, 
+import {
+  Button,
   Card,
-  SingleStepForm,
-  FormField,
-  FormSection,
-  FormProvider,
+  Input,
+  Label,
   Modal
 } from '@digilogiclabs/saas-factory-ui';
 
@@ -18,6 +16,7 @@ export default function BillingPage() {
   const [showPaymentMethodModal, setShowPaymentMethodModal] = useState(false);
   const [showPlanChangeModal, setShowPlanChangeModal] = useState(false);
   const [editingPaymentMethod, setEditingPaymentMethod] = useState<string | null>(null);
+  const [selectedPlan, setSelectedPlan] = useState('pro');
 
   const handleSubscriptionChange = () => {
     setShowPlanChangeModal(true);
@@ -30,23 +29,24 @@ export default function BillingPage() {
 
   const handleInvoiceDownload = (invoiceId: string) => {
     console.log('Download invoice:', invoiceId);
-    // Handle invoice download
   };
 
-  const handlePaymentMethodSubmit = async (formData: FormData) => {
+  const handlePaymentMethodSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
     console.log('Payment method data:', Object.fromEntries(formData));
-    // Handle payment method creation/update
     setShowPaymentMethodModal(false);
     setEditingPaymentMethod(null);
   };
 
-  const handlePlanChangeSubmit = async (formData: FormData) => {
+  const handlePlanChangeSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
     console.log('Plan change data:', Object.fromEntries(formData));
-    // Handle plan change
     setShowPlanChangeModal(false);
   };
 
-  // Mock current subscription data - in real app this would come from your backend
+  // Mock data
   const currentSubscription = {
     plan: 'Pro Plan',
     price: 1999,
@@ -55,64 +55,31 @@ export default function BillingPage() {
     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
-    }
+    { 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'
-    }
+    { 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' }
+  ];
+
+  const plans = [
+    { value: 'basic', label: 'Basic Plan', price: '$9/month', description: 'Perfect for individuals getting started', features: ['1,000 AI requests/month', 'Basic AI models', 'Email support', '5GB storage'] },
+    { value: 'pro', label: 'Pro Plan', price: '$29/month', description: 'Best for growing teams and businesses', features: ['10,000 AI requests/month', 'Advanced AI models', 'Priority support', '50GB storage', 'Team collaboration'], recommended: true },
+    { value: 'enterprise', label: 'Enterprise Plan', price: 'Custom pricing', description: 'For large organizations', features: ['Unlimited AI requests', 'All AI models', 'Dedicated support', 'Unlimited storage', 'Advanced security'] }
   ];
 
   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>
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">Billing &amp; 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">
@@ -135,7 +102,7 @@ export default function BillingPage() {
                 <p className="text-sm text-gray-600">Next billing date</p>
                 <p>{formatDate(currentSubscription.nextBilling)}</p>
               </div>
-              <Button 
+              <Button
                 onClick={handleSubscriptionChange}
                 disabled={loading}
                 variant="outline"
@@ -154,11 +121,11 @@ export default function BillingPage() {
                 <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">
-                      💳
+                      <span role="img" aria-label="credit card">&#128179;</span>
                     </div>
                     <div>
                       <p className="font-medium">
-                        {method.brand.toUpperCase()} •••• {method.last4}
+                        {method.brand.toUpperCase()} &bull;&bull;&bull;&bull; {method.last4}
                       </p>
                       <p className="text-sm text-gray-600">
                         Expires {method.expiryMonth}/{method.expiryYear}
@@ -166,8 +133,8 @@ export default function BillingPage() {
                       </p>
                     </div>
                   </div>
-                  <Button 
-                    onClick={handlePaymentMethodUpdate}
+                  <Button
+                    onClick={() => handlePaymentMethodUpdate(method.id)}
                     disabled={loading}
                     variant="outline"
                     size="sm"
@@ -176,8 +143,8 @@ export default function BillingPage() {
                   </Button>
                 </div>
               ))}
-              <Button 
-                onClick={handlePaymentMethodUpdate}
+              <Button
+                onClick={() => handlePaymentMethodUpdate()}
                 disabled={loading}
                 variant="outline"
                 className="w-full"
@@ -232,87 +199,60 @@ export default function BillingPage() {
         {/* Payment Method Modal */}
         <Modal
           isOpen={showPaymentMethodModal}
-          onClose={() => {
-            setShowPaymentMethodModal(false);
-            setEditingPaymentMethod(null);
-          }}
+          onClose={() => { setShowPaymentMethodModal(false); setEditingPaymentMethod(null); }}
           title={editingPaymentMethod ? "Edit Payment Method" : "Add Payment Method"}
-          size="lg"
         >
-          <FormProvider>
-            <SingleStepForm
-              onSubmit={handlePaymentMethodSubmit}
-              submitButton={{
-                text: editingPaymentMethod ? "Update Payment Method" : "Add Payment Method",
-                disabled: loading
-              }}
-              realTimeValidation={true}
-              className="space-y-4"
-            >
-              <FormSection title="Card Information">
-                <FormField
-                  name="cardNumber"
-                  type="creditCard"
-                  label="Card Number"
-                  placeholder="1234 5678 9012 3456"
-                  validation={['required', 'creditCard']}
-                  disabled={loading}
-                />
-                
+          <form onSubmit={handlePaymentMethodSubmit} className="space-y-4">
+            <div>
+              <h3 className="font-semibold mb-3">Card Information</h3>
+              <div className="space-y-3">
+                <div>
+                  <Label htmlFor="cardNumber">Card Number</Label>
+                  <Input id="cardNumber" name="cardNumber" placeholder="1234 5678 9012 3456" required disabled={loading} />
+                </div>
                 <div className="grid grid-cols-2 gap-4">
-                  <FormField
-                    name="expiryDate"
-                    type="text"
-                    label="Expiry Date"
-                    placeholder="MM/YY"
-                    validation={['required', 'expiryDate']}
-                    disabled={loading}
-                  />
-                  <FormField
-                    name="cvc"
-                    type="text"
-                    label="CVC"
-                    placeholder="123"
-                    validation={['required', 'cvc']}
-                    disabled={loading}
-                  />
+                  <div>
+                    <Label htmlFor="expiryDate">Expiry Date</Label>
+                    <Input id="expiryDate" name="expiryDate" placeholder="MM/YY" required disabled={loading} />
+                  </div>
+                  <div>
+                    <Label htmlFor="cvc">CVC</Label>
+                    <Input id="cvc" name="cvc" placeholder="123" required disabled={loading} />
+                  </div>
                 </div>
-              </FormSection>
-
-              <FormSection title="Billing Information">
-                <FormField
-                  name="cardholderName"
-                  type="text"
-                  label="Cardholder Name"
-                  placeholder="Full name as it appears on card"
-                  validation={['required']}
-                  disabled={loading}
-                />
-                
-                <FormField
-                  name="billingAddress"
-                  type="address"
-                  label="Billing Address"
-                  validation={['required']}
-                  disabled={loading}
-                  fields={{
-                    line1: { placeholder: "Street address" },
-                    city: { placeholder: "City" },
-                    state: { placeholder: "State/Province" },
-                    postalCode: { placeholder: "ZIP/Postal code" },
-                    country: { placeholder: "Country" }
-                  }}
-                />
-                
-                <FormField
-                  name="makeDefault"
-                  type="checkbox"
-                  label="Make this my default payment method"
-                  disabled={loading}
-                />
-              </FormSection>
-            </SingleStepForm>
-          </FormProvider>
+              </div>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-3">Billing Information</h3>
+              <div className="space-y-3">
+                <div>
+                  <Label htmlFor="cardholderName">Cardholder Name</Label>
+                  <Input id="cardholderName" name="cardholderName" placeholder="Full name as it appears on card" required disabled={loading} />
+                </div>
+                <div>
+                  <Label htmlFor="billingAddress">Street Address</Label>
+                  <Input id="billingAddress" name="billingAddress" placeholder="Street address" required disabled={loading} />
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor="city">City</Label>
+                    <Input id="city" name="city" placeholder="City" required disabled={loading} />
+                  </div>
+                  <div>
+                    <Label htmlFor="postalCode">ZIP/Postal Code</Label>
+                    <Input id="postalCode" name="postalCode" placeholder="ZIP/Postal code" required disabled={loading} />
+                  </div>
+                </div>
+                <label className="flex items-center gap-2">
+                  <input type="checkbox" name="makeDefault" className="rounded" />
+                  <span className="text-sm">Make this my default payment method</span>
+                </label>
+              </div>
+            </div>
+            <Button type="submit" className="w-full" disabled={loading}>
+              {editingPaymentMethod ? "Update Payment Method" : "Add Payment Method"}
+            </Button>
+          </form>
         </Modal>
 
         {/* Plan Change Modal */}
@@ -320,104 +260,74 @@ export default function BillingPage() {
           isOpen={showPlanChangeModal}
           onClose={() => setShowPlanChangeModal(false)}
           title="Change Subscription Plan"
-          size="xl"
         >
-          <FormProvider>
-            <SingleStepForm
-              onSubmit={handlePlanChangeSubmit}
-              submitButton={{
-                text: "Change Plan",
-                disabled: loading
-              }}
-              realTimeValidation={true}
-              className="space-y-6"
-            >
-              <FormSection title="Select New Plan">
-                <FormField
-                  name="newPlan"
-                  type="radio"
-                  label="Choose Your Plan"
-                  options={[
-                    {
-                      value: 'basic',
-                      label: 'Basic Plan',
-                      description: 'Perfect for individuals getting started',
-                      price: '$9/month',
-                      features: [
-                        '1,000 AI requests/month',
-                        'Basic AI models',
-                        'Email support',
-                        '5GB storage'
-                      ]
-                    },
-                    {
-                      value: 'pro',
-                      label: 'Pro Plan',
-                      description: 'Best for growing teams and businesses',
-                      price: '$29/month',
-                      features: [
-                        '10,000 AI requests/month',
-                        'Advanced AI models',
-                        'Priority support',
-                        '50GB storage',
-                        'Team collaboration'
-                      ],
-                      recommended: true
-                    },
-                    {
-                      value: 'enterprise',
-                      label: 'Enterprise Plan',
-                      description: 'For large organizations',
-                      price: 'Custom pricing',
-                      features: [
-                        'Unlimited AI requests',
-                        'All AI models',
-                        'Dedicated support',
-                        'Unlimited storage',
-                        'Advanced security'
-                      ]
-                    }
-                  ]}
-                  validation={['required']}
-                  defaultValue="pro"
-                />
-              </FormSection>
+          <form onSubmit={handlePlanChangeSubmit} className="space-y-6">
+            <div>
+              <h3 className="font-semibold mb-3">Select New Plan</h3>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {plans.map(plan => (
+                  <label
+                    key={plan.value}
+                    className={`relative block p-4 border-2 rounded-xl cursor-pointer hover:border-primary transition-colors ${selectedPlan === plan.value ? 'border-primary bg-primary/5' : 'border-gray-200 dark:border-gray-700'}`}
+                  >
+                    <input
+                      type="radio"
+                      name="newPlan"
+                      value={plan.value}
+                      checked={selectedPlan === plan.value}
+                      onChange={(e) => setSelectedPlan(e.target.value)}
+                      className="sr-only"
+                      required
+                    />
+                    {plan.recommended && (
+                      <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full">Recommended</span>
+                    )}
+                    <h4 className="font-semibold">{plan.label}</h4>
+                    <p className="text-2xl font-bold my-2">{plan.price}</p>
+                    <p className="text-sm text-gray-600 mb-2">{plan.description}</p>
+                    <ul className="text-sm space-y-1">
+                      {plan.features.map(f => <li key={f}>&#10003; {f}</li>)}
+                    </ul>
+                  </label>
+                ))}
+              </div>
+            </div>
 
-              <FormSection title="Billing Options">
-                <FormField
-                  name="billingInterval"
-                  type="radio"
-                  label="Billing Frequency"
-                  options={[
-                    { value: 'monthly', label: 'Monthly billing' },
-                    { value: 'yearly', label: 'Yearly billing (save 20%)' }
-                  ]}
-                  defaultValue="monthly"
-                  validation={['required']}
-                />
+            <div>
+              <h3 className="font-semibold mb-3">Billing Frequency</h3>
+              <div className="space-y-2">
+                <label className="flex items-center gap-2">
+                  <input type="radio" name="billingInterval" value="monthly" defaultChecked required />
+                  <span className="text-sm">Monthly billing</span>
+                </label>
+                <label className="flex items-center gap-2">
+                  <input type="radio" name="billingInterval" value="yearly" />
+                  <span className="text-sm">Yearly billing (save 20%)</span>
+                </label>
+              </div>
+            </div>
 
-                <FormField
-                  name="prorationPolicy"
-                  type="checkbox"
-                  label="I understand that charges will be prorated for the current billing period"
-                  validation={['required']}
-                />
-              </FormSection>
+            <label className="flex items-center gap-2">
+              <input type="checkbox" name="prorationPolicy" required className="rounded" />
+              <span className="text-sm">I understand that charges will be prorated for the current billing period</span>
+            </label>
 
-              <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
-                <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">Plan Change Summary</h4>
-                <div className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
-                  <div>Current plan: Pro Plan ($29/month)</div>
-                  <div>New plan: Will be calculated based on selection</div>
-                  <div>Effective date: Immediate</div>
-                  <div>Next billing date: {formatDate(new Date(Date.now() + 15 * 24 * 60 * 60 * 1000))}</div>
-                </div>
+            <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
+              <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">Plan Change Summary</h4>
+              <div className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
+                <div>Current plan: Pro Plan ($29/month)</div>
+                <div>New plan: Will be calculated based on selection</div>
+                <div>Effective date: Immediate</div>
+                <div>Next billing date: {formatDate(new Date(Date.now() + 15 * 24 * 60 * 60 * 1000))}</div>
               </div>
-            </SingleStepForm>
-          </FormProvider>
+            </div>
+
+            <Button type="submit" className="w-full" disabled={loading}>
+              Change Plan
+            </Button>
+          </form>
         </Modal>
       </div>
     </div>
   );
 }
-

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

@@ -1,22 +1,14 @@
 import { Suspense } from 'react'
-import { 
-  Button, 
-  Card, 
-  DashboardLayout,
-  CommandPalette,
-  Tour 
+import {
+  Button,
+  Card,
+  DashboardLayout
 } from '@digilogiclabs/saas-factory-ui'
-import { 
-  User, 
-  Settings, 
-  CreditCard, 
-  Activity, 
-  Home,
-  Brain,
-  Users,
-  BarChart,
-  Plus,
-  Search
+import {
+  User,
+  Settings,
+  CreditCard,
+  Activity
 } from 'lucide-react'
 import { requireAuth } from '@/lib/auth-server'
 import Link from 'next/link'
@@ -107,40 +99,8 @@ export default async function DashboardPage() {
   // Server-side authentication requirement
   const user = await requireAuth()
 
-  const sidebarNavigation = [
-    { name: 'Overview', href: '/dashboard', icon: Home, current: true },
-    { name: 'Profile', href: '/profile', icon: User },
-    { name: 'Settings', href: '/settings', icon: Settings },
-    { name: 'Billing', href: '/billing', icon: CreditCard },
-    { name: 'Analytics', href: '/analytics', icon: BarChart }
-  ]
-
-  const tourSteps = [
-    {
-      target: '[data-tour="overview"]',
-      title: 'Dashboard Overview',
-      content: 'Get a quick overview of your account stats and recent activity.'
-    },
-    {
-      target: '[data-tour="stats"]',
-      title: 'Account Statistics',
-      content: 'View your key metrics and performance indicators here.'
-    },
-    {
-      target: '[data-tour="actions"]',
-      title: 'Quick Actions',
-      content: 'Access your most commonly used features from these cards.'
-    }
-  ]
-
   return (
-    <DashboardLayout
-      navigation={sidebarNavigation}
-      headerActions={[
-        <CommandPalette key="command-palette" />,
-        <Tour key="tour" steps={tourSteps} />
-      ]}
-    >
+    <DashboardLayout>
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Header */}