@digilogiclabs/create-saas-app 2.10.0 → 2.11.0

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

@@ -0,0 +1,190 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { User, Key, CreditCard, Copy, Eye, EyeOff, Trash2, Plus, Zap } from 'lucide-react'
+
+const MOCK_KEYS = [
+  { id: '1', name: 'Production', key: 'sk-proj-abc...xyz', created: '2026-01-15', lastUsed: '2 hours ago' },
+  { id: '2', name: 'Development', key: 'sk-proj-def...uvw', created: '2026-02-20', lastUsed: '3 days ago' },
+]
+
+export default function SettingsPage() {
+  const [activeTab, setActiveTab] = useState<'profile' | 'keys' | 'billing'>('profile')
+  const [name, setName] = useState('Test User')
+  const [revealedKeys, setRevealedKeys] = useState<Set<string>>(new Set())
+
+  const toggleReveal = (id: string) => {
+    setRevealedKeys(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const tabs = [
+    { id: 'profile' as const, label: 'Profile', icon: User },
+    { id: 'keys' as const, label: 'API Keys', icon: Key },
+    { id: 'billing' as const, label: 'Billing', icon: CreditCard },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 py-8">
+        <h1 className="text-3xl font-bold text-foreground mb-8">Settings</h1>
+
+        {/* Tabs */}
+        <div className="flex gap-1 mb-8 border-b border-border" role="tablist">
+          {tabs.map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              role="tab"
+              aria-selected={activeTab === id}
+              onClick={() => setActiveTab(id)}
+              className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px ${
+                activeTab === id
+                  ? 'border-primary text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              <Icon className="w-4 h-4" />
+              {label}
+            </button>
+          ))}
+        </div>
+
+        {/* Profile Tab */}
+        {activeTab === 'profile' && (
+          <Card className="p-6 bg-secondary border-border">
+            <h2 className="text-lg font-semibold text-foreground mb-6">Profile Information</h2>
+            <div className="space-y-4 max-w-md">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium mb-1.5">Name</label>
+                <input
+                  id="name"
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
+                />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1.5">Email</label>
+                <input
+                  id="email"
+                  type="email"
+                  value="user@example.com"
+                  readOnly
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-muted text-muted-foreground cursor-not-allowed"
+                />
+                <p className="text-xs text-muted-foreground mt-1">Contact support to change your email.</p>
+              </div>
+              <Button className="mt-4">Save Changes</Button>
+            </div>
+          </Card>
+        )}
+
+        {/* API Keys Tab */}
+        {activeTab === 'keys' && (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <p className="text-sm text-muted-foreground">
+                API keys allow programmatic access to the platform. Keep them secret.
+              </p>
+              <Button size="sm">
+                <Plus className="w-4 h-4 mr-1" />
+                Create Key
+              </Button>
+            </div>
+
+            <div className="space-y-3">
+              {MOCK_KEYS.map((apiKey) => (
+                <Card key={apiKey.id} className="p-4 bg-secondary border-border">
+                  <div className="flex items-center justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-1">
+                        <span className="font-medium text-foreground">{apiKey.name}</span>
+                        <span className="text-xs text-muted-foreground">Created {apiKey.created}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <code className="text-sm bg-muted px-2 py-0.5 rounded font-mono text-muted-foreground">
+                          {revealedKeys.has(apiKey.id) ? 'sk-proj-abcdef1234567890xyz' : apiKey.key}
+                        </code>
+                        <button
+                          onClick={() => toggleReveal(apiKey.id)}
+                          className="text-muted-foreground hover:text-foreground"
+                          aria-label={revealedKeys.has(apiKey.id) ? 'Hide key' : 'Show key'}
+                        >
+                          {revealedKeys.has(apiKey.id) ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                        </button>
+                        <button className="text-muted-foreground hover:text-foreground" aria-label="Copy key">
+                          <Copy className="w-4 h-4" />
+                        </button>
+                      </div>
+                      <p className="text-xs text-muted-foreground mt-1">Last used {apiKey.lastUsed}</p>
+                    </div>
+                    <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive/80" aria-label="Delete key">
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Billing Tab */}
+        {activeTab === 'billing' && (
+          <div className="space-y-6">
+            <Card className="p-6 bg-secondary border-border">
+              <div className="flex items-center justify-between mb-4">
+                <div>
+                  <h2 className="text-lg font-semibold text-foreground">Free Tier</h2>
+                  <p className="text-sm text-muted-foreground">Your current plan</p>
+                </div>
+                <span className="text-xs px-2.5 py-1 rounded-full bg-primary/10 text-primary font-medium">Active</span>
+              </div>
+
+              <div className="mb-4">
+                <div className="flex items-center justify-between text-sm mb-1">
+                  <span className="text-muted-foreground">Token usage this month</span>
+                  <span className="text-foreground font-medium">45,678 / 100,000</span>
+                </div>
+                <div className="w-full h-2 rounded-full bg-muted overflow-hidden">
+                  <div className="h-full rounded-full bg-primary" style={{ width: '46%' }} />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-3 gap-4 pt-4 border-t border-border">
+                <div>
+                  <p className="text-xs text-muted-foreground">API Calls</p>
+                  <p className="text-lg font-bold text-foreground">1,234</p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">Models Used</p>
+                  <p className="text-lg font-bold text-foreground">3</p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">Avg Response</p>
+                  <p className="text-lg font-bold text-foreground">1.2s</p>
+                </div>
+              </div>
+            </Card>
+
+            <Card className="p-6 bg-gradient-to-r from-brand-from/10 via-brand-via/10 to-brand-to/10 border-primary/20">
+              <div className="flex items-center gap-3 mb-3">
+                <Zap className="w-5 h-5 text-primary" />
+                <h3 className="font-semibold text-foreground">Upgrade to Pro</h3>
+              </div>
+              <p className="text-sm text-muted-foreground mb-4">
+                Get 1M tokens/month, all models, priority support, and custom fine-tuning.
+              </p>
+              <Button>Upgrade — $29/month</Button>
+            </Card>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { Bot } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+export default function SignupPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    if (password !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+    setLoading(true)
+    try {
+      const res = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, action: 'signup' }),
+      })
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || 'Failed to create account')
+      }
+      router.push('/dashboard')
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create account')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <Link href="/" className="flex items-center justify-center gap-2 mb-8 hover:opacity-80 transition-opacity">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+            <Bot className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-xl">AI Platform</span>
+        </Link>
+
+        <Card className="border border-border">
+          <CardContent className="p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold">Create your account</h1>
+              <p className="text-muted-foreground mt-2">Get started with AI models</p>
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive p-3 rounded-lg mb-6 text-sm" role="alert">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1.5">
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="you@example.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1.5">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="Minimum 8 characters"
+                  required
+                  minLength={8}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1.5">
+                  Confirm Password
+                </label>
+                <input
+                  id="confirmPassword"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="Re-enter your password"
+                  required
+                />
+              </div>
+
+              <Button type="submit" className="w-full h-11 text-base cursor-pointer hover:brightness-110 active:scale-[0.98] transition-all duration-200" disabled={loading}>
+                {loading ? 'Creating account...' : 'Create Account'}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-muted-foreground text-sm">
+                Already have an account?{' '}
+                <Link href="/login" className="text-primary hover:underline font-medium">
+                  Sign in
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,52 @@
+/**
+ * Auth session adapter — demo implementation.
+ *
+ * Replace this file with a real provider when configuring your app:
+ *   - Keycloak:  import { auth } from '@/auth' (Auth.js)
+ *   - Supabase:  import { createClient } from '@/lib/supabase/server'
+ *   - Firebase:  import { getServerSession } from 'next-auth'
+ *
+ * The getSession() and getUser() exports are consumed by auth-server.ts
+ * and must return the same shape regardless of provider.
+ */
+import 'server-only'
+import { cookies } from 'next/headers'
+
+type SessionUser = {
+  id?: string
+  email?: string | null
+  name?: string | null
+  roles?: string[]
+}
+
+type Session = {
+  user?: SessionUser
+}
+
+/**
+ * Get the current session from cookies.
+ * Demo: reads a JSON cookie set at login. Replace with your auth provider.
+ */
+export async function getSession(): Promise<Session | null> {
+  const cookieStore = await cookies()
+  const sessionCookie = cookieStore.get('session')
+
+  if (!sessionCookie?.value) {
+    return null
+  }
+
+  try {
+    const session = JSON.parse(sessionCookie.value) as Session
+    return session
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Get the current authenticated user, or null.
+ */
+export async function getUser(): Promise<SessionUser | null> {
+  const session = await getSession()
+  return session?.user ?? null
+}

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

@@ -0,0 +1,157 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Bell, CheckCircle } from 'lucide-react'
+
+type Severity = 'critical' | 'warning' | 'info'
+type AlertStatus = 'active' | 'acknowledged'
+
+interface Alert {
+  id: number
+  severity: Severity
+  message: string
+  device: string
+  timestamp: string
+  status: AlertStatus
+}
+
+const ALERTS: Alert[] = [
+  { id: 1, severity: 'critical', message: 'Temperature exceeded 45°C threshold', device: 'Temp Sensor T-001', timestamp: '2 min ago', status: 'active' },
+  { id: 2, severity: 'critical', message: 'Device unresponsive for 10+ minutes', device: 'Motion Detector M-001', timestamp: '15 min ago', status: 'active' },
+  { id: 3, severity: 'warning', message: 'Signal strength below -80 dBm', device: 'Gateway B2', timestamp: '28 min ago', status: 'active' },
+  { id: 4, severity: 'warning', message: 'Firmware update available (v2.5.0)', device: 'Sensor Hub A1', timestamp: '1 hour ago', status: 'active' },
+  { id: 5, severity: 'info', message: 'Scheduled maintenance window approaching', device: 'All Devices', timestamp: '2 hours ago', status: 'active' },
+  { id: 6, severity: 'warning', message: 'Battery level below 20%', device: 'Humidity Sensor H-001', timestamp: '3 hours ago', status: 'acknowledged' },
+  { id: 7, severity: 'critical', message: 'Pressure reading outside safe range', device: 'Pressure Gauge P-001', timestamp: '4 hours ago', status: 'acknowledged' },
+  { id: 8, severity: 'info', message: 'New device registered successfully', device: 'Temp Sensor T-002', timestamp: '5 hours ago', status: 'acknowledged' },
+  { id: 9, severity: 'warning', message: 'High packet loss detected on network', device: 'Gateway B2', timestamp: '6 hours ago', status: 'active' },
+  { id: 10, severity: 'info', message: 'Daily telemetry summary generated', device: 'System', timestamp: '8 hours ago', status: 'acknowledged' },
+]
+
+const SEVERITY_OPTIONS = ['All', 'Critical', 'Warning', 'Info']
+const STATUS_OPTIONS = ['All', 'Active', 'Acknowledged']
+
+function severityDotColor(severity: Severity): string {
+  switch (severity) {
+    case 'critical': return 'bg-red-500'
+    case 'warning': return 'bg-amber-500'
+    case 'info': return 'bg-blue-500'
+  }
+}
+
+function severityLabel(severity: Severity): string {
+  return severity.charAt(0).toUpperCase() + severity.slice(1)
+}
+
+export default function AlertsPage() {
+  const [severityFilter, setSeverityFilter] = useState('All')
+  const [statusFilter, setStatusFilter] = useState('All')
+  const [alerts, setAlerts] = useState(ALERTS)
+
+  const filtered = alerts.filter((a) => {
+    if (severityFilter !== 'All' && a.severity !== severityFilter.toLowerCase()) return false
+    if (statusFilter !== 'All' && a.status !== statusFilter.toLowerCase()) return false
+    return true
+  })
+
+  const activeCount = alerts.filter((a) => a.status === 'active').length
+
+  const handleAcknowledge = (id: number) => {
+    setAlerts((prev) =>
+      prev.map((a) => (a.id === id ? { ...a, status: 'acknowledged' as AlertStatus } : a))
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-foreground">Alerts</h1>
+          <p className="text-sm text-muted-foreground">{activeCount} active alert{activeCount !== 1 ? 's' : ''}</p>
+        </div>
+
+        {/* Filter Bar */}
+        <Card className="p-4 mb-6">
+          <div className="flex flex-col sm:flex-row gap-3">
+            <select
+              value={severityFilter}
+              onChange={(e) => setSeverityFilter(e.target.value)}
+              className="px-3 py-2 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              {SEVERITY_OPTIONS.map((s) => (
+                <option key={s} value={s}>{s === 'All' ? 'All Severities' : s}</option>
+              ))}
+            </select>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="px-3 py-2 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              {STATUS_OPTIONS.map((s) => (
+                <option key={s} value={s}>{s === 'All' ? 'All Statuses' : s}</option>
+              ))}
+            </select>
+          </div>
+        </Card>
+
+        {/* Alert List */}
+        {filtered.length === 0 ? (
+          <Card className="p-0">
+            <div className="flex flex-col items-center justify-center py-16 px-4">
+              <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
+                <Bell className="w-8 h-8 text-muted-foreground" />
+              </div>
+              <p className="text-foreground font-medium mb-1">No alerts found</p>
+              <p className="text-sm text-muted-foreground">Try adjusting your filters.</p>
+            </div>
+          </Card>
+        ) : (
+          <div className="space-y-3">
+            {filtered.map((alert) => (
+              <Card key={alert.id} className="p-4">
+                <div className="flex items-start gap-3">
+                  <div className={`w-2.5 h-2.5 rounded-full mt-1.5 shrink-0 ${severityDotColor(alert.severity)}`} />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                      <div>
+                        <p className="text-sm font-medium text-foreground">{alert.message}</p>
+                        <div className="flex items-center gap-3 mt-1">
+                          <span className="text-xs text-muted-foreground">{alert.device}</span>
+                          <span className="text-xs text-muted-foreground">{alert.timestamp}</span>
+                          <span className={`text-xs px-1.5 py-0.5 rounded ${
+                            alert.severity === 'critical'
+                              ? 'bg-red-500/10 text-red-600'
+                              : alert.severity === 'warning'
+                              ? 'bg-amber-500/10 text-amber-600'
+                              : 'bg-blue-500/10 text-blue-600'
+                          }`}>
+                            {severityLabel(alert.severity)}
+                          </span>
+                        </div>
+                      </div>
+                      {alert.status === 'active' ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleAcknowledge(alert.id)}
+                          className="shrink-0"
+                        >
+                          <CheckCircle className="w-4 h-4 mr-1" />
+                          Acknowledge
+                        </Button>
+                      ) : (
+                        <span className="text-xs text-muted-foreground italic shrink-0">Acknowledged</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/iot-dashboard/template/src/app/api/auth/route.ts

@@ -0,0 +1,57 @@
+/**
+ * Demo auth API routes.
+ *
+ * POST /api/auth — Login or Signup
+ * DELETE /api/auth — Logout
+ *
+ * Replace with your real auth provider (Auth.js, Supabase Auth, etc.)
+ * when configuring your app for production.
+ */
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { email, password, action } = body
+
+    if (!email || !password) {
+      return NextResponse.json(
+        { error: 'Email and password are required' },
+        { status: 400 }
+      )
+    }
+
+    // Demo: accept any email/password combination.
+    // Replace with real authentication (database lookup, bcrypt compare, etc.)
+    const user = {
+      id: crypto.randomUUID(),
+      email,
+      name: email.split('@')[0],
+    }
+
+    const session = JSON.stringify({ user })
+    const cookieStore = await cookies()
+
+    cookieStore.set('session', session, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/',
+      maxAge: 60 * 60 * 24 * 7, // 7 days
+    })
+
+    return NextResponse.json({ user })
+  } catch {
+    return NextResponse.json(
+      { error: 'Authentication failed' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function DELETE() {
+  const cookieStore = await cookies()
+  cookieStore.delete('session')
+  return NextResponse.json({ success: true })
+}