@digilogiclabs/create-saas-app 1.14.0 → 1.17.0

package/src/templates/mobile/ui-auth-payments/template/metro.config.js

@@ -0,0 +1,11 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+// Add SVG support
+config.transformer.babelTransformerPath = require.resolve('react-native-svg-transformer');
+config.resolver.assetExts = config.resolver.assetExts.filter((ext) => ext !== 'svg');
+config.resolver.sourceExts = [...config.resolver.sourceExts, 'svg'];
+
+module.exports = config;

package/src/templates/mobile/ui-auth-payments/template/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "{{packageName}}",
+  "version": "1.0.0",
+  "description": "{{description}} - Mobile App with UI, Auth, and Payments",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "dev": "expo start --dev-client",
+    "android": "expo start --android",
+    "ios": "expo start --ios", 
+    "web": "expo start --web",
+    "build": "eas build",
+    "build:android": "eas build --platform android",
+    "build:ios": "eas build --platform ios",
+    "preview": "eas build --profile preview",
+    "submit": "eas submit",
+    "test": "jest",
+    "lint": "expo lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "expo": "~50.0.0",
+    "react": "18.2.0",
+    "react-native": "0.73.4",
+    
+    "@expo/vector-icons": "^14.0.0",
+    "@expo/config-plugins": "~7.8.0",
+    
+    "@react-navigation/native": "^6.1.9",
+    "@react-navigation/stack": "^6.3.20",
+    "@react-navigation/bottom-tabs": "^6.5.11",
+    "@react-navigation/drawer": "^6.6.6",
+    "react-native-screens": "~3.29.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-reanimated": "~3.6.2",
+    
+    "@digilogiclabs/saas-factory-ui": "^0.22.0",
+    "@digilogiclabs/saas-factory-auth": "^1.0.1", 
+    "@digilogiclabs/saas-factory-payments": "^1.1.0",
+    
+    "@supabase/supabase-js": "^2.39.0",
+    "@react-native-async-storage/async-storage": "1.21.0",
+    
+    "@stripe/stripe-react-native": "0.37.2",
+    
+    "expo-router": "~3.4.0",
+    "expo-font": "~11.10.0",
+    "expo-linking": "~6.2.2",
+    "expo-constants": "~15.4.0",
+    "expo-status-bar": "~1.11.1",
+    "expo-splash-screen": "~0.26.4",
+    "expo-system-ui": "~2.9.3",
+    "expo-web-browser": "~12.8.2",
+    "expo-haptics": "~12.8.1",
+    "expo-device": "~5.9.3",
+    "expo-location": "~16.5.3",
+    "expo-image-picker": "~14.7.1",
+    "expo-camera": "~14.1.3",
+    "expo-barcode-scanner": "~12.9.3",
+    "expo-notifications": "~0.27.6",
+    "expo-secure-store": "~12.8.1",
+    "expo-file-system": "~16.0.6",
+    "expo-updates": "~0.24.11",
+    "expo-linear-gradient": "~12.7.2",
+    "expo-blur": "~12.9.2",
+    
+    "@react-native-community/netinfo": "11.2.1",
+    "react-native-mmkv": "^2.12.2",
+    "react-native-svg": "14.1.0",
+    "react-native-url-polyfill": "^2.0.0",
+    
+    "zustand": "^4.4.7",
+    "react-hook-form": "^7.48.2",
+    "@hookform/resolvers": "^3.3.2",
+    "zod": "^3.22.4",
+    "date-fns": "^3.0.6",
+    "react-native-heroicons": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.6",
+    "@types/react": "~18.2.45",
+    "@types/react-native": "~0.73.0",
+    "typescript": "~5.3.3",
+    "jest": "^29.7.0",
+    "@testing-library/react-native": "^12.4.2",
+    "@testing-library/jest-native": "^5.4.3",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-expo": "^7.0.0",
+    "prettier": "^3.1.1"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "setupFilesAfterEnv": ["<rootDir>/jest-setup.ts"],
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
+    ]
+  },
+  "private": true,
+  "expo": {
+    "install": {
+      "exclude": ["react-native-safe-area-context"]
+    }
+  }
+}

