@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

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

@@ -1,319 +1,127 @@
 'use client';
 
 import React, { useState } from 'react';
-import { usePayments } from '@digilogiclabs/app-sdk';
-import { formatCurrency } from '@/lib/utils';
-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';
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@digilogiclabs/saas-factory-ui';
+import { CreditCard, Check, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
 
-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 PLANS = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    price: '$9',
+    period: '/month',
+    features: ['Up to 1,000 users', 'Basic analytics', 'Email support', 'API access'],
+    featured: false,
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    price: '$29',
+    period: '/month',
+    features: ['Unlimited users', 'Advanced analytics', 'Priority support', 'Custom domains', 'Team management'],
+    featured: true,
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    price: '$99',
+    period: '/month',
+    features: ['Everything in Pro', 'SSO/SAML', 'Dedicated support', 'SLA guarantee', 'Custom integrations'],
+    featured: false,
+  },
+];
 
-  const handlePayment = () => {
-    console.log('Processing payment...');
-    // Handle payment processing
-  };
+export default function CheckoutPage() {
+  const [selectedPlan, setSelectedPlan] = useState('pro');
+  const [loading, setLoading] = useState(false);
 
-  // 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 onCheckout = async () => {
+    setLoading(true);
+    try {
+      // TODO: Create Stripe checkout session
+      const res = await fetch('/api/checkout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ planId: selectedPlan }),
+      });
+      const data = await res.json();
+      if (data.url) {
+        window.location.href = data.url;
+      }
+    } finally {
+      setLoading(false);
     }
