@digilogiclabs/create-saas-app 2.3.0 → 2.4.0

package/dist/generators/template-generator.js

@@ -119,9 +119,9 @@ class TemplateGenerator {
             generatedDate,
             generatorVersion: '2.0.0',
             // DLL package versions
-            platformCoreVersion: dependencies['@digilogiclabs/platform-core']?.replace('^', '') || '1.12.0',
+            platformCoreVersion: dependencies['@digilogiclabs/platform-core']?.replace('^', '') || '1.13.0',
             appSdkVersion: dependencies['@digilogiclabs/app-sdk']?.replace('^', '') || '1.0.0',
-            uiVersion: dependencies['@digilogiclabs/saas-factory-ui']?.replace('^', '') || '1.0.1',
+            uiVersion: dependencies['@digilogiclabs/saas-factory-ui']?.replace('^', '') || '1.4.0',
             authVersion: dependencies['@digilogiclabs/saas-factory-auth']?.replace('^', '') || '1.0.0',
             paymentsVersion: dependencies['@digilogiclabs/saas-factory-payments']?.replace('^', '') || '1.0.0',
             aiVersion: dependencies['@digilogiclabs/saas-factory-ai']?.replace('^', '') || '1.0.0',
@@ -139,7 +139,7 @@ class TemplateGenerator {
         // ═══════════════════════════════════════════════════════════════
         // Platform Core - Always included for all tiers (infrastructure abstraction)
         if (features.platformCore) {
-            baseDeps['@digilogiclabs/platform-core'] = '^1.10.0';
+            baseDeps['@digilogiclabs/platform-core'] = '^1.13.0';
         }
         // App SDK - Always included for React apps (unified hooks)
         if (features.appSdk && (this.config.platform === 'web' || this.config.platform === 'both')) {
@@ -160,7 +160,7 @@ class TemplateGenerator {
             'ai-platform',
             'iot-dashboard',
         ].includes(this.config.template)) {
-            baseDeps['@digilogiclabs/saas-factory-ui'] = '^1.1.0';
+            baseDeps['@digilogiclabs/saas-factory-ui'] = '^1.4.0';
         }
         // Auth package (tier: micro+)
         if (features.auth && this.config.template !== 'base' && this.config.template !== 'ui-only') {

package/dist/templates/mobile/base/template/package.json

@@ -22,7 +22,7 @@
     "react-native-screens": "~3.22.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-gesture-handler": "~2.12.0",
-    "@digilogiclabs/saas-factory-ui": "^0.27.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.5",
     "@digilogiclabs/saas-factory-payments": "^1.2.7",
     "firebase": "^10.0.0",

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

@@ -35,7 +35,7 @@
     "react-native-gesture-handler": "~2.14.0",
     "react-native-reanimated": "~3.6.2",
     
-    "@digilogiclabs/saas-factory-ui": "^0.27.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.5",
     "@digilogiclabs/saas-factory-payments": "^1.2.7",
     

package/dist/templates/mobile/ui-auth-payments-ai/template/package.json

@@ -35,7 +35,7 @@
     "react-native-gesture-handler": "~2.14.0",
     "react-native-reanimated": "~3.6.2",
     
-    "@digilogiclabs/saas-factory-ui": "^0.27.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.5",
     "@digilogiclabs/saas-factory-payments": "^1.2.7",
     "@digilogiclabs/saas-factory-ai": "^4.0.2",

package/dist/templates/mobile/ui-auth-payments-ai-rag/template/package.json

@@ -38,7 +38,7 @@
     "react-native-gesture-handler": "~2.14.0",
     "react-native-reanimated": "~3.6.2",
     
-    "@digilogiclabs/saas-factory-ui": "^0.27.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.5",
     "@digilogiclabs/saas-factory-payments": "^1.2.7",
     "@digilogiclabs/saas-factory-ai": "^4.0.2",

package/dist/templates/web/ai-platform/template/package.json

@@ -16,12 +16,12 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.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-ai": "^1.0.0",
-    "@digilogiclabs/saas-factory-ui": "^1.0.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "ai": "^3.4.0",
     "@ai-sdk/openai": "^0.0.70",
     "@ai-sdk/anthropic": "^0.0.57",

package/dist/templates/web/ai-platform/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-slate-900 via-purple-900 to-slate-900 flex items-center justify-center p-4">
+      <Card className="p-8 max-w-lg w-full bg-white/5 border-white/10 backdrop-blur-sm">
+        <div className="flex flex-col items-center space-y-6 text-center">
+          <div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-400" />
+          </div>
+
+          <div>
+            <h1 className="text-2xl font-bold text-white mb-2">
+              Something went wrong!
+            </h1>
+            <p className="text-gray-400 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-300">
+                  Error details (development only)
+                </summary>
+                <div className="mt-2 p-3 bg-black/30 rounded text-xs font-mono text-gray-400 overflow-auto max-h-40">
+                  <div className="mb-2">
+                    <strong className="text-gray-300">Message:</strong> {error.message}
+                  </div>
+                  {error.digest && (
+                    <div className="mb-2">
+                      <strong className="text-gray-300">Digest:</strong> {error.digest}
+                    </div>
+                  )}
+                  {error.stack && (
+                    <div>
+                      <strong className="text-gray-300">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-purple-600 hover:bg-purple-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 border-white/20 text-white hover:bg-white/10" size="lg">
+                <Home className="w-4 h-4 mr-2" />
+                Go home
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web/ai-platform/template/src/app/loading.tsx

@@ -0,0 +1,71 @@
+import { Card, SkeletonText } from '@digilogiclabs/saas-factory-ui'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+      {/* Header skeleton */}
+      <div className="border-b border-white/10 bg-black/20 backdrop-blur-sm px-4 py-4">
+        <div className="max-w-7xl mx-auto flex items-center justify-between">
+          <SkeletonText className="h-8 w-48 bg-white/10" />
+          <div className="flex gap-6">
+            <SkeletonText className="h-4 w-16 bg-white/10" />
+            <SkeletonText className="h-4 w-20 bg-white/10" />
+            <SkeletonText className="h-4 w-12 bg-white/10" />
+          </div>
+          <div className="flex gap-2">
+            <SkeletonText className="h-8 w-20 bg-white/10" />
+            <SkeletonText className="h-8 w-24 bg-white/10" />
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 py-16">
+        {/* Hero skeleton */}
+        <div className="text-center mb-20">
+          <SkeletonText className="h-6 w-40 mx-auto mb-6 bg-purple-500/20" />
+          <SkeletonText className="h-16 w-80 mx-auto mb-6 bg-white/10" />
+          <SkeletonText className="h-6 w-96 mx-auto mb-8 bg-white/10" />
+        </div>
+
+        {/* Feature cards skeleton */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Card key={i} className="p-6 bg-white/5 border-white/10">
+              <div className="animate-pulse">
+                <SkeletonText className="h-12 w-12 mb-4 bg-white/10 rounded-lg" />
+                <SkeletonText className="h-5 w-24 mb-2 bg-white/10" />
+                <SkeletonText className="h-4 w-full bg-white/10" />
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        {/* Models skeleton */}
+        <div className="mb-20">
+          <SkeletonText className="h-8 w-48 mb-8 bg-white/10" />
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Card key={i} className="p-4 bg-white/5 border-white/10">
+                <div className="animate-pulse">
+                  <SkeletonText className="h-5 w-20 mb-2 bg-white/10" />
+                  <SkeletonText className="h-4 w-16 bg-white/10" />
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* Loading indicator */}
+        <div className="flex justify-center">
+          <div className="flex items-center gap-3 text-gray-400">
+            <div className="relative">
+              <div className="w-8 h-8 border-4 border-white/10 rounded-full"></div>
+              <div className="absolute top-0 left-0 w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full animate-spin"></div>
+            </div>
+            <p className="text-sm">Loading AI platform...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/ai-platform/template/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Button, Card, PremiumCard, PremiumCardContent, GradientBorderCard } from '@digilogiclabs/saas-factory-ui'
 import { useAuth } from '@digilogiclabs/app-sdk'
 import { Bot, Sparkles, Zap, MessageSquare, Code, Brain, ArrowRight, User, LogOut } from 'lucide-react'
 import Link from 'next/link'
@@ -140,13 +140,15 @@ export default function Home() {
         {/* Features */}
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
           {FEATURES.map((feature) => (
-            <Card key={feature.title} className="p-6 bg-white/5 border-white/10 backdrop-blur-sm hover:bg-white/10 transition">
-              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 bg-${feature.color}-500/20`}>
-                <feature.icon className={`w-6 h-6 text-${feature.color}-400`} />
-              </div>
-              <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
-              <p className="text-gray-400 text-sm">{feature.description}</p>
-            </Card>
+            <PremiumCard key={feature.title} variant="glass" className="bg-white/5 border-white/10 backdrop-blur-sm">
+              <PremiumCardContent className="p-6">
+                <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 bg-${feature.color}-500/20`}>
+                  <feature.icon className={`w-6 h-6 text-${feature.color}-400`} />
+                </div>
+                <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
+                <p className="text-gray-400 text-sm">{feature.description}</p>
+              </PremiumCardContent>
+            </PremiumCard>
           ))}
         </div>
 
@@ -185,18 +187,20 @@ export default function Home() {
         </div>
 
         {/* CTA */}
-        <Card className="p-12 bg-gradient-to-r from-purple-600 to-pink-600 border-0 text-center">
-          <h2 className="text-3xl font-bold text-white mb-4">Ready to Build?</h2>
-          <p className="text-white/80 mb-8 max-w-md mx-auto">
-            Start building AI-powered applications today. Free tier available.
-          </p>
-          <Link href="/signup">
-            <Button size="lg" variant="secondary">
-              Get Started Free
-              <ArrowRight className="w-5 h-5 ml-2" />
-            </Button>
-          </Link>
-        </Card>
+        <GradientBorderCard gradientColors="from-purple-500 via-pink-500 to-purple-500" borderWidth={2}>
+          <div className="text-center py-6">
+            <h2 className="text-3xl font-bold text-white mb-4">Ready to Build?</h2>
+            <p className="text-gray-400 mb-8 max-w-md mx-auto">
+              Start building AI-powered applications today. Free tier available.
+            </p>
+            <Link href="/signup">
+              <Button size="lg" className="bg-purple-600 hover:bg-purple-700">
+                Get Started Free
+                <ArrowRight className="w-5 h-5 ml-2" />
+              </Button>
+            </Link>
+          </div>
+        </GradientBorderCard>
       </div>
     </main>
   )

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

@@ -17,8 +17,8 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
-    "@digilogiclabs/saas-factory-ui": "^0.27.3",
+    "@digilogiclabs/platform-core": "^1.13.0",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.6",
     "@digilogiclabs/saas-factory-payments": "^1.2.8",
     "tailwindcss": "^3.3.0",

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

@@ -16,10 +16,10 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.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.0.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "tailwindcss": "^4.0.0",
     "clsx": "^2.0.0",
     "class-variance-authority": "^0.7.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

@@ -16,11 +16,11 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.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.0.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "stripe": "^16.12.0",
     "@stripe/react-stripe-js": "^2.8.0",
     "@stripe/stripe-js": "^4.10.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>
+  )
+}