create-mantiq 0.7.0 → 0.7.2

package/stubs/themes/corporate/svelte/src/pages/Register.svelte.stub

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { post } from '$lib/api'
+  import { Button } from '$lib/components/ui/button'
+  import { Input } from '$lib/components/ui/input'
+  import { Label } from '$lib/components/ui/label'
+  import { Separator } from '$lib/components/ui/separator'
+
+  interface Props {
+    appName?: string
+    navigate?: (href: string) => void
+  }
+  let { appName = 'Mantiq', navigate = () => {} }: Props = $props()
+
+  let name = $state('')
+  let email = $state('')
+  let password = $state('')
+  let error = $state('')
+  let loading = $state(false)
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    error = ''
+    loading = true
+    const { ok, data } = await post('/register', { name, email, password })
+    if (ok) navigate('/dashboard')
+    else error = data?.error?.message ?? data?.error ?? 'Registration failed. Please try again.'
+    loading = false
+  }
+</script>
+
+<div class="min-h-screen bg-muted/50 flex items-center justify-center p-4">
+  <div class="w-full max-w-sm">
+    <!-- Logo -->
+    <div class="mb-8 flex flex-col items-center gap-3">
+      <div class="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 class="text-lg font-semibold tracking-tight">{appName}</span>
+    </div>
+
+    <!-- Card -->
+    <div class="rounded-lg border bg-card shadow-sm p-6">
+      <div class="mb-6">
+        <h1 class="text-xl font-semibold tracking-tight">Create an account</h1>
+        <p class="mt-1 text-sm text-muted-foreground">
+          Get started with {appName} today
+        </p>
+      </div>
+
+      {#if error}
+        <div class="mb-4 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+          {error}
+        </div>
+      {/if}
+
+      <form onsubmit={handleSubmit} class="space-y-4">
+        <div class="space-y-2">
+          <Label for="name">Name</Label>
+          <Input
+            id="name"
+            bind:value={name}
+            required
+            placeholder="John Doe"
+            autocomplete="name"
+          />
+        </div>
+        <div class="space-y-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            bind:value={email}
+            required
+            placeholder="you@example.com"
+            autocomplete="email"
+          />
+        </div>
+        <div class="space-y-2">
+          <Label for="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            bind:value={password}
+            required
+            placeholder="Create a strong password"
+            autocomplete="new-password"
+            minlength={8}
+          />
+          <p class="text-xs text-muted-foreground">Must be at least 8 characters</p>
+        </div>
+
+        <div class="flex items-start gap-2">
+          <input
+            type="checkbox"
+            id="terms"
+            class="mt-1 h-3.5 w-3.5 rounded border-input accent-primary"
+            required
+          />
+          <label for="terms" class="text-xs text-muted-foreground leading-relaxed">
+            I agree to the{' '}
+            <button type="button" class="font-medium text-primary hover:text-primary/80">Terms of Service</button>
+            {' '}and{' '}
+            <button type="button" class="font-medium text-primary hover:text-primary/80">Privacy Policy</button>
+          </label>
+        </div>
+
+        <Button type="submit" class="w-full" disabled={loading}>
+          {loading ? 'Creating account...' : 'Create account'}
+        </Button>
+      </form>
+
+      <div class="relative my-6">
+        <div class="absolute inset-0 flex items-center">
+          <Separator class="w-full" />
+        </div>
+        <div class="relative flex justify-center text-xs uppercase">
+          <span class="bg-card px-2 text-muted-foreground">or</span>
+        </div>
+      </div>
+
+      <p class="text-center text-sm text-muted-foreground">
+        Already have an account?{' '}
+        <button
+          type="button"
+          class="font-medium text-primary hover:text-primary/80"
+          onclick={() => navigate('/login')}
+        >
+          Sign in
+        </button>
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <p class="mt-6 text-center text-xs text-muted-foreground">
+      Powered by {appName}
+    </p>
+  </div>
+</div>

package/stubs/themes/corporate/svelte/src/style.css.stub

@@ -0,0 +1,134 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * shadcn/ui theme — Corporate
+ *
+ * Clean zinc neutrals with indigo/violet accent.
+ * Inspired by Corporate and Tailwind's professional design language.
+ */
+
+@theme inline {
+  --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-destructive-foreground: var(--destructive-foreground);
+  --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);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.985 0.002 247.858);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.585 0.233 277.117);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0.004 286.32);
+  --input: oklch(0.922 0.004 286.32);
+  --ring: oklch(0.585 0.233 277.117);
+  --chart-1: oklch(0.585 0.233 277.117);
+  --chart-2: oklch(0.553 0.213 264.364);
+  --chart-3: oklch(0.496 0.265 301.924);
+  --chart-4: oklch(0.6 0.118 184.714);
+  --chart-5: oklch(0.828 0.189 84.429);
+  --sidebar: oklch(0.985 0.002 247.858);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.585 0.233 277.117);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.922 0.004 286.32);
+  --sidebar-ring: oklch(0.585 0.233 277.117);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.178 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.178 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.65 0.21 277.117);
+  --primary-foreground: oklch(0.145 0.004 285.823);
+  --secondary: oklch(0.269 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0.006 286.033);
+  --muted-foreground: oklch(0.708 0.014 286.067);
+  --accent: oklch(0.269 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.704 0.191 22.216);
+  --border: oklch(0.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.65 0.21 277.117);
+  --chart-1: oklch(0.65 0.21 277.117);
+  --chart-2: oklch(0.623 0.214 262.881);
+  --chart-3: oklch(0.627 0.265 303.9);
+  --chart-4: oklch(0.696 0.17 162.48);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.16 0.005 285.823);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.65 0.21 277.117);
+  --sidebar-primary-foreground: oklch(0.145 0.004 285.823);
+  --sidebar-accent: oklch(0.269 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.274 0.006 286.033);
+  --sidebar-ring: oklch(0.65 0.21 277.117);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up { animation: fadeUp 0.4s ease-out; }

