create-quadrokit 0.2.10 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-quadrokit",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "Scaffold a QuadroKit Vite + React app from a template",
   "type": "module",
   "bin": "./dist/index.mjs",

package/templates/README.md

@@ -4,10 +4,10 @@ Vite + React 19 + React Router 7 + **Tailwind 3.4** + **i18next** + **react-hook
 
 | Template | Use case |
 |----------|----------|
-| `dashboard` | Default shell, agencies sample page, form demo |
-| `website` | Marketing-style hero + same stack |
-| `ecommerce` | Product-card style placeholder |
-| `admin-shell` | Sidebar + main content layout |
+| `dashboard` | Default shell, **Recharts** overview (static KPIs + graphs), sample-data route, form demo |
+| `website` | Marketing-style hero + same stack (static `/sample-data`) |
+| `ecommerce` | Product-card style placeholder + static `/sample-data` |
+| `admin-shell` | Sidebar + main layout + static `/sample-data` |
 
 ## Monorepo
 

package/templates/admin-shell/src/components/AppShell.tsx

@@ -23,12 +23,12 @@ export function AppShell() {
               {t('app.nav_home')}
             </NavLink>
             <NavLink
-              to="/agencies"
+              to="/sample-data"
               className={({ isActive }) =>
                 isActive ? 'font-medium text-foreground' : 'hover:text-foreground'
               }
             >
-              {t('app.nav_agencies')}
+              {t('app.nav_sample_data')}
             </NavLink>
           </nav>
         </aside>
@@ -47,10 +47,10 @@ export function AppShell() {
                   {t('app.nav_home')}
                 </NavLink>
                 <NavLink
-                  to="/agencies"
+                  to="/sample-data"
                   className={({ isActive }) => (isActive ? 'text-foreground' : '')}
                 >
-                  {t('app.nav_agencies')}
+                  {t('app.nav_sample_data')}
                 </NavLink>
               </nav>
             </div>

package/templates/admin-shell/src/locales/en.json

@@ -3,9 +3,16 @@
     "title": "QuadroKit",
     "tagline": "Admin shell with sidebar — same stack, denser layout.",
     "nav_home": "Home",
-    "nav_agencies": "Agencies",
+    "nav_sample_data": "Sample data",
     "session_cookie": "Expected 4D session cookie: {{name}}"
   },
+  "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/admin-shell/src/pages/SampleDataPage.tsx

@@ -0,0 +1,38 @@
+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>
+        <h1 className="text-2xl font-semibold">{t('sample_data.title')}</h1>
+        <p className="mt-2 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,6 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom'
 import { AppShell } from './components/AppShell'
-import { AgenciesPage } from './pages/AgenciesPage'
+import { SampleDataPage } from './pages/SampleDataPage'
 import { HomePage } from './pages/HomePage'
 
 export const router = createBrowserRouter([
@@ -9,7 +9,7 @@ export const router = createBrowserRouter([
     element: <AppShell />,
     children: [
       { index: true, element: <HomePage /> },
-      { path: 'agencies', element: <AgenciesPage /> },
+      { path: 'sample-data', element: <SampleDataPage /> },
     ],
   },
 ])

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/AppShell.tsx

@@ -24,12 +24,12 @@ export function AppShell() {
                 {t('app.nav_home')}
               </NavLink>
               <NavLink
-                to="/agencies"
+                to="/sample-data"
                 className={({ isActive }) =>
                   isActive ? 'font-medium text-foreground' : 'hover:text-foreground'
                 }
               >
-                {t('app.nav_agencies')}
+                {t('app.nav_sample_data')}
               </NavLink>
             </nav>
           </div>

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/locales/en.json

@@ -3,9 +3,34 @@
     "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}}"
   },
+  "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/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'),
 })
