Panel P1.2: event workspace, event settings, organization screen

packages/ui/src/components/confirm-dialog.tsx

@@ -16,6 +16,10 @@ export type ConfirmDialogProps = {
   closeLabel: string;
   onConfirm: () => void;
   destructive?: boolean;
+  // Caller-driven disable on top of the typed-confirmation check below —
+  // e.g. while the confirm action's mutation is in flight, so a slow
+  // network can't be double-clicked into firing the action twice.
+  confirmDisabled?: boolean;
 } & (
   // Tier 2 (typed confirm) needs a visible label for the input's accessible
   // name — @idento/ui has no i18n fallback text to supply one, so the type
@@ -26,7 +30,7 @@ export type ConfirmDialogProps = {
 
 export function ConfirmDialog({
   open, onOpenChange, title, description, confirmLabel, cancelLabel, closeLabel,
-  onConfirm, destructive = false, typedConfirmation, typedConfirmationLabel,
+  onConfirm, destructive = false, typedConfirmation, typedConfirmationLabel, confirmDisabled = false,
 }: ConfirmDialogProps) {
   const [typed, setTyped] = React.useState("");
   const inputId = React.useId();
@@ -35,7 +39,7 @@ export function ConfirmDialog({
     if (!open) setTyped("");
   }, [open]);
 
-  const confirmDisabled = typedConfirmation !== undefined && typed !== typedConfirmation;
+  const disabled = confirmDisabled || (typedConfirmation !== undefined && typed !== typedConfirmation);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -62,7 +66,7 @@ export function ConfirmDialog({
           </Button>
           <Button
             variant={destructive ? "destructive" : "default"}
-            disabled={confirmDisabled}
+            disabled={disabled}
             onClick={onConfirm}
           >
             {confirmLabel}

panel/AGENTS.md

@@ -12,7 +12,8 @@ work while this rewrite runs (see root `AGENTS.md`).
   `src/shared/` (api client, session, i18n, theme, cross-cutting ui glue),
   `src/features/` (screen-level slices — one directory per feature, own
   tests colocated). New screens/features get their own `src/features/<name>/`
-  directory, not a growing `src/pages/`.
+  directory, not a growing `src/pages/`. Cross-cutting, feature-agnostic React
+  hooks (e.g. `useScrollSpy`) live in `src/shared/hooks/`.
 - **Routing:** TanStack Router, code-based (`createRootRoute`/`createRoute`/
   `createRouter` in `src/app/router.tsx`) — not file-based. Protected routes
   nest under the pathless `_app` layout route (`beforeLoad: protectedBeforeLoad`)

panel/src/app/router.tsx

@@ -3,8 +3,11 @@ import { LoginScreen } from "../features/auth/LoginScreen";
 import { QrLoginScreen } from "../features/auth/QrLoginScreen";
 import { RegisterScreen } from "../features/auth/RegisterScreen";
 import { ProtectedLayout, protectedBeforeLoad } from "./shell/ProtectedLayout";
-import { EventWorkspaceStub } from "../features/events/EventWorkspaceStub";
+import { EventWorkspaceLayout } from "../features/workspace/EventWorkspaceLayout";
 import { HomePage } from "../features/home/HomePage";
+import { WorkspaceOverview } from "../features/workspace/WorkspaceOverview";
+import { EventSettingsPage } from "../features/workspace/settings/EventSettingsPage";
+import { OrganizationPage } from "../features/organization/OrganizationPage";
 import { PlaceholderPage } from "../shared/ui/PlaceholderPage";
 import { getInstance } from "../shared/api/client";
 import { queryClient } from "./queryClient";
@@ -81,17 +84,35 @@ const equipmentRoute = createRoute({
 const organizationRoute = createRoute({
   getParentRoute: () => protectedLayoutRoute,
   path: "/organization",
-  component: () => <PlaceholderPage titleKey="navOrganization" />,
+  component: OrganizationPage,
 });
 
-const eventStubRoute = createRoute({
+const eventWorkspaceRoute = createRoute({
   getParentRoute: () => protectedLayoutRoute,
   path: "/events/$eventId",
-  component: EventWorkspaceStub,
+  component: EventWorkspaceLayout,
+});
+
+const eventOverviewRoute = createRoute({
+  getParentRoute: () => eventWorkspaceRoute,
+  path: "/",
+  component: WorkspaceOverview,
+});
+
+const eventSettingsRoute = createRoute({
+  getParentRoute: () => eventWorkspaceRoute,
+  path: "/settings",
+  component: EventSettingsPage,
 });
 
 const routeTree = rootRoute.addChildren([
-  protectedLayoutRoute.addChildren([indexRoute, teamRoute, equipmentRoute, organizationRoute, eventStubRoute]),
+  protectedLayoutRoute.addChildren([
+    indexRoute,
+    teamRoute,
+    equipmentRoute,
+    organizationRoute,
+    eventWorkspaceRoute.addChildren([eventOverviewRoute, eventSettingsRoute]),
+  ]),
   loginRoute,
   registerRoute,
   qrLoginRoute,

panel/src/features/events/eventDates.ts

@@ -0,0 +1,24 @@
+import type { ApiEvent } from "./eventTiming";
+
+// A single date, or "start – end" when the dates differ, in the viewer's
+// locale — no date library per plan constraints. `start_date`/`end_date`
+// are bare calendar dates stored as UTC-midnight ISO timestamps (see
+// CreateEventDialog), so the formatter is pinned to UTC to keep the
+// displayed date stable regardless of the viewer's local timezone (without
+// it, viewers behind UTC see the date roll back by one day).
+//
+// Extracted from LiveStrip.tsx (P1.1) so the workspace header (P1.2 Task 2)
+// can reuse the exact same UTC-pinned formatting instead of re-deriving it.
+export function formatDateRange(event: ApiEvent, locale: string): string | null {
+  if (!event.start_date) return null;
+  const dateFmt = new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    timeZone: "UTC",
+  });
+  const start = dateFmt.format(new Date(event.start_date));
+  if (!event.end_date) return start;
+  const end = dateFmt.format(new Date(event.end_date));
+  return start === end ? start : `${start} – ${end}`;
+}

panel/src/features/home/LiveStrip.tsx

@@ -1,6 +1,7 @@
 import { Button, Card, Progress, Skeleton } from "@idento/ui";
 import { Link } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
+import { formatDateRange } from "../events/eventDates";
 import { isDateOnly, type ApiEvent } from "../events/eventTiming";
 import { useEventReadiness, useEventStats } from "../events/hooks";
 
@@ -42,26 +43,6 @@ function formatRunningWindow(event: ApiEvent, locale: string, allDayLabel: strin
   return parts.length > 0 ? parts.join(" · ") : null;
 }
 
-// A single date, or "start – end" when the dates differ, in the viewer's
-// locale — no date library per plan constraints. `start_date`/`end_date`
-// are bare calendar dates stored as UTC-midnight ISO timestamps (see
-// CreateEventDialog), so the formatter is pinned to UTC to keep the
-// displayed date stable regardless of the viewer's local timezone (without
-// it, viewers behind UTC see the date roll back by one day).
-function formatDateRange(event: ApiEvent, locale: string): string | null {
-  if (!event.start_date) return null;
-  const dateFmt = new Intl.DateTimeFormat(locale, {
-    day: "numeric",
-    month: "short",
-    year: "numeric",
-    timeZone: "UTC",
-  });
-  const start = dateFmt.format(new Date(event.start_date));
-  if (!event.end_date) return start;
-  const end = dateFmt.format(new Date(event.end_date));
-  return start === end ? start : `${start} – ${end}`;
-}
-
 function RunningCard({ event }: { event: ApiEvent }) {
   const { t, i18n } = useTranslation();
   const stats = useEventStats(event.id, { poll: true });

panel/src/features/home/ReadinessCell.tsx

@@ -6,7 +6,8 @@ import type { components } from "../../shared/api/schema";
 type EventReadinessResponse = components["schemas"]["EventReadinessResponse"];
 type ReadinessStep = components["schemas"]["ReadinessStep"];
 
-const STEP_LABEL_KEYS: Record<ReadinessStep["key"], string> = {
+// eslint-disable-next-line react-refresh/only-export-components -- Shared step-label lookup belongs with the readiness pipeline it describes; not a real Fast Refresh issue for this pattern.
+export const STEP_LABEL_KEYS: Record<ReadinessStep["key"], string> = {
   attendees: "readinessStepAttendees",
   badge: "readinessStepBadge",
   zones: "readinessStepZones",