package/stubs/themes/corporate/vue/src/pages/Dashboard.vue.stub

@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AuthenticatedLayout from '@/components/layout/AuthenticatedLayout.vue'
+import Header from '@/components/layout/Header.vue'
+import Main from '@/components/layout/Main.vue'
+import TopNav from '@/components/layout/TopNav.vue'
+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,
+  ArrowUpRight,
+  ArrowDownRight,
+  CreditCard,
+  DollarSign,
+  Users,
+  Activity,
+} from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  currentUser?: { id: number; name: string; email: string; role: string } | null
+  navigate?: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+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'
+}
+
+const activeRange = ref('7d')
+
+const ranges = ['7d', '30d', '90d'] as const
+
+function rangeLabel(range: string) {
+  if (range === '7d') return '7 days'
+  if (range === '30d') return '30 days'
+  return '90 days'
+}
+
+// Revenue chart data
+const chartData = [1200, 2100, 1800, 3200, 2800, 4100, 3600, 5200, 4800, 5800, 5100, 6200, 5600]
+const maxVal = Math.max(...chartData)
+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 / (chartData.length - 1)
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+const yLabels = ['$0', '$2k', '$4k', '$6k']
+
+const points = chartData.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`
+
+function yPos(index: number) {
+  return padT + chartH - (index / (yLabels.length - 1)) * chartH
+}
+
+function xLabelPos(index: number) {
+  const idx = Math.round((index / (days.length - 1)) * (chartData.length - 1))
+  return points[idx].x
+}
+</script>
+
+<template>
+  <AuthenticatedLayout
+    :current-user="currentUser"
+    :app-name="appName"
+    :navigate="navigate"
+    active-path="/dashboard"
+  >
+    <Header :navigate="navigate">
+      <TopNav :links="topNav" :on-link-click="navigate" />
+    </Header>
+    <Main>
+      <div class="space-y-6">
+        <!-- Page title row -->
+        <div class="flex items-center justify-between">
+          <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
+          <div class="flex items-center gap-1 rounded-lg border bg-card p-1">
+            <button
+              v-for="range in ranges"
+              :key="range"
+              :class="[
+                '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',
+              ]"
+              @click="activeRange = range"
+            >
+              {{ rangeLabel(range) }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Stat cards -->
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Total Revenue</CardTitle>
+              <DollarSign class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">$45,231.89</div>
+              <div class="mt-1 flex items-center gap-1">
+                <Badge variant="outline" class="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                  <ArrowUpRight class="h-3 w-3" />
+                  +20.1%
+                </Badge>
+                <span class="text-xs text-muted-foreground">from last period</span>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">New Customers</CardTitle>
+              <Users class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">+2,350</div>
+              <div class="mt-1 flex items-center gap-1">
+                <Badge variant="outline" class="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                  <ArrowUpRight class="h-3 w-3" />
+                  +180.1%
+                </Badge>
+                <span class="text-xs text-muted-foreground">from last period</span>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Active Subscriptions</CardTitle>
+              <CreditCard class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">+12,234</div>
+              <div class="mt-1 flex items-center gap-1">
+                <Badge variant="outline" class="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                  <ArrowUpRight class="h-3 w-3" />
+                  +19%
+                </Badge>
+                <span class="text-xs text-muted-foreground">from last period</span>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Churn Rate</CardTitle>
+              <Activity class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">2.4%</div>
+              <div class="mt-1 flex items-center gap-1">
+                <Badge variant="outline" class="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                  <ArrowDownRight class="h-3 w-3" />
+                  -0.3%
+                </Badge>
+                <span class="text-xs text-muted-foreground">from last period</span>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <!-- Revenue chart -->
+        <Card>
+          <CardHeader>
+            <div class="flex items-center justify-between">
+              <div>
+                <CardTitle>Revenue Overview</CardTitle>
+                <CardDescription>Daily revenue for the selected period</CardDescription>
+              </div>
+              <div class="flex items-center gap-2 text-sm">
+                <TrendingUp class="h-4 w-4 text-emerald-600" />
+                <span class="font-medium text-emerald-600">+12.5%</span>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <svg :viewBox="`0 0 ${svgW} ${svgH}`" class="h-[280px] w-full" preserveAspectRatio="xMidYMid meet">
+              <defs>
+                <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" class="[stop-color:var(--color-primary)]" stop-opacity="0.3" />
+                  <stop offset="100%" class="[stop-color:var(--color-primary)]" stop-opacity="0.02" />
+                </linearGradient>
+              </defs>
+
+              <!-- Grid lines -->
+              <line
+                v-for="(_, i) in yLabels"
+                :key="'grid-' + i"
+                :x1="padL"
+                :y1="yPos(i)"
+                :x2="svgW - padR"
+                :y2="yPos(i)"
+                class="stroke-border"
+                stroke-width="0.5"
+                stroke-dasharray="4 4"
+              />
+
+              <!-- Y-axis labels -->
+              <text
+                v-for="(label, i) in yLabels"
+                :key="'ylabel-' + i"
+                :x="padL - 6"
+                :y="yPos(i) + 3"
+                text-anchor="end"
+                class="fill-muted-foreground text-[9px]"
+              >
+                {{ label }}
+              </text>
+
+              <!-- Area fill -->
+              <path :d="areaPath" fill="url(#areaGradient)" />
+
+              <!-- Line -->
+              <path :d="linePath" fill="none" class="stroke-primary" stroke-width="2" stroke-linecap="round" />
+
+              <!-- X-axis labels -->
+              <text
+                v-for="(day, i) in days"
+                :key="'xlabel-' + i"
+                :x="xLabelPos(i)"
+                :y="svgH - 6"
+                text-anchor="middle"
+                class="fill-muted-foreground text-[9px]"
+              >
+                {{ day }}
+              </text>
+            </svg>
+          </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 class="text-right">Date</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow v-for="tx in transactions" :key="tx.email">
+                  <TableCell>
+                    <div>
+                      <p class="font-medium">{{ tx.customer }}</p>
+                      <p class="text-sm text-muted-foreground">{{ tx.email }}</p>
+                    </div>
+                  </TableCell>
+                  <TableCell class="font-medium">{{ tx.amount }}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline" :class="statusColor(tx.status)">
+                      {{ tx.status }}
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="text-right text-muted-foreground">{{ tx.date }}</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </div>
+    </Main>
+  </AuthenticatedLayout>
+</template>