@cosmicdrift/kumiko-renderer-web 0.133.0 → 0.134.0

package/src/app/dashboard-body.tsx

@@ -1,40 +1,72 @@
 // Web-Implementierung des dashboard-Screen-Typs: rendert die deklarierten
-// Panels über das Widget-Kit (StatCard, TimeseriesChart, QueryTable) in
-// einem responsiven Grid. Registriert via DashboardBodyProvider in
-// createKumikoApp — der KumikoScreen-Switch bleibt plattform-agnostisch.
+// Panels über das Widget-Kit (StatCard, TimeseriesChart, QueryTable, FeedList,
+// ProgressList) in einem responsiven Grid. Registriert via
+// DashboardBodyProvider in createKumikoApp — der KumikoScreen-Switch bleibt
+// plattform-agnostisch.
 //
 // Panel-Daten-Contracts (siehe DashboardPanelDefinition in kumiko-framework):
-//   stat  → flaches Record, valueField/subField/toneField zeigen auf
-//           anzeigefertige Werte (der Query-Handler formatiert).
-//   chart → { points: { atMs, value | null }[], windowStartMs, windowEndMs }
-//   list  → paged envelope { rows, nextCursor, total? } wie projectionList.
+//   stat          → flaches Record, valueField/subField/toneField zeigen auf
+//                   anzeigefertige Werte (der Query-Handler formatiert).
+//   stat-group    → mehrere stat-Panels unter einem Sektions-Titel, jedes
+//                   Kind bleibt eine eigenständige Query.
+//   chart         → { points: { atMs, value | null }[], windowStartMs,
+//                   windowEndMs }
+//   list          → paged envelope { rows, nextCursor, total? } wie
+//                   projectionList.
+//   feed          → { rows: { id, primary, trailing? }[] }
+//   progress-list → { rows: { id, label, value, fraction }[] }
+//   custom        → keine Query — eine über extensionSectionComponents
+//                   registrierte App-Komponente holt sich ihre Daten selbst.
+//
+// Screen-Filter (DashboardFilterDefinition): der gewählte Wert wird unter
+// `filter.id` in JEDE Panel-Query gemerged. useQuery refetcht automatisch
+// über seinen bestehenden payloadKey-Mechanismus — kein Sonderfall nötig.
 
 import type {
   DashboardChartPanel,
+  DashboardCustomPanel,
+  DashboardFeedPanel,
   DashboardListPanel,
+  DashboardPanelDefinition,
+  DashboardProgressListPanel,
+  DashboardScreenDefinition,
+  DashboardStatGroupPanel,
   DashboardStatPanel,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
-import { type DashboardBodyProps, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import type { ReactNode } from "react";
+import {
+  type DashboardBodyProps,
+  extensionSectionName,
+  useExtensionSectionComponent,
+  usePrimitives,
+  useQuery,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useEffect, useState } from "react";
 import { TimeseriesChart, type TimeseriesPoint } from "../widgets/charts";
+import { FeedList, type FeedRow } from "../widgets/feed-list";
+import { ProgressList, type ProgressListRow } from "../widgets/progress-list";
 import { QueryTable } from "../widgets/query-table";
 import { SectionCard } from "../widgets/section-card";
 import { StatCard, type StatTone } from "../widgets/stat";
 import { ErrorState, LoadingState } from "../widgets/states";
 
 const STAT_TONES: ReadonlySet<string> = new Set(["default", "positive", "warn"]);
+const WIDE_PANEL = "sm:col-span-2 lg:col-span-4";
+const HALF_PANEL = "sm:col-span-2 lg:col-span-2";
 
 function StatPanelBody({
   panel,
   label,
+  filterParams,
 }: {
   readonly panel: DashboardStatPanel;
   readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
 }): ReactNode {
   const { data, error, loading, refetch } = useQuery<Readonly<Record<string, unknown>>>(
     panel.query,
-    {},
+    filterParams,
     { live: true },
   );
   if (loading && data === null) return <LoadingState rows={2} />;
@@ -55,6 +87,32 @@ function StatPanelBody({
   );
 }
 
+function StatGroupPanelBody({
+  panel,
+  label,
+  filterParams,
+}: {
+  readonly panel: DashboardStatGroupPanel;
+  readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  const t = useTranslation();
+  return (
+    <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
+      <section className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        {panel.stats.map((stat) => (
+          <StatPanelBody
+            key={stat.id}
+            panel={stat}
+            label={t(stat.label)}
+            filterParams={filterParams}
+          />
+        ))}
+      </section>
+    </SectionCard>
+  );
+}
+
 type TimeseriesEnvelope = {
   readonly points: readonly TimeseriesPoint[];
   readonly windowStartMs: number;
@@ -64,14 +122,16 @@ type TimeseriesEnvelope = {
 function ChartPanelBody({
   panel,
   label,
+  filterParams,
 }: {
   readonly panel: DashboardChartPanel;
   readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
 }): ReactNode {
   const t = useTranslation();
   const { data, error, loading, refetch } = useQuery<TimeseriesEnvelope>(
     panel.query,
-    {},
+    filterParams,
     { live: true },
   );
   if (loading && data === null) return <LoadingState rows={3} />;
@@ -92,15 +152,18 @@ function ChartPanelBody({
 function ListPanelBody({
   panel,
   label,
+  filterParams,
 }: {
   readonly panel: DashboardListPanel;
   readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
 }): ReactNode {
   const t = useTranslation();
   return (
     <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
       <QueryTable<{ readonly rows: readonly Readonly<Record<string, unknown>>[] }>
         query={panel.query}
+        payload={filterParams}
         live
         columns={panel.columns.map((c) => {
           const normalized = normalizeListColumn(c);
@@ -115,32 +178,212 @@ function ListPanelBody({
   );
 }
 
+type FeedEnvelope = {
+  readonly rows: readonly { readonly primary: string; readonly trailing?: string }[];
+};
+
+function FeedPanelBody({
+  panel,
+  label,
+  filterParams,
+}: {
+  readonly panel: DashboardFeedPanel;
+  readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  const t = useTranslation();
+  const { data, error, loading, refetch } = useQuery<FeedEnvelope>(panel.query, filterParams, {
+    live: true,
+  });
+  if (loading && data === null) return <LoadingState rows={3} />;
+  if (error !== null) return <ErrorState error={error} onRetry={() => void refetch()} />;
+  const rows: readonly FeedRow[] = (data?.rows ?? []).map((row, i) => ({ id: String(i), ...row }));
+  return (
+    <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
+      <FeedList rows={rows} emptyContent={t(panel.emptyLabel ?? "kumiko.list.no-entries")} />
+    </SectionCard>
+  );
+}
+
+type ProgressListEnvelope = {
+  readonly rows: readonly {
+    readonly label: string;
+    readonly value: string;
+    readonly fraction: number;
+  }[];
+};
+
+function ProgressListPanelBody({
+  panel,
+  label,
+  filterParams,
+}: {
+  readonly panel: DashboardProgressListPanel;
+  readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  const t = useTranslation();
+  const { data, error, loading, refetch } = useQuery<ProgressListEnvelope>(
+    panel.query,
+    filterParams,
+    { live: true },
+  );
+  if (loading && data === null) return <LoadingState rows={3} />;
+  if (error !== null) return <ErrorState error={error} onRetry={() => void refetch()} />;
+  const rows: readonly ProgressListRow[] = (data?.rows ?? []).map((row, i) => ({
+    id: String(i),
+    ...row,
+  }));
+  return (
+    <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
+      <ProgressList rows={rows} emptyContent={t("kumiko.list.no-entries")} />
+    </SectionCard>
+  );
+}
+
+// Löst panel.component über dieselbe extensionSectionComponents-Registry auf
+// wie entityEdit-Extension-Sections und List-Header-Slots — bleibt an seiner
+// Array-Position statt in einen separaten Slot zu wandern (siehe Datei-Kopf-
+// Kommentar zur Registry). Rendert nichts + dev-Warnung bei unregistriertem
+// Namen, analog zu ListHeaderSlotMount in render-list.tsx.
+function CustomPanelBody({
+  panel,
+  screenId,
+  filterParams,
+}: {
+  readonly panel: DashboardCustomPanel;
+  readonly screenId: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  const name = extensionSectionName(panel.component);
+  const Component = useExtensionSectionComponent(name);
+  useEffect(() => {
+    if (name !== undefined && Component === undefined) {
+      // biome-ignore lint/suspicious/noConsole: dev-warning für Setup-Fehler
+      console.warn(
+        `[kumiko] Dashboard custom-panel "${panel.id}" on screen "${screenId}" references component ` +
+          `"${name}", which is not registered in clientFeatures.extensionSectionComponents — the panel renders nothing.`,
+      );
+    }
+  }, [name, Component, panel.id, screenId]);
+  if (Component === undefined) return null;
+  // Dashboard-Panels haben keine Entity — entityName trägt die screen.id,
+  // damit ExtensionSectionProps nicht extra für diesen einen Mount-Ort
+  // aufgeweicht werden muss (das bräche jede bestehende registrierte
+  // Section, die entityName als garantiert gesetzten string erwartet).
+  return (
+    <Component
+      entityName={screenId}
+      entityId={null}
+      screenId={screenId}
+      filterParams={filterParams}
+    />
+  );
+}
+
+// Screen-Filter: hält den gewählten Wert, rendert die Combobox, und liefert
+// den Payload-Merge für jede Panel-Query. Statische `options` werden als
+// i18n-Keys übersetzt; `optionsQuery`-Ergebnisse sind Server-Daten und werden
+// unverändert übernommen.
+function useFilterParams(screen: DashboardScreenDefinition): {
+  readonly params: Readonly<Record<string, unknown>>;
+  readonly picker: ReactNode;
+} {
+  const { Field, Input } = usePrimitives();
+  const t = useTranslation();
+  const filter = screen.filter;
+  const [value, setValue] = useState("");
+  const optionsQueryResult = useQuery<{
+    readonly rows: readonly { readonly value: string; readonly label: string }[];
+  }>(filter?.optionsQuery ?? "", {}, { enabled: filter?.optionsQuery !== undefined });
+
+  if (filter === undefined) {
+    return { params: {}, picker: null };
+  }
+
+  const dynamicOptions =
+    filter.optionsQuery !== undefined
+      ? (optionsQueryResult.data?.rows ?? [])
+      : (filter.options ?? []).map((o) => ({ value: o.value, label: t(o.label) }));
+  const allLabel = t(filter.allLabel ?? "kumiko.dashboard.filter.all");
+  const options = [{ value: "", label: allLabel }, ...dynamicOptions];
+
+  const picker = (
+    <div className="max-w-xs">
+      <Field id={`dashboard-filter-${filter.id}`} label={t(filter.label)}>
+        <Input
+          kind="combobox"
+          id={`dashboard-filter-${filter.id}`}
+          name={filter.id}
+          options={options}
+          value={value}
+          onChange={setValue}
+          placeholder={filter.placeholder !== undefined ? t(filter.placeholder) : allLabel}
+        />
+      </Field>
+    </div>
+  );
+  const params = value === "" ? {} : { [filter.id]: value };
+  return { params, picker };
+}
+
+function panelSpanClassName(panel: DashboardPanelDefinition): string | undefined {
+  if (panel.kind === "stat") return undefined;
+  if (panel.kind === "feed" || panel.kind === "progress-list") return HALF_PANEL;
+  return WIDE_PANEL;
+}
+
+function PanelBody({
+  panel,
+  label,
+  screenId,
+  filterParams,
+}: {
+  readonly panel: DashboardPanelDefinition;
+  readonly label: string;
+  readonly screenId: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  if (panel.kind === "stat")
+    return <StatPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  if (panel.kind === "stat-group") {
+    return <StatGroupPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  }
+  if (panel.kind === "chart")
+    return <ChartPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  if (panel.kind === "list")
+    return <ListPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  if (panel.kind === "feed")
+    return <FeedPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  if (panel.kind === "progress-list") {
+    return <ProgressListPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  }
+  return <CustomPanelBody panel={panel} screenId={screenId} filterParams={filterParams} />;
+}
+
 export function WebDashboardBody({ screen, translate }: DashboardBodyProps): ReactNode {
   const t = useTranslation();
   const effectiveTranslate = translate ?? t;
+  const { params: filterParams, picker } = useFilterParams(screen);
   return (
-    <div
-      className="grid gap-4 p-6 sm:grid-cols-2 lg:grid-cols-4"
-      data-testid={`dashboard-${screen.id}`}
-    >
-      {screen.panels.map((panel) => {
-        const label = effectiveTranslate(panel.label);
-        if (panel.kind === "stat") {
-          return <StatPanelBody key={panel.id} panel={panel} label={label} />;
-        }
-        if (panel.kind === "chart") {
+    <div className="flex flex-col gap-4 p-6" data-testid={`dashboard-${screen.id}`}>
+      {picker}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {screen.panels.map((panel) => {
+          const label = panel.kind === "custom" ? "" : effectiveTranslate(panel.label);
+          const span = panelSpanClassName(panel);
           return (
-            <div key={panel.id} className="sm:col-span-2 lg:col-span-4">
-              <ChartPanelBody panel={panel} label={label} />
+            <div key={panel.id} className={span}>
+              <PanelBody
+                panel={panel}
+                label={label}
+                screenId={screen.id}
+                filterParams={filterParams}
+              />
             </div>
           );
-        }
-        return (
-          <div key={panel.id} className="sm:col-span-2 lg:col-span-4">
-            <ListPanelBody panel={panel} label={label} />
-          </div>
-        );
-      })}
+        })}
+      </div>
     </div>
   );
 }

package/src/index.ts

@@ -155,6 +155,8 @@ export {
 } from "./tokens";
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar";
 export type {
+  FeedRow,
+  ProgressListRow,
   QueryTableColumn,
   QueryTableProps,
   StatDelta,
@@ -168,10 +170,12 @@ export {
   DetailList,
   EmptyState,
   ErrorState,
+  FeedList,
   LoadingState,
   MiniStat,
   ModeSwitch,
   ProgressBar,
+  ProgressList,
   QueryTable,
   SectionCard,
   Sparkline,

package/src/widgets/feed-list.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+export type FeedRow = {
+  readonly id: string;
+  readonly primary: string;
+  readonly trailing?: string;
+};
+
+/** Nicht-tabellarische Kurzliste (z.B. "nächste Termine") — Primary-Text +
+ *  optionaler rechtsbündiger Trailing-Wert pro Zeile. */
+export function FeedList({
+  rows,
+  emptyContent,
+  testId,
+}: {
+  readonly rows: readonly FeedRow[];
+  readonly emptyContent?: ReactNode;
+  readonly testId?: string;
+}): ReactNode {
+  if (rows.length === 0) {
+    return <div data-testid={testId}>{emptyContent}</div>;
+  }
+  return (
+    <ul data-testid={testId} className="flex max-h-64 flex-col overflow-y-auto pr-1 text-sm">
+      {rows.map((row) => (
+        <li key={row.id} className="flex justify-between gap-4 border-b py-1.5 last:border-b-0">
+          <span>{row.primary}</span>
+          {row.trailing !== undefined && (
+            <span className="tabular-nums text-muted-foreground">{row.trailing}</span>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/widgets/index.ts

@@ -12,8 +12,10 @@ export {
 } from "./charts";
 export { CollapsibleSection } from "./collapsible-section";
 export { DetailList } from "./detail-list";
+export { FeedList, type FeedRow } from "./feed-list";
 export { ModeSwitch } from "./mode-switch";
 export { ProgressBar } from "./progress-bar";
+export { ProgressList, type ProgressListRow } from "./progress-list";
 export { QueryTable, type QueryTableColumn, type QueryTableProps } from "./query-table";
 export { SectionCard } from "./section-card";
 export { MiniStat, Sparkline, StatCard, type StatDelta, type StatTone } from "./stat";

package/src/widgets/progress-list.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { ProgressBar } from "./progress-bar";
+
+export type ProgressListRow = {
+  readonly id: string;
+  readonly label: string;
+  readonly value: string;
+  readonly fraction: number;
+};
+
+/** Liste aus Label/Wert-Kopfzeile + Fortschrittsbalken pro Eintrag (z.B.
+ *  Tilgungsfortschritt pro Kredit). */
+export function ProgressList({
+  rows,
+  emptyContent,
+  testId,
+}: {
+  readonly rows: readonly ProgressListRow[];
+  readonly emptyContent?: ReactNode;
+  readonly testId?: string;
+}): ReactNode {
+  if (rows.length === 0) {
+    return <div data-testid={testId}>{emptyContent}</div>;
+  }
+  return (
+    <ul data-testid={testId} className="flex max-h-64 flex-col gap-3 overflow-y-auto pr-1">
+      {rows.map((row) => (
+        <li key={row.id} className="flex flex-col gap-1">
+          <div className="flex items-baseline justify-between gap-2 text-sm">
+            <span className="font-medium">{row.label}</span>
+            <span className="tabular-nums text-muted-foreground">{row.value}</span>
+          </div>
+          <ProgressBar value={row.fraction} />
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/ui/card.tsx

@@ -1,93 +0,0 @@
-// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
-import * as React from "react"
-
-import { cn } from "../lib/cn"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

package/src/ui/collapsible.tsx

@@ -1,34 +0,0 @@
-// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
-"use client"
-
-import { Collapsible as CollapsiblePrimitive } from "radix-ui"
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }