create-quadrokit 0.2.11 → 0.2.13

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

@@ -0,0 +1,65 @@
+import { cn } from '@quadrokit/ui'
+import { useTranslation } from 'react-i18next'
+import { Link, NavLink } from 'react-router-dom'
+
+export type SidebarProps = {
+  className?: string
+  onNavigate?: () => void
+}
+
+export function Sidebar({ className, onNavigate }: SidebarProps) {
+  const { t } = useTranslation()
+
+  const linkClass = ({ isActive }: { isActive: boolean }) =>
+    cn(
+      'rounded-md px-3 py-2 text-sm transition-colors',
+      isActive
+        ? 'bg-primary/15 font-medium text-foreground'
+        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+    )
+
+  return (
+    <aside className={cn('flex h-full flex-col border-border bg-card/50', className)}>
+      <div className="flex h-14 items-center border-b border-border px-4">
+        <Link to="/" className="text-lg font-semibold tracking-tight" onClick={onNavigate}>
+          {t('app.title')}
+        </Link>
+      </div>
+      <nav className="flex-1 space-y-6 overflow-y-auto p-3" aria-label={t('layout.sidebar_nav')}>
+        <div>
+          <p className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {t('layout.nav_section_overview')}
+          </p>
+          <div className="flex flex-col gap-0.5">
+            <NavLink to="/" end className={linkClass} onClick={onNavigate}>
+              {t('app.nav_home')}
+            </NavLink>
+            <NavLink to="/sample-data" className={linkClass} onClick={onNavigate}>
+              {t('app.nav_sample_data')}
+            </NavLink>
+          </div>
+        </div>
+        <div>
+          <p className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {t('layout.nav_section_apps')}
+          </p>
+          <p className="px-3 text-sm text-muted-foreground">{t('layout.nav_apps_placeholder')}</p>
+        </div>
+      </nav>
+      <div className="border-t border-border p-3">
+        <div className="flex items-center gap-3 rounded-lg border border-border bg-background/80 p-2">
+          <div
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/20 text-xs font-semibold text-primary"
+            aria-hidden
+          >
+            {t('layout.user_initials')}
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium leading-tight">{t('layout.user_name')}</p>
+            <p className="truncate text-xs text-muted-foreground">{t('layout.user_role')}</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+  )
+}

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

