create-quadrokit 0.2.11 → 0.2.13

package/templates/admin-shell/src/pages/SampleDataPage.tsx

@@ -0,0 +1,37 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@quadrokit/ui'
+import { useTranslation } from 'react-i18next'
+
+/** Static placeholder — swap for `quadro.<YourEntity>.all(...)` wired to your catalog. */
+const PLACEHOLDER_ROWS = [
+  { id: '1', label: 'Example row A' },
+  { id: '2', label: 'Example row B' },
+  { id: '3', label: 'Example row C' },
+] as const
+
+export function SampleDataPage() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <p className="max-w-2xl text-sm text-muted-foreground">{t('sample_data.intro')}</p>
+        <p className="mt-2 max-w-2xl text-sm text-muted-foreground">{t('sample_data.hint')}</p>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('sample_data.card_title')}</CardTitle>
+          <CardDescription>
+            {t('sample_data.count', { count: PLACEHOLDER_ROWS.length })}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ul className="list-inside list-disc space-y-1 text-sm">
+            {PLACEHOLDER_ROWS.map((row) => (
+              <li key={row.id}>{row.label}</li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/templates/admin-shell/src/router.tsx

@@ -1,15 +1,24 @@
 import { createBrowserRouter } from 'react-router-dom'
-import { AppShell } from './components/AppShell'
-import { AgenciesPage } from './pages/AgenciesPage'
+import { AppShell } from './components/layout/AppShell'
 import { HomePage } from './pages/HomePage'
+import { SampleDataPage } from './pages/SampleDataPage'
+import type { AppRouteHandle } from './types/router'
 
 export const router = createBrowserRouter([
   {
     path: '/',
     element: <AppShell />,
     children: [
-      { index: true, element: <HomePage /> },
-      { path: 'agencies', element: <AgenciesPage /> },
+      {
+        index: true,
+        element: <HomePage />,
+        handle: { pageTitleKey: 'pages.home.title' } satisfies AppRouteHandle,
+      },
+      {
+        path: 'sample-data',
+        element: <SampleDataPage />,
+        handle: { pageTitleKey: 'sample_data.title' } satisfies AppRouteHandle,
+      },
     ],
   },
 ])

package/templates/admin-shell/src/types/router.ts

@@ -0,0 +1,4 @@
+export type AppRouteHandle = {
+  /** i18n key for `<h1>` in the main layout */
+  pageTitleKey: string
+}

package/templates/dashboard/package.json

@@ -28,6 +28,7 @@
     "react-hook-form": "^7.72.0",
     "react-i18next": "^17.0.2",
     "react-router-dom": "^7.13.2",
+    "recharts": "^2.15.0",
     "zod": "^4.3.6",
     "zustand": "^5.0.12"
   },

package/templates/dashboard/src/components/dashboard/ChartCard.tsx

@@ -0,0 +1,29 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, cn } from '@quadrokit/ui'
+import type { ReactNode } from 'react'
+
+export type ChartCardProps = {
+  title: string
+  description: string
+  /** Chart area (e.g. `h-[260px]`) */
+  chartClassName: string
+  children: ReactNode
+  className?: string
+}
+
+export function ChartCard({
+  title,
+  description,
+  chartClassName,
+  children,
+  className,
+}: ChartCardProps) {
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-base">{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className={cn('pt-0', chartClassName)}>{children}</CardContent>
+    </Card>
+  )
+}

package/templates/dashboard/src/components/dashboard/DashboardOverview.tsx

