@digilogiclabs/create-saas-app 2.9.1 → 2.11.0

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>
+  )
+}