create-mantiq 0.7.0 → 0.7.2

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

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { post } from '@/lib/api'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  navigate?: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleSubmit() {
+  error.value = ''
+  loading.value = true
+  const { ok, data } = await post('/login', { email: email.value, password: password.value })
+  if (ok) props.navigate?.('/dashboard')
+  else error.value = data?.error ?? 'Invalid email or password. Please try again.'
+  loading.value = false
+}
+</script>
+
+<template>
+  <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">Sign in</h1>
+          <p class="mt-1 text-sm text-muted-foreground">
+            Enter your credentials to continue
+          </p>
+        </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" @submit.prevent="handleSubmit">
+          <div class="space-y-2">
+            <Label for="email">Email</Label>
+            <Input
+              id="email"
+              v-model="email"
+              type="email"
+              required
+              placeholder="you@example.com"
+              autocomplete="email"
+            />
+          </div>
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <Label for="password">Password</Label>
+              <button
+                type="button"
+                class="text-xs font-medium text-primary hover:text-primary/80"
+                tabindex="-1"
+              >
+                Forgot password?
+              </button>
+            </div>
+            <Input
+              id="password"
+              v-model="password"
+              type="password"
+              required
+              placeholder="Enter your password"
+              autocomplete="current-password"
+            />
+          </div>
+          <Button type="submit" class="w-full" :disabled="loading">
+            {{ loading ? 'Signing in...' : 'Sign in' }}
+          </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">
+          <button
+            type="button"
+            class="font-medium text-primary hover:text-primary/80"
+            @click="navigate?.('/register')"
+          >
+            Create an account
+          </button>
+        </p>
+      </div>
+
+      <!-- Footer -->
+      <p class="mt-6 text-center text-xs text-muted-foreground">
+        Powered by {{ appName }}
+      </p>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { post } from '@/lib/api'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  navigate?: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const name = ref('')
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleSubmit() {
+  error.value = ''
+  loading.value = true
+  const { ok, data } = await post('/register', { name: name.value, email: email.value, password: password.value })
+  if (ok) props.navigate?.('/dashboard')
+  else error.value = data?.error?.message ?? data?.error ?? 'Registration failed. Please try again.'
+  loading.value = false
+}
+</script>
+
+<template>
+  <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>
+
+        <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" @submit.prevent="handleSubmit">
+          <div class="space-y-2">
+            <Label for="name">Name</Label>
+            <Input
+              id="name"
+              v-model="name"
+              required
+              placeholder="John Doe"
+              autocomplete="name"
+            />
+          </div>
+          <div class="space-y-2">
+            <Label for="email">Email</Label>
+            <Input
+              id="email"
+              v-model="email"
+              type="email"
+              required
+              placeholder="you@example.com"
+              autocomplete="email"
+            />
+          </div>
+          <div class="space-y-2">
+            <Label for="password">Password</Label>
+            <Input
+              id="password"
+              v-model="password"
+              type="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"
+            @click="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>
+</template>

package/stubs/themes/corporate/vue/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/minimal/react/src/components/layout/app-sidebar.tsx.stub

@@ -0,0 +1,68 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} 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="sidebar" 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-none 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>
+              </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>
+    </Sidebar>
+  )
+}

package/stubs/themes/minimal/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={false}>
+      <AppSidebar
+        user={user}
+        appName={appName}
+        activePath={activePath}
+        navigate={navigate}
+        onLogout={handleLogout}
+      />
+      <SidebarInset>
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

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

