@digilogiclabs/create-saas-app 2.2.1 → 2.4.0

package/dist/templates/web/iot-dashboard/template/package.json

@@ -1,49 +1,49 @@
-{
-  "name": "{{packageName}}",
-  "version": "0.1.0",
-  "description": "{{description}} - IoT Dashboard",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "type-check": "tsc --noEmit",
-    "test": "vitest",
-    "test:run": "vitest run"
-  },
-  "dependencies": {
-    "next": "^15.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.1.0",
-    "@digilogiclabs/app-sdk": "^1.0.0",
-    "@digilogiclabs/saas-factory-auth": "^1.0.7",
-    "@digilogiclabs/saas-factory-ui": "^1.0.1",
-    "tailwindcss": "^4.0.0",
-    "clsx": "^2.0.0",
-    "class-variance-authority": "^0.7.0",
-    "tailwind-merge": "^2.0.0",
-    "next-themes": "^0.4.0",
-    "lucide-react": "^0.460.0",
-    "zod": "^3.22.4",
-    "zustand": "^4.5.0",
-    "recharts": "^2.13.0",
-    "date-fns": "^4.1.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.7.0",
-    "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "eslint": "^9.0.0",
-    "eslint-config-next": "^15.0.0",
-    "prettier": "^3.4.0",
-    "vitest": "^2.1.0",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/jest-dom": "^6.6.0"
-  },
-  "engines": {
-    "node": ">=20.0.0"
-  }
-}
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}} - IoT Dashboard",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run"
+  },
+  "dependencies": {
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@digilogiclabs/platform-core": "^1.13.0",
+    "@digilogiclabs/app-sdk": "^1.0.0",
+    "@digilogiclabs/saas-factory-auth": "^1.0.7",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
+    "tailwindcss": "^4.0.0",
+    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
+    "tailwind-merge": "^2.0.0",
+    "next-themes": "^0.4.0",
+    "lucide-react": "^0.460.0",
+    "zod": "^4.1.0",
+    "zustand": "^4.5.0",
+    "recharts": "^2.13.0",
+    "date-fns": "^4.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^15.0.0",
+    "prettier": "^3.4.0",
+    "vitest": "^2.1.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.6.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/dist/templates/web/iot-dashboard/template/src/app/dashboard/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Button, Card, PulseIndicator } from '@digilogiclabs/saas-factory-ui'
 import { Cpu, Activity, Signal, Bell, AlertTriangle, CheckCircle, Clock, ThermometerSun, Gauge, Wifi, Plus } from 'lucide-react'
 import Link from 'next/link'
 
@@ -202,16 +202,11 @@ export default function DashboardPage() {
                     </td>
                     <td className="py-3 px-4 text-slate-600 dark:text-slate-400">{device.type}</td>
                     <td className="py-3 px-4">
-                      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
-                        device.status === 'online'
-                          ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-                          : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-                      }`}>
-                        <span className={`w-1.5 h-1.5 rounded-full mr-1.5 ${
-                          device.status === 'online' ? 'bg-green-500' : 'bg-red-500'
-                        }`} />
-                        {device.status}
-                      </span>
+                      <PulseIndicator
+                        status={device.status === 'online' ? 'success' : 'error'}
+                        label={device.status}
+                        size="sm"
+                      />
                     </td>
                     <td className="py-3 px-4 text-slate-600 dark:text-slate-400 flex items-center">
                       <Clock className="w-3 h-3 mr-1" />

package/dist/templates/web/iot-dashboard/template/src/app/error.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
+import Link from 'next/link'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center p-4">
+      <Card className="p-8 max-w-lg w-full">
+        <div className="flex flex-col items-center space-y-6 text-center">
+          <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          </div>
+
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
+              Something went wrong!
+            </h1>
+            <p className="text-slate-600 dark:text-slate-300 mb-4">
+              We encountered an unexpected error. This has been logged and our team will look into it.
+            </p>
+
+            {process.env.NODE_ENV === 'development' && (
+              <details className="mt-4 text-left">
+                <summary className="cursor-pointer text-sm text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">
+                  Error details (development only)
+                </summary>
+                <div className="mt-2 p-3 bg-slate-100 dark:bg-slate-800 rounded text-xs font-mono text-slate-700 dark:text-slate-300 overflow-auto max-h-40">
+                  <div className="mb-2">
+                    <strong>Message:</strong> {error.message}
+                  </div>
+                  {error.digest && (
+                    <div className="mb-2">
+                      <strong>Digest:</strong> {error.digest}
+                    </div>
+                  )}
+                  {error.stack && (
+                    <div>
+                      <strong>Stack:</strong>
+                      <pre className="whitespace-pre-wrap mt-1">{error.stack}</pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            )}
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-3 w-full">
+            <Button onClick={reset} className="flex-1 bg-emerald-600 hover:bg-emerald-700" size="lg">
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Try again
+            </Button>
+            <Link href="/" className="flex-1">
+              <Button variant="outline" className="w-full" size="lg">
+                <Home className="w-4 h-4 mr-2" />
+                Go home
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web/iot-dashboard/template/src/app/loading.tsx

@@ -0,0 +1,78 @@
+import { Card, SkeletonText } from '@digilogiclabs/saas-factory-ui'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+      {/* Header skeleton */}
+      <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 py-4">
+        <div className="max-w-7xl mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <SkeletonText className="h-8 w-8 rounded-lg" />
+            <SkeletonText className="h-8 w-48" />
+          </div>
+          <div className="flex gap-6">
+            <SkeletonText className="h-4 w-16" />
+            <SkeletonText className="h-4 w-20" />
+            <SkeletonText className="h-4 w-12" />
+          </div>
+          <div className="flex gap-2">
+            <SkeletonText className="h-8 w-20" />
+            <SkeletonText className="h-8 w-24" />
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 py-16">
+        {/* Hero skeleton */}
+        <div className="text-center mb-16">
+          <SkeletonText className="h-6 w-48 mx-auto mb-6" />
+          <SkeletonText className="h-12 w-96 mx-auto mb-6" />
+          <SkeletonText className="h-6 w-[32rem] mx-auto mb-8" />
+        </div>
+
+        {/* Device cards skeleton */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-16">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Card key={i} className="p-6">
+              <div className="animate-pulse">
+                <div className="flex items-center justify-between mb-3">
+                  <SkeletonText className="h-10 w-10 rounded-lg" />
+                  <SkeletonText className="h-5 w-20 rounded-full" />
+                </div>
+                <SkeletonText className="h-5 w-32 mb-2" />
+                <SkeletonText className="h-8 w-12" />
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        {/* Features skeleton */}
+        <div className="mb-16">
+          <SkeletonText className="h-8 w-64 mx-auto mb-12" />
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Card key={i} className="p-6">
+                <div className="animate-pulse text-center">
+                  <SkeletonText className="h-12 w-12 mx-auto mb-4 rounded-lg" />
+                  <SkeletonText className="h-5 w-32 mx-auto mb-2" />
+                  <SkeletonText className="h-4 w-full" />
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* Loading indicator */}
+        <div className="flex justify-center">
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <div className="w-8 h-8 border-4 border-slate-200 dark:border-slate-700 rounded-full"></div>
+              <div className="absolute top-0 left-0 w-8 h-8 border-4 border-emerald-600 border-t-transparent rounded-full animate-spin"></div>
+            </div>
+            <p className="text-sm text-slate-600 dark:text-slate-300">Loading IoT dashboard...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/iot-dashboard/template/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Button, Card, PulseIndicator } from '@digilogiclabs/saas-factory-ui'
 import { useAuth } from '@digilogiclabs/app-sdk'
 import { Cpu, Activity, Signal, Bell, Settings, ArrowRight, User, LogOut, Wifi, ThermometerSun, Gauge, Shield } from 'lucide-react'
 import Link from 'next/link'
@@ -140,13 +140,11 @@ export default function Home() {
                 <div className="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
                   <device.icon className="w-5 h-5 text-emerald-600" />
                 </div>
-                <span className={`text-xs px-2 py-1 rounded-full ${
-                  device.status === 'online'
-                    ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-                    : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
-                }`}>
-                  {device.status === 'online' ? 'All Online' : 'Partial'}
-                </span>
+                <PulseIndicator
+                  status={device.status === 'online' ? 'success' : 'loading'}
+                  label={device.status === 'online' ? 'All Online' : 'Partial'}
+                  size="sm"
+                />
               </div>
               <h3 className="font-semibold text-slate-900 dark:text-white">{device.name}</h3>
               <p className="text-2xl font-bold text-emerald-600">{device.count}</p>

package/dist/templates/web/marketplace/template/package.json

@@ -1,51 +1,51 @@
-{
-  "name": "{{packageName}}",
-  "version": "0.1.0",
-  "description": "{{description}} - Multi-vendor Marketplace",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "type-check": "tsc --noEmit",
-    "test": "vitest",
-    "test:run": "vitest run"
-  },
-  "dependencies": {
-    "next": "^15.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.1.0",
-    "@digilogiclabs/app-sdk": "^1.0.0",
-    "@digilogiclabs/saas-factory-auth": "^1.0.7",
-    "@digilogiclabs/saas-factory-payments": "^1.2.9",
-    "@digilogiclabs/saas-factory-ui": "^1.0.1",
-    "stripe": "^16.12.0",
-    "@stripe/react-stripe-js": "^2.8.0",
-    "@stripe/stripe-js": "^4.10.0",
-    "tailwindcss": "^4.0.0",
-    "clsx": "^2.0.0",
-    "class-variance-authority": "^0.7.0",
-    "tailwind-merge": "^2.0.0",
-    "next-themes": "^0.4.0",
-    "lucide-react": "^0.460.0",
-    "zod": "^3.22.4",
-    "zustand": "^4.5.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.7.0",
-    "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "eslint": "^9.0.0",
-    "eslint-config-next": "^15.0.0",
-    "prettier": "^3.4.0",
-    "vitest": "^2.1.0",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/jest-dom": "^6.6.0"
-  },
-  "engines": {
-    "node": ">=20.0.0"
-  }
-}
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}} - Multi-vendor Marketplace",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run"
+  },
+  "dependencies": {
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@digilogiclabs/platform-core": "^1.13.0",
+    "@digilogiclabs/app-sdk": "^1.0.0",
+    "@digilogiclabs/saas-factory-auth": "^1.0.7",
+    "@digilogiclabs/saas-factory-payments": "^1.2.9",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
+    "stripe": "^16.12.0",
+    "@stripe/react-stripe-js": "^2.8.0",
+    "@stripe/stripe-js": "^4.10.0",
+    "tailwindcss": "^4.0.0",
+    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
+    "tailwind-merge": "^2.0.0",
+    "next-themes": "^0.4.0",
+    "lucide-react": "^0.460.0",
+    "zod": "^4.1.0",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^15.0.0",
+    "prettier": "^3.4.0",
+    "vitest": "^2.1.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.6.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/dist/templates/web/marketplace/template/src/app/error.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
+import Link from 'next/link'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
+      <Card className="p-8 max-w-lg w-full">
+        <div className="flex flex-col items-center space-y-6 text-center">
+          <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          </div>
+
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+              Something went wrong!
+            </h1>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              We encountered an unexpected error. This has been logged and our team will look into it.
+            </p>
+
+            {process.env.NODE_ENV === 'development' && (
+              <details className="mt-4 text-left">
+                <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                  Error details (development only)
+                </summary>
+                <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-700 dark:text-gray-300 overflow-auto max-h-40">
+                  <div className="mb-2">
+                    <strong>Message:</strong> {error.message}
+                  </div>
+                  {error.digest && (
+                    <div className="mb-2">
+                      <strong>Digest:</strong> {error.digest}
+                    </div>
+                  )}
+                  {error.stack && (
+                    <div>
+                      <strong>Stack:</strong>
+                      <pre className="whitespace-pre-wrap mt-1">{error.stack}</pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            )}
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-3 w-full">
+            <Button onClick={reset} className="flex-1" size="lg">
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Try again
+            </Button>
+            <Link href="/" className="flex-1">
+              <Button variant="outline" className="w-full" size="lg">
+                <Home className="w-4 h-4 mr-2" />
+                Go home
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web/marketplace/template/src/app/loading.tsx

@@ -0,0 +1,57 @@
+import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header skeleton */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-4">
+        <div className="max-w-7xl mx-auto flex items-center justify-between">
+          <SkeletonText className="h-8 w-48" />
+          <SkeletonText className="h-10 w-64" />
+          <div className="flex gap-2">
+            <SkeletonText className="h-8 w-20" />
+            <SkeletonText className="h-8 w-20" />
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Hero skeleton */}
+        <div className="text-center mb-12">
+          <SkeletonText className="h-12 w-80 mx-auto mb-4" />
+          <SkeletonText className="h-6 w-96 mx-auto" />
+        </div>
+
+        {/* Category cards skeleton */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+
+        {/* Products skeleton */}
+        <div className="mb-12">
+          <SkeletonText className="h-8 w-48 mb-6" />
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <SkeletonCard key={i} />
+            ))}
+          </div>
+        </div>
+
+        {/* Loading indicator */}
+        <div className="flex justify-center">
+          <Card className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="relative">
+                <div className="w-8 h-8 border-4 border-gray-200 dark:border-gray-700 rounded-full"></div>
+                <div className="absolute top-0 left-0 w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-300">Loading marketplace...</p>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/marketplace/template/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Button, Card, GradientBorderCard } from '@digilogiclabs/saas-factory-ui'
 import { useAuth } from '@digilogiclabs/app-sdk'
 import { ShoppingCart, Store, Search, Star, ArrowRight, User, LogOut } from 'lucide-react'
 import Link from 'next/link'
@@ -151,16 +151,18 @@ export default function Home() {
         </div>
 
         {/* Become a Vendor CTA */}
-        <Card className="p-8 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center">
-          <Store className="w-12 h-12 mx-auto mb-4" />
-          <h2 className="text-2xl font-bold mb-2">Become a Vendor</h2>
-          <p className="mb-6 opacity-90 max-w-md mx-auto">
-            Start selling your products to thousands of customers. Low fees, powerful tools.
-          </p>
-          <Link href="/vendors/apply">
-            <Button variant="secondary" size="lg">Apply Now</Button>
-          </Link>
-        </Card>
+        <GradientBorderCard gradientColors="from-blue-500 via-purple-500 to-blue-500" borderWidth={2}>
+          <div className="text-center">
+            <Store className="w-12 h-12 mx-auto mb-4 text-blue-600 dark:text-blue-400" />
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Become a Vendor</h2>
+            <p className="mb-6 text-gray-600 dark:text-gray-300 max-w-md mx-auto">
+              Start selling your products to thousands of customers. Low fees, powerful tools.
+            </p>
+            <Link href="/vendors/apply">
+              <Button size="lg">Apply Now</Button>
+            </Link>
+          </div>
+        </GradientBorderCard>
       </div>
     </main>
   )