@@ -0,0 +1,79 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ChartCard } from './ChartCard'
+import { MOCK_BARS, MOCK_KPI, MOCK_LINES, MOCK_REGIONS } from './dashboardMockData'
+import { KpiCard } from './KpiCard'
+import { RegionsBarChart } from './RegionsBarChart'
+import { SeriesBarChart } from './SeriesBarChart'
+import { TrendLineChart } from './TrendLineChart'
+
+export function DashboardOverview() {
+  const { t } = useTranslation()
+
+  const kpiCards = useMemo(
+    () =>
+      MOCK_KPI.map((row) => ({
+        key: row.key,
+        title: t(`dashboard.kpi_${row.key}`),
+        value: row.value,
+        deltaLine: `${row.delta} · ${t('dashboard.trend_vs')}`,
+        trendPositive: row.positive,
+      })),
+    [t]
+  )
+
+  return (
+    <div className="space-y-6">
+      <p className="text-sm text-muted-foreground">{t('dashboard.footnote')}</p>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {kpiCards.map((row) => (
+          <KpiCard
+            key={row.key}
+            title={row.title}
+            value={row.value}
+            deltaLine={row.deltaLine}
+            trendPositive={row.trendPositive}
+          />
+        ))}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <ChartCard
+          className="min-h-[320px] shadow-sm"
+          title={t('dashboard.chart_bars_title')}
+          description={t('dashboard.chart_subtitle')}
+          chartClassName="h-[260px]"
+        >
+          <SeriesBarChart
+            data={MOCK_BARS}
+            seriesA={{ key: 'a', label: t('dashboard.series_a') }}
+            seriesB={{ key: 'b', label: t('dashboard.series_b') }}
+          />
+        </ChartCard>
+
+        <ChartCard
+          className="min-h-[320px] shadow-sm"
+          title={t('dashboard.chart_lines_title')}
+          description={t('dashboard.chart_subtitle')}
+          chartClassName="h-[260px]"
+        >
+          <TrendLineChart
+            data={MOCK_LINES}
+            lineU={{ key: 'u', label: t('dashboard.series_u') }}
+            lineV={{ key: 'v', label: t('dashboard.series_v') }}
+          />
+        </ChartCard>
+      </div>
+
+      <ChartCard
+        className="shadow-sm"
+        title={t('dashboard.chart_regions_title')}
+        description={t('dashboard.chart_subtitle')}
+        chartClassName="h-[220px]"
+      >
+        <RegionsBarChart data={MOCK_REGIONS} valueLabel={t('dashboard.count')} />
+      </ChartCard>
+    </div>
+  )
+}

package/templates/dashboard/src/components/dashboard/KpiCard.tsx

@@ -0,0 +1,31 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@quadrokit/ui'
+
+export type KpiCardProps = {
+  title: string
+  value: string
+  /** Full second line, e.g. "+12% · vs. last period" */
+  deltaLine: string
+  trendPositive: boolean
+}
+
+export function KpiCard({ title, value, deltaLine, trendPositive }: KpiCardProps) {
+  return (
+    <Card className="shadow-sm">
+      <CardHeader className="pb-2">
+        <CardDescription>{title}</CardDescription>
+        <CardTitle className="text-2xl font-semibold tabular-nums">{value}</CardTitle>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <p
+          className={
+            trendPositive
+              ? 'text-xs font-medium text-emerald-600 dark:text-emerald-400'
+              : 'text-xs font-medium text-rose-600 dark:text-rose-400'
+          }
+        >
+          {deltaLine}
+        </p>
+      </CardContent>
+    </Card>
+  )
+}

package/templates/dashboard/src/components/dashboard/RegionsBarChart.tsx

@@ -0,0 +1,45 @@
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { chartAxisTick, chartGridStroke, chartTooltipContentStyle } from './chartTheme'
+import type { RegionDatum } from './dashboardMockData'
+
+export type RegionsBarChartProps = {
+  data: readonly RegionDatum[]
+  categoryKey?: keyof RegionDatum & string
+  valueKey?: keyof RegionDatum & string
+  valueLabel: string
+}
+
+export function RegionsBarChart({
+  data,
+  categoryKey = 'region',
+  valueKey = 'n',
+  valueLabel,
+}: RegionsBarChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <BarChart
+        layout="vertical"
+        data={[...data]}
+        margin={{ top: 8, right: 24, left: 8, bottom: 8 }}
+      >
+        <CartesianGrid strokeDasharray="3 3" stroke={chartGridStroke} horizontal={false} />
+        <XAxis type="number" tick={chartAxisTick} axisLine={{ stroke: chartGridStroke }} />
+        <YAxis
+          type="category"
+          dataKey={categoryKey}
+          width={72}
+          tick={chartAxisTick}
+          axisLine={{ stroke: chartGridStroke }}
+        />
+        <Tooltip contentStyle={chartTooltipContentStyle} />
+        <Bar
+          dataKey={valueKey}
+          name={valueLabel}
+          fill="hsl(var(--primary))"
+          radius={[0, 4, 4, 0]}
+          maxBarSize={18}
+        />
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}

