create-mantiq 0.7.0 → 0.7.2

package/stubs/tailwind-only/react/src/pages/Dashboard.tsx.stub

@@ -0,0 +1,205 @@
+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'
+
+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 recentSales = [
+  { name: 'Olivia Martin', email: 'olivia.martin@email.com', amount: '+$1,999.00' },
+  { name: 'Jackson Lee', email: 'jackson.lee@email.com', amount: '+$39.00' },
+  { name: 'Isabella Nguyen', email: 'isabella.nguyen@email.com', amount: '+$299.00' },
+  { name: 'William Kim', email: 'will@email.com', amount: '+$99.00' },
+  { name: 'Sofia Davis', email: 'sofia.davis@email.com', amount: '+$39.00' },
+]
+
+function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+function OverviewChart() {
+  const bars = [40, 30, 55, 45, 70, 60, 80, 50, 65, 45, 75, 55]
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  const maxH = 160
+  const barW = 32
+  const gap = 48
+  const svgW = bars.length * gap
+  const svgH = maxH + 30
+
+  return (
+    <svg
+      viewBox={`0 0 ${svgW} ${svgH}`}
+      className="h-[350px] w-full"
+      preserveAspectRatio="none"
+    >
+      {bars.map((h, i) => {
+        const barH = (h / 100) * maxH
+        return (
+          <g key={i}>
+            <rect
+              x={i * gap + (gap - barW) / 2}
+              y={maxH - barH}
+              width={barW}
+              height={barH}
+              rx={4}
+              className="fill-gray-900/15 dark:fill-gray-50/15"
+            />
+            <text
+              x={i * gap + gap / 2}
+              y={maxH + 18}
+              textAnchor="middle"
+              className="fill-gray-500 text-[10px] dark:fill-gray-400"
+            >
+              {months[i]}
+            </text>
+          </g>
+        )
+      })}
+    </svg>
+  )
+}
+
+export default function Dashboard({
+  appName = 'Mantiq',
+  currentUser,
+  navigate,
+}: DashboardProps) {
+  return (
+    <AuthenticatedLayout
+      currentUser={currentUser}
+      appName={appName}
+      navigate={navigate}
+      activePath="/dashboard"
+    >
+      <Header navigate={navigate}>
+        <TopNav links={topNav} onLinkClick={navigate} />
+      </Header>
+      <Main>
+        <div className="space-y-4">
+          {/* Page title row */}
+          <div className="flex items-center justify-between">
+            <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50">Dashboard</h2>
+            <button
+              type="button"
+              disabled
+              className="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-medium text-gray-500 opacity-50 dark:border-gray-700 dark:text-gray-400"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" />
+              </svg>
+              Download
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="space-y-4">
+            {/* Stat cards */}
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              {/* Total Revenue */}
+              <div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-950">
+                <div className="flex items-center justify-between pb-2">
+                  <h3 className="text-sm font-medium text-gray-900 dark:text-gray-50">Total Revenue</h3>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="h-4 w-4 text-gray-500 dark:text-gray-400">
+                    <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+                  </svg>
+                </div>
+                <div className="text-2xl font-bold text-gray-900 dark:text-gray-50">$45,231.89</div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">+20.1% from last month</p>
+              </div>
+
+              {/* Subscriptions */}
+              <div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-950">
+                <div className="flex items-center justify-between pb-2">
+                  <h3 className="text-sm font-medium text-gray-900 dark:text-gray-50">Subscriptions</h3>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="h-4 w-4 text-gray-500 dark:text-gray-400">
+                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+                  </svg>
+                </div>
+                <div className="text-2xl font-bold text-gray-900 dark:text-gray-50">+2,350</div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">+180.1% from last month</p>
+              </div>
+
+              {/* Sales */}
+              <div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-950">
+                <div className="flex items-center justify-between pb-2">
+                  <h3 className="text-sm font-medium text-gray-900 dark:text-gray-50">Sales</h3>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="h-4 w-4 text-gray-500 dark:text-gray-400">
+                    <rect width="20" height="14" x="2" y="5" rx="2" /><path d="M2 10h20" />
+                  </svg>
+                </div>
+                <div className="text-2xl font-bold text-gray-900 dark:text-gray-50">+12,234</div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">+19% from last month</p>
+              </div>
+
+              {/* Active Now */}
+              <div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-950">
+                <div className="flex items-center justify-between pb-2">
+                  <h3 className="text-sm font-medium text-gray-900 dark:text-gray-50">Active Now</h3>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="h-4 w-4 text-gray-500 dark:text-gray-400">
+                    <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                  </svg>
+                </div>
+                <div className="text-2xl font-bold text-gray-900 dark:text-gray-50">+573</div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">+201 since last hour</p>
+              </div>
+            </div>
+
+            {/* Bottom row: chart + recent sales */}
+            <div className="grid gap-4 lg:grid-cols-7">
+              {/* Chart card */}
+              <div className="rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950 lg:col-span-4">
+                <div className="p-6 pb-2">
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50">Overview</h3>
+                </div>
+                <div className="p-6 pt-0 pl-2">
+                  <OverviewChart />
+                </div>
+              </div>
+
+              {/* Recent sales card */}
+              <div className="rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950 lg:col-span-3">
+                <div className="p-6 pb-2">
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50">Recent Sales</h3>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">You made 265 sales this month.</p>
+                </div>
+                <div className="p-6 pt-0">
+                  <div className="space-y-8">
+                    {recentSales.map((sale) => (
+                      <div key={sale.email} className="flex items-center">
+                        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gray-100 text-xs font-semibold text-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                          {getInitials(sale.name)}
+                        </div>
+                        <div className="ml-4 space-y-1">
+                          <p className="text-sm font-medium leading-none text-gray-900 dark:text-gray-50">{sale.name}</p>
+                          <p className="text-sm text-gray-500 dark:text-gray-400">{sale.email}</p>
+                        </div>
+                        <div className="ml-auto font-medium text-gray-900 dark:text-gray-50">{sale.amount}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Main>
+    </AuthenticatedLayout>
+  )
+}

package/stubs/tailwind-only/react/src/pages/Login.tsx.stub

@@ -0,0 +1,122 @@
+import { useState } from 'react'
+import { post } from '../lib/api.ts'
+
+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="flex min-h-screen bg-white dark:bg-gray-950">
+      {/* Left brand panel */}
+      <div className="hidden lg:flex lg:w-[45%] flex-col justify-between bg-gray-900 p-10 text-white dark:bg-gray-900">
+        <div className="flex items-center gap-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded bg-white text-xs font-bold text-gray-900">
+            M
+          </div>
+          <span className="text-lg font-semibold tracking-tight">{appName}</span>
+        </div>
+
+        <div>
+          <blockquote className="text-2xl font-medium leading-snug tracking-tight">
+            "The framework that gets out of your way."
+          </blockquote>
+        </div>
+
+        <p className="text-sm text-white/50">
+          &copy; {new Date().getFullYear()} {appName}. All rights reserved.
+        </p>
+      </div>
+
+      {/* Right form panel */}
+      <div className="flex flex-1 flex-col items-center justify-center px-6 py-12">
+        {/* Mobile-only logo */}
+        <div className="mb-10 flex items-center gap-3 lg:hidden">
+          <div className="flex h-8 w-8 items-center justify-center rounded bg-gray-900 text-xs font-bold text-white dark:bg-gray-50 dark:text-gray-900">
+            M
+          </div>
+          <span className="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-50">{appName}</span>
+        </div>
+
+        <div className="w-full max-w-sm">
+          <div className="mb-8">
+            <h1 className="text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Sign in</h1>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+              Enter your credentials to continue
+            </p>
+          </div>
+
+          {error && (
+            <div className="mb-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600 dark:border-red-800 dark:bg-red-950 dark:text-red-400">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium text-gray-900 dark:text-gray-50">Email</label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                placeholder="you@example.com"
+                autoComplete="email"
+                className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50 dark:placeholder-gray-500"
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="password" className="text-sm font-medium text-gray-900 dark:text-gray-50">Password</label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                placeholder="Enter your password"
+                autoComplete="current-password"
+                className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50 dark:placeholder-gray-500"
+              />
+            </div>
+            <button
+              type="submit"
+              className="w-full rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700 disabled:opacity-50"
+              disabled={loading}
+            >
+              {loading ? 'Signing in...' : 'Sign in'}
+            </button>
+          </form>
+
+          <p className="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
+            Don't have an account?{' '}
+            <button
+              type="button"
+              className="font-medium text-gray-900 underline underline-offset-4 dark:text-gray-50"
+              onClick={() => navigate('/register')}
+            >
+              Register
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/stubs/tailwind-only/react/src/pages/Register.tsx.stub

@@ -0,0 +1,137 @@
+import { useState } from 'react'
+import { post } from '../lib/api.ts'
+
+interface RegisterProps {
+  appName?: string
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Register({ appName = 'Mantiq', navigate }: RegisterProps) {
+  const [name, setName] = useState('')
+  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('/register', { name, email, password })
+    if (ok) navigate('/dashboard')
+    else setError(data?.error?.message ?? data?.error ?? 'Registration failed. Please try again.')
+    setLoading(false)
+  }
+
+  return (
+    <div className="flex min-h-screen bg-white dark:bg-gray-950">
+      {/* Left brand panel */}
+      <div className="hidden lg:flex lg:w-[45%] flex-col justify-between bg-gray-900 p-10 text-white dark:bg-gray-900">
+        <div className="flex items-center gap-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded bg-white text-xs font-bold text-gray-900">
+            M
+          </div>
+          <span className="text-lg font-semibold tracking-tight">{appName}</span>
+        </div>
+
+        <div>
+          <blockquote className="text-2xl font-medium leading-snug tracking-tight">
+            "The framework that gets out of your way."
+          </blockquote>
+        </div>
+
+        <p className="text-sm text-white/50">
+          &copy; {new Date().getFullYear()} {appName}. All rights reserved.
+        </p>
+      </div>
+
+      {/* Right form panel */}
+      <div className="flex flex-1 flex-col items-center justify-center px-6 py-12">
+        {/* Mobile-only logo */}
+        <div className="mb-10 flex items-center gap-3 lg:hidden">
+          <div className="flex h-8 w-8 items-center justify-center rounded bg-gray-900 text-xs font-bold text-white dark:bg-gray-50 dark:text-gray-900">
+            M
+          </div>
+          <span className="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-50">{appName}</span>
+        </div>
+
+        <div className="w-full max-w-sm">
+          <div className="mb-8">
+            <h1 className="text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Create an account</h1>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+              Get started with {appName} today
+            </p>
+          </div>
+
+          {error && (
+            <div className="mb-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600 dark:border-red-800 dark:bg-red-950 dark:text-red-400">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <label htmlFor="name" className="text-sm font-medium text-gray-900 dark:text-gray-50">Name</label>
+              <input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+                placeholder="John Doe"
+                autoComplete="name"
+                className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50 dark:placeholder-gray-500"
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium text-gray-900 dark:text-gray-50">Email</label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                placeholder="you@example.com"
+                autoComplete="email"
+                className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50 dark:placeholder-gray-500"
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="password" className="text-sm font-medium text-gray-900 dark:text-gray-50">Password</label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                placeholder="Create a strong password"
+                autoComplete="new-password"
+                minLength={8}
+                className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50 dark:placeholder-gray-500"
+              />
+              <p className="text-xs text-gray-500 dark:text-gray-400">Must be at least 8 characters</p>
+            </div>
+            <button
+              type="submit"
+              className="w-full rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700 disabled:opacity-50"
+              disabled={loading}
+            >
+              {loading ? 'Creating account...' : 'Create account'}
+            </button>
+          </form>
+
+          <p className="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
+            Already have an account?{' '}
+            <button
+              type="button"
+              className="font-medium text-gray-900 underline underline-offset-4 dark:text-gray-50"
+              onClick={() => navigate('/login')}
+            >
+              Sign in
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}