@@ -41,6 +47,16 @@ export function HomePage() {
         </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,38 @@
+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>
+        <h1 className="text-2xl font-semibold">{t('sample_data.title')}</h1>
+        <p className="mt-2 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,7 +1,7 @@
 import { createBrowserRouter } from 'react-router-dom'
 import { AppShell } from './components/AppShell'
-import { AgenciesPage } from './pages/AgenciesPage'
 import { HomePage } from './pages/HomePage'
+import { SampleDataPage } from './pages/SampleDataPage'
 
 export const router = createBrowserRouter([
   {
@@ -9,7 +9,7 @@ export const router = createBrowserRouter([
     element: <AppShell />,
     children: [
       { index: true, element: <HomePage /> },
-      { path: 'agencies', element: <AgenciesPage /> },
+      { path: 'sample-data', element: <SampleDataPage /> },
     ],
   },
 ])

package/templates/ecommerce/src/components/AppShell.tsx

@@ -24,12 +24,12 @@ export function AppShell() {
                 {t('app.nav_home')}
               </NavLink>
               <NavLink
-                to="/agencies"
+                to="/sample-data"
                 className={({ isActive }) =>
                   isActive ? 'font-medium text-foreground' : 'hover:text-foreground'
                 }
               >
-                {t('app.nav_agencies')}
+                {t('app.nav_sample_data')}
               </NavLink>
             </nav>
           </div>

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

@@ -3,9 +3,16 @@
     "title": "QuadroKit",
     "tagline": "Storefront shell — swap cards for real 4D entities.",
     "nav_home": "Home",
-    "nav_agencies": "Agencies",
+    "nav_sample_data": "Sample data",
     "session_cookie": "Expected 4D session cookie: {{name}}"
   },
+  "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"
+  },
   "store": {
     "title": "Storefront",
     "sub": "Placeholder tiles — connect `quadro` to your catalog entities when you are ready.",

package/templates/ecommerce/src/pages/SampleDataPage.tsx

@@ -0,0 +1,38 @@
+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>
+        <h1 className="text-2xl font-semibold">{t('sample_data.title')}</h1>
+        <p className="mt-2 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/ecommerce/src/router.tsx

@@ -1,6 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom'
 import { AppShell } from './components/AppShell'
-import { AgenciesPage } from './pages/AgenciesPage'
+import { SampleDataPage } from './pages/SampleDataPage'
 import { HomePage } from './pages/HomePage'
 
 export const router = createBrowserRouter([
@@ -9,7 +9,7 @@ export const router = createBrowserRouter([
     element: <AppShell />,
     children: [
       { index: true, element: <HomePage /> },
-      { path: 'agencies', element: <AgenciesPage /> },
+      { path: 'sample-data', element: <SampleDataPage /> },
     ],
   },
 ])

package/templates/website/src/components/AppShell.tsx

@@ -24,12 +24,12 @@ export function AppShell() {
                 {t('app.nav_home')}
               </NavLink>
               <NavLink
-                to="/agencies"
+                to="/sample-data"
                 className={({ isActive }) =>
                   isActive ? 'font-medium text-foreground' : 'hover:text-foreground'
                 }
               >
-                {t('app.nav_agencies')}
+                {t('app.nav_sample_data')}
               </NavLink>
             </nav>
           </div>

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

@@ -3,9 +3,16 @@
     "title": "QuadroKit",
     "tagline": "Marketing-style template — same stack, lighter chrome.",
     "nav_home": "Home",
-    "nav_agencies": "Agencies",
+    "nav_sample_data": "Sample data",
     "session_cookie": "Expected 4D session cookie: {{name}}"
   },
+  "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"
+  },
   "hero": {
     "headline": "Ship a public site on top of your 4D datastore.",
     "sub": "QuadroKit keeps REST, auth cookies, and typed clients consistent across templates.",

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

@@ -46,7 +46,7 @@ export function HomePage() {
             <a href="#contact">{t('hero.cta_primary')}</a>
           </Button>
           <Button variant="outline" asChild>
-            <a href="/agencies">{t('hero.cta_secondary')}</a>
+            <a href="/sample-data">{t('hero.cta_secondary')}</a>
           </Button>
         </div>
       </section>

package/templates/website/src/pages/SampleDataPage.tsx

@@ -0,0 +1,38 @@
+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>
+        <h1 className="text-2xl font-semibold">{t('sample_data.title')}</h1>
+        <p className="mt-2 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/website/src/router.tsx

@@ -1,6 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom'
 import { AppShell } from './components/AppShell'
-import { AgenciesPage } from './pages/AgenciesPage'
+import { SampleDataPage } from './pages/SampleDataPage'
 import { HomePage } from './pages/HomePage'
 
 export const router = createBrowserRouter([
@@ -9,7 +9,7 @@ export const router = createBrowserRouter([
     element: <AppShell />,
     children: [
       { index: true, element: <HomePage /> },
-      { path: 'agencies', element: <AgenciesPage /> },
+      { path: 'sample-data', element: <SampleDataPage /> },
     ],
   },
 ])

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

@@ -1,77 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@quadrokit/ui'
-import { useEffect, useRef, useState } from 'react'
-import { quadro } from '@/lib/quadro-client'
-
-const PAGE_SIZE = 20
-
-export function AgenciesPage() {
-  const [names, setNames] = useState<string[]>([])
-  const [error, setError] = useState<string | null>(null)
-  const loadSeq = useRef(0)
-
-  useEffect(() => {
-    const seq = ++loadSeq.current
-    let cancelled = false
-    ;(async () => {
-      try {
-        const list = quadro.Agency.all({
-          page: 1,
-          pageSize: PAGE_SIZE,
-          select: ['name'],
-          maxItems: PAGE_SIZE,
-        })
-        const acc: string[] = []
-        for await (const a of list) {
-          if (cancelled || seq !== loadSeq.current) {
-            break
-          }
-          acc.push(a.name ?? '')
-        }
-        if (!cancelled && seq === loadSeq.current) {
-          setNames(acc)
-        }
-      } catch (e) {
-        if (!cancelled && seq === loadSeq.current) {
-          setError(e instanceof Error ? e.message : String(e))
-        }
-      }
-    })()
-    return () => {
-      cancelled = true
-    }
-  }, [])
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Agencies</h1>
-        <p className="text-sm text-muted-foreground">
-          Sample list from 4D REST (requires running server + auth cookie).
-        </p>
-      </div>
-      {error && (
-        <Card className="border-destructive/50">
-          <CardHeader>
-            <CardTitle className="text-destructive">Request failed</CardTitle>
-            <CardDescription>{error}</CardDescription>
-          </CardHeader>
-        </Card>
-      )}
-      <Card>
-        <CardHeader>
-          <CardTitle>Names</CardTitle>
-          <CardDescription>
-            {names.length ? `${names.length} loaded` : 'No data yet'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ul className="list-inside list-disc space-y-1 text-sm">
-            {names.map((n) => (
-              <li key={n}>{n || '(empty)'}</li>
-            ))}
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}

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

@@ -1,77 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@quadrokit/ui'
-import { useEffect, useRef, useState } from 'react'
-import { quadro } from '@/lib/quadro-client'
-
-const PAGE_SIZE = 20
-
-export function AgenciesPage() {
-  const [names, setNames] = useState<string[]>([])
-  const [error, setError] = useState<string | null>(null)
-  const loadSeq = useRef(0)
-
-  useEffect(() => {
-    const seq = ++loadSeq.current
-    let cancelled = false
-    ;(async () => {
-      try {
-        const list = quadro.Agency.all({
-          page: 1,
-          pageSize: PAGE_SIZE,
-          select: ['name'],
-          maxItems: PAGE_SIZE,
-        })
-        const acc: string[] = []
-        for await (const a of list) {
-          if (cancelled || seq !== loadSeq.current) {
-            break
-          }
-          acc.push(a.name ?? '')
-        }
-        if (!cancelled && seq === loadSeq.current) {
-          setNames(acc)
-        }
-      } catch (e) {
-        if (!cancelled && seq === loadSeq.current) {
-          setError(e instanceof Error ? e.message : String(e))
-        }
-      }
-    })()
-    return () => {
-      cancelled = true
-    }
-  }, [])
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Agencies</h1>
-        <p className="text-sm text-muted-foreground">
-          Sample list from 4D REST (requires running server + auth cookie).
-        </p>
-      </div>
-      {error && (
-        <Card className="border-destructive/50">
-          <CardHeader>
-            <CardTitle className="text-destructive">Request failed</CardTitle>
-            <CardDescription>{error}</CardDescription>
-          </CardHeader>
-        </Card>
-      )}
-      <Card>
-        <CardHeader>
-          <CardTitle>Names</CardTitle>
-          <CardDescription>
-            {names.length ? `${names.length} loaded` : 'No data yet'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ul className="list-inside list-disc space-y-1 text-sm">
-            {names.map((n) => (
-              <li key={n}>{n || '(empty)'}</li>
-            ))}
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}

package/templates/ecommerce/src/pages/AgenciesPage.tsx

@@ -1,77 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@quadrokit/ui'
-import { useEffect, useRef, useState } from 'react'
-import { quadro } from '@/lib/quadro-client'
-
-const PAGE_SIZE = 20
-
-export function AgenciesPage() {
-  const [names, setNames] = useState<string[]>([])
-  const [error, setError] = useState<string | null>(null)
-  const loadSeq = useRef(0)
-
-  useEffect(() => {
-    const seq = ++loadSeq.current
-    let cancelled = false
-    ;(async () => {
-      try {
-        const list = quadro.Agency.all({
-          page: 1,
-          pageSize: PAGE_SIZE,
-          select: ['name'],
-          maxItems: PAGE_SIZE,
-        })
-        const acc: string[] = []
-        for await (const a of list) {
-          if (cancelled || seq !== loadSeq.current) {
-            break
-          }
-          acc.push(a.name ?? '')
-        }
-        if (!cancelled && seq === loadSeq.current) {
-          setNames(acc)
-        }
-      } catch (e) {
-        if (!cancelled && seq === loadSeq.current) {
-          setError(e instanceof Error ? e.message : String(e))
-        }
-      }
-    })()
-    return () => {
-      cancelled = true
-    }
-  }, [])
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Agencies</h1>
-        <p className="text-sm text-muted-foreground">
-          Sample list from 4D REST (requires running server + auth cookie).
-        </p>
-      </div>
-      {error && (
-        <Card className="border-destructive/50">
-          <CardHeader>
-            <CardTitle className="text-destructive">Request failed</CardTitle>
-            <CardDescription>{error}</CardDescription>
-          </CardHeader>
-        </Card>
-      )}
-      <Card>
-        <CardHeader>
-          <CardTitle>Names</CardTitle>
-          <CardDescription>
-            {names.length ? `${names.length} loaded` : 'No data yet'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ul className="list-inside list-disc space-y-1 text-sm">
-            {names.map((n) => (
-              <li key={n}>{n || '(empty)'}</li>
-            ))}
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}

package/templates/website/src/pages/AgenciesPage.tsx

@@ -1,77 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@quadrokit/ui'
-import { useEffect, useRef, useState } from 'react'
-import { quadro } from '@/lib/quadro-client'
-
-const PAGE_SIZE = 20
-
-export function AgenciesPage() {
-  const [names, setNames] = useState<string[]>([])
-  const [error, setError] = useState<string | null>(null)
-  const loadSeq = useRef(0)
-
-  useEffect(() => {
-    const seq = ++loadSeq.current
-    let cancelled = false
-    ;(async () => {
-      try {
-        const list = quadro.Agency.all({
-          page: 1,
-          pageSize: PAGE_SIZE,
-          select: ['name'],
-          maxItems: PAGE_SIZE,
-        })
-        const acc: string[] = []
-        for await (const a of list) {
-          if (cancelled || seq !== loadSeq.current) {
-            break
-          }
-          acc.push(a.name ?? '')
-        }
-        if (!cancelled && seq === loadSeq.current) {
-          setNames(acc)
-        }
-      } catch (e) {
-        if (!cancelled && seq === loadSeq.current) {
-          setError(e instanceof Error ? e.message : String(e))
-        }
-      }
-    })()
-    return () => {
-      cancelled = true
-    }
-  }, [])
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Agencies</h1>
-        <p className="text-sm text-muted-foreground">
-          Sample list from 4D REST (requires running server + auth cookie).
-        </p>
-      </div>
-      {error && (
-        <Card className="border-destructive/50">
-          <CardHeader>
-            <CardTitle className="text-destructive">Request failed</CardTitle>
-            <CardDescription>{error}</CardDescription>
-          </CardHeader>
-        </Card>
-      )}
-      <Card>
-        <CardHeader>
-          <CardTitle>Names</CardTitle>
-          <CardDescription>
-            {names.length ? `${names.length} loaded` : 'No data yet'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ul className="list-inside list-disc space-y-1 text-sm">
-            {names.map((n) => (
-              <li key={n}>{n || '(empty)'}</li>
-            ))}
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}