package/src/templates/mobile/ui-auth-payments/template/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./*"],
+      "@/components/*": ["./components/*"],
+      "@/hooks/*": ["./hooks/*"], 
+      "@/utils/*": ["./utils/*"],
+      "@/types/*": ["./types/*"],
+      "@/constants/*": ["./constants/*"]
+    },
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/src/templates/web/base/template/src/app/dashboard/page.tsx

@@ -15,7 +15,10 @@ import {
   NetworkAwareContent,
   OfflineWrapper,
   useNetworkInfo,
-  useOfflineState
+  useOfflineState,
+  DashboardLayout,
+  CommandPalette,
+  Tour
 } from '@digilogiclabs/saas-factory-ui';
 import { 
   BarChart3, 
@@ -27,7 +30,10 @@ import {
   Star,
   Trash2,
   Wifi,
-  WifiOff 
+  WifiOff,
+  Home,
+  FileText,
+  Activity 
 } from 'lucide-react';
 
 // Mock data for demonstration
@@ -43,6 +49,32 @@ const mockActivityData = Array.from({ length: 50 }, (_, i) => ({
 export default function DashboardPage() {
   const { user } = useAuth();
   
+  const sidebarNavigation = [
+    { name: 'Dashboard', href: '/dashboard', icon: Home, current: true },
+    { name: 'Analytics', href: '/dashboard/analytics', icon: BarChart3 },
+    { name: 'Reports', href: '/dashboard/reports', icon: FileText },
+    { name: 'Activity', href: '/dashboard/activity', icon: Activity },
+    { name: 'Settings', href: '/settings', icon: Settings }
+  ]
+
+  const tourSteps = [
+    {
+      target: '[data-tour="overview"]',
+      title: 'Mobile-First Dashboard',
+      content: 'This dashboard is optimized for mobile devices with offline support and responsive design.'
+    },
+    {
+      target: '[data-tour="stats"]',
+      title: 'Network-Aware Stats',
+      content: 'Statistics automatically adapt based on your network connection speed.'
+    },
+    {
+      target: '[data-tour="activity"]',
+      title: 'Interactive Activity Feed',
+      content: 'Swipe left or right on activity items to archive, star, or delete them.'
+    }
+  ]
+  
   const lazyImageConfig = {
     mobileOptimization: {
       quality: 80,
@@ -116,23 +148,30 @@ export default function DashboardPage() {
 
 
   return (
-    <PageTransition type="slide" direction="horizontal" duration={300}>
-      <OfflineWrapper
-        cacheStrategy="stale-while-revalidate"
-        showOfflineIndicator={true}
-        backgroundSync={true}
-      >
-        <PullToRefresh 
-          onRefresh={handleRefresh}
-          threshold={80}
-          loadingIndicator="spinner"
-          hapticOnTrigger={true}
-          networkAware={true}
+    <DashboardLayout
+      navigation={sidebarNavigation}
+      headerActions={[
+        <CommandPalette key="command-palette" />,
+        <Tour key="tour" steps={tourSteps} />
+      ]}
+    >
+      <PageTransition type="slide" direction="horizontal" duration={300}>
+        <OfflineWrapper
+          cacheStrategy="stale-while-revalidate"
+          showOfflineIndicator={true}
+          backgroundSync={true}
         >
-          <div className="min-h-screen bg-gray-50">
-            <MobileContainer className="py-6">
-              {/* Header */}
-              <div className="mb-6">
+          <PullToRefresh 
+            onRefresh={handleRefresh}
+            threshold={80}
+            loadingIndicator="spinner"
+            hapticOnTrigger={true}
+            networkAware={true}
+          >
+            <div className="min-h-screen bg-gray-50">
+              <MobileContainer className="py-6">
+                {/* Header */}
+                <div className="mb-6" data-tour="overview">
                 <div className="flex items-center justify-between">
                   <div>
                     <h1 className="text-2xl font-bold text-gray-900">
