create-mantiq 0.7.0 → 0.7.2

package/stubs/tailwind-only/vue/src/pages/account/Security.vue.stub

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AccountLayout from './layout.vue'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  currentUser?: { name: string; email: string; role?: string } | null
+  navigate: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const currentPassword = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const success = ref('')
+const error = ref('')
+
+async function handleSubmit() {
+  success.value = ''
+  error.value = ''
+  if (newPassword.value !== confirmPassword.value) {
+    error.value = 'Passwords do not match.'
+    return
+  }
+  if (newPassword.value.length < 6) {
+    error.value = 'Password must be at least 6 characters.'
+    return
+  }
+  // Password change would call an API endpoint
+  success.value = 'Password updated successfully.'
+  currentPassword.value = ''
+  newPassword.value = ''
+  confirmPassword.value = ''
+}
+</script>
+
+<template>
+  <AccountLayout
+    :app-name="appName"
+    :current-user="currentUser"
+    :navigate="navigate"
+    active-path="/account/security"
+    title="Settings"
+    description="Manage your account settings."
+  >
+    <div class="rounded-xl border bg-card text-card-foreground shadow-sm">
+      <div class="p-6 pb-2">
+        <h3 class="text-lg font-semibold leading-none tracking-tight">Security</h3>
+        <p class="mt-1.5 text-sm text-muted-foreground">Change your password.</p>
+      </div>
+      <div class="p-6 pt-4">
+        <div
+          v-if="success"
+          class="mb-4 rounded-md border border-green-500/30 bg-green-500/10 px-4 py-3 text-sm text-green-600 dark:text-green-400"
+        >
+          {{ success }}
+        </div>
+        <div
+          v-if="error"
+          class="mb-4 rounded-md border border-destructive px-4 py-3 text-sm text-destructive"
+        >
+          {{ error }}
+        </div>
+        <form class="space-y-4 max-w-md" @submit.prevent="handleSubmit">
+          <div class="space-y-2">
+            <label for="current-password" class="text-sm font-medium leading-none">Current Password</label>
+            <input id="current-password" v-model="currentPassword" type="password" required class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+          </div>
+          <div class="space-y-2">
+            <label for="new-password" class="text-sm font-medium leading-none">New Password</label>
+            <input id="new-password" v-model="newPassword" type="password" required placeholder="Min 6 characters" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+          </div>
+          <div class="space-y-2">
+            <label for="confirm-password" class="text-sm font-medium leading-none">Confirm New Password</label>
+            <input id="confirm-password" v-model="confirmPassword" type="password" required class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+          </div>
+          <button type="submit" class="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90">
+            Update Password
+          </button>
+        </form>
+      </div>
+    </div>
+  </AccountLayout>
+</template>

package/stubs/tailwind-only/vue/src/style.css.stub

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up { animation: fadeUp 0.4s ease-out; }
+
+@theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/stubs/themes/corporate/react/src/components/layout/app-sidebar.tsx.stub

@@ -0,0 +1,74 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from '@/components/ui/sidebar'
+import { NavGroup } from './nav-group'
+import { NavUser, type NavUserProps } from './nav-user'
+import { sidebarData } from './sidebar-data'
+import { Command } from 'lucide-react'
+
+export interface AppSidebarProps {
+  user: NavUserProps['user']
+  appName: string
+  activePath: string
+  navigate: (href: string) => void
+  onLogout: () => void
+}
+
+export function AppSidebar({
+  user,
+  appName,
+  activePath,
+  navigate,
+  onLogout,
+}: AppSidebarProps) {
+  return (
+    <Sidebar variant="floating" collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              onClick={() => navigate('/dashboard')}
+              tooltip={appName}
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <Command className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{appName}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  Admin Panel
+                </span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        {sidebarData.map((group) => (
+          <NavGroup
+            key={group.title}
+            group={group}
+            activePath={activePath}
+            navigate={navigate}
+          />
+        ))}
+      </SidebarContent>
+
+      <SidebarFooter>
+        <NavUser user={user} navigate={navigate} onLogout={onLogout} />
+      </SidebarFooter>
+
+      <SidebarRail />
+    </Sidebar>
+  )
+}