package/templates/dashboard/src/components/dashboard/SeriesBarChart.tsx

@@ -0,0 +1,55 @@
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+import {
+  chartAxisTick,
+  chartGridStroke,
+  chartLegendStyle,
+  chartTooltipContentStyle,
+} from './chartTheme'
+import type { BarDatum } from './dashboardMockData'
+
+export type SeriesBarChartProps = {
+  data: readonly BarDatum[]
+  seriesA: { key: 'a'; label: string }
+  seriesB: { key: 'b'; label: string }
+  xKey?: keyof BarDatum & string
+}
+
+export function SeriesBarChart({ data, seriesA, seriesB, xKey = 'name' }: SeriesBarChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <BarChart data={[...data]} margin={{ top: 8, right: 8, left: -8, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={chartGridStroke} vertical={false} />
+        <XAxis dataKey={xKey} tick={chartAxisTick} axisLine={{ stroke: chartGridStroke }} />
+        <YAxis tick={chartAxisTick} axisLine={{ stroke: chartGridStroke }} width={32} />
+        <Tooltip
+          cursor={{ fill: 'hsl(var(--muted) / 0.35)' }}
+          contentStyle={chartTooltipContentStyle}
+        />
+        <Legend wrapperStyle={chartLegendStyle} />
+        <Bar
+          dataKey={seriesA.key}
+          name={seriesA.label}
+          fill="hsl(var(--primary))"
+          radius={[4, 4, 0, 0]}
+          maxBarSize={40}
+        />
+        <Bar
+          dataKey={seriesB.key}
+          name={seriesB.label}
+          fill="hsl(var(--muted-foreground) / 0.35)"
+          radius={[4, 4, 0, 0]}
+          maxBarSize={40}
+        />
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}

package/templates/dashboard/src/components/dashboard/TrendLineChart.tsx

@@ -0,0 +1,55 @@
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+import {
+  chartAxisTick,
+  chartGridStroke,
+  chartLegendStyle,
+  chartTooltipContentStyle,
+} from './chartTheme'
+import type { LineDatum } from './dashboardMockData'
+
+export type TrendLineChartProps = {
+  data: readonly LineDatum[]
+  xKey?: keyof LineDatum & string
+  lineU: { key: 'u'; label: string }
+  lineV: { key: 'v'; label: string }
+}
+
+export function TrendLineChart({ data, xKey = 'x', lineU, lineV }: TrendLineChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <LineChart data={[...data]} margin={{ top: 8, right: 8, left: -8, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={chartGridStroke} />
+        <XAxis dataKey={xKey} tick={chartAxisTick} axisLine={{ stroke: chartGridStroke }} />
+        <YAxis tick={chartAxisTick} axisLine={{ stroke: chartGridStroke }} width={32} />
+        <Tooltip contentStyle={chartTooltipContentStyle} />
+        <Legend wrapperStyle={chartLegendStyle} />
+        <Line
+          type="monotone"
+          dataKey={lineU.key}
+          name={lineU.label}
+          stroke="hsl(var(--primary))"
+          strokeWidth={2}
+          dot={{ r: 3 }}
+          activeDot={{ r: 5 }}
+        />
+        <Line
+          type="monotone"
+          dataKey={lineV.key}
+          name={lineV.label}
+          stroke="hsl(var(--muted-foreground))"
+          strokeWidth={2}
+          dot={{ r: 3 }}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  )
+}

package/templates/dashboard/src/components/dashboard/chartTheme.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties } from 'react'
+
+/** Shared Recharts styling aligned with QuadroKit CSS variables (light/dark). */
+export const chartAxisTick = {
+  fill: 'hsl(var(--muted-foreground))',
+  fontSize: 11,
+} as const
+
+export const chartGridStroke = 'hsl(var(--border))'
+
+export const chartTooltipContentStyle: CSSProperties = {
+  background: 'hsl(var(--card))',
+  border: '1px solid hsl(var(--border))',
+  borderRadius: '8px',
+  fontSize: '12px',
+}
+
+export const chartLegendStyle = { fontSize: '12px' } as const

package/templates/dashboard/src/components/dashboard/dashboardMockData.ts

@@ -0,0 +1,51 @@
+/** Static demo data — replace with props from your API / `quadro` client. */
+
+export type KpiDatum = {
+  key: string
+  value: string
+  delta: string
+  positive: boolean
+}
+
+export const MOCK_KPI: readonly KpiDatum[] = [
+  { key: 'revenue', value: '$587.54', delta: '+12%', positive: true },
+  { key: 'sales', value: '4,500', delta: '+8%', positive: true },
+  { key: 'customers', value: '2,242', delta: '-3%', positive: false },
+  { key: 'orders', value: '1,128', delta: '+15%', positive: true },
+]
+
+export type BarDatum = {
+  name: string
+  a: number
+  b: number
+}
+
+export const MOCK_BARS: readonly BarDatum[] = [
+  { name: 'Jan', a: 40, b: 24 },
+  { name: 'Feb', a: 30, b: 38 },
+  { name: 'Mar', a: 55, b: 42 },
+  { name: 'Apr', a: 45, b: 30 },
+  { name: 'May', a: 60, b: 48 },
+  { name: 'Jun', a: 52, b: 55 },
+]
+
+export type LineDatum = { x: number; u: number; v: number }
+
+export const MOCK_LINES: readonly LineDatum[] = [
+  { x: 1, u: 12, v: 8 },
+  { x: 2, u: 18, v: 14 },
+  { x: 3, u: 15, v: 20 },
+  { x: 4, u: 22, v: 16 },
+  { x: 5, u: 28, v: 24 },
+  { x: 6, u: 25, v: 30 },
+]
+
+export type RegionDatum = { region: string; n: number }
+
+export const MOCK_REGIONS: readonly RegionDatum[] = [
+  { region: 'North', n: 14 },
+  { region: 'South', n: 19 },
+  { region: 'East', n: 12 },
+  { region: 'West', n: 17 },
+  { region: 'Other', n: 9 },
+]

package/templates/dashboard/src/components/dashboard/index.ts

@@ -0,0 +1 @@
+export { DashboardOverview } from './DashboardOverview'

package/templates/dashboard/src/components/layout/AppShell.tsx

@@ -0,0 +1,55 @@
+import { cn } from '@quadrokit/ui'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Outlet } from 'react-router-dom'
+import { PageHeading } from './PageHeading'
+import { Sidebar } from './Sidebar'
+import { TopHeader } from './TopHeader'
+
+export function AppShell() {
+  const { t } = useTranslation()
+  const [mobileNavOpen, setMobileNavOpen] = useState(false)
+
+  return (
+    <div className="flex min-h-dvh bg-background text-foreground">
+      <div className="hidden w-56 shrink-0 border-r border-border md:block">
+        <Sidebar className="sticky top-0 h-dvh" />
+      </div>
+
+      <div
+        className={cn(
+          'fixed inset-0 z-50 md:hidden',
+          mobileNavOpen ? 'pointer-events-auto' : 'pointer-events-none'
+        )}
+        aria-hidden={!mobileNavOpen}
+      >
+        <button
+          type="button"
+          className={cn(
+            'absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity',
+            mobileNavOpen ? 'opacity-100' : 'opacity-0'
+          )}
+          aria-label={t('layout.close_menu')}
+          tabIndex={mobileNavOpen ? 0 : -1}
+          onClick={() => setMobileNavOpen(false)}
+        />
+        <div
+          className={cn(
+            'absolute left-0 top-0 h-full w-56 max-w-[85vw] border-r border-border bg-card shadow-lg transition-transform',
+            mobileNavOpen ? 'translate-x-0' : '-translate-x-full'
+          )}
+        >
+          <Sidebar onNavigate={() => setMobileNavOpen(false)} />
+        </div>
+      </div>
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <TopHeader onMenuClick={() => setMobileNavOpen(true)} />
+        <main className="flex-1 overflow-auto px-4 py-6 md:px-6 lg:px-8">
+          <PageHeading />
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

package/templates/dashboard/src/components/layout/LanguageSwitcher.tsx

@@ -0,0 +1,37 @@
+import { Button } from '@quadrokit/ui'
+import { useTranslation } from 'react-i18next'
+
+const LOCALES = [
+  { code: 'en', labelKey: 'layout.lang_en' as const },
+  { code: 'fr', labelKey: 'layout.lang_fr' as const },
+] as const
+
+export function LanguageSwitcher() {
+  const { i18n, t } = useTranslation()
+  const lng = i18n.resolvedLanguage ?? i18n.language
+
+  return (
+    <fieldset className="m-0 flex min-w-0 items-center gap-1 rounded-md border border-border bg-card p-0.5">
+      <legend className="sr-only">{t('layout.language')}</legend>
+      {LOCALES.map(({ code, labelKey }) => (
+        <Button
+          key={code}
+          type="button"
+          size="sm"
+          variant={lng.startsWith(code) ? 'default' : 'ghost'}
+          className="h-8 px-2 text-xs"
+          onClick={() => {
+            void i18n.changeLanguage(code)
+            try {
+              localStorage.setItem('quadrokit:lng', code)
+            } catch {
+              /* ignore */
+            }
+          }}
+        >
+          {t(labelKey)}
+        </Button>
+      ))}
+    </fieldset>
+  )
+}

package/templates/dashboard/src/components/layout/NotificationsMenu.tsx

@@ -0,0 +1,79 @@
+import { Button, useDismissOnInteractOutside } from '@quadrokit/ui'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+/** Static notification list — replace with real data / subscriptions later. */
+const PLACEHOLDER_ITEMS = [
+  { id: '1', titleKey: 'layout.notif_1' as const, timeKey: 'layout.notif_time_1' as const },
+  { id: '2', titleKey: 'layout.notif_2' as const, timeKey: 'layout.notif_time_2' as const },
+] as const
+
+export function NotificationsMenu() {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  useDismissOnInteractOutside({
+    enabled: open,
+    containerRef: rootRef,
+    onDismiss: () => setOpen(false),
+  })
+
+  return (
+    <div ref={rootRef} className="relative">
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        className="relative h-9 w-9 shrink-0"
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        aria-label={t('layout.notifications')}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <BellIcon className="h-4 w-4" />
+        <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-destructive" aria-hidden />
+      </Button>
+      {open ? (
+        <div
+          className="absolute right-0 z-50 mt-1 w-80 max-w-[calc(100vw-2rem)] rounded-lg border border-border bg-popover p-2 text-sm text-popover-foreground shadow-lg"
+          role="dialog"
+          aria-label={t('layout.notifications')}
+        >
+          <p className="border-b border-border px-2 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            {t('layout.notifications')}
+          </p>
+          <ul className="max-h-64 overflow-auto py-1">
+            {PLACEHOLDER_ITEMS.map((item) => (
+              <li key={item.id} className="rounded-md px-2 py-2 hover:bg-muted/60">
+                <p className="font-medium leading-snug">{t(item.titleKey)}</p>
+                <p className="text-xs text-muted-foreground">{t(item.timeKey)}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function BellIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <title>Notifications</title>
+      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+    </svg>
+  )
+}

package/templates/dashboard/src/components/layout/PageHeading.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from 'react-i18next'
+import { Link, useLocation, useMatches } from 'react-router-dom'
+import type { AppRouteHandle } from '@/types/router'
+
+export function PageHeading() {
+  const { t } = useTranslation()
+  const { pathname } = useLocation()
+  const matches = useMatches()
+  const leaf = matches[matches.length - 1]
+  const handle = leaf?.handle as AppRouteHandle | undefined
+
+  const segmentKey =
+    pathname === '/'
+      ? ('breadcrumb.segment_home' as const)
+      : pathname === '/sample-data'
+        ? ('breadcrumb.segment_sample_data' as const)
+        : ('breadcrumb.segment_unknown' as const)
+
+  return (
+    <header className="mb-6">
+      <nav
+        aria-label={t('layout.breadcrumb_label')}
+        className="mb-3 flex flex-wrap items-center gap-2 text-sm text-muted-foreground"
+      >
+        <Link to="/" className="hover:text-foreground">
+          {t('breadcrumb.app')}
+        </Link>
+        <span aria-hidden className="text-border">
+          /
+        </span>
+        <span className="font-medium text-foreground">{t(segmentKey)}</span>
+      </nav>
+      {handle?.pageTitleKey ? (
+        <h1 className="text-2xl font-semibold tracking-tight md:text-3xl">
+          {t(handle.pageTitleKey)}
+        </h1>
+      ) : null}
+    </header>
+  )
+}