@@ -0,0 +1,90 @@
+import {
+  Button,
+  type QuadroThemePreset,
+  quadroThemes,
+  themeLabels,
+  useDismissOnInteractOutside,
+  useTheme,
+} from '@quadrokit/ui'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+/** Compact theme + color mode controls for the header (same behavior as `ThemeToolbar`). */
+export function ThemeMenu() {
+  const { t } = useTranslation()
+  const { preset, setPreset, colorMode, setColorMode, resolvedMode } = useTheme()
+  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"
+        className="h-9 px-3"
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        onClick={() => setOpen((o) => !o)}
+      >
+        {t('layout.theme')}
+      </Button>
+      {open ? (
+        <div
+          className="absolute right-0 z-50 mt-1 w-72 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-lg"
+          role="dialog"
+          aria-label={t('layout.theme')}
+        >
+          <p className="mb-2 text-xs font-medium text-muted-foreground">
+            {t('layout.theme_presets')}
+          </p>
+          <div className="flex flex-wrap gap-1">
+            {quadroThemes.map((p: QuadroThemePreset) => (
+              <Button
+                key={p}
+                type="button"
+                size="sm"
+                variant={preset === p ? 'default' : 'outline'}
+                onClick={() => setPreset(p)}
+              >
+                {themeLabels[p]}
+              </Button>
+            ))}
+          </div>
+          <p className="mb-2 mt-3 text-xs font-medium text-muted-foreground">
+            {t('layout.theme_mode')}
+          </p>
+          <div className="flex flex-wrap gap-1">
+            {(
+              [
+                ['light', 'layout.mode_light'],
+                ['dark', 'layout.mode_dark'],
+                ['system', 'layout.mode_system'],
+              ] as const
+            ).map(([m, labelKey]) => (
+              <Button
+                key={m}
+                type="button"
+                size="sm"
+                variant={colorMode === m ? 'default' : 'ghost'}
+                onClick={() => setColorMode(m)}
+              >
+                {t(labelKey)}
+              </Button>
+            ))}
+          </div>
+          <p className="mt-2 text-xs text-muted-foreground">
+            {t('layout.theme_resolved', {
+              mode: resolvedMode === 'dark' ? t('layout.mode_dark') : t('layout.mode_light'),
+            })}
+          </p>
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,78 @@
+import { Button, Input } from '@quadrokit/ui'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { LanguageSwitcher } from './LanguageSwitcher'
+import { NotificationsMenu } from './NotificationsMenu'
+import { ThemeMenu } from './ThemeMenu'
+
+export type TopHeaderProps = {
+  onMenuClick: () => void
+}
+
+export function TopHeader({ onMenuClick }: TopHeaderProps) {
+  const { t } = useTranslation()
+  const [searchQuery, setSearchQuery] = useState('')
+
+  return (
+    <header className="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border bg-background/95 px-3 backdrop-blur supports-[backdrop-filter]:bg-background/80 md:px-4">
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        className="h-9 w-9 md:hidden"
+        aria-label={t('layout.open_menu')}
+        onClick={onMenuClick}
+      >
+        <MenuIcon className="h-4 w-4" />
+      </Button>
+      <div className="min-w-0 flex-1 max-w-md">
+        <Input
+          type="search"
+          placeholder={t('layout.search_placeholder')}
+          className="h-9 bg-card"
+          aria-label={t('layout.search_placeholder')}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          autoComplete="off"
+        />
+      </div>
+      <div className="ml-auto flex shrink-0 items-center gap-2">
+        <LanguageSwitcher />
+        <ThemeMenu />
+        <NotificationsMenu />
+        <div className="hidden items-center gap-2 border-l border-border pl-3 sm:flex">
+          <div
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/15 text-xs font-semibold text-primary"
+            aria-hidden
+          >
+            {t('layout.user_initials')}
+          </div>
+          <div className="hidden leading-tight lg:block">
+            <p className="text-sm font-medium">{t('layout.user_name')}</p>
+            <p className="text-xs text-muted-foreground">{t('layout.user_role')}</p>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function MenuIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <title>Menu</title>
+      <line x1="4" x2="20" y1="6" y2="6" />
+      <line x1="4" x2="20" y1="12" y2="12" />
+      <line x1="4" x2="20" y1="18" y2="18" />
+    </svg>
+  )
+}

package/templates/dashboard/src/i18n.ts

@@ -1,10 +1,24 @@
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 import en from './locales/en.json'
+import fr from './locales/fr.json'
+
+function storedLng(): string | undefined {
+  try {
+    const v = localStorage.getItem('quadrokit:lng')
+    if (v === 'en' || v === 'fr') return v
+  } catch {
+    /* ignore */
+  }
+  return undefined
+}
 
 void i18n.use(initReactI18next).init({
-  resources: { en: { translation: en } },
-  lng: 'en',
+  resources: {
+    en: { translation: en },
+    fr: { translation: fr },
+  },
+  lng: storedLng() ?? 'en',
   fallbackLng: 'en',
   interpolation: { escapeValue: false },
 })

package/templates/dashboard/src/locales/en.json

@@ -3,9 +3,74 @@
     "title": "QuadroKit",
     "tagline": "Dashboard template — Vite, React, 4D REST, themes, i18n.",
     "nav_home": "Home",
-    "nav_agencies": "Agencies",
+    "nav_sample_data": "Sample data",
     "session_cookie": "Expected 4D session cookie: {{name}}"
   },
+  "pages": {
+    "home": {
+      "title": "Business overview"
+    }
+  },
+  "breadcrumb": {
+    "app": "QuadroKit",
+    "segment_home": "Home",
+    "segment_sample_data": "Sample data",
+    "segment_unknown": "Page"
+  },
+  "layout": {
+    "sidebar_nav": "Main navigation",
+    "nav_section_overview": "Overview",
+    "nav_section_apps": "Apps",
+    "nav_apps_placeholder": "More apps can be linked here.",
+    "breadcrumb_label": "Breadcrumb",
+    "search_placeholder": "Search…",
+    "open_menu": "Open menu",
+    "close_menu": "Close menu",
+    "close": "Close",
+    "language": "Language",
+    "lang_en": "EN",
+    "lang_fr": "FR",
+    "theme": "Theme",
+    "theme_presets": "Presets",
+    "theme_mode": "Mode",
+    "mode_light": "Light",
+    "mode_dark": "Dark",
+    "mode_system": "System",
+    "theme_resolved": "Active: {{mode}}",
+    "notifications": "Notifications",
+    "notif_1": "New deployment finished successfully.",
+    "notif_2": "A comment was added to your report.",
+    "notif_time_1": "2 min ago",
+    "notif_time_2": "1 hour ago",
+    "user_name": "Denish N",
+    "user_role": "Team",
+    "user_initials": "DN"
+  },
+  "dashboard": {
+    "loading": "Loading charts…",
+    "footnote": "Charts use static sample data — wire your 4D aggregates or entity sets when you are ready.",
+    "kpi_revenue": "Revenue",
+    "kpi_sales": "Sales",
+    "kpi_customers": "Customers",
+    "kpi_orders": "Orders",
+    "trend_vs": "vs. last period",
+    "chart_bars_title": "Series comparison",
+    "chart_lines_title": "Trend lines",
+    "chart_regions_title": "By region",
+    "chart_subtitle": "Demo data only",
+    "series_a": "Series A",
+    "series_b": "Series B",
+    "series_u": "Signal U",
+    "series_v": "Signal V",
+    "count": "Count"
+  },
+  "sample_data": {
+    "title": "Sample data",
+    "intro": "This page uses static placeholder rows. It does not assume any particular 4D table.",
+    "hint": "After `quadrokit-client generate`, ask your coding agent to load the right entities from your catalog (e.g. `quadro.<Entity>.all({ ... })`).",
+    "card_title": "Example rows",
+    "count": "{{count}} placeholder rows"
+  },
   "form": {
     "demo_title": "react-hook-form + zod",
     "label": "Label",

package/templates/dashboard/src/locales/fr.json

@@ -0,0 +1,80 @@
+{
+  "app": {
+    "title": "QuadroKit",
+    "tagline": "Modèle de tableau de bord — Vite, React, 4D REST, thèmes, i18n.",
+    "nav_home": "Accueil",
+    "nav_sample_data": "Données d'exemple",
+    "session_cookie": "Cookie de session 4D attendu : {{name}}"
+  },
+  "pages": {
+    "home": {
+      "title": "Vue d'ensemble"
+    }
+  },
+  "breadcrumb": {
+    "app": "QuadroKit",
+    "segment_home": "Accueil",
+    "segment_sample_data": "Données d'exemple",
+    "segment_unknown": "Page"
+  },
+  "layout": {
+    "sidebar_nav": "Navigation principale",
+    "nav_section_overview": "Vue d'ensemble",
+    "nav_section_apps": "Applications",
+    "nav_apps_placeholder": "D'autres applications peuvent être ajoutées ici.",
+    "breadcrumb_label": "Fil d'Ariane",
+    "search_placeholder": "Rechercher…",
+    "open_menu": "Ouvrir le menu",
+    "close_menu": "Fermer le menu",
+    "close": "Fermer",
+    "language": "Langue",
+    "lang_en": "EN",
+    "lang_fr": "FR",
+    "theme": "Thème",
+    "theme_presets": "Préréglages",
+    "theme_mode": "Mode",
+    "mode_light": "Clair",
+    "mode_dark": "Sombre",
+    "mode_system": "Système",
+    "theme_resolved": "Actif : {{mode}}",
+    "notifications": "Notifications",
+    "notif_1": "Nouveau déploiement terminé avec succès.",
+    "notif_2": "Un commentaire a été ajouté à votre rapport.",
+    "notif_time_1": "Il y a 2 min",
+    "notif_time_2": "Il y a 1 h",
+    "user_name": "Denish N",
+    "user_role": "Équipe",
+    "user_initials": "DN"
+  },
+  "dashboard": {
+    "loading": "Chargement des graphiques…",
+    "footnote": "Les graphiques utilisent des données d'exemple statiques — branchez vos agrégats 4D ou entity sets quand vous êtes prêt.",
+    "kpi_revenue": "Revenus",
+    "kpi_sales": "Ventes",
+    "kpi_customers": "Clients",
+    "kpi_orders": "Commandes",
+    "trend_vs": "par rapport à la période précédente",
+    "chart_bars_title": "Comparaison de séries",
+    "chart_lines_title": "Courbes de tendance",
+    "chart_regions_title": "Par région",
+    "chart_subtitle": "Données de démo uniquement",
+    "series_a": "Série A",
+    "series_b": "Série B",
+    "series_u": "Signal U",
+    "series_v": "Signal V",
+    "count": "Nombre"
+  },
+  "sample_data": {
+    "title": "Données d'exemple",
+    "intro": "Cette page utilise des lignes statiques. Elle ne suppose aucune table 4D particulière.",
+    "hint": "Après `quadrokit-client generate`, demandez à votre agent de charger les bonnes entités depuis votre catalogue (par ex. `quadro.<Entité>.all({ ... })`).",
+    "card_title": "Lignes d'exemple",
+    "count": "{{count}} lignes d'exemple"
+  },
+  "form": {
+    "demo_title": "react-hook-form + zod",
+    "label": "Libellé",
+    "placeholder": "Saisissez quelque chose…",
+    "submit": "Envoyer"
+  }
+}

package/templates/dashboard/src/main.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from 'react'
+import { StrictMode, Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
 import { RouterProvider } from 'react-router-dom'
 import '@quadrokit/ui/styles.css'
@@ -9,7 +9,13 @@ import { router } from './router'
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ThemeProvider>
-      <RouterProvider router={router} />
+      <Suspense
+        fallback={
+          <div className="flex min-h-dvh items-center justify-center text-muted-foreground">…</div>
+        }
+      >
+        <RouterProvider router={router} />
+      </Suspense>
     </ThemeProvider>
   </StrictMode>
 )

package/templates/dashboard/src/pages/HomePage.tsx

@@ -9,12 +9,18 @@ import {
   Input,
   Label,
 } from '@quadrokit/ui'
+import { lazy, Suspense } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 import { quadro } from '@/lib/quadro-client'
 import { useSidebarHint } from '@/stores/useSidebarHint'
 
+const DashboardOverview = lazy(async () => {
+  const m = await import('@/components/dashboard')
+  return { default: m.DashboardOverview }
+})
+
 const schema = z.object({
   label: z.string().min(1, 'Required'),
 })
@@ -34,13 +40,22 @@ export function HomePage() {
   return (
     <div className="space-y-8">
       <div>
-        <h1 className="text-3xl font-semibold tracking-tight">{t('app.title')}</h1>
-        <p className="mt-2 max-w-2xl text-muted-foreground">{t('app.tagline')}</p>
+        <p className="max-w-2xl text-muted-foreground">{t('app.tagline')}</p>
         <p className="mt-2 text-sm text-muted-foreground">
           {t('app.session_cookie', { name: quadro.sessionCookieName })}
         </p>
       </div>
 
+      <Suspense
+        fallback={
+          <div className="flex min-h-[200px] items-center justify-center rounded-xl border border-dashed border-border text-sm text-muted-foreground">
+            {t('dashboard.loading')}
+          </div>
+        }
+      >
+        <DashboardOverview />
+      </Suspense>
+
       <Card>
         <CardHeader>
           <CardTitle>{t('form.demo_title')}</CardTitle>

package/templates/dashboard/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/dashboard/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/dashboard/src/types/router.ts

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

package/templates/ecommerce/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/ecommerce/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>
+  )
+}