npm - @digilogiclabs/create-saas-app - Versions diffs - 2.9.1 → 2.11.0 - Mend

@digilogiclabs/create-saas-app 2.9.1 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (377) hide show

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

@@ -1,20 +1,97 @@
-@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);
-}
+@import "tailwindcss";
+@theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-brand-from: hsl(var(--brand-from));
+  --color-brand-via: hsl(var(--brand-via));
+  --color-brand-to: hsl(var(--brand-to));
+}
+:root {
+  --brand-from: 160 84% 39%;
+  --brand-via: 158 64% 52%;
+  --brand-to: 155 47% 59%;
+  --background: 210 20% 98%;
+  --foreground: 215 25% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 215 25% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 215 25% 10%;
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 215 25% 10%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 215 25% 10%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 160 84% 39%;
+}
+.dark {
+  --brand-from: 160 84% 39%;
+  --brand-via: 158 64% 52%;
+  --brand-to: 155 47% 59%;
+  --background: 215 28% 7%;
+  --foreground: 210 40% 98%;
+  --card: 215 28% 7%;
+  --card-foreground: 210 40% 98%;
+  --popover: 215 28% 7%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 215 25% 15%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 215 25% 15%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 215 25% 15%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 215 25% 15%;
+  --input: 215 25% 15%;
+  --ring: 160 84% 39%;
+}
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    font-family: var(--font-sans);
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}

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

@@ -19,6 +19,9 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <AppProviders>
+          <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[90] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none">
+            Skip to content
+          </a>
           {children}
         </AppProviders>
       </body>

package/src/templates/web/iot-dashboard/template/src/app/loading.tsx CHANGED Viewed

@@ -2,9 +2,9 @@ import { Card, SkeletonText } from '@digilogiclabs/saas-factory-ui'
 export default function Loading() {
   return (
-    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+    <div className="min-h-screen bg-background">
       {/* Header skeleton */}
-      <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 py-4">
+      <div className="bg-card border-b border-border px-4 py-4">
         <div className="max-w-7xl mx-auto flex items-center justify-between">
           <div className="flex items-center gap-2">
             <SkeletonText className="h-8 w-8 rounded-lg" />
@@ -66,10 +66,10 @@ export default function Loading() {
         <div className="flex justify-center">
           <div className="flex items-center gap-3">
             <div className="relative">
-              <div className="w-8 h-8 border-4 border-slate-200 dark:border-slate-700 rounded-full"></div>
-              <div className="absolute top-0 left-0 w-8 h-8 border-4 border-emerald-600 border-t-transparent rounded-full animate-spin"></div>
+              <div className="w-8 h-8 border-4 border-border rounded-full"></div>
+              <div className="absolute top-0 left-0 w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
             </div>
-            <p className="text-sm text-slate-600 dark:text-slate-300">Loading IoT dashboard...</p>
+            <p className="text-sm text-muted-foreground">Loading IoT dashboard...</p>
           </div>
         </div>
       </div>

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

@@ -0,0 +1,112 @@
+'use client'
+import { useState } from 'react'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { Cpu } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      const res = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, action: 'login' }),
+      })
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || 'Failed to sign in')
+      }
+      router.push('/dashboard')
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to sign in')
+    } 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">
+            <Cpu className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-xl">IoT Dashboard</span>
+        </Link>
+        <Card className="border border-border">
+          <CardContent className="p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold">Welcome back</h1>
+              <p className="text-muted-foreground mt-2">Sign in to your IoT dashboard</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="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 ? 'Signing in...' : 'Sign In'}
+              </Button>
+            </form>
+            <div className="mt-6 text-center">
+              <p className="text-muted-foreground text-sm">
+                Don&apos;t have an account?{' '}
+                <Link href="/signup" className="text-primary hover:underline font-medium">
+                  Create an account
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}