@@ -164,7 +203,8 @@ export default function DashboardPage() {
               </div>
 
               {/* Stats Grid */}
-              <NetworkAwareContent
+              <div data-tour="stats">
+                <NetworkAwareContent
                 showOnSlow={
                   <ResponsiveGrid columns={gridConfig.columns_2_2} gap="sm" className="mb-6">
                     {stats.slice(0, 2).map((stat, index) => (
@@ -202,9 +242,10 @@ export default function DashboardPage() {
                   ))}
                 </ResponsiveGrid>
               </NetworkAwareContent>
+              </div>
 
               {/* Activity Feed */}
-              <Card className="mb-6">
+              <Card className="mb-6" data-tour="activity">
                 <CardHeader>
                   <CardTitle className="flex items-center gap-2">
                     <BarChart3 className="h-5 w-5" />
@@ -320,5 +361,6 @@ export default function DashboardPage() {
         </PullToRefresh>
       </OfflineWrapper>
     </PageTransition>
+    </DashboardLayout>
   );
 }

package/src/templates/web/ui-auth/template/package.json

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.18.4",
+    "@digilogiclabs/saas-factory-ui": "^0.21.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.1",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",

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

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.18.4",
+    "@digilogiclabs/saas-factory-ui": "^0.21.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.1",
     "@digilogiclabs/saas-factory-payments": "^1.1.0",
     "stripe": "^14.0.0",

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

@@ -1,6 +1,21 @@
 import { Suspense } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { User, Settings, CreditCard, Activity } from 'lucide-react'
+import { 
+  Button, 
+  Card, 
+  DashboardLayout,
+  CommandPalette,
+  Tour 
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  User, 
+  Settings, 
+  CreditCard, 
+  Activity,
+  Home,
+  BarChart,
+  FileText,
+  ShoppingCart
+} from 'lucide-react'
 import { requireAuth } from '@/lib/auth-server'
 import Link from 'next/link'
 
@@ -90,26 +105,62 @@ export default async function DashboardPage() {
   // Server-side authentication requirement
   const user = await requireAuth()
 
+  const sidebarNavigation = [
+    { name: 'Overview', href: '/dashboard', icon: Home, current: true },
+    { name: 'Orders', href: '/dashboard/orders', icon: ShoppingCart },
+    { name: 'Analytics', href: '/dashboard/analytics', icon: BarChart },
+    { name: 'Reports', href: '/dashboard/reports', icon: FileText },
+    { name: 'Settings', href: '/settings', icon: Settings },
+    { name: 'Billing', href: '/billing', icon: CreditCard }
+  ]
+
+  const tourSteps = [
+    {
+      target: '[data-tour="overview"]',
+      title: 'Dashboard Overview',
+      content: 'Get a comprehensive view of your business metrics and activity.'
+    },
+    {
+      target: '[data-tour="stats"]',
+      title: 'Key Statistics',
+      content: 'Monitor your most important business metrics at a glance.'
+    },
+    {
+      target: '[data-tour="actions"]',
+      title: 'Quick Actions',
+      content: 'Access your most frequently used features and settings.'
+    }
+  ]
+
   return (
-    <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 */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-            Welcome back, {user.name || user.email}!
-          </h1>
-          <p className="text-gray-600 dark:text-gray-300 mt-2">
-            Here's what's happening with your account today.
-          </p>
-        </div>
+    <DashboardLayout
+      navigation={sidebarNavigation}
+      headerActions={[
+        <CommandPalette key="command-palette" />,
+        <Tour key="tour" steps={tourSteps} />
+      ]}
+    >
+      <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 */}
+          <div className="mb-8" data-tour="overview">
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              Welcome back, {user.name || user.email}!
+            </h1>
+            <p className="text-gray-600 dark:text-gray-300 mt-2">
+              Here's what's happening with your account today.
+            </p>
+          </div>
 
         {/* Stats - Streaming with Suspense */}
-        <Suspense fallback={<UserStatsSkeleton />}>
-          <UserStats userId={user.id} />
-        </Suspense>
+        <div data-tour="stats">
+          <Suspense fallback={<UserStatsSkeleton />}>
+            <UserStats userId={user.id} />
+          </Suspense>
+        </div>
 
         {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+        <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" />
@@ -179,5 +230,6 @@ export default async function DashboardPage() {
         </Card>
       </div>
     </div>
+    </DashboardLayout>
   )
 }

package/src/templates/web/ui-auth-payments-ai/template/package.json

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.18.4",
+    "@digilogiclabs/saas-factory-ui": "^0.21.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.1",
     "@digilogiclabs/saas-factory-payments": "^1.1.0",
     "@digilogiclabs/saas-factory-ai": "^3.1.1",

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

@@ -1,20 +1,30 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { usePayments, formatCurrency, formatDate } from '@digilogiclabs/saas-factory-payments';
-import { Button, Card } from '@digilogiclabs/saas-factory-ui';
+import { 
+  Button, 
+  Card,
+  SingleStepForm,
+  FormField,
+  FormSection,
+  FormProvider,
+  Modal
+} from '@digilogiclabs/saas-factory-ui';
 
 export default function BillingPage() {
   const { loading } = usePayments();
+  const [showPaymentMethodModal, setShowPaymentMethodModal] = useState(false);
+  const [showPlanChangeModal, setShowPlanChangeModal] = useState(false);
+  const [editingPaymentMethod, setEditingPaymentMethod] = useState<string | null>(null);
 
   const handleSubscriptionChange = () => {
-    console.log('Subscription change requested');
-    // Handle subscription changes (upgrade, downgrade, cancel, resume)
+    setShowPlanChangeModal(true);
   };
 
-  const handlePaymentMethodUpdate = () => {
-    console.log('Payment method update requested');
-    // Handle payment method updates (add, edit, delete, set default)
+  const handlePaymentMethodUpdate = (methodId?: string) => {
+    setEditingPaymentMethod(methodId || null);
+    setShowPaymentMethodModal(true);
   };
 
   const handleInvoiceDownload = (invoiceId: string) => {
@@ -22,6 +32,19 @@ export default function BillingPage() {
     // Handle invoice download
   };
 
+  const handlePaymentMethodSubmit = async (formData: FormData) => {
+    console.log('Payment method data:', Object.fromEntries(formData));
+    // Handle payment method creation/update
+    setShowPaymentMethodModal(false);
+    setEditingPaymentMethod(null);
+  };
+
+  const handlePlanChangeSubmit = async (formData: FormData) => {
+    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
   const currentSubscription = {
     plan: 'Pro Plan',
@@ -204,6 +227,194 @@ export default function BillingPage() {
             </table>
           </div>
         </Card>
+
+        {/* Payment Method Modal */}
+        <Modal
+          isOpen={showPaymentMethodModal}
+          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}
+                />
+                
+                <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>
+              </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>
+        </Modal>
+
+        {/* Plan Change Modal */}
+        <Modal
+          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>
+
+              <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']}
+                />
+
+                <FormField
+                  name="prorationPolicy"
+                  type="checkbox"
+                  label="I understand that charges will be prorated for the current billing period"
+                  validation={['required']}
+                />
+              </FormSection>
+
+              <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>
+            </SingleStepForm>
+          </FormProvider>
+        </Modal>
       </div>
     </div>
   );