@digilogiclabs/create-saas-app 2.0.0 → 2.2.0

package/src/templates/web/ai-platform/template/src/lib/auth-server.ts

@@ -0,0 +1,33 @@
+import { redirect } from 'next/navigation'
+import { createClient } from './supabase/server'
+
+export interface AuthUser {
+  id: string
+  email: string | null
+  name?: string | null
+}
+
+export async function getUser(): Promise<AuthUser | null> {
+  const supabase = await createClient()
+  const { data: { user }, error } = await supabase.auth.getUser()
+
+  if (error || !user) {
+    return null
+  }
+
+  return {
+    id: user.id,
+    email: user.email ?? null,
+    name: user.user_metadata?.name ?? user.user_metadata?.full_name ?? null,
+  }
+}
+
+export async function requireAuth(): Promise<AuthUser> {
+  const user = await getUser()
+
+  if (!user) {
+    redirect('/login')
+  }
+
+  return user
+}

package/src/templates/web/ai-platform/template/src/lib/supabase/client.ts

@@ -0,0 +1,8 @@
+import { createBrowserClient } from '@supabase/ssr'
+
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+}

package/src/templates/web/ai-platform/template/src/lib/supabase/server.ts

@@ -0,0 +1,27 @@
+import { createServerClient } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+
+export async function createClient() {
+  const cookieStore = await cookies()
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll()
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            )
+          } catch {
+            // Server Component context
+          }
+        },
+      },
+    }
+  )
+}

package/src/templates/web/ai-platform/template/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/templates/web/ai-platform/template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/src/templates/web/iot-dashboard/template/.env.example

@@ -0,0 +1,12 @@
+# Supabase Configuration
+NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
+SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
+
+# MQTT Configuration (optional)
+MQTT_BROKER_URL=mqtt://localhost:1883
+MQTT_USERNAME=
+MQTT_PASSWORD=
+
+# Application
+NEXT_PUBLIC_APP_URL=http://localhost:3000

package/src/templates/web/iot-dashboard/template/README.md

@@ -0,0 +1,101 @@
+# {{titleCaseName}}
+
+{{description}} - An IoT device monitoring and management dashboard.
+
+## Features
+
+- **Device Management** - Monitor and control all your IoT devices
+- **Real-time Telemetry** - Live data streams with updates every few seconds
+- **Smart Alerts** - Configurable notifications for critical events
+- **Analytics** - Historical data analysis and trends
+- **Responsive Design** - Works on desktop and mobile
+
+## Quick Start
+
+1. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+2. **Set up environment variables:**
+   ```bash
+   cp .env.example .env.local
+   ```
+   Update with your Supabase credentials.
+
+3. **Run the development server:**
+   ```bash
+   npm run dev
+   ```
+
+4. **Open [http://localhost:3000](http://localhost:3000)**
+
+## Tech Stack
+
+- **Framework:** Next.js 15
+- **Language:** TypeScript
+- **Styling:** Tailwind CSS
+- **Auth:** Supabase
+- **Charts:** Recharts
+- **UI Components:** @digilogiclabs/saas-factory-ui
+
+## Project Structure
+
+```
+src/
+├── app/                 # Next.js App Router pages
+│   ├── dashboard/       # Main IoT dashboard
+│   ├── devices/         # Device management
+│   ├── analytics/       # Data analytics
+│   └── alerts/          # Alert management
+├── components/          # React components
+│   ├── iot/             # IoT-specific components
+│   └── providers/       # Context providers
+└── lib/                 # Utilities and helpers
+```
+
+## Database Schema
+
+Set up the following tables in Supabase:
+
+```sql
+-- Devices table
+create table devices (
+  id uuid primary key default gen_random_uuid(),
+  name text not null,
+  type text not null,
+  status text default 'offline',
+  last_seen timestamp with time zone,
+  metadata jsonb default '{}',
+  user_id uuid references auth.users(id),
+  created_at timestamp with time zone default now()
+);
+
+-- Telemetry table
+create table telemetry (
+  id uuid primary key default gen_random_uuid(),
+  device_id uuid references devices(id),
+  data jsonb not null,
+  timestamp timestamp with time zone default now()
+);
+
+-- Alerts table
+create table alerts (
+  id uuid primary key default gen_random_uuid(),
+  device_id uuid references devices(id),
+  message text not null,
+  severity text not null,
+  acknowledged boolean default false,
+  created_at timestamp with time zone default now()
+);
+```
+
+## Deployment
+
+Deploy to Vercel with one click:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new)
+
+## License
+
+MIT - Built with DLL Platform

package/src/templates/web/iot-dashboard/template/middleware.ts

@@ -0,0 +1,56 @@
+import { createServerClient } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+export async function middleware(request: NextRequest) {
+  let supabaseResponse = NextResponse.next({
+    request,
+  })
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll()
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value }) =>
+            request.cookies.set(name, value)
+          )
+          supabaseResponse = NextResponse.next({
+            request,
+          })
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, options)
+          )
+        },
+      },
+    }
+  )
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  // Redirect to login if accessing protected route without auth
+  if (
+    !user &&
+    (request.nextUrl.pathname.startsWith('/dashboard') ||
+     request.nextUrl.pathname.startsWith('/devices') ||
+     request.nextUrl.pathname.startsWith('/analytics') ||
+     request.nextUrl.pathname.startsWith('/alerts'))
+  ) {
+    const url = request.nextUrl.clone()
+    url.pathname = '/login'
+    return NextResponse.redirect(url)
+  }
+
+  return supabaseResponse
+}
+
+export const config = {
+  matcher: [
+    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+}

package/src/templates/web/iot-dashboard/template/next.config.js

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.supabase.co',
+      },
+    ],
+  },
+}
+
+module.exports = nextConfig

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

@@ -0,0 +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"
+  }
+}

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

@@ -0,0 +1,229 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button, Card } 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">
+                      <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>
+                    </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>
+  )
+}

package/src/templates/web/iot-dashboard/template/src/app/globals.css

@@ -0,0 +1,20 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: oklch(55% 0.18 160);
+  --color-background: oklch(98% 0.01 256);
+  --color-foreground: oklch(15% 0.02 256);
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --color-background: oklch(15% 0.02 256);
+  --color-foreground: oklch(95% 0 0);
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}

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

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}} - IoT Dashboard',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <AppProviders>
+          {children}
+        </AppProviders>
+      </body>
+    </html>
+  )
+}