package/stubs/themes/corporate/react/src/components/layout/authenticated-layout.tsx.stub

@@ -0,0 +1,42 @@
+import { useCallback } from 'react'
+import { post } from '@/lib/api'
+import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
+import { AppSidebar } from './app-sidebar'
+
+interface AuthenticatedLayoutProps {
+  children: React.ReactNode
+  currentUser?: { name: string; email: string; role?: string } | null
+  appName?: string
+  navigate: (href: string) => void
+  activePath: string
+}
+
+export function AuthenticatedLayout({
+  children,
+  currentUser,
+  appName = 'Mantiq',
+  navigate,
+  activePath,
+}: AuthenticatedLayoutProps) {
+  const handleLogout = useCallback(async () => {
+    await post('/logout', {})
+    navigate('/login')
+  }, [navigate])
+
+  const user = currentUser ?? { name: 'User', email: 'user@example.com' }
+
+  return (
+    <SidebarProvider defaultOpen={true}>
+      <AppSidebar
+        user={user}
+        appName={appName}
+        activePath={activePath}
+        navigate={navigate}
+        onLogout={handleLogout}
+      />
+      <SidebarInset>
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

package/stubs/themes/corporate/react/src/pages/Dashboard.tsx.stub

@@ -0,0 +1,310 @@
+import { useState } from 'react'
+import { AuthenticatedLayout } from '@/components/layout/authenticated-layout'
+import { Header } from '@/components/layout/header'
+import { Main } from '@/components/layout/main'
+import { TopNav } from '@/components/layout/top-nav'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  TrendingUp,
+  TrendingDown,
+  ArrowUpRight,
+  ArrowDownRight,
+  CreditCard,
+  DollarSign,
+  Users,
+  Activity,
+} from 'lucide-react'
+
+interface DashboardProps {
+  appName?: string
+  currentUser?: { id: number; name: string; email: string; role: string } | null
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+const topNav = [
+  { title: 'Overview', href: '/dashboard', isActive: true },
+  { title: 'Sales', href: '/dashboard', isActive: false, disabled: true },
+  { title: 'Tickets', href: '/dashboard', isActive: false, disabled: true },
+  { title: 'Performance', href: '/dashboard', isActive: false, disabled: true },
+]
+
+const transactions = [
+  { customer: 'Olivia Martin', email: 'olivia@email.com', amount: '$1,999.00', status: 'Completed', date: 'Mar 15, 2025' },
+  { customer: 'Jackson Lee', email: 'jackson@email.com', amount: '$39.00', status: 'Completed', date: 'Mar 14, 2025' },
+  { customer: 'Isabella Nguyen', email: 'isabella@email.com', amount: '$299.00', status: 'Pending', date: 'Mar 14, 2025' },
+  { customer: 'William Kim', email: 'will@email.com', amount: '$99.00', status: 'Failed', date: 'Mar 13, 2025' },
+  { customer: 'Sofia Davis', email: 'sofia@email.com', amount: '$39.00', status: 'Completed', date: 'Mar 13, 2025' },
+]
+
+function statusColor(status: string) {
+  if (status === 'Completed') return 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/20'
+  if (status === 'Pending') return 'bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/20'
+  return 'bg-red-500/15 text-red-700 dark:text-red-400 border-red-500/20'
+}
+
+function RevenueChart() {
+  const data = [1200, 2100, 1800, 3200, 2800, 4100, 3600, 5200, 4800, 5800, 5100, 6200, 5600]
+  const maxVal = Math.max(...data)
+  const svgW = 700
+  const svgH = 220
+  const padL = 40
+  const padR = 10
+  const padT = 10
+  const padB = 30
+  const chartW = svgW - padL - padR
+  const chartH = svgH - padT - padB
+  const stepX = chartW / (data.length - 1)
+  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  const yLabels = ['$0', '$2k', '$4k', '$6k']
+
+  const points = data.map((val, i) => ({
+    x: padL + i * stepX,
+    y: padT + chartH - (val / maxVal) * chartH,
+  }))
+
+  const linePath = points.map((p, i) => {
+    if (i === 0) return `M ${p.x} ${p.y}`
+    const prev = points[i - 1]
+    const cpx1 = prev.x + stepX * 0.4
+    const cpx2 = p.x - stepX * 0.4
+    return `C ${cpx1} ${prev.y}, ${cpx2} ${p.y}, ${p.x} ${p.y}`
+  }).join(' ')
+
+  const areaPath = `${linePath} L ${points[points.length - 1].x} ${padT + chartH} L ${points[0].x} ${padT + chartH} Z`
+
+  return (
+    <svg viewBox={`0 0 ${svgW} ${svgH}`} className="h-[280px] w-full" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" className="[stop-color:var(--color-primary)]" stopOpacity={0.3} />
+          <stop offset="100%" className="[stop-color:var(--color-primary)]" stopOpacity={0.02} />
+        </linearGradient>
+      </defs>
+
+      {/* Grid lines */}
+      {yLabels.map((_, i) => {
+        const y = padT + chartH - (i / (yLabels.length - 1)) * chartH
+        return (
+          <line key={i} x1={padL} y1={y} x2={svgW - padR} y2={y} className="stroke-border" strokeWidth={0.5} strokeDasharray="4 4" />
+        )
+      })}
+
+      {/* Y-axis labels */}
+      {yLabels.map((label, i) => {
+        const y = padT + chartH - (i / (yLabels.length - 1)) * chartH
+        return (
+          <text key={i} x={padL - 6} y={y + 3} textAnchor="end" className="fill-muted-foreground text-[9px]">
+            {label}
+          </text>
+        )
+      })}
+
+      {/* Area fill */}
+      <path d={areaPath} fill="url(#areaGradient)" />
+
+      {/* Line */}
+      <path d={linePath} fill="none" className="stroke-primary" strokeWidth={2} strokeLinecap="round" />
+
+      {/* X-axis labels */}
+      {days.map((day, i) => {
+        const idx = Math.round((i / (days.length - 1)) * (data.length - 1))
+        return (
+          <text key={i} x={points[idx].x} y={svgH - 6} textAnchor="middle" className="fill-muted-foreground text-[9px]">
+            {day}
+          </text>
+        )
+      })}
+    </svg>
+  )
+}
+
+export default function Dashboard({
+  appName = 'Mantiq',
+  currentUser,
+  navigate,
+}: DashboardProps) {
+  const [activeRange, setActiveRange] = useState('7d')
+
+  return (
+    <AuthenticatedLayout
+      currentUser={currentUser}
+      appName={appName}
+      navigate={navigate}
+      activePath="/dashboard"
+    >
+      <Header navigate={navigate}>
+        <TopNav links={topNav} onLinkClick={navigate} />
+      </Header>
+      <Main>
+        <div className="space-y-6">
+          {/* Page title row */}
+          <div className="flex items-center justify-between">
+            <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
+            <div className="flex items-center gap-1 rounded-lg border bg-card p-1">
+              {(['7d', '30d', '90d'] as const).map((range) => (
+                <button
+                  key={range}
+                  onClick={() => setActiveRange(range)}
+                  className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
+                    activeRange === range
+                      ? 'bg-primary text-primary-foreground shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground'
+                  }`}
+                >
+                  {range === '7d' ? '7 days' : range === '30d' ? '30 days' : '90 days'}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Stat cards */}
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
+                <DollarSign className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">$45,231.89</div>
+                <div className="mt-1 flex items-center gap-1">
+                  <Badge variant="outline" className="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                    <ArrowUpRight className="h-3 w-3" />
+                    +20.1%
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">from last period</span>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">New Customers</CardTitle>
+                <Users className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">+2,350</div>
+                <div className="mt-1 flex items-center gap-1">
+                  <Badge variant="outline" className="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                    <ArrowUpRight className="h-3 w-3" />
+                    +180.1%
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">from last period</span>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Active Subscriptions</CardTitle>
+                <CreditCard className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">+12,234</div>
+                <div className="mt-1 flex items-center gap-1">
+                  <Badge variant="outline" className="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                    <ArrowUpRight className="h-3 w-3" />
+                    +19%
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">from last period</span>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Churn Rate</CardTitle>
+                <Activity className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">2.4%</div>
+                <div className="mt-1 flex items-center gap-1">
+                  <Badge variant="outline" className="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                    <ArrowDownRight className="h-3 w-3" />
+                    -0.3%
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">from last period</span>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Revenue chart */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle>Revenue Overview</CardTitle>
+                  <CardDescription>Daily revenue for the selected period</CardDescription>
+                </div>
+                <div className="flex items-center gap-2 text-sm">
+                  <TrendingUp className="h-4 w-4 text-emerald-600" />
+                  <span className="font-medium text-emerald-600">+12.5%</span>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <RevenueChart />
+            </CardContent>
+          </Card>
+
+          {/* Recent Transactions */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Recent Transactions</CardTitle>
+              <CardDescription>Latest payment activity across all channels</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Customer</TableHead>
+                    <TableHead>Amount</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead className="text-right">Date</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {transactions.map((tx) => (
+                    <TableRow key={tx.email}>
+                      <TableCell>
+                        <div>
+                          <p className="font-medium">{tx.customer}</p>
+                          <p className="text-sm text-muted-foreground">{tx.email}</p>
+                        </div>
+                      </TableCell>
+                      <TableCell className="font-medium">{tx.amount}</TableCell>
+                      <TableCell>
+                        <Badge variant="outline" className={statusColor(tx.status)}>
+                          {tx.status}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right text-muted-foreground">{tx.date}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </div>
+      </Main>
+    </AuthenticatedLayout>
+  )
+}

package/stubs/themes/corporate/react/src/pages/Login.tsx.stub

@@ -0,0 +1,122 @@
+import { useState } from 'react'
+import { post } from '../lib/api.ts'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+
+interface LoginProps {
+  appName?: string
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Login({ appName = 'Mantiq', navigate }: LoginProps) {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    const { ok, data } = await post('/login', { email, password })
+    if (ok) navigate('/dashboard')
+    else setError(data?.error ?? 'Invalid email or password. Please try again.')
+    setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen bg-muted/50 flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        {/* Logo */}
+        <div className="mb-8 flex flex-col items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold shadow-sm">
+            M
+          </div>
+          <span className="text-lg font-semibold tracking-tight">{appName}</span>
+        </div>
+
+        {/* Card */}
+        <div className="rounded-lg border bg-card shadow-sm p-6">
+          <div className="mb-6">
+            <h1 className="text-xl font-semibold tracking-tight">Sign in</h1>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Enter your credentials to continue
+            </p>
+          </div>
+
+          {error && (
+            <div className="mb-4 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                placeholder="you@example.com"
+                autoComplete="email"
+              />
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">Password</Label>
+                <button
+                  type="button"
+                  className="text-xs font-medium text-primary hover:text-primary/80"
+                  tabIndex={-1}
+                >
+                  Forgot password?
+                </button>
+              </div>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                placeholder="Enter your password"
+                autoComplete="current-password"
+              />
+            </div>
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Signing in...' : 'Sign in'}
+            </Button>
+          </form>
+
+          <div className="relative my-6">
+            <div className="absolute inset-0 flex items-center">
+              <Separator className="w-full" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-card px-2 text-muted-foreground">or</span>
+            </div>
+          </div>
+
+          <p className="text-center text-sm text-muted-foreground">
+            <button
+              type="button"
+              className="font-medium text-primary hover:text-primary/80"
+              onClick={() => navigate('/register')}
+            >
+              Create an account
+            </button>
+          </p>
+        </div>
+
+        {/* Footer */}
+        <p className="mt-6 text-center text-xs text-muted-foreground">
+          Powered by {appName}
+        </p>
+      </div>
+    </div>
+  )
+}