-  ];
-  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="min-h-screen bg-background py-12">
+      <div className="mx-auto max-w-5xl px-4">
+        <div className="mb-8">
+          <Link
+            href="/dashboard"
+            className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
+          >
+            <ArrowLeft className="h-3 w-3" />
+            Back to Dashboard
+          </Link>
+          <h1 className="text-3xl font-bold text-foreground">Choose Your Plan</h1>
+          <p className="text-muted-foreground mt-1">
+            Select the plan that best fits your needs.
+          </p>
+        </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={6} 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={6} className="mb-8">
-          {plans.map((plan) => (
-            <SwipeableCard
+        <div className="grid gap-6 md:grid-cols-3 mb-8">
+          {PLANS.map((plan) => (
+            <Card
               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}
+              className={`cursor-pointer transition-all ${
+                selectedPlan === plan.id
+                  ? 'ring-2 ring-primary border-primary'
+                  : 'hover:border-primary/50'
+              } ${plan.featured ? 'shadow-lg' : ''}`}
+              onClick={() => setSelectedPlan(plan.id)}
             >
-              <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
+              <CardHeader>
+                <CardTitle className="flex items-center justify-between">
+                  {plan.name}
+                  {plan.featured && (
+                    <span className="text-xs font-medium bg-primary text-primary-foreground px-2 py-0.5 rounded-full">
+                      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>
+                  )}
+                </CardTitle>
+                <div>
+                  <span className="text-3xl font-bold text-foreground">{plan.price}</span>
+                  <span className="text-muted-foreground">{plan.period}</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}
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2">
+                  {plan.features.map((feat) => (
+                    <li key={feat} className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Check className="h-4 w-4 text-primary shrink-0" />
+                      {feat}
                     </li>
                   ))}
                 </ul>
-                <Button 
-                  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>
+              </CardContent>
+            </Card>
           ))}
-              </ResponsiveGrid>
-            </NetworkAwareContent>
+        </div>
 
-            {/* 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={4}>
-                    <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 className="flex justify-center">
+          <Button
+            onClick={onCheckout}
+            size="lg"
+            disabled={loading}
+            className="min-w-[200px]"
+          >
+            <CreditCard className="mr-2 h-4 w-4" />
+            {loading ? 'Processing...' : 'Continue to Payment'}
+          </Button>
         </div>
-      </OfflineWrapper>
-    </PageTransition>
+      </div>
+    </div>
   );
 }
-

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

@@ -36,10 +36,10 @@ function StatsCard({ title, value, icon: Icon, href }: {
     <Card className="p-6 hover:shadow-lg transition-shadow">
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
-          <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <p className="text-2xl font-bold text-foreground">{value}</p>
         </div>
-        <Icon className="h-8 w-8 text-blue-600 dark:text-blue-400" />
+        <Icon className="h-8 w-8 text-primary" />
       </div>
     </Card>
   )
@@ -86,8 +86,8 @@ function UserStatsSkeleton() {
       {[...Array(4)].map((_, i) => (
         <Card key={i} className="p-6">
           <div className="animate-pulse">
-            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2"></div>
-            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+            <div className="h-4 bg-muted rounded w-1/2 mb-2"></div>
+            <div className="h-8 bg-muted rounded w-1/3"></div>
           </div>
         </Card>
       ))}
@@ -101,14 +101,14 @@ export default async function DashboardPage() {
 
   return (
     <DashboardLayout>
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="min-h-screen bg-muted">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
           {/* Header */}
           <div className="mb-8" data-tour="overview">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            <h1 className="text-3xl font-bold text-foreground">
               Welcome back, {user.name || user.email}!
             </h1>
-            <p className="text-gray-600 dark:text-gray-300 mt-2">
+            <p className="text-muted-foreground mt-2">
               Here's what's happening with your account today.
             </p>
           </div>
@@ -124,10 +124,10 @@ export default async function DashboardPage() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8" data-tour="actions">
           <Card className="p-6">
             <div className="flex items-center mb-4">
-              <User className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Profile</h3>
+              <User className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold text-foreground">Profile</h3>
             </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-muted-foreground mb-4">
               Update your personal information and preferences
             </p>
             <Link href="/profile">
@@ -137,10 +137,10 @@ export default async function DashboardPage() {
 
           <Card className="p-6">
             <div className="flex items-center mb-4">
-              <Settings className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Settings</h3>
+              <Settings className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold text-foreground">Settings</h3>
             </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-muted-foreground mb-4">
               Configure your account settings and security options
             </p>
             <Link href="/settings">
@@ -150,10 +150,10 @@ export default async function DashboardPage() {
 
           <Card className="p-6">
             <div className="flex items-center mb-4">
-              <CreditCard className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Billing</h3>
+              <CreditCard className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold text-foreground">Billing</h3>
             </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-muted-foreground mb-4">
               View your subscription and payment information
             </p>
             <Link href="/billing">
@@ -164,28 +164,28 @@ export default async function DashboardPage() {
 
         {/* Recent Activity */}
         <Card className="p-6">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Recent Activity</h3>
+          <h3 className="text-lg font-semibold text-foreground mb-4">Recent Activity</h3>
           <div className="space-y-4">
-            <div className="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between py-3 border-b border-border">
               <div className="flex items-center">
                 <div className="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
-                <span className="text-gray-900 dark:text-white">Account created</span>
+                <span className="text-foreground">Account created</span>
               </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">2 days ago</span>
+              <span className="text-sm text-muted-foreground">2 days ago</span>
             </div>
-            <div className="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between py-3 border-b border-border">
               <div className="flex items-center">
-                <div className="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
-                <span className="text-gray-900 dark:text-white">Profile updated</span>
+                <div className="w-2 h-2 bg-primary rounded-full mr-3"></div>
+                <span className="text-foreground">Profile updated</span>
               </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">1 week ago</span>
+              <span className="text-sm text-muted-foreground">1 week ago</span>
             </div>
             <div className="flex items-center justify-between py-3">
               <div className="flex items-center">
                 <div className="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
-                <span className="text-gray-900 dark:text-white">Subscription started</span>
+                <span className="text-foreground">Subscription started</span>
               </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">2 weeks ago</span>
+              <span className="text-sm text-muted-foreground">2 weeks ago</span>
             </div>
           </div>
         </Card>