@@ -0,0 +1,166 @@
+import { AuthenticatedLayout } from '@/components/layout/authenticated-layout'
+import { Header } from '@/components/layout/header'
+import { Main } from '@/components/layout/main'
+import {
+  Circle,
+  CheckCircle2,
+  ArrowUpRight,
+  Clock,
+  AlertCircle,
+  Minus,
+} from 'lucide-react'
+
+interface DashboardProps {
+  appName?: string
+  currentUser?: { id: number; name: string; email: string; role: string } | null
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+type Priority = 'urgent' | 'high' | 'medium' | 'low' | 'none'
+type Status = 'done' | 'in-progress' | 'todo' | 'backlog'
+
+const issues: {
+  id: string
+  title: string
+  status: Status
+  priority: Priority
+  assignee: string
+  updated: string
+}[] = [
+  { id: 'MNT-142', title: 'Fix authentication token refresh race condition', status: 'in-progress', priority: 'urgent', assignee: 'AK', updated: '2m' },
+  { id: 'MNT-141', title: 'Add rate limiting to public API endpoints', status: 'todo', priority: 'high', assignee: 'SC', updated: '15m' },
+  { id: 'MNT-140', title: 'Migrate user sessions to Redis store', status: 'in-progress', priority: 'high', assignee: 'AK', updated: '1h' },
+  { id: 'MNT-139', title: 'Update Stripe webhook handler for v2024-12', status: 'todo', priority: 'medium', assignee: 'JL', updated: '2h' },
+  { id: 'MNT-138', title: 'Implement CSV export for analytics dashboard', status: 'done', priority: 'medium', assignee: 'NR', updated: '3h' },
+  { id: 'MNT-137', title: 'Add OpenTelemetry tracing to queue workers', status: 'backlog', priority: 'low', assignee: 'SC', updated: '5h' },
+  { id: 'MNT-136', title: 'Refactor notification preferences into per-channel config', status: 'done', priority: 'medium', assignee: 'AK', updated: '6h' },
+  { id: 'MNT-135', title: 'Set up staging environment with seed data', status: 'backlog', priority: 'low', assignee: 'JL', updated: '1d' },
+  { id: 'MNT-134', title: 'Write integration tests for payment flow', status: 'todo', priority: 'high', assignee: 'NR', updated: '1d' },
+  { id: 'MNT-133', title: 'Audit and update npm dependencies', status: 'backlog', priority: 'none', assignee: 'SC', updated: '2d' },
+]
+
+const StatusIcon = ({ status }: { status: Status }) => {
+  switch (status) {
+    case 'done':
+      return <CheckCircle2 className="h-3.5 w-3.5 text-primary" />
+    case 'in-progress':
+      return <Clock className="h-3.5 w-3.5 text-amber-500" />
+    case 'todo':
+      return <Circle className="h-3.5 w-3.5 text-muted-foreground" />
+    case 'backlog':
+      return <Minus className="h-3.5 w-3.5 text-muted-foreground/50" />
+  }
+}
+
+const PriorityIndicator = ({ priority }: { priority: Priority }) => {
+  const colors: Record<Priority, string> = {
+    urgent: 'bg-red-500',
+    high: 'bg-orange-500',
+    medium: 'bg-yellow-500',
+    low: 'bg-blue-400',
+    none: 'bg-muted-foreground/30',
+  }
+  return (
+    <div className="flex items-center gap-0.5" title={priority}>
+      {[0, 1, 2, 3].map((i) => (
+        <div
+          key={i}
+          className={`h-2.5 w-[3px] rounded-[1px] ${
+            (priority === 'urgent' && i <= 3) ||
+            (priority === 'high' && i <= 2) ||
+            (priority === 'medium' && i <= 1) ||
+            (priority === 'low' && i <= 0)
+              ? colors[priority]
+              : 'bg-muted-foreground/15'
+          }`}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default function Dashboard({
+  appName = 'Mantiq',
+  currentUser,
+  navigate,
+}: DashboardProps) {
+  const doneCount = issues.filter((i) => i.status === 'done').length
+  const inProgressCount = issues.filter((i) => i.status === 'in-progress').length
+  const todoCount = issues.filter((i) => i.status === 'todo').length
+
+  return (
+    <AuthenticatedLayout
+      currentUser={currentUser}
+      appName={appName}
+      navigate={navigate}
+      activePath="/dashboard"
+    >
+      <Header navigate={navigate} />
+      <Main>
+        <div className="space-y-1">
+          {/* Compact header row */}
+          <div className="flex items-center justify-between py-3">
+            <div className="flex items-center gap-6">
+              <h2 className="text-sm font-semibold">My Issues</h2>
+              <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                <span className="flex items-center gap-1.5">
+                  <Clock className="h-3 w-3 text-amber-500" />
+                  {inProgressCount} in progress
+                </span>
+                <span className="flex items-center gap-1.5">
+                  <Circle className="h-3 w-3" />
+                  {todoCount} todo
+                </span>
+                <span className="flex items-center gap-1.5">
+                  <CheckCircle2 className="h-3 w-3 text-primary" />
+                  {doneCount} done
+                </span>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <kbd className="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                <span className="text-xs">⌘</span>K
+              </kbd>
+            </div>
+          </div>
+
+          {/* Issue list — no cards, just rows */}
+          <div className="border-t">
+            {issues.map((issue) => (
+              <div
+                key={issue.id}
+                className="group flex items-center gap-3 border-b px-1 py-2 transition-colors hover:bg-muted/50 cursor-default"
+              >
+                <PriorityIndicator priority={issue.priority} />
+                <StatusIcon status={issue.status} />
+                <span className="font-mono-num text-xs text-muted-foreground w-16 shrink-0">
+                  {issue.id}
+                </span>
+                <span className={`flex-1 text-sm truncate ${issue.status === 'done' ? 'line-through text-muted-foreground' : ''}`}>
+                  {issue.title}
+                </span>
+                <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground">
+                  {issue.assignee}
+                </div>
+                <span className="font-mono-num text-xs text-muted-foreground w-8 text-right shrink-0">
+                  {issue.updated}
+                </span>
+                <ArrowUpRight className="h-3.5 w-3.5 text-muted-foreground/0 group-hover:text-muted-foreground transition-colors shrink-0" />
+              </div>
+            ))}
+          </div>
+
+          {/* Bottom counts */}
+          <div className="flex items-center justify-between pt-2 text-xs text-muted-foreground">
+            <span>{issues.length} issues</span>
+            <span className="flex items-center gap-1">
+              <AlertCircle className="h-3 w-3" />
+              {issues.filter((i) => i.priority === 'urgent').length} urgent
+            </span>
+          </div>
+        </div>
+      </Main>
+    </AuthenticatedLayout>
+  )
+}