@nightkatana/kronosys-app 1.0.0-beta.21 → 1.0.0-beta.22

package/app/licenses/page.tsx

@@ -1,23 +1,26 @@
 "use client";
 
-import { Suspense, useMemo } from "react";
+import { Suspense, useCallback, useMemo } from "react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
 import { ScrollToTopFab } from "@/components/dashboard/ScrollToTopFab";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
-import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
+import { AppShellToolbarRouteNav } from "@/components/dashboard/AppShellToolbarRouteNav";
 import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
+import { postKronosysAction } from "@/lib/kronosysApi";
 import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
 import {
   appShellHeaderClassName,
   appShellHeaderTitleMetaRowClassName,
-  appShellHeaderToolbarClassName,
 } from "@/lib/appShellHeaderClasses";
-import { AppShellCommandCenterPlaceholder } from "@/components/dashboard/AppShellCommandCenterPlaceholder";
+import { AppShellHeaderToolbarLayout } from "@/components/dashboard/AppShellHeaderToolbarLayout";
+import { AppShellToolbarCommandCenter } from "@/components/dashboard/AppShellToolbarCommandCenter";
 import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
 import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
+import { AppShellHeaderKronoFocus } from "@/components/dashboard/AppShellHeaderKronoFocus";
+import { AppShellHeaderUtilityRibbon } from "@/components/dashboard/AppShellHeaderUtilityRibbon";
 import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
 import { reportingNav } from "@/lib/reportingStrings";
 import {
@@ -32,13 +35,21 @@ import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
 function LicensesBody() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { payload } = useKronosysPayload();
+  const { payload, refresh } = useKronosysPayload();
   const dashboardSessionNavId = searchParams.get("session");
   const lang: LicensesLang = searchParams.get("lang") === "en" ? "en" : "fr";
   const c = useMemo(() => licensesCopy(lang), [lang]);
   const nav = reportingNav(lang as Lang);
   const dt = dashboardStrings(lang as Lang);
 
+  const postHeaderAction = useCallback(
+    async (body: Record<string, unknown>) => {
+      await postKronosysAction(body);
+      await refresh({ routerInvalidate: true });
+    },
+    [refresh],
+  );
+
   return (
     <div className="min-h-screen bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100">
       <header className={appShellHeaderClassName}>
@@ -66,54 +77,75 @@ function LicensesBody() {
           </div>
           <AppShellHeaderSessionMeta payload={payload} dt={dt} />
         </div>
-        <div className="flex w-full justify-end">
-          <div className={appShellHeaderToolbarClassName}>
-            <AppShellHeaderWallClock lang={lang as Lang} dt={dt} />
-            <AppShellCommandCenterPlaceholder />
-            <AppShellRouteNav
+        <AppShellHeaderToolbarLayout
+          leading={
+            <>
+              <AppShellHeaderWallClock lang={lang as Lang} dt={dt} />
+              <AppShellHeaderKronoFocus
+                payload={payload}
+                dt={dt}
+                post={postHeaderAction}
+              />
+              <AppShellToolbarCommandCenter
+                dt={dt}
+                lang={lang as Lang}
+                dashboardSessionNavId={dashboardSessionNavId}
+                onManualRefresh={() => void refresh({ routerInvalidate: true })}
+              />
+            </>
+          }
+          nav={
+            <AppShellToolbarRouteNav
               current="licenses"
               labels={{ ...nav, licenses: c.title }}
               navAriaLabel={dt.appShellRouteNavAria}
               dashboardSessionId={dashboardSessionNavId}
-              reserveGlobalPauseSlot
-            />
-            <ThemeToggle lang={lang as Lang} />
-            <PageRefreshButton
-              title={dt.pageRefreshTitle}
-              ariaLabel={dt.pageRefreshAriaLabel}
-              inlineMessages={{
-                loading: dt.pageRefreshProgressLabel,
-                success: dt.pageRefreshDoneToast,
-                error: dt.pageRefreshFailedToast,
-              }}
-              onRefresh={() => {
-                router.refresh();
-              }}
-            />
-            <LanguageMenu
               lang={lang as Lang}
-              labelEn="English"
-              labelFr="Français"
-              menuHeading={lang === "fr" ? "Langue" : "Language"}
-              triggerAriaLabel={
-                lang === "fr" ? "Langue de l’interface" : "Interface language"
-              }
-              onSelect={(next) => {
-                const path =
-                  next === "en"
-                    ? withDashboardSessionParam(
-                        "/licenses?lang=en",
-                        dashboardSessionNavId,
-                      )
-                    : withDashboardSessionParam(
-                        "/licenses",
-                        dashboardSessionNavId,
-                      );
-                router.push(path);
-              }}
+              dt={dt}
             />
-          </div>
-        </div>
+          }
+          trailing={
+            <AppShellHeaderUtilityRibbon
+              ariaLabel={dt.appShellUtilityToolbarGroupAria}
+            >
+              <ThemeToggle lang={lang as Lang} />
+              <PageRefreshButton
+                title={dt.pageRefreshTitle}
+                ariaLabel={dt.pageRefreshAriaLabel}
+                inlineMessages={{
+                  loading: dt.pageRefreshProgressLabel,
+                  success: dt.pageRefreshDoneToast,
+                  error: dt.pageRefreshFailedToast,
+                }}
+                onRefresh={() => {
+                  router.refresh();
+                }}
+              />
+              <LanguageMenu
+                lang={lang as Lang}
+                labelEn="English"
+                labelFr="Français"
+                menuHeading={lang === "fr" ? "Langue" : "Language"}
+                triggerAriaLabel={
+                  lang === "fr" ? "Langue de l’interface" : "Interface language"
+                }
+                onSelect={(next) => {
+                  const path =
+                    next === "en"
+                      ? withDashboardSessionParam(
+                          "/licenses?lang=en",
+                          dashboardSessionNavId,
+                        )
+                      : withDashboardSessionParam(
+                          "/licenses",
+                          dashboardSessionNavId,
+                        );
+                  router.push(path);
+                }}
+              />
+            </AppShellHeaderUtilityRibbon>
+          }
+        />
       </header>
 
       <main className="mx-auto max-w-3xl px-5 py-8 pb-16 sm:px-8 lg:px-10">

package/app/logs/page.tsx

@@ -10,12 +10,14 @@ import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
 import {
   appShellHeaderClassName,
   appShellHeaderTitleMetaRowClassName,
-  appShellHeaderToolbarClassName,
 } from "@/lib/appShellHeaderClasses";
-import { AppShellCommandCenterPlaceholder } from "@/components/dashboard/AppShellCommandCenterPlaceholder";
+import { AppShellHeaderToolbarLayout } from "@/components/dashboard/AppShellHeaderToolbarLayout";
+import { AppShellToolbarCommandCenter } from "@/components/dashboard/AppShellToolbarCommandCenter";
 import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
 import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
-import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
+import { AppShellHeaderKronoFocus } from "@/components/dashboard/AppShellHeaderKronoFocus";
+import { AppShellHeaderUtilityRibbon } from "@/components/dashboard/AppShellHeaderUtilityRibbon";
+import { AppShellToolbarRouteNav } from "@/components/dashboard/AppShellToolbarRouteNav";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
 import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
@@ -55,7 +57,8 @@ function LogsContent() {
       lang === "fr"
         ? {
             title: "Journal des actions",
-            subtitle: "Historique des actions utilisateur enregistrées côté serveur.",
+            subtitle:
+              "Historique des actions utilisateur enregistrées côté serveur.",
             refresh: "Rafraîchir",
             empty: "Aucune action enregistrée.",
             action: "Action",
@@ -81,20 +84,37 @@ function LogsContent() {
             failed: "Failed",
             unknown: "—",
           },
-    [lang]
+    [lang],
+  );
+
+  const postHeaderAction = useCallback(
+    async (body: Record<string, unknown>) => {
+      await postKronosysAction(body);
+      await refresh({ routerInvalidate: true });
+    },
+    [refresh],
   );
 
   const loadLogs = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
-      const res = await fetch(withDashboardSessionParam("/api/action-logs?limit=200", dashboardSessionNavId), {
-        cache: "no-store",
-      });
+      const res = await fetch(
+        withDashboardSessionParam(
+          "/api/action-logs?limit=200",
+          dashboardSessionNavId,
+        ),
+        {
+          cache: "no-store",
+        },
+      );
       if (!res.ok) {
         throw new Error(`HTTP ${res.status}`);
       }
-      const body = (await res.json()) as { ok?: boolean; logs?: ActionLogRow[] };
+      const body = (await res.json()) as {
+        ok?: boolean;
+        logs?: ActionLogRow[];
+      };
       setLogs(Array.isArray(body.logs) ? body.logs : []);
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
@@ -147,47 +167,70 @@ function LogsContent() {
           </div>
           <AppShellHeaderSessionMeta payload={payload} dt={dt} />
         </div>
-        <div className="flex w-full justify-end">
-          <div className={appShellHeaderToolbarClassName}>
-            <AppShellHeaderWallClock lang={lang} dt={dt} />
-            <AppShellCommandCenterPlaceholder />
-            <AppShellRouteNav
+        <AppShellHeaderToolbarLayout
+          leading={
+            <>
+              <AppShellHeaderWallClock lang={lang} dt={dt} />
+              <AppShellHeaderKronoFocus
+                payload={payload}
+                dt={dt}
+                post={postHeaderAction}
+              />
+              <AppShellToolbarCommandCenter
+                dt={dt}
+                lang={lang}
+                dashboardSessionNavId={dashboardSessionNavId}
+                onManualRefresh={() => refresh({ routerInvalidate: true })}
+              />
+            </>
+          }
+          nav={
+            <AppShellToolbarRouteNav
               current="logs"
               labels={nav}
               navAriaLabel={dt.appShellRouteNavAria}
               dashboardSessionId={dashboardSessionNavId}
-              reserveGlobalPauseSlot
-            />
-            <ThemeToggle lang={lang} />
-            <PageRefreshButton
-              title={dt.pageRefreshTitle}
-              ariaLabel={dt.pageRefreshAriaLabel}
-              inlineMessages={{
-                loading: dt.pageRefreshProgressLabel,
-                success: dt.pageRefreshDoneToast,
-                error: dt.pageRefreshFailedToast,
-              }}
-              onRefresh={async () => {
-                await loadLogs();
-                return await refresh({ routerInvalidate: true });
-              }}
-            />
-            <LanguageMenu
               lang={lang}
-              labelEn="English"
-              labelFr="Français"
-              menuHeading={lang === "fr" ? "Langue" : "Language"}
-              triggerAriaLabel={
-                lang === "fr" ? "Langue de l’interface" : "Interface language"
-              }
-              onSelect={(next) => void postLang(next)}
+              dt={dt}
             />
-          </div>
-        </div>
+          }
+          trailing={
+            <AppShellHeaderUtilityRibbon
+              ariaLabel={dt.appShellUtilityToolbarGroupAria}
+            >
+              <ThemeToggle lang={lang} />
+              <PageRefreshButton
+                title={dt.pageRefreshTitle}
+                ariaLabel={dt.pageRefreshAriaLabel}
+                inlineMessages={{
+                  loading: dt.pageRefreshProgressLabel,
+                  success: dt.pageRefreshDoneToast,
+                  error: dt.pageRefreshFailedToast,
+                }}
+                onRefresh={async () => {
+                  await loadLogs();
+                  return await refresh({ routerInvalidate: true });
+                }}
+              />
+              <LanguageMenu
+                lang={lang}
+                labelEn="English"
+                labelFr="Français"
+                menuHeading={lang === "fr" ? "Langue" : "Language"}
+                triggerAriaLabel={
+                  lang === "fr" ? "Langue de l’interface" : "Interface language"
+                }
+                onSelect={(next) => void postLang(next)}
+              />
+            </AppShellHeaderUtilityRibbon>
+          }
+        />
       </header>
 
       <main className="mx-auto w-full max-w-[1200px] px-5 pb-16 pt-6 sm:px-8 lg:px-10">
-        <p className="text-sm text-zinc-600 dark:text-zinc-400">{labels.subtitle}</p>
+        <p className="text-sm text-zinc-600 dark:text-zinc-400">
+          {labels.subtitle}
+        </p>
         <div className="mt-4">
           <button
             type="button"
@@ -217,7 +260,10 @@ function LogsContent() {
             <tbody>
               {logs.length === 0 ? (
                 <tr>
-                  <td colSpan={5} className="px-3 py-4 text-zinc-500 dark:text-zinc-400">
+                  <td
+                    colSpan={5}
+                    className="px-3 py-4 text-zinc-500 dark:text-zinc-400"
+                  >
                     {loading ? t.loading : labels.empty}
                   </td>
                 </tr>
@@ -227,11 +273,21 @@ function LogsContent() {
                     key={row.id}
                     className="border-t border-zinc-200 text-zinc-700 dark:border-zinc-700 dark:text-zinc-200"
                   >
-                    <td className="px-3 py-2">{new Date(row.createdAt).toLocaleString()}</td>
-                    <td className="px-3 py-2 font-mono text-xs">{row.actionType}</td>
-                    <td className="px-3 py-2">{row.ok ? labels.ok : labels.failed}</td>
-                    <td className="px-3 py-2">{row.sourceIp ?? labels.unknown}</td>
-                    <td className="px-3 py-2 font-mono text-xs">{row.sessionId ?? labels.unknown}</td>
+                    <td className="px-3 py-2">
+                      {new Date(row.createdAt).toLocaleString()}
+                    </td>
+                    <td className="px-3 py-2 font-mono text-xs">
+                      {row.actionType}
+                    </td>
+                    <td className="px-3 py-2">
+                      {row.ok ? labels.ok : labels.failed}
+                    </td>
+                    <td className="px-3 py-2">
+                      {row.sourceIp ?? labels.unknown}
+                    </td>
+                    <td className="px-3 py-2 font-mono text-xs">
+                      {row.sessionId ?? labels.unknown}
+                    </td>
                   </tr>
                 ))
               )}