@digilogiclabs/create-saas-app 2.9.1 → 2.10.0

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

@@ -8,39 +8,35 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "type-check": "tsc --noEmit",
-    "test": "vitest",
-    "test:run": "vitest run"
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "next": "^15.0.0",
+    "next": "^15.5.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-ui": "^1.4.0",
-    "tailwindcss": "^4.0.0",
-    "clsx": "^2.0.0",
+    "@digilogiclabs/platform-core": "^1.14.0",
+    "@digilogiclabs/app-sdk": "^1.1.0",
+    "@digilogiclabs/saas-factory-ui": "^1.8.1",
+    "tailwindcss": "^4.1.0",
+    "@tailwindcss/postcss": "^4.1.0",
+    "clsx": "^2.1.0",
     "class-variance-authority": "^0.7.0",
-    "tailwind-merge": "^2.0.0",
+    "tailwind-merge": "^2.6.0",
     "next-themes": "^0.4.0",
     "lucide-react": "^0.460.0",
     "zod": "^4.1.0",
     "zustand": "^4.5.0",
-    "recharts": "^2.13.0",
+    "recharts": "^2.14.0",
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.0",
+    "typescript": "^5.8.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"
+    "prettier": "^3.4.0"
   },
   "engines": {
     "node": ">=20.0.0"

package/src/templates/web/iot-dashboard/template/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

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

@@ -1,224 +1,224 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-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'
-
-// Simulated real-time data
-const generateTelemetryData = () => ({
-  temperature: (20 + Math.random() * 10).toFixed(1),
-  pressure: (100 + Math.random() * 20).toFixed(1),
-  humidity: (40 + Math.random() * 30).toFixed(0),
-  signalStrength: (-50 - Math.random() * 40).toFixed(0),
-})
-
-const DEVICES = [
-  { id: 1, name: 'Sensor Hub A1', type: 'Gateway', status: 'online', lastSeen: '2 min ago' },
-  { id: 2, name: 'Temp Sensor T-001', type: 'Temperature', status: 'online', lastSeen: '1 min ago' },
-  { id: 3, name: 'Pressure Gauge P-001', type: 'Pressure', status: 'online', lastSeen: '3 min ago' },
-  { id: 4, name: 'Motion Detector M-001', type: 'Motion', status: 'offline', lastSeen: '15 min ago' },
-  { id: 5, name: 'Humidity Sensor H-001', type: 'Humidity', status: 'online', lastSeen: '30 sec ago' },
-]
-
-const RECENT_ALERTS = [
-  { id: 1, message: 'Temperature threshold exceeded on T-001', severity: 'warning', time: '5 min ago' },
-  { id: 2, message: 'Motion Detector M-001 offline', severity: 'error', time: '15 min ago' },
-  { id: 3, message: 'System backup completed', severity: 'info', time: '1 hour ago' },
-]
-
-export default function DashboardPage() {
-  const [telemetry, setTelemetry] = useState(generateTelemetryData())
-
-  // Simulate real-time updates
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTelemetry(generateTelemetryData())
-    }, 3000)
-    return () => clearInterval(interval)
-  }, [])
-
-  const onlineDevices = DEVICES.filter(d => d.status === 'online').length
-  const offlineDevices = DEVICES.filter(d => d.status === 'offline').length
-
-  return (
-    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
-      {/* Header */}
-      <header className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">Dashboard</h1>
-            <p className="text-slate-600 dark:text-slate-400 text-sm">Real-time IoT monitoring</p>
-          </div>
-          <Link href="/devices/new">
-            <Button className="bg-emerald-600 hover:bg-emerald-700">
-              <Plus className="w-4 h-4 mr-2" />
-              Add Device
-            </Button>
-          </Link>
-        </div>
-      </header>
-
-      <div className="p-6">
-        {/* Stats */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          <Card className="p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-600 dark:text-slate-400">Total Devices</p>
-                <p className="text-3xl font-bold text-slate-900 dark:text-white">{DEVICES.length}</p>
-              </div>
-              <div className="w-12 h-12 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
-                <Cpu className="w-6 h-6 text-emerald-600" />
-              </div>
-            </div>
-          </Card>
-
-          <Card className="p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-600 dark:text-slate-400">Online</p>
-                <p className="text-3xl font-bold text-green-600">{onlineDevices}</p>
-              </div>
-              <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
-                <CheckCircle className="w-6 h-6 text-green-600" />
-              </div>
-            </div>
-          </Card>
-
-          <Card className="p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-600 dark:text-slate-400">Offline</p>
-                <p className="text-3xl font-bold text-red-600">{offlineDevices}</p>
-              </div>
-              <div className="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center">
-                <AlertTriangle className="w-6 h-6 text-red-600" />
-              </div>
-            </div>
-          </Card>
-
-          <Card className="p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-600 dark:text-slate-400">Active Alerts</p>
-                <p className="text-3xl font-bold text-amber-600">{RECENT_ALERTS.length}</p>
-              </div>
-              <div className="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center">
-                <Bell className="w-6 h-6 text-amber-600" />
-              </div>
-            </div>
-          </Card>
-        </div>
-
-        {/* Live Telemetry */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-          <Card className="p-6">
-            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-6 flex items-center">
-              <Activity className="w-5 h-5 mr-2 text-emerald-600" />
-              Live Telemetry
-            </h2>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="p-4 bg-slate-100 dark:bg-slate-700/50 rounded-lg">
-                <div className="flex items-center gap-2 mb-2">
-                  <ThermometerSun className="w-4 h-4 text-orange-500" />
-                  <span className="text-sm text-slate-600 dark:text-slate-400">Temperature</span>
-                </div>
-                <p className="text-2xl font-bold text-slate-900 dark:text-white">{telemetry.temperature}°C</p>
-              </div>
-              <div className="p-4 bg-slate-100 dark:bg-slate-700/50 rounded-lg">
-                <div className="flex items-center gap-2 mb-2">
-                  <Gauge className="w-4 h-4 text-blue-500" />
-                  <span className="text-sm text-slate-600 dark:text-slate-400">Pressure</span>
-                </div>
-                <p className="text-2xl font-bold text-slate-900 dark:text-white">{telemetry.pressure} kPa</p>
-              </div>
-              <div className="p-4 bg-slate-100 dark:bg-slate-700/50 rounded-lg">
-                <div className="flex items-center gap-2 mb-2">
-                  <Activity className="w-4 h-4 text-cyan-500" />
-                  <span className="text-sm text-slate-600 dark:text-slate-400">Humidity</span>
-                </div>
-                <p className="text-2xl font-bold text-slate-900 dark:text-white">{telemetry.humidity}%</p>
-              </div>
-              <div className="p-4 bg-slate-100 dark:bg-slate-700/50 rounded-lg">
-                <div className="flex items-center gap-2 mb-2">
-                  <Signal className="w-4 h-4 text-purple-500" />
-                  <span className="text-sm text-slate-600 dark:text-slate-400">Signal</span>
-                </div>
-                <p className="text-2xl font-bold text-slate-900 dark:text-white">{telemetry.signalStrength} dBm</p>
-              </div>
-            </div>
-          </Card>
-
-          <Card className="p-6">
-            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-6 flex items-center">
-              <Bell className="w-5 h-5 mr-2 text-amber-600" />
-              Recent Alerts
-            </h2>
-            <div className="space-y-4">
-              {RECENT_ALERTS.map((alert) => (
-                <div key={alert.id} className="flex items-start gap-3 p-3 bg-slate-100 dark:bg-slate-700/50 rounded-lg">
-                  <div className={`w-2 h-2 rounded-full mt-2 ${
-                    alert.severity === 'error' ? 'bg-red-500' :
-                    alert.severity === 'warning' ? 'bg-amber-500' :
-                    'bg-blue-500'
-                  }`} />
-                  <div className="flex-1">
-                    <p className="text-sm text-slate-900 dark:text-white">{alert.message}</p>
-                    <p className="text-xs text-slate-500 mt-1">{alert.time}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </Card>
-        </div>
-
-        {/* Device List */}
-        <Card className="p-6">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-lg font-semibold text-slate-900 dark:text-white flex items-center">
-              <Cpu className="w-5 h-5 mr-2 text-emerald-600" />
-              Devices
-            </h2>
-            <Link href="/devices">
-              <Button variant="outline" size="sm">View All</Button>
-            </Link>
-          </div>
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b border-slate-200 dark:border-slate-700">
-                  <th className="text-left py-3 px-4 text-sm font-medium text-slate-600 dark:text-slate-400">Name</th>
-                  <th className="text-left py-3 px-4 text-sm font-medium text-slate-600 dark:text-slate-400">Type</th>
-                  <th className="text-left py-3 px-4 text-sm font-medium text-slate-600 dark:text-slate-400">Status</th>
-                  <th className="text-left py-3 px-4 text-sm font-medium text-slate-600 dark:text-slate-400">Last Seen</th>
-                </tr>
-              </thead>
-              <tbody>
-                {DEVICES.map((device) => (
-                  <tr key={device.id} className="border-b border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/50">
-                    <td className="py-3 px-4">
-                      <span className="font-medium text-slate-900 dark:text-white">{device.name}</span>
-                    </td>
-                    <td className="py-3 px-4 text-slate-600 dark:text-slate-400">{device.type}</td>
-                    <td className="py-3 px-4">
-                      <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" />
-                      {device.lastSeen}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </Card>
-      </div>
-    </div>
-  )
-}
+'use client'
+
+import { useState, useEffect } from 'react'
+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'
+
+// Simulated real-time data
+const generateTelemetryData = () => ({
+  temperature: (20 + Math.random() * 10).toFixed(1),
+  pressure: (100 + Math.random() * 20).toFixed(1),
+  humidity: (40 + Math.random() * 30).toFixed(0),
+  signalStrength: (-50 - Math.random() * 40).toFixed(0),
+})
+
+const DEVICES = [
+  { id: 1, name: 'Sensor Hub A1', type: 'Gateway', status: 'online', lastSeen: '2 min ago' },
+  { id: 2, name: 'Temp Sensor T-001', type: 'Temperature', status: 'online', lastSeen: '1 min ago' },
+  { id: 3, name: 'Pressure Gauge P-001', type: 'Pressure', status: 'online', lastSeen: '3 min ago' },
+  { id: 4, name: 'Motion Detector M-001', type: 'Motion', status: 'offline', lastSeen: '15 min ago' },
+  { id: 5, name: 'Humidity Sensor H-001', type: 'Humidity', status: 'online', lastSeen: '30 sec ago' },
+]
+
+const RECENT_ALERTS = [
+  { id: 1, message: 'Temperature threshold exceeded on T-001', severity: 'warning', time: '5 min ago' },
+  { id: 2, message: 'Motion Detector M-001 offline', severity: 'error', time: '15 min ago' },
+  { id: 3, message: 'System backup completed', severity: 'info', time: '1 hour ago' },
+]
+
+export default function DashboardPage() {
+  const [telemetry, setTelemetry] = useState(generateTelemetryData())
+
+  // Simulate real-time updates
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTelemetry(generateTelemetryData())
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const onlineDevices = DEVICES.filter(d => d.status === 'online').length
+  const offlineDevices = DEVICES.filter(d => d.status === 'offline').length
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="bg-card border-b border-border px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-foreground">Dashboard</h1>
+            <p className="text-muted-foreground text-sm">Real-time IoT monitoring</p>
+          </div>
+          <Link href="/devices/new">
+            <Button>
+              <Plus className="w-4 h-4 mr-2" />
+              Add Device
+            </Button>
+          </Link>
+        </div>
+      </header>
+
+      <div className="p-6">
+        {/* Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          <Card className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Total Devices</p>
+                <p className="text-3xl font-bold text-foreground">{DEVICES.length}</p>
+              </div>
+              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                <Cpu className="w-6 h-6 text-primary" />
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Online</p>
+                <p className="text-3xl font-bold text-green-600">{onlineDevices}</p>
+              </div>
+              <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
+                <CheckCircle className="w-6 h-6 text-green-600" />
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Offline</p>
+                <p className="text-3xl font-bold text-destructive">{offlineDevices}</p>
+              </div>
+              <div className="w-12 h-12 bg-destructive/10 rounded-lg flex items-center justify-center">
+                <AlertTriangle className="w-6 h-6 text-destructive" />
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Active Alerts</p>
+                <p className="text-3xl font-bold text-amber-600">{RECENT_ALERTS.length}</p>
+              </div>
+              <div className="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center">
+                <Bell className="w-6 h-6 text-amber-600" />
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {/* Live Telemetry */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-foreground mb-6 flex items-center">
+              <Activity className="w-5 h-5 mr-2 text-primary" />
+              Live Telemetry
+            </h2>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="p-4 bg-muted rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <ThermometerSun className="w-4 h-4 text-orange-500" />
+                  <span className="text-sm text-muted-foreground">Temperature</span>
+                </div>
+                <p className="text-2xl font-bold text-foreground">{telemetry.temperature}°C</p>
+              </div>
+              <div className="p-4 bg-muted rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <Gauge className="w-4 h-4 text-blue-500" />
+                  <span className="text-sm text-muted-foreground">Pressure</span>
+                </div>
+                <p className="text-2xl font-bold text-foreground">{telemetry.pressure} kPa</p>
+              </div>
+              <div className="p-4 bg-muted rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <Activity className="w-4 h-4 text-cyan-500" />
+                  <span className="text-sm text-muted-foreground">Humidity</span>
+                </div>
+                <p className="text-2xl font-bold text-foreground">{telemetry.humidity}%</p>
+              </div>
+              <div className="p-4 bg-muted rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <Signal className="w-4 h-4 text-purple-500" />
+                  <span className="text-sm text-muted-foreground">Signal</span>
+                </div>
+                <p className="text-2xl font-bold text-foreground">{telemetry.signalStrength} dBm</p>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-foreground mb-6 flex items-center">
+              <Bell className="w-5 h-5 mr-2 text-amber-600" />
+              Recent Alerts
+            </h2>
+            <div className="space-y-4">
+              {RECENT_ALERTS.map((alert) => (
+                <div key={alert.id} className="flex items-start gap-3 p-3 bg-muted rounded-lg">
+                  <div className={`w-2 h-2 rounded-full mt-2 ${
+                    alert.severity === 'error' ? 'bg-red-500' :
+                    alert.severity === 'warning' ? 'bg-amber-500' :
+                    'bg-blue-500'
+                  }`} />
+                  <div className="flex-1">
+                    <p className="text-sm text-foreground">{alert.message}</p>
+                    <p className="text-xs text-muted-foreground mt-1">{alert.time}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </Card>
+        </div>
+
+        {/* Device List */}
+        <Card className="p-6">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-lg font-semibold text-foreground flex items-center">
+              <Cpu className="w-5 h-5 mr-2 text-primary" />
+              Devices
+            </h2>
+            <Link href="/devices">
+              <Button variant="outline" size="sm">View All</Button>
+            </Link>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-border">
+                  <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Name</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Type</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Status</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Last Seen</th>
+                </tr>
+              </thead>
+              <tbody>
+                {DEVICES.map((device) => (
+                  <tr key={device.id} className="border-b border-border/50 hover:bg-muted/50">
+                    <td className="py-3 px-4">
+                      <span className="font-medium text-foreground">{device.name}</span>
+                    </td>
+                    <td className="py-3 px-4 text-muted-foreground">{device.type}</td>
+                    <td className="py-3 px-4">
+                      <PulseIndicator
+                        status={device.status === 'online' ? 'success' : 'error'}
+                        label={device.status}
+                        size="sm"
+                      />
+                    </td>
+                    <td className="py-3 px-4 text-muted-foreground flex items-center">
+                      <Clock className="w-3 h-3 mr-1" />
+                      {device.lastSeen}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

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

@@ -16,27 +16,27 @@ export default function Error({ error, reset }: ErrorProps) {
   }, [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">
+    <div className="min-h-screen bg-background 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 className="w-16 h-16 bg-destructive/10 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-destructive" />
           </div>
 
           <div>
-            <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
+            <h1 className="text-2xl font-bold text-foreground mb-2">
               Something went wrong!
             </h1>
-            <p className="text-slate-600 dark:text-slate-300 mb-4">
+            <p className="text-muted-foreground 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">
+                <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground">
                   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="mt-2 p-3 bg-muted rounded text-xs font-mono text-muted-foreground overflow-auto max-h-40">
                   <div className="mb-2">
                     <strong>Message:</strong> {error.message}
                   </div>
@@ -57,7 +57,7 @@ export default function Error({ error, reset }: ErrorProps) {
           </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">
+            <Button onClick={reset} className="flex-1" size="lg">
               <RefreshCw className="w-4 h-4 mr-2" />
               Try again
             </Button>