@digilogiclabs/create-saas-app 2.0.0 → 2.2.0

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

@@ -0,0 +1,191 @@
+'use client'
+
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/app-sdk'
+import { Cpu, Activity, Signal, Bell, Settings, ArrowRight, User, LogOut, Wifi, ThermometerSun, Gauge, Shield } from 'lucide-react'
+import Link from 'next/link'
+
+const FEATURES = [
+  {
+    icon: Cpu,
+    title: 'Device Management',
+    description: 'Monitor and control all your IoT devices from one dashboard',
+  },
+  {
+    icon: Activity,
+    title: 'Real-time Telemetry',
+    description: 'Live data streams with historical analysis and trends',
+  },
+  {
+    icon: Bell,
+    title: 'Smart Alerts',
+    description: 'Configurable alerts and notifications for critical events',
+  },
+  {
+    icon: Shield,
+    title: 'Secure & Scalable',
+    description: 'Enterprise-grade security for your connected devices',
+  },
+]
+
+const DEVICE_TYPES = [
+  { name: 'Temperature Sensors', count: 24, icon: ThermometerSun, status: 'online' },
+  { name: 'Pressure Gauges', count: 12, icon: Gauge, status: 'online' },
+  { name: 'Network Gateways', count: 8, icon: Wifi, status: 'online' },
+  { name: 'Motion Sensors', count: 18, icon: Signal, status: 'partial' },
+]
+
+export default function Home() {
+  const { user, signOut, loading } = useAuth()
+
+  const projectName = "{{titleCaseName}}"
+
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (err) {
+      console.error('Sign out error:', err)
+    }
+  }
+
+  return (
+    <main 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 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="flex items-center gap-2">
+              <div className="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center">
+                <Cpu className="w-5 h-5 text-white" />
+              </div>
+              <span className="text-2xl font-bold text-slate-900 dark:text-white">{projectName}</span>
+            </Link>
+
+            <nav className="hidden md:flex items-center gap-6">
+              <Link href="/devices" className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition">
+                Devices
+              </Link>
+              <Link href="/analytics" className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition">
+                Analytics
+              </Link>
+              <Link href="/alerts" className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition">
+                Alerts
+              </Link>
+            </nav>
+
+            <div className="flex items-center gap-4">
+              {loading ? (
+                <div className="text-sm text-slate-600">Loading...</div>
+              ) : user ? (
+                <div className="flex items-center gap-2">
+                  <Link href="/dashboard">
+                    <Button variant="outline" size="sm">
+                      <User className="w-4 h-4 mr-2" />
+                      Dashboard
+                    </Button>
+                  </Link>
+                  <Button variant="ghost" size="sm" onClick={handleSignOut}>
+                    <LogOut className="w-4 h-4" />
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex gap-2">
+                  <Link href="/login">
+                    <Button variant="outline" size="sm">Sign In</Button>
+                  </Link>
+                  <Link href="/signup">
+                    <Button size="sm" className="bg-emerald-600 hover:bg-emerald-700">Get Started</Button>
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="max-w-7xl mx-auto px-4 py-16">
+        {/* Hero */}
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center px-4 py-2 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-sm mb-6">
+            <Signal className="w-4 h-4 mr-2" />
+            IoT Management Platform
+          </div>
+          <h1 className="text-5xl font-bold text-slate-900 dark:text-white mb-6">
+            Monitor Your <span className="text-emerald-600">Connected Devices</span>
+          </h1>
+          <p className="text-xl text-slate-600 dark:text-slate-300 max-w-2xl mx-auto mb-8">
+            Real-time monitoring, analytics, and control for your IoT infrastructure.
+            Built for scale, designed for simplicity.
+          </p>
+          <div className="flex gap-4 justify-center">
+            <Link href="/dashboard">
+              <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700">
+                <Activity className="w-5 h-5 mr-2" />
+                View Dashboard
+              </Button>
+            </Link>
+            <Link href="/devices">
+              <Button size="lg" variant="outline">
+                Manage Devices
+              </Button>
+            </Link>
+          </div>
+        </div>
+
+        {/* Device Overview */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-16">
+          {DEVICE_TYPES.map((device) => (
+            <Card key={device.name} className="p-6">
+              <div className="flex items-center justify-between mb-3">
+                <div className="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
+                  <device.icon className="w-5 h-5 text-emerald-600" />
+                </div>
+                <span className={`text-xs px-2 py-1 rounded-full ${
+                  device.status === 'online'
+                    ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                    : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+                }`}>
+                  {device.status === 'online' ? 'All Online' : 'Partial'}
+                </span>
+              </div>
+              <h3 className="font-semibold text-slate-900 dark:text-white">{device.name}</h3>
+              <p className="text-2xl font-bold text-emerald-600">{device.count}</p>
+            </Card>
+          ))}
+        </div>
+
+        {/* Features */}
+        <div className="mb-16">
+          <h2 className="text-3xl font-bold text-slate-900 dark:text-white text-center mb-12">
+            Everything You Need
+          </h2>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {FEATURES.map((feature) => (
+              <Card key={feature.title} className="p-6 text-center">
+                <div className="w-12 h-12 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                  <feature.icon className="w-6 h-6 text-emerald-600" />
+                </div>
+                <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">{feature.title}</h3>
+                <p className="text-slate-600 dark:text-slate-400 text-sm">{feature.description}</p>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* CTA */}
+        <Card className="p-12 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-center">
+          <h2 className="text-3xl font-bold mb-4">Ready to Connect?</h2>
+          <p className="text-white/80 mb-8 max-w-md mx-auto">
+            Start monitoring your IoT devices in minutes. Free tier available for up to 10 devices.
+          </p>
+          <Link href="/signup">
+            <Button size="lg" variant="secondary">
+              Get Started Free
+              <ArrowRight className="w-5 h-5 ml-2" />
+            </Button>
+          </Link>
+        </Card>
+      </div>
+    </main>
+  )
+}

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

@@ -0,0 +1,24 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+import { DLLProvider } from '@digilogiclabs/app-sdk'
+
+interface AppProvidersProps {
+  children: React.ReactNode
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <DLLProvider
+        config={{
+          auth: {
+            provider: 'supabase',
+          },
+        }}
+      >
+        {children}
+      </DLLProvider>
+    </ThemeProvider>
+  )
+}

package/src/templates/web/iot-dashboard/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/iot-dashboard/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/iot-dashboard/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/iot-dashboard/template/src/lib/utils.ts

@@ -0,0 +1,25 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatTimestamp(date: Date | string) {
+  return new Intl.DateTimeFormat('en-US', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(new Date(date))
+}
+
+export function formatRelativeTime(date: Date | string) {
+  const now = new Date()
+  const then = new Date(date)
+  const diffMs = now.getTime() - then.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+
+  if (diffMins < 1) return 'Just now'
+  if (diffMins < 60) return `${diffMins} min ago`
+  if (diffMins < 1440) return `${Math.floor(diffMins / 60)} hours ago`
+  return `${Math.floor(diffMins / 1440)} days ago`
+}

package/src/templates/web/iot-dashboard/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/marketplace/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
+
+# Stripe Configuration
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
+STRIPE_SECRET_KEY=sk_test_xxx
+STRIPE_WEBHOOK_SECRET=whsec_xxx
+
+# Application
+NEXT_PUBLIC_APP_URL=http://localhost:3000

package/src/templates/web/marketplace/template/README.md

@@ -0,0 +1,66 @@
+# {{titleCaseName}}
+
+{{description}} - A multi-vendor digital marketplace.
+
+## Features
+
+- **Product Listings** - Browse and search products by category
+- **Vendor Dashboard** - Sellers can manage products and view analytics
+- **Shopping Cart** - Add products and checkout with Stripe
+- **User Authentication** - Secure auth with Supabase
+- **Responsive Design** - Mobile-first approach
+
+## Quick Start
+
+1. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+2. **Set up environment variables:**
+   ```bash
+   cp .env.example .env.local
+   ```
+   Update with your Supabase and Stripe 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
+- **Payments:** Stripe
+- **UI Components:** @digilogiclabs/saas-factory-ui
+- **State Management:** Zustand
+
+## Project Structure
+
+```
+src/
+├── app/                 # Next.js App Router pages
+│   ├── dashboard/       # Seller dashboard
+│   ├── products/        # Product listings
+│   ├── cart/            # Shopping cart
+│   └── vendors/         # Vendor pages
+├── components/          # React components
+│   ├── marketplace/     # Marketplace-specific components
+│   └── providers/       # Context providers
+└── lib/                 # Utilities and helpers
+```
+
+## 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/marketplace/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('/products/new') ||
+     request.nextUrl.pathname.startsWith('/orders') ||
+     request.nextUrl.pathname.startsWith('/payouts'))
+  ) {
+    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/marketplace/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/marketplace/template/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}} - Multi-vendor Marketplace",
+  "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-payments": "^1.2.9",
+    "@digilogiclabs/saas-factory-ui": "^1.0.1",
+    "stripe": "^16.12.0",
+    "@stripe/react-stripe-js": "^2.8.0",
+    "@stripe/stripe-js": "^4.10.0",
+    "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"
+  },
+  "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"
+  }
+}