Release v0.1.23

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hunter-app",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hunter-app",
-      "version": "0.1.22",
+      "version": "0.1.23",
       "dependencies": {
         "@fontsource/inter": "^5.2.8",
         "lucide-svelte": "^1.0.1"

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hunter-app",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/lib/components/AppShell.svelte

@@ -0,0 +1,606 @@
+<script lang="ts">
+  import { api } from '$lib/api';
+  import AuthGate from '$lib/components/AuthGate.svelte';
+  import WorkspaceBootCard from '$lib/components/app-shell/WorkspaceBootCard.svelte';
+  import WorkspaceQuickAccess from '$lib/components/app-shell/WorkspaceQuickAccess.svelte';
+  import WorkspaceSearchPalette from '$lib/components/app-shell/WorkspaceSearchPalette.svelte';
+  import WorkspaceSignedOutCard from '$lib/components/app-shell/WorkspaceSignedOutCard.svelte';
+  import WorkspaceTabletNav from '$lib/components/app-shell/WorkspaceTabletNav.svelte';
+  import { PALETTE_RESULT_LIMIT, buildSessionKey, filterSearchItems } from '$lib/components/app-shell/utils';
+  import ClientPrimaryRail from '$lib/components/navigation/ClientPrimaryRail.svelte';
+  import ClientTopbar from '$lib/components/navigation/ClientTopbar.svelte';
+  import WhatsNewDialog from '$lib/components/WhatsNewDialog.svelte';
+  import { currentChangelog } from '$lib/changelog';
+  import { hasSeenVersion, markVersionSeen } from '$lib/whats-new';
+  import { invalidateAll } from '$app/navigation';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
+  import { clientSession, hasModuleAccess, sessionHydrated } from '$lib/session';
+  import { featureFlags } from '$lib/features';
+  import {
+    canCreateMixSession as sessionCanCreateMixSession,
+    canCreateMixWorksheet as sessionCanCreateMixWorksheet,
+    canOpenDashboard as sessionCanOpenDashboard,
+    canOpenEditor as sessionCanOpenEditor,
+    canOpenMixCalculator as sessionCanOpenMixCalculator,
+    canOpenMixMaster as sessionCanOpenMixMaster,
+    canOpenCustomerOrdering as sessionCanOpenCustomerOrdering,
+    canManageOrdering as sessionCanManageOrdering,
+    canOpenProductCosting as sessionCanOpenProductCosting,
+    canOpenReporting as sessionCanOpenReporting,
+    canOpenSettings as sessionCanOpenSettings,
+    canOpenThroughput as sessionCanOpenThroughput,
+    canUseWorkspaceSearch as sessionCanUseWorkspaceSearch,
+    getWorkspaceRole,
+    getWorkspaceHomeHref as sessionWorkspaceHomeHref,
+    isWorkspaceRouteAllowed
+  } from '$lib/workspace-access';
+  import {
+    baseSearchItems,
+    buildClientNavEntries,
+    clientBreadcrumbs,
+    dashboardItem,
+    editorItem,
+    ingredientsEditorItem,
+    footerLinks,
+    mixCalculatorItem,
+    orderingItem,
+    orderingManageChildren,
+    orderingManageGroup,
+    pageTitle,
+    productCostingItem,
+    reportingItem,
+    throughputItem,
+    type FooterLink,
+    type NavEntry,
+    type SearchItem,
+    type NavItem,
+    workingDocumentItems
+  } from '$lib/navigation/client-navigation';
+  import { onMount } from 'svelte';
+  import packageInfo from '../../../package.json';
+
+  let { children } = $props();
+  const isRootRoute = $derived(page.url.pathname === '/');
+
+  let paletteOpen = $state(false);
+  let paletteQuery = $state('');
+  let quickMenuOpen = $state(false);
+  let userMenuOpen = $state(false);
+  let navOpen = $state(false);
+  let showBottomNav = $state(false);
+  let whatsNewOpen = $state(false);
+  // The user identity we've already run the "what's new" check for this mount,
+  // so the dialog is evaluated once per login rather than on every navigation.
+  let whatsNewCheckedFor = $state<string | null>(null);
+  let isRestoringSession = $state(false);
+  let restoredSessionKey = $state<string | null>(null);
+  let seededSearchItems = $state<SearchItem[]>([]);
+  let seededSearchKey = $state<string | null>(null);
+  let bootDelayDone = $state(false);
+  const appVersion = `v${packageInfo.version}`;
+  const currentYear = new Date().getFullYear();
+  const canOpenDashboard = $derived(sessionCanOpenDashboard($clientSession));
+  const canOpenMixMaster = $derived(sessionCanOpenMixMaster($clientSession));
+  const canCreateMixWorksheet = $derived(sessionCanCreateMixWorksheet($clientSession));
+  const canOpenMixCalculator = $derived(sessionCanOpenMixCalculator($clientSession));
+  const canCreateMixSession = $derived(sessionCanCreateMixSession($clientSession));
+  const canOpenEditor = $derived(sessionCanOpenEditor($clientSession));
+  const canOpenSettings = $derived(sessionCanOpenSettings($clientSession));
+  const canUseWorkspaceSearch = $derived(sessionCanUseWorkspaceSearch($clientSession));
+  const workspaceHomeHref = $derived(sessionWorkspaceHomeHref($clientSession));
+  const currentRouteAllowed = $derived(isWorkspaceRouteAllowed($clientSession, page.url.pathname));
+  const routeGuardPending = $derived(!!$clientSession && (isRestoringSession || !currentRouteAllowed));
+  const shellPathname = $derived(routeGuardPending ? workspaceHomeHref : page.url.pathname);
+  const shellTitle = $derived(routeGuardPending ? 'Loading Workspace' : pageTitle(page.url.pathname));
+  const shellBreadcrumbs = $derived(
+    routeGuardPending ? clientBreadcrumbs(workspaceHomeHref, $clientSession) : clientBreadcrumbs(page.url.pathname, $clientSession)
+  );
+  const visibleDashboardItem = $derived(canOpenDashboard ? dashboardItem : null);
+  const visibleWorkingDocumentItems = $derived(
+    !$clientSession
+      ? workingDocumentItems
+      : workingDocumentItems.filter((item) => {
+          if (item.href === '/mixes') return canOpenMixMaster;
+          return !item.moduleKey || hasModuleAccess($clientSession, item.moduleKey);
+        })
+  );
+  const visibleMixCalculatorItem = $derived(canOpenMixCalculator ? mixCalculatorItem : null);
+  const visibleProductCostingItem = $derived(sessionCanOpenProductCosting($clientSession) ? productCostingItem : null);
+  const canOpenThroughput = $derived(sessionCanOpenThroughput($clientSession));
+  const visibleThroughputItem = $derived(canOpenThroughput ? throughputItem : null);
+  // Ordering serves two audiences: internal staff get the management console
+  // (/ordering/manage), customers get the catalogue (/ordering).
+  const canManageOrdering = $derived(sessionCanManageOrdering($clientSession));
+  const canOpenCustomerOrdering = $derived(sessionCanOpenCustomerOrdering($clientSession));
+  // Internal staff get the collapsible "Order Management" family (queue +
+  // products/customers/pricing/settings/integrations); customers get the single
+  // catalogue link. Either way it becomes one NavEntry the rail can render.
+  const visibleOrderingEntry = $derived<NavEntry | null>(
+    canManageOrdering
+      ? { kind: 'group', group: orderingManageGroup }
+      : canOpenCustomerOrdering
+        ? { kind: 'item', item: orderingItem }
+        : null
+  );
+  const visibleReportingItem = $derived(sessionCanOpenReporting($clientSession) ? reportingItem : null);
+  const visibleEditorItem = $derived(canOpenEditor ? editorItem : null);
+  const visibleIngredientsEditorItem = $derived(canOpenEditor ? ingredientsEditorItem : null);
+  // Grouped desktop rail: Dashboard, a collapsible "Costing" family, then the
+  // standalone operations/insights modules. Built from the same access-filtered
+  // items, so a role only ever sees the families it may open.
+  const navEntries = $derived(
+    buildClientNavEntries({
+      dashboard: visibleDashboardItem,
+      costing: [
+        ...(visibleMixCalculatorItem ? [visibleMixCalculatorItem] : []),
+        ...(visibleProductCostingItem ? [visibleProductCostingItem] : []),
+        ...(visibleEditorItem ? [visibleEditorItem] : []),
+        ...(visibleIngredientsEditorItem ? [visibleIngredientsEditorItem] : []),
+        ...visibleWorkingDocumentItems
+      ],
+      throughput: visibleThroughputItem,
+      ordering: visibleOrderingEntry,
+      reporting: visibleReportingItem
+    })
+  );
+  const isOperationsUser = $derived($clientSession?.role_name === 'Operations');
+  const workspaceRole = $derived(getWorkspaceRole($clientSession));
+  const visibleFooterLinks = $derived([
+    ...(!isOperationsUser ? footerLinks : [])
+  ] as FooterLink[]);
+  const primaryBottomNavigation = $derived(
+    [
+      ...(visibleDashboardItem ? [visibleDashboardItem] : []),
+      ...(visibleMixCalculatorItem ? [visibleMixCalculatorItem] : []),
+      ...(visibleProductCostingItem ? [visibleProductCostingItem] : []),
+      ...visibleWorkingDocumentItems.slice(0, 2)
+    ]
+  );
+  const workingDocumentsActive = $derived(
+    visibleWorkingDocumentItems.some((item) => matchesRoute(item.href, page.url.pathname))
+  );
+  const visibleBaseSearchItems = $derived(
+    baseSearchItems.filter((item) => {
+      if (item.href === '/') return canOpenDashboard;
+      if (item.href === '/mixes') return canOpenMixMaster;
+      if (item.href === '/mixes/new') return canCreateMixWorksheet;
+      if (item.href === '/mix-calculator') return canOpenMixCalculator;
+      if (item.href === '/product-costing') return sessionCanOpenProductCosting($clientSession);
+      if (item.href === '/editor') return canOpenEditor;
+      if (item.href === '/ingredients') return canOpenEditor;
+      if (item.href === '/reporting') return sessionCanOpenReporting($clientSession);
+      if (item.href === '/settings') return canOpenSettings;
+      return true;
+    })
+  );
+  const searchItems = $derived([...visibleBaseSearchItems, ...seededSearchItems]);
+  const showWorkspaceBoot = $derived(!isRootRoute && (!$sessionHydrated || !bootDelayDone));
+
+  function openPalette(query = '') {
+    paletteQuery = query;
+    paletteOpen = true;
+    quickMenuOpen = false;
+    userMenuOpen = false;
+    navOpen = false;
+  }
+
+  function syncViewport() {
+    showBottomNav = window.innerWidth <= 1180;
+
+    if (!showBottomNav) {
+      navOpen = false;
+    }
+  }
+
+  async function runSearchItem(item: SearchItem) {
+    paletteOpen = false;
+    paletteQuery = '';
+    await goto(item.href);
+  }
+
+  async function openSettings() {
+    quickMenuOpen = false;
+    userMenuOpen = false;
+    navOpen = false;
+    await goto('/settings');
+  }
+
+  async function signOut() {
+    try {
+      if ($clientSession?.role === 'internal') {
+        await api.internalLogout();
+      } else {
+        await api.clientLogout();
+      }
+    } catch {
+      // Clearing the local session remains the safe fallback.
+    } finally {
+      clientSession.clear();
+    }
+  }
+
+  const paletteState = $derived(filterSearchItems(searchItems, paletteQuery, PALETTE_RESULT_LIMIT));
+
+  $effect(() => {
+    page.url.pathname;
+    quickMenuOpen = false;
+    userMenuOpen = false;
+    paletteOpen = false;
+    paletteQuery = '';
+    navOpen = false;
+  });
+
+  $effect(() => {
+    const hydrated = $sessionHydrated;
+    const sessionKey = buildSessionKey($clientSession);
+
+    if (!hydrated) {
+      return;
+    }
+
+    if (!sessionKey) {
+      isRestoringSession = false;
+      restoredSessionKey = null;
+      return;
+    }
+
+    if (restoredSessionKey === sessionKey) {
+      return;
+    }
+
+    restoredSessionKey = sessionKey;
+    isRestoringSession = true;
+
+    // Internal Hunter Stock Feeds users are refreshed against /api/access/me;
+    // legacy client-portal users keep using /api/auth/client/session.
+    const refresh = $clientSession?.role === 'internal' ? api.internalSession() : api.clientSession();
+
+    refresh
+      .then((session) => {
+        restoredSessionKey = `${session.role}:${session.email}:${session.user_id ?? ''}`;
+        clientSession.set(session);
+        return invalidateAll();
+      })
+      .catch(() => {
+        restoredSessionKey = null;
+        clientSession.clear();
+      })
+      .finally(() => {
+        isRestoringSession = false;
+      });
+  });
+
+  // Search palette items are seeded lazily — three list endpoints worth of
+  // data only when the user actually opens the palette, not on every login or
+  // navigation. Subsequent opens hit the api.ts cache.
+  $effect(() => {
+    const hydrated = $sessionHydrated;
+    const session = $clientSession;
+    const sessionKey = buildSessionKey(session);
+    const shouldSeed = paletteOpen;
+
+    if (!hydrated || !session || !sessionKey) {
+      seededSearchItems = [];
+      seededSearchKey = null;
+      return;
+    }
+
+    if (!shouldSeed || seededSearchKey === sessionKey) {
+      return;
+    }
+
+    seededSearchKey = sessionKey;
+
+    Promise.all([
+      sessionCanOpenMixMaster(session) ? api.mixes() : Promise.resolve([]),
+      featureFlags.mixCalculatorSessionHistory && sessionCanOpenMixCalculator(session)
+        ? api.mixCalculatorSessions()
+        : Promise.resolve([])
+    ])
+      .then(([mixes, sessions]) => {
+        if (seededSearchKey !== sessionKey) {
+          return;
+        }
+
+        seededSearchItems = [
+          ...mixes.map((mix) => ({
+            href: `/mixes/${mix.id}`,
+            label: mix.name,
+            description: `Mix · ${mix.client_name} · ${mix.total_mix_kg}kg`,
+            keywords: `mix ${mix.name} ${mix.client_name} ${mix.notes ?? ''} ${mix.ingredients.map((ingredient) => ingredient.raw_material_name).join(' ')}`
+          })),
+          ...sessions.map((savedSession) => ({
+            href: `/mix-calculator/${savedSession.id}`,
+            label: `${savedSession.session_number} · ${savedSession.product_name}`,
+            description: `Mix Session · ${savedSession.prepared_by_name} · ${savedSession.mix_date}`,
+            keywords: `mix calculator session ${savedSession.session_number} ${savedSession.product_name} ${savedSession.mix_name} ${savedSession.client_name} ${savedSession.prepared_by_name} ${savedSession.notes ?? ''}`
+          }))
+        ];
+      })
+      .catch(() => {
+        if (seededSearchKey === sessionKey) {
+          seededSearchItems = [];
+        }
+      });
+  });
+
+  $effect(() => {
+    if ($sessionHydrated && !$clientSession && !isRootRoute) {
+      goto('/', { replaceState: true });
+    }
+  });
+
+  $effect(() => {
+    if (!$sessionHydrated || !$clientSession) {
+      return;
+    }
+
+    if (currentRouteAllowed || page.url.pathname === workspaceHomeHref) {
+      return;
+    }
+
+    goto(workspaceHomeHref, { replaceState: true });
+  });
+
+  // Surface the release notes once per version per user, right after login.
+  // hasSeenVersion keeps this to a single appearance: once dismissed (which
+  // records the version), it won't return until the next version ships.
+  $effect(() => {
+    if (!$sessionHydrated || !$clientSession || !currentChangelog) {
+      return;
+    }
+
+    const userKey = buildSessionKey($clientSession);
+    if (!userKey) {
+      return;
+    }
+    if (whatsNewCheckedFor === userKey) {
+      return;
+    }
+
+    whatsNewCheckedFor = userKey;
+    if (!hasSeenVersion(userKey, currentChangelog.version)) {
+      whatsNewOpen = true;
+    }
+  });
+
+  function dismissWhatsNew() {
+    const userKey = buildSessionKey($clientSession);
+    if (userKey && currentChangelog) {
+      markVersionSeen(userKey, currentChangelog.version);
+    }
+    whatsNewOpen = false;
+  }
+
+  onMount(() => {
+    const bootTimer = window.setTimeout(() => {
+      bootDelayDone = true;
+    }, 1500);
+
+    syncViewport();
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement | null;
+      const isTypingField =
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement ||
+        target?.isContentEditable;
+
+      if (canUseWorkspaceSearch && ((event.key === 'k' && (event.metaKey || event.ctrlKey)) || (!isTypingField && event.key === '/'))) {
+        event.preventDefault();
+        openPalette();
+      }
+
+      if (event.key === 'Escape') {
+        paletteOpen = false;
+        quickMenuOpen = false;
+        userMenuOpen = false;
+        navOpen = false;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeydown);
+    window.addEventListener('resize', syncViewport);
+
+    return () => {
+      window.clearTimeout(bootTimer);
+      window.removeEventListener('keydown', handleKeydown);
+      window.removeEventListener('resize', syncViewport);
+    };
+  });
+
+  const userInitials = $derived(
+    ($clientSession?.name ?? '')
+      .split(' ')
+      .slice(0, 2)
+      .map((w: string) => w[0])
+      .join('')
+      .toUpperCase() || '?'
+  );
+</script>
+
+<svelte:head>
+  <title>{shellTitle} | Hunter Premium Produce</title>
+</svelte:head>
+
+{#if !$clientSession}
+  <div class="signed-out-shell">
+    {#if isRootRoute}
+      {@render children()}
+    {:else if showWorkspaceBoot}
+      <WorkspaceBootCard />
+    {:else}
+      <WorkspaceSignedOutCard />
+    {/if}
+  </div>
+{:else}
+<div class="app-shell">
+  {#if !showBottomNav}
+    <ClientPrimaryRail
+      currentPath={shellPathname}
+      entries={navEntries}
+      brandHref={workspaceHomeHref}
+      footerItems={visibleFooterLinks}
+      {appVersion}
+      {currentYear}
+      {canOpenSettings}
+      onOpenSettings={openSettings}
+      onSignOut={signOut}
+    />
+  {/if}
+
+  <div class:bottom-nav-layout={showBottomNav} class="main-shell">
+    <ClientTopbar
+      breadcrumbs={shellBreadcrumbs}
+      title={shellTitle}
+      sessionHydrated={$sessionHydrated}
+      session={$clientSession}
+      {userInitials}
+      {userMenuOpen}
+      {canUseWorkspaceSearch}
+      {canOpenSettings}
+      onOpenPalette={() => canUseWorkspaceSearch && openPalette()}
+      onToggleUserMenu={() => {
+        userMenuOpen = !userMenuOpen;
+        quickMenuOpen = false;
+      }}
+      onOpenSettings={openSettings}
+      onSignOut={signOut}
+      onShowWhatsNew={() => (whatsNewOpen = true)}
+    />
+
+    <main class="content">
+      <AuthGate
+        blocked={routeGuardPending}
+        label={isRestoringSession ? 'Checking Session' : 'Applying Access Rules'}
+        title={isRestoringSession ? 'Restoring your client workspace.' : 'Routing you to an authorised page.'}
+        detail={
+          isRestoringSession
+            ? 'Refreshing the saved session before rendering workspace content.'
+            : `The ${workspaceRole} role cannot open this route, so the workspace is redirecting before any page content mounts.`
+        }
+      >
+        {@render children()}
+      </AuthGate>
+    </main>
+  </div>
+
+  <WorkspaceQuickAccess
+    bind:quickMenuOpen
+    {canOpenMixMaster}
+    {canCreateMixWorksheet}
+    {canOpenMixCalculator}
+    {canCreateMixSession}
+    {canUseWorkspaceSearch}
+    onOpenPalette={() => openPalette('')}
+  />
+</div>
+
+<WorkspaceTabletNav
+  bind:navOpen
+  {showBottomNav}
+  {primaryBottomNavigation}
+  {visibleDashboardItem}
+  {visibleMixCalculatorItem}
+  {visibleProductCostingItem}
+  {visibleThroughputItem}
+  {visibleEditorItem}
+  {visibleReportingItem}
+  {visibleWorkingDocumentItems}
+  {visibleFooterLinks}
+  {orderingManageGroup}
+  {orderingManageChildren}
+  {orderingItem}
+  {canManageOrdering}
+  {canOpenCustomerOrdering}
+  {canCreateMixWorksheet}
+  {canCreateMixSession}
+  {canOpenSettings}
+  {canUseWorkspaceSearch}
+  pagePath={page.url.pathname}
+  onOpenPalette={() => openPalette('')}
+  onOpenSettings={openSettings}
+  onSignOut={signOut}
+/>
+
+{/if}
+
+{#if $clientSession && whatsNewOpen && currentChangelog}
+  <WhatsNewDialog entry={currentChangelog} onClose={dismissWhatsNew} />
+{/if}
+
+{#if $clientSession && paletteOpen}
+  <WorkspaceSearchPalette
+    bind:query={paletteQuery}
+    filteredSearchItems={paletteState.filteredItems}
+    hiddenResultCount={paletteState.hiddenResultCount}
+    onClose={() => (paletteOpen = false)}
+    onRunSearchItem={runSearchItem}
+  />
+{/if}
+
+<style>
+  .app-shell {
+    display: grid;
+    grid-template-columns: 252px minmax(0, 1fr);
+    min-height: 100vh;
+    background: var(--color-bg-app);
+  }
+
+  .signed-out-shell {
+    min-height: 100vh;
+    padding: 1.5rem;
+  }
+
+  .main-shell {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    height: 100vh;
+    overflow: hidden;
+    background: var(--color-bg-app);
+  }
+
+  .content {
+    --content-padding: 1.34rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    padding: var(--content-padding);
+    overflow: auto;
+    background: var(--color-bg-app);
+  }
+
+  .main-shell.bottom-nav-layout .content {
+    padding-bottom: 7.25rem;
+  }
+
+  @media (max-width: 1180px) {
+    .app-shell {
+      grid-template-columns: 1fr;
+    }
+
+    .content {
+      --content-padding: 1rem;
+      padding: 1rem;
+    }
+  }
+
+  @media (min-width: 1181px) {
+    .bottom-nav-layout .content {
+      padding-bottom: 1.34rem;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .content {
+      --content-padding: 0.92rem;
+      padding: 0.92rem;
+    }
+  }
+</style>

frontend/src/lib/components/app-shell/WorkspaceBootCard.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import { LoaderCircle } from 'lucide-svelte';
+</script>
+
+<section class="locked-card loading-card workspace-boot-card" aria-live="polite">
+  <div class="workspace-boot-orb" aria-hidden="true">
+    <LoaderCircle size={26} strokeWidth={2.1} />
+  </div>
+  <p class="workspace-label">Checking Workspace</p>
+  <h2>Restoring your client workspace.</h2>
+  <p>Hold on while we reload your saved session and bring the app back into place.</p>
+  <div class="workspace-boot-progress" aria-hidden="true">
+    <span class="workspace-boot-progress-bar"></span>
+  </div>
+</section>
+
+<style>
+  .locked-card {
+    max-width: 42rem;
+    padding: 1.25rem;
+    border: 1px solid var(--line);
+    border-radius: 1.25rem;
+    background: var(--panel);
+    box-shadow: var(--shadow);
+  }
+
+  .loading-card {
+    min-height: 10rem;
+  }
+
+  .workspace-boot-card {
+    position: relative;
+    display: grid;
+    gap: 0.85rem;
+    align-items: start;
+    min-height: 14rem;
+    margin: 0 auto;
+    padding: 1.45rem;
+    overflow: hidden;
+  }
+
+  .workspace-boot-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(circle at top right, color-mix(in srgb, var(--color-brand) 18%, transparent), transparent 42%),
+      linear-gradient(180deg, color-mix(in srgb, var(--color-brand) 4%, transparent), transparent 45%);
+    pointer-events: none;
+  }
+
+  .workspace-boot-card > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  .workspace-boot-orb {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 3.35rem;
+    height: 3.35rem;
+    border-radius: 1rem;
+    background: color-mix(in srgb, var(--color-brand) 12%, var(--color-bg-surface));
+    color: var(--color-brand);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 16%, transparent);
+  }
+
+  .workspace-boot-orb :global(svg) {
+    animation: workspace-spin 1s linear infinite;
+  }
+
+  .workspace-boot-progress {
+    width: min(16rem, 100%);
+    height: 0.42rem;
+    overflow: hidden;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--color-brand) 10%, var(--color-border));
+  }
+
+  .workspace-boot-progress-bar {
+    display: block;
+    width: 38%;
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, var(--color-brand), color-mix(in srgb, var(--color-brand) 62%, white));
+    animation: workspace-progress 1.15s ease-in-out infinite;
+    transform-origin: left center;
+  }
+
+  .workspace-label {
+    color: var(--muted);
+    font-size: 0.76rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  h2 {
+    margin-top: 0.35rem;
+    font-size: clamp(1.7rem, 3vw, 2.2rem);
+  }
+
+  p:last-of-type {
+    margin-top: 0.45rem;
+    color: var(--muted);
+  }
+
+  @keyframes workspace-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes workspace-progress {
+    0% { transform: translateX(-110%) scaleX(0.85); }
+    55% { transform: translateX(135%) scaleX(1.05); }
+    100% { transform: translateX(280%) scaleX(0.9); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .workspace-boot-orb :global(svg),
+    .workspace-boot-progress-bar {
+      animation: none;
+    }
+  }
+</style>

frontend/src/lib/components/app-shell/WorkspaceQuickAccess.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  let {
+    quickMenuOpen = $bindable(false),
+    canOpenMixMaster,
+    canCreateMixWorksheet,
+    canOpenMixCalculator,
+    canCreateMixSession,
+    canUseWorkspaceSearch,
+    onOpenPalette
+  }: {
+    quickMenuOpen?: boolean;
+    canOpenMixMaster: boolean;
+    canCreateMixWorksheet: boolean;
+    canOpenMixCalculator: boolean;
+    canCreateMixSession: boolean;
+    canUseWorkspaceSearch: boolean;
+    onOpenPalette: () => void;
+  } = $props();
+</script>
+
+{#if canOpenMixMaster || canCreateMixWorksheet || canOpenMixCalculator || canCreateMixSession || canUseWorkspaceSearch}
+  <div class="quick-fab-wrap">
+    {#if quickMenuOpen}
+      <div class="menu-panel quick-fab-panel">
+        {#if canOpenMixMaster}
+          <a href="/mixes">Open mix costing</a>
+        {/if}
+        {#if canCreateMixWorksheet}
+          <a href="/mixes/new">Create mix worksheet</a>
+        {/if}
+        {#if canOpenMixCalculator}
+          <a href="/mix-calculator">Open mix calculator</a>
+        {/if}
+        {#if canCreateMixSession}
+          <a href="/mix-calculator">Create mix session</a>
+        {/if}
+        {#if canUseWorkspaceSearch}
+          <button type="button" onclick={onOpenPalette}>Search the workspace</button>
+        {/if}
+      </div>
+    {/if}
+
+    <button
+      aria-expanded={quickMenuOpen}
+      aria-label="Open quick access menu"
+      class="quick-fab"
+      type="button"
+      onclick={() => (quickMenuOpen = !quickMenuOpen)}
+    >
+      <span class={`quick-fab-plus ${quickMenuOpen ? 'open' : ''}`}></span>
+      <span>Quick Access</span>
+    </button>
+  </div>
+{/if}
+
+<style>
+  .menu-panel {
+    position: absolute;
+    top: calc(100% + 0.45rem);
+    right: 0;
+    z-index: 20;
+    min-width: 13rem;
+    display: grid;
+    gap: 0.18rem;
+    padding: 0.4rem;
+    border: 1px solid var(--color-border);
+    border-radius: 0.96rem;
+    background: var(--color-bg-elevated);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  .quick-fab-wrap {
+    position: fixed;
+    right: max(1rem, env(safe-area-inset-right));
+    bottom: max(1rem, env(safe-area-inset-bottom));
+    z-index: 46;
+    display: grid;
+    justify-items: end;
+    gap: 0.6rem;
+  }
+
+  .quick-fab {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.72rem;
+    padding: 0.88rem 1.05rem;
+    border: none;
+    border-radius: 999px;
+    background: var(--color-brand);
+    color: var(--color-on-brand);
+    box-shadow: none;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    cursor: pointer;
+  }
+
+  .quick-fab-panel {
+    position: static;
+    min-width: 15rem;
+    padding: 0.45rem;
+    border-radius: 1rem;
+  }
+
+  .quick-fab-plus {
+    position: relative;
+    width: 0.92rem;
+    height: 0.92rem;
+    flex-shrink: 0;
+  }
+
+  .quick-fab-plus::before,
+  .quick-fab-plus::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.92rem;
+    height: 2px;
+    border-radius: 999px;
+    background: currentColor;
+    transform: translate(-50%, -50%);
+    transition: transform 140ms ease;
+  }
+
+  .quick-fab-plus::after {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+
+  .quick-fab-plus.open::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  .quick-fab-plus.open::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+
+  .menu-panel a,
+  .menu-panel button {
+    padding: 0.72rem 0.78rem;
+    border-radius: 0.78rem;
+    color: var(--color-text-primary);
+    text-align: left;
+    background: transparent;
+    border: none;
+  }
+
+  .menu-panel button {
+    cursor: pointer;
+  }
+
+  .menu-panel a:hover,
+  .menu-panel button:hover {
+    background: var(--panel-soft);
+  }
+
+  @media (max-width: 1180px) {
+    .quick-fab-wrap {
+      bottom: calc(max(0.8rem, env(safe-area-inset-bottom)) + 5.9rem);
+    }
+  }
+</style>

frontend/src/lib/components/app-shell/WorkspaceSearchPalette.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import type { SearchItem } from '$lib/navigation/client-navigation';
+
+  let {
+    query = $bindable(''),
+    filteredSearchItems,
+    hiddenResultCount,
+    onClose,
+    onRunSearchItem
+  }: {
+    query?: string;
+    filteredSearchItems: SearchItem[];
+    hiddenResultCount: number;
+    onClose: () => void;
+    onRunSearchItem: (item: SearchItem) => void | Promise<void>;
+  } = $props();
+
+  let paletteInput: HTMLInputElement | null = null;
+
+  onMount(() => {
+    paletteInput?.focus();
+  });
+</script>
+
+<div class="palette-overlay" role="presentation" onclick={onClose}>
+  <div
+    class="palette"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Workspace search"
+    tabindex="-1"
+    onclick={(event) => event.stopPropagation()}
+    onkeydown={(event) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    }}
+  >
+    <div class="palette-input-row">
+      <span class="search-icon"></span>
+      <input bind:this={paletteInput} bind:value={query} placeholder="Search mixes, sessions, and pages..." />
+      <kbd>Esc</kbd>
+    </div>
+
+    <div class="palette-results">
+      {#if filteredSearchItems.length}
+        {#each filteredSearchItems as item}
+          <button class="palette-item" type="button" onclick={() => onRunSearchItem(item)}>
+            <div>
+              <strong>{item.label}</strong>
+              <span>{item.description}</span>
+            </div>
+            <small>{item.href}</small>
+          </button>
+        {/each}
+        {#if hiddenResultCount > 0}
+          <p class="palette-more">{hiddenResultCount} more {hiddenResultCount === 1 ? 'match' : 'matches'}, keep typing to narrow.</p>
+        {/if}
+      {:else}
+        <div class="palette-empty">
+          <strong>No results</strong>
+          <span>Try searching for mixes, sessions, or pages.</span>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .palette-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    display: grid;
+    place-items: start center;
+    padding: 8vh 1rem 1rem;
+    background: rgba(11, 18, 14, 0.3);
+    backdrop-filter: blur(10px);
+  }
+
+  .palette {
+    width: min(44rem, 100%);
+    border: 1px solid var(--color-border);
+    border-radius: 1.2rem;
+    background: var(--color-bg-surface);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+    overflow: hidden;
+  }
+
+  .palette-input-row {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.95rem 1rem;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .palette-input-row input {
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--text);
+    font-size: 0.98rem;
+  }
+
+  .palette-results {
+    max-height: 26rem;
+    overflow: auto;
+    padding: 0.5rem;
+  }
+
+  .palette-item,
+  .palette-empty {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.88rem 0.92rem;
+    border: none;
+    border-radius: 0.92rem;
+    text-align: left;
+    background: transparent;
+  }
+
+  .palette-item {
+    cursor: pointer;
+  }
+
+  .palette-item:hover {
+    background: var(--panel-soft);
+  }
+
+  .palette-item strong,
+  .palette-empty strong {
+    display: block;
+    font-size: 0.96rem;
+  }
+
+  .palette-item span,
+  .palette-empty span,
+  .palette-item small {
+    color: var(--muted);
+  }
+
+  .palette-item span {
+    display: block;
+    margin-top: 0.18rem;
+    font-size: 0.84rem;
+  }
+
+  .palette-item small {
+    flex-shrink: 0;
+    font-size: 0.76rem;
+  }
+
+  .palette-empty {
+    justify-content: flex-start;
+  }
+
+  .palette-more {
+    margin: 0.25rem 0.4rem 0.15rem;
+    padding: 0.5rem 0.52rem 0.2rem;
+    border-top: 1px solid var(--line);
+    color: var(--muted);
+    font-size: 0.78rem;
+  }
+
+  .search-icon {
+    position: relative;
+    display: inline-block;
+    width: 0.82rem;
+    height: 0.82rem;
+    border: 2px solid var(--color-text-muted);
+    border-radius: 999px;
+  }
+
+  .search-icon::after {
+    content: '';
+    position: absolute;
+    right: -0.28rem;
+    bottom: -0.18rem;
+    width: 0.42rem;
+    height: 2px;
+    border-radius: 999px;
+    background: var(--color-text-muted);
+    transform: rotate(45deg);
+  }
+
+  kbd {
+    padding: 0.1rem 0.42rem;
+    border: 1px solid var(--line-strong);
+    border-radius: 0.42rem;
+    color: var(--muted);
+    background: var(--color-bg-surface);
+    font-size: 0.76rem;
+  }
+</style>

frontend/src/lib/components/app-shell/WorkspaceSignedOutCard.svelte

@@ -0,0 +1,47 @@
+<section class="locked-card loading-card signed-out-card">
+  <p class="workspace-label">Checking Session</p>
+  <h2>Returning to the client login screen.</h2>
+  <p>Only authenticated client users can open workspace routes directly.</p>
+</section>
+
+<style>
+  .locked-card {
+    max-width: 42rem;
+    padding: 1.25rem;
+    border: 1px solid var(--line);
+    border-radius: 1.25rem;
+    background: var(--panel);
+    box-shadow: var(--shadow);
+  }
+
+  .loading-card {
+    min-height: 10rem;
+  }
+
+  .signed-out-card {
+    margin: 0 auto;
+  }
+
+  .workspace-label {
+    color: var(--muted);
+    font-size: 0.76rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  h2 {
+    margin-top: 0.35rem;
+    font-size: clamp(1.7rem, 3vw, 2.2rem);
+  }
+
+  p:last-of-type {
+    margin-top: 0.45rem;
+    color: var(--muted);
+  }
+</style>

frontend/src/lib/components/app-shell/WorkspaceTabletNav.svelte

@@ -0,0 +1,520 @@
+<script lang="ts">
+  import { Calculator, LogOut, Menu, Plus, Search, Settings } from 'lucide-svelte';
+
+  import type { FooterLink, NavGroup, NavItem } from '$lib/navigation/client-navigation';
+  import { matchesRoute } from '$lib/navigation/client-navigation';
+  import WorkspaceSearchTrigger from '$lib/components/navigation/WorkspaceSearchTrigger.svelte';
+
+  let {
+    showBottomNav,
+    navOpen = $bindable(false),
+    primaryBottomNavigation,
+    visibleDashboardItem,
+    visibleMixCalculatorItem,
+    visibleProductCostingItem,
+    visibleThroughputItem,
+    visibleEditorItem,
+    visibleReportingItem,
+    visibleWorkingDocumentItems,
+    visibleFooterLinks,
+    orderingManageGroup,
+    orderingManageChildren,
+    orderingItem,
+    canManageOrdering,
+    canOpenCustomerOrdering,
+    canCreateMixWorksheet,
+    canCreateMixSession,
+    canOpenSettings,
+    canUseWorkspaceSearch,
+    pagePath,
+    onOpenPalette,
+    onOpenSettings,
+    onSignOut
+  }: {
+    showBottomNav: boolean;
+    navOpen?: boolean;
+    primaryBottomNavigation: NavItem[];
+    visibleDashboardItem: NavItem | null;
+    visibleMixCalculatorItem: NavItem | null;
+    visibleProductCostingItem: NavItem | null;
+    visibleThroughputItem: NavItem | null;
+    visibleEditorItem: NavItem | null;
+    visibleReportingItem: NavItem | null;
+    visibleWorkingDocumentItems: NavItem[];
+    visibleFooterLinks: FooterLink[];
+    orderingManageGroup: NavGroup;
+    orderingManageChildren: NavItem[];
+    orderingItem: NavItem;
+    canManageOrdering: boolean;
+    canOpenCustomerOrdering: boolean;
+    canCreateMixWorksheet: boolean;
+    canCreateMixSession: boolean;
+    canOpenSettings: boolean;
+    canUseWorkspaceSearch: boolean;
+    pagePath: string;
+    onOpenPalette: () => void;
+    onOpenSettings: () => void | Promise<void>;
+    onSignOut: () => void | Promise<void>;
+  } = $props();
+
+  function closeDrawer() {
+    navOpen = false;
+  }
+</script>
+
+{#if showBottomNav}
+  {#if navOpen}
+    <button aria-label="Close navigation" class="nav-backdrop" type="button" onclick={closeDrawer}></button>
+  {/if}
+
+  <nav class="bottom-nav" aria-label="Tablet navigation">
+    {#each primaryBottomNavigation as item}
+      {@const Icon = item.icon}
+      <a class:active={matchesRoute(item.href, pagePath)} href={item.href}>
+        <span class="bottom-nav-icon"><Icon size={18} strokeWidth={1.85} /></span>
+        <span>{item.label}</span>
+      </a>
+    {/each}
+
+    <button aria-expanded={navOpen} class:active={navOpen} type="button" onclick={() => (navOpen = !navOpen)}>
+      <span class="bottom-nav-icon"><Menu size={18} strokeWidth={1.85} /></span>
+      <span>More</span>
+    </button>
+  </nav>
+
+  {#if navOpen}
+    <div aria-label="Tablet navigation drawer" class="bottom-drawer" role="dialog" aria-modal="true">
+      <div class="drawer-handle"></div>
+
+      <div class="drawer-header">
+        <div>
+          <p class="workspace-label">Workspace Drawer</p>
+          <strong>Hunter Premium Produce</strong>
+        </div>
+        <button aria-label="Close drawer" class="nav-toggle" type="button" onclick={closeDrawer}>
+          <span></span>
+        </button>
+      </div>
+
+      <WorkspaceSearchTrigger
+        className="drawer-search"
+        placeholder="Search the workspace..."
+        onClick={() => canUseWorkspaceSearch && onOpenPalette()}
+      />
+
+      <div class="drawer-grid">
+        <nav class="drawer-section" aria-label="All workspace pages">
+          {#if visibleDashboardItem}
+            {@const Icon = visibleDashboardItem.icon}
+            <a class:active={matchesRoute(visibleDashboardItem.href, pagePath)} href={visibleDashboardItem.href} onclick={closeDrawer}>
+              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
+              <span>{visibleDashboardItem.label}</span>
+            </a>
+          {/if}
+
+          {#if visibleMixCalculatorItem}
+            {@const Icon = visibleMixCalculatorItem.icon}
+            <a class:active={matchesRoute(visibleMixCalculatorItem.href, pagePath)} href={visibleMixCalculatorItem.href} onclick={closeDrawer}>
+              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
+              <span>{visibleMixCalculatorItem.label}</span>
+            </a>
+          {/if}
+
+          {#if visibleProductCostingItem}
+            {@const Icon = visibleProductCostingItem.icon}
+            <a class:active={matchesRoute(visibleProductCostingItem.href, pagePath)} href={visibleProductCostingItem.href} onclick={closeDrawer}>
+              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
+              <span>{visibleProductCostingItem.label}</span>
+              {#if visibleProductCostingItem.badge}<span class="drawer-badge">{visibleProductCostingItem.badge}</span>{/if}
+            </a>
+          {/if}
+
+          {#if visibleThroughputItem}
+            {@const Icon = visibleThroughputItem.icon}
+            <a class:active={matchesRoute(visibleThroughputItem.href, pagePath)} href={visibleThroughputItem.href} onclick={closeDrawer}>
+              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
+              <span>{visibleThroughputItem.label}</span>
+              {#if visibleThroughputItem.badge}<span class="drawer-badge">{visibleThroughputItem.badge}</span>{/if}
+            </a>
+          {/if}
+
+          {#if visibleEditorItem}
+            {@const Icon = visibleEditorItem.icon}
+            <a class:active={matchesRoute(visibleEditorItem.href, pagePath)} href={visibleEditorItem.href} onclick={closeDrawer}>
+              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
+              <span>{visibleEditorItem.label}</span>
+              {#if visibleEditorItem.badge}<span class="drawer-badge">{visibleEditorItem.badge}</span>{/if}
+            </a>
+          {/if}
+
+          {#if visibleReportingItem}
+            {@const Icon = visibleReportingItem.icon}
+            <a class:active={matchesRoute(visibleReportingItem.href, pagePath)} href={visibleReportingItem.href} onclick={closeDrawer}>
+              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
+              <span>{visibleReportingItem.label}</span>
+            </a>
+          {/if}
+
+          {#if canManageOrdering}
+            {@const GroupIcon = orderingManageGroup.icon}
+            <a class:active={pagePath === '/ordering/manage'} href="/ordering/manage" onclick={closeDrawer}>
+              <span class="nav-icon"><GroupIcon size={18} strokeWidth={1.75} /></span>
+              <span>{orderingManageGroup.label}</span>
+            </a>
+            <div class="drawer-sublist">
+              {#each orderingManageChildren as child}
+                {@const ChildIcon = child.icon}
+                <a class:active={matchesRoute(child.href, pagePath, child.exact)} href={child.href} onclick={closeDrawer}>
+                  <span class="nav-icon"><ChildIcon size={18} strokeWidth={1.75} /></span>
+                  <span>{child.label}</span>
+                </a>
+              {/each}
+            </div>
+          {:else if canOpenCustomerOrdering}
+            {@const Icon = orderingItem.icon}
+            <a class:active={matchesRoute(orderingItem.href, pagePath)} href={orderingItem.href} onclick={closeDrawer}>
+              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
+              <span>{orderingItem.label}</span>
+            </a>
+          {/if}
+
+          {#if visibleWorkingDocumentItems.length}
+            <div class="drawer-sublist" id="drawer-working-documents-nav">
+              {#each visibleWorkingDocumentItems as item}
+                {@const Icon = item.icon}
+                <a class:active={matchesRoute(item.href, pagePath)} href={item.href} onclick={closeDrawer}>
+                  <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
+                  <span>{item.label}</span>
+                </a>
+              {/each}
+            </div>
+          {/if}
+        </nav>
+
+        <div class="drawer-section drawer-actions">
+          {#if canCreateMixWorksheet}
+            <a href="/mixes/new" onclick={closeDrawer}>
+              <span class="nav-icon"><Plus size={18} strokeWidth={1.75} /></span>
+              <span>Create mix worksheet</span>
+            </a>
+          {/if}
+          {#if canCreateMixSession}
+            <a href="/mix-calculator" onclick={closeDrawer}>
+              <span class="nav-icon"><Calculator size={18} strokeWidth={1.75} /></span>
+              <span>Create mix session</span>
+            </a>
+          {/if}
+          {#if canOpenSettings}
+            <button type="button" onclick={onOpenSettings}>
+              <span class="nav-icon"><Settings size={18} strokeWidth={1.75} /></span>
+              <span>Change settings</span>
+            </button>
+          {/if}
+          {#if canUseWorkspaceSearch}
+            <button type="button" onclick={onOpenPalette}>
+              <span class="nav-icon"><Search size={18} strokeWidth={1.75} /></span>
+              <span>Search the workspace</span>
+            </button>
+          {/if}
+          <button type="button" onclick={onSignOut}>
+            <span class="nav-icon"><LogOut size={18} strokeWidth={1.75} /></span>
+            <span>Logout</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="drawer-footer">
+        {#each visibleFooterLinks as item}
+          <a href={item.href} onclick={closeDrawer}>
+            <span>{item.label}</span>
+            <small>{item.shortLabel}</small>
+          </a>
+        {/each}
+      </div>
+    </div>
+  {/if}
+{/if}
+
+<style>
+  .nav-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 48;
+    display: block;
+    border: none;
+    background: rgba(11, 18, 14, 0.28);
+    backdrop-filter: blur(4px);
+  }
+
+  .workspace-label {
+    color: var(--muted);
+    font-size: 0.76rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  .nav-toggle {
+    width: 2.05rem;
+    height: 2.05rem;
+    border: 1px solid var(--line);
+    border-radius: 0.68rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--panel);
+    color: var(--muted);
+    cursor: pointer;
+  }
+
+  .nav-toggle span,
+  .nav-toggle span::before,
+  .nav-toggle span::after {
+    width: 0.88rem;
+    height: 2px;
+    background: currentColor;
+    border-radius: 999px;
+    content: '';
+  }
+
+  .nav-toggle span {
+    position: relative;
+    display: inline-block;
+  }
+
+  .nav-toggle span::before,
+  .nav-toggle span::after {
+    position: absolute;
+    left: 0;
+  }
+
+  .nav-toggle span::before {
+    top: -0.28rem;
+  }
+
+  .nav-toggle span::after {
+    top: 0.28rem;
+  }
+
+  .nav-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--color-text-muted);
+    background: transparent;
+    border-radius: 0.55rem;
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+
+  .bottom-nav,
+  .bottom-drawer {
+    display: none;
+  }
+
+  .drawer-sublist a {
+    position: relative;
+  }
+
+  @media (max-width: 1180px) {
+    .bottom-nav {
+      position: fixed;
+      left: max(0.8rem, env(safe-area-inset-left));
+      right: max(0.8rem, env(safe-area-inset-right));
+      bottom: max(0.8rem, env(safe-area-inset-bottom));
+      z-index: 45;
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: 0.5rem;
+      padding: 0.6rem;
+      border: 1px solid var(--color-border);
+      border-radius: 1.35rem;
+      background: var(--color-bg-surface);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+
+    .bottom-nav a,
+    .bottom-nav button {
+      min-width: 0;
+      display: grid;
+      justify-items: center;
+      gap: 0.34rem;
+      padding: 0.62rem 0.38rem;
+      border: none;
+      border-radius: 1rem;
+      background: transparent;
+      color: var(--color-text-secondary);
+      text-align: center;
+      font-size: 0.74rem;
+      font-weight: 700;
+      cursor: pointer;
+    }
+
+    .bottom-nav a.active,
+    .bottom-nav button.active {
+      color: var(--color-brand);
+      background: var(--color-brand-tint);
+    }
+
+    .bottom-nav-icon {
+      width: 2.1rem;
+      height: 2.1rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0.78rem;
+      color: var(--color-on-brand);
+      background: var(--color-brand);
+      font-size: 0.66rem;
+      letter-spacing: 0.04em;
+    }
+
+    .bottom-drawer {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 50;
+      display: grid;
+      gap: 1rem;
+      padding: 0.85rem 1rem calc(6.6rem + env(safe-area-inset-bottom));
+      border-top: 1px solid var(--line);
+      border-radius: 1.6rem 1.6rem 0 0;
+      background: var(--color-bg-surface);
+      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+    }
+
+    .drawer-handle {
+      width: 3.5rem;
+      height: 0.34rem;
+      margin: 0 auto;
+      border-radius: 999px;
+      background: var(--color-border);
+    }
+
+    .drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.8rem;
+    }
+
+    .drawer-header strong {
+      font-size: 1rem;
+    }
+
+    :global(.drawer-search) {
+      background: var(--color-bg-surface);
+    }
+
+    .drawer-grid {
+      display: grid;
+      gap: 0.9rem;
+      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+    }
+
+    .drawer-section {
+      display: grid;
+      gap: 0.4rem;
+    }
+
+    .drawer-section a,
+    .drawer-section button {
+      display: flex;
+      align-items: center;
+      gap: 0.72rem;
+      padding: 0.82rem 0.86rem;
+      border: 1px solid var(--line);
+      border-radius: 0.96rem;
+      background: var(--color-bg-surface);
+      color: var(--color-text-primary);
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .drawer-section a.active {
+      color: var(--color-brand-hover);
+      background: color-mix(in srgb, var(--color-brand) 11%, var(--color-bg-surface));
+    }
+
+    .drawer-badge {
+      margin-left: auto;
+      padding: 0.08rem 0.4rem;
+      border-radius: 999px;
+      background: var(--color-warning-tint);
+      color: var(--color-warning-text);
+      font-size: 0.62rem;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .drawer-sublist {
+      display: grid;
+      gap: 0.4rem;
+    }
+
+    .drawer-footer {
+      display: grid;
+      gap: 0.5rem;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .drawer-footer a {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      padding: 0.82rem 0.9rem;
+      border: 1px solid var(--line);
+      border-radius: 0.96rem;
+      background: var(--color-bg-surface);
+      color: var(--color-text-primary);
+      font-weight: 600;
+    }
+
+    .drawer-footer small {
+      color: var(--muted);
+      font-size: 0.72rem;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+  }
+
+  @media (max-width: 900px) {
+    .drawer-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .bottom-nav {
+      left: max(0.55rem, env(safe-area-inset-left));
+      right: max(0.55rem, env(safe-area-inset-right));
+      bottom: max(0.55rem, env(safe-area-inset-bottom));
+      gap: 0.32rem;
+      padding: 0.45rem;
+    }
+
+    .bottom-nav a,
+    .bottom-nav button {
+      padding: 0.55rem 0.2rem;
+      font-size: 0.68rem;
+    }
+
+    .bottom-nav-icon {
+      width: 1.9rem;
+      height: 1.9rem;
+      font-size: 0.6rem;
+    }
+
+    .bottom-drawer {
+      padding: 0.75rem 0.8rem calc(6.3rem + env(safe-area-inset-bottom));
+    }
+
+    .drawer-footer {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

frontend/src/lib/components/app-shell/utils.ts

@@ -0,0 +1,24 @@
+import type { SearchItem } from '$lib/navigation/client-navigation';
+import type { AppSession } from '$lib/session';
+
+export const PALETTE_RESULT_LIMIT = 10;
+
+export function buildSessionKey(session: AppSession | null | undefined): string | null {
+  if (!session) return null;
+  return `${session.role}:${session.email}:${session.user_id ?? ''}`;
+}
+
+export function filterSearchItems(items: SearchItem[], query: string, limit = PALETTE_RESULT_LIMIT) {
+  const trimmedQuery = query.trim().toLowerCase();
+  const matchingItems = items.filter((item) => {
+    const haystack = `${item.label} ${item.description} ${item.keywords}`.toLowerCase();
+    return haystack.includes(trimmedQuery);
+  });
+
+  const filteredItems = matchingItems.slice(0, limit);
+  return {
+    matchingItems,
+    filteredItems,
+    hiddenResultCount: matchingItems.length - filteredItems.length
+  };
+}

frontend/src/lib/components/throughput/ThroughputComposer.svelte

@@ -0,0 +1,538 @@
+<script lang="ts">
+  import { Plus, TriangleAlert, X } from 'lucide-svelte';
+
+  import ThroughputProductPicker from '$lib/components/throughput/ThroughputProductPicker.svelte';
+  import type { ThroughputProduct, ThroughputQuantityType } from '$lib/types';
+
+  let {
+    products,
+    editingId,
+    saving,
+    nDate = $bindable(''),
+    nProductId = $bindable(''),
+    nQuantity = $bindable(''),
+    nType = $bindable<ThroughputQuantityType>('bags'),
+    nBagSize = $bindable(''),
+    nStaff = $bindable(''),
+    nNotes = $bindable(''),
+    nForOrder = $bindable(false),
+    nForStock = $bindable(false),
+    nJobNumber = $bindable(''),
+    nStockQty = $bindable(''),
+    showNote = $bindable(false),
+    addError,
+    isSplit,
+    addTotalKg,
+    formatNumber,
+    onSubmit,
+    onDismissNote,
+    onCancelEdit,
+    composerRef = $bindable<HTMLElement | null>(null)
+  }: {
+    products: ThroughputProduct[];
+    editingId: number | null;
+    saving: boolean;
+    nDate?: string;
+    nProductId?: string;
+    nQuantity?: string;
+    nType?: ThroughputQuantityType;
+    nBagSize?: string;
+    nStaff?: string;
+    nNotes?: string;
+    nForOrder?: boolean;
+    nForStock?: boolean;
+    nJobNumber?: string;
+    nStockQty?: string;
+    showNote?: boolean;
+    addError: string;
+    isSplit: boolean;
+    addTotalKg: number | null;
+    formatNumber: (value: number | null | undefined, digits?: number) => string;
+    onSubmit: () => void;
+    onDismissNote: () => void;
+    onCancelEdit: () => void;
+    composerRef?: HTMLElement | null;
+  } = $props();
+</script>
+
+<div class="composer" class:editing={editingId != null} bind:this={composerRef}>
+  <div class="composer-head">
+    <div class="composer-title">
+      <h2>{editingId != null ? 'Edit packing run' : 'Add a packing run'}</h2>
+    </div>
+    {#if editingId != null}
+      <button type="button" class="cancel-edit" onclick={onCancelEdit}>
+        <X size={16} strokeWidth={2.4} /> Cancel edit
+      </button>
+    {/if}
+  </div>
+
+  <form class="add-row" onsubmit={(e) => { e.preventDefault(); onSubmit(); }}>
+    <div class="add-cell">
+      <span class="cell-label">Date</span>
+      <input type="date" bind:value={nDate} aria-label="Production date" />
+    </div>
+    <div class="add-cell add-product">
+      <span class="cell-label">Product</span>
+      <ThroughputProductPicker {products} bind:productId={nProductId} inputId="throughput-add-product" />
+    </div>
+    <div class="add-cell">
+      <span class="cell-label">Packed</span>
+      <div class="packed-inputs">
+        <input
+          class="qty"
+          type="number"
+          min="0"
+          step="0.01"
+          inputmode="decimal"
+          bind:value={nQuantity}
+          placeholder={nType === 'bags' ? 'Bags' : 'Total kg'}
+          aria-label={nType === 'bags' ? 'Number of bags' : 'Total kilograms'}
+        />
+        <select class="unit" bind:value={nType} aria-label="Bags or kilograms">
+          <option value="bags">bags</option>
+          <option value="kg">kg (bulka)</option>
+        </select>
+        {#if nType === 'bags'}
+          <span class="times" aria-hidden="true">×</span>
+          <input
+            class="bag"
+            type="number"
+            min="0"
+            step="0.01"
+            inputmode="decimal"
+            bind:value={nBagSize}
+            placeholder="kg/bag"
+            aria-label="Kilograms per bag"
+          />
+        {/if}
+      </div>
+      {#if nType === 'bags' && addTotalKg !== null}
+        <span class="packed-total">= {formatNumber(addTotalKg)} kg total</span>
+      {/if}
+    </div>
+    <div class="add-cell">
+      <span class="cell-label">Packed by</span>
+      <input type="text" bind:value={nStaff} placeholder="Name" aria-label="Packed by" />
+    </div>
+    <div class="add-cell add-dest">
+      <span class="cell-label">Destination</span>
+      <div class="dest-rows">
+        <div class="dest-line">
+          <label class="dest-toggle" class:on={nForOrder}>
+            <input type="checkbox" bind:checked={nForOrder} /> For an order
+          </label>
+          {#if nForOrder}
+            <input
+              class="dest-input"
+              type="text"
+              bind:value={nJobNumber}
+              placeholder="Job number (Order Circle)"
+              aria-label="Job number"
+            />
+          {/if}
+        </div>
+        <div class="dest-line">
+          <label class="dest-toggle" class:on={nForStock}>
+            <input type="checkbox" bind:checked={nForStock} /> For stock
+          </label>
+          {#if isSplit}
+            <input
+              class="dest-input"
+              type="number"
+              min="0"
+              step="0.01"
+              inputmode="decimal"
+              bind:value={nStockQty}
+              placeholder={`To stock (${nType === 'bags' ? 'bags' : 'kg'})`}
+              aria-label="Amount going to stock"
+            />
+          {/if}
+        </div>
+      </div>
+    </div>
+    <div class="add-cell add-action">
+      <button type="submit" class="add-entry-button" disabled={saving}>
+        <Plus size={18} strokeWidth={2.6} />
+        <span>{saving ? 'Saving…' : editingId != null ? 'Save' : 'Add'}</span>
+      </button>
+    </div>
+
+    <div class="add-extra">
+      {#if showNote}
+        <div class="note-field">
+          <input
+            class="note-input"
+            type="text"
+            bind:value={nNotes}
+            placeholder="Note (optional)"
+            aria-label="Note"
+          />
+          <button
+            type="button"
+            class="note-dismiss"
+            title="Remove note"
+            aria-label="Remove note"
+            onclick={onDismissNote}
+          >
+            <X size={16} strokeWidth={2.4} />
+          </button>
+        </div>
+      {:else}
+        <button type="button" class="link-button" onclick={() => (showNote = true)}>+ Add a note</button>
+      {/if}
+      {#if addError}
+        <span class="add-error"><TriangleAlert size={15} strokeWidth={2.4} /> {addError}</span>
+      {/if}
+    </div>
+  </form>
+</div>
+
+<style>
+  .composer {
+    display: grid;
+    gap: 0.85rem;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, var(--color-border));
+    border-radius: 1rem;
+    background: var(--color-bg-surface);
+    box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.28);
+    /* The product picker menu is absolutely positioned and needs to escape the
+       card bounds without being cut off. */
+    overflow: visible;
+  }
+
+  .composer-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.45rem 0;
+  }
+
+  .composer-title h2 {
+    margin: 0;
+    font-size: 1.22rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
+
+  .add-row {
+    display: grid;
+    grid-template-columns: 7.5rem minmax(19rem, 1.7fr) minmax(14rem, 1.15fr) minmax(7rem, 0.65fr) minmax(14rem, 1.2fr) auto;
+    gap: 0.75rem 0.85rem;
+    align-items: start;
+    padding: 0 1.45rem 1.25rem;
+  }
+
+  .add-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    min-width: 0;
+  }
+
+  .add-row input:not([type='checkbox']),
+  .add-row select {
+    width: 100%;
+    min-height: 48px;
+    padding: 0.62rem 0.78rem;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
+    border-radius: 0.8rem;
+    font-size: 0.98rem;
+    color: var(--color-text-primary);
+    background: var(--color-bg-surface);
+  }
+
+  .add-row input:not([type='checkbox']):focus-visible,
+  .add-row select:focus-visible,
+  .cancel-edit:focus-visible,
+  .add-entry-button:focus-visible,
+  .note-dismiss:focus-visible {
+    outline: 3px solid var(--color-brand);
+    outline-offset: 2px;
+  }
+
+  .packed-inputs {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+
+  .packed-inputs .qty {
+    flex: 1 1 4.5rem;
+    min-width: 0;
+  }
+
+  .packed-inputs .unit {
+    flex: 0 0 4.7rem;
+    width: 4.7rem;
+  }
+
+  .packed-inputs .bag {
+    flex: 0 0 6rem;
+    width: 6rem;
+  }
+
+  .packed-inputs .times {
+    flex: 0 0 auto;
+    color: var(--color-text-secondary);
+    font-weight: 700;
+  }
+
+  .packed-total {
+    margin-top: 0.3rem;
+    font-size: 0.84rem;
+    font-weight: 650;
+    color: var(--color-success);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .add-dest {
+    gap: 0.4rem;
+  }
+
+  .dest-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .dest-line {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .dest-line .dest-toggle {
+    flex: 0 0 auto;
+    min-width: 8.5rem;
+  }
+
+  .dest-line .dest-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+  }
+
+  .dest-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.4rem 0.68rem;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
+    border-radius: 0.72rem;
+    background: var(--color-bg-surface);
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .dest-toggle input {
+    width: 1.2rem;
+    height: 1.2rem;
+    min-height: 0;
+    margin: 0;
+    flex-shrink: 0;
+    accent-color: var(--color-brand);
+    cursor: pointer;
+  }
+
+  .dest-toggle.on {
+    border-color: var(--color-brand);
+    background: var(--color-brand-tint);
+    color: var(--color-success);
+  }
+
+  .dest-input {
+    width: 100%;
+  }
+
+  .add-action {
+    justify-content: center;
+  }
+
+  .add-entry-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    min-height: 48px;
+    padding: 0.62rem 1.28rem;
+    background: var(--color-brand);
+    color: #fff;
+    border: 1px solid var(--color-brand);
+    border-radius: 0.8rem;
+    font-size: 0.98rem;
+    font-weight: 700;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 160ms ease;
+  }
+
+  .add-entry-button:hover:not(:disabled) {
+    background: #126a33;
+  }
+
+  .add-entry-button:disabled {
+    opacity: 0.65;
+    cursor: progress;
+  }
+
+  .add-extra {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+    padding-top: 0.15rem;
+  }
+
+  .link-button {
+    padding: 0.25rem 0;
+    background: none;
+    border: 0;
+    color: var(--color-success);
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .link-button:hover {
+    text-decoration: underline;
+  }
+
+  .note-field {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex: 1 1 16rem;
+    max-width: 28rem;
+  }
+
+  .note-input {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .note-dismiss,
+  .cancel-edit {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-surface);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+  }
+
+  .note-dismiss {
+    flex-shrink: 0;
+    width: 2.1rem;
+    height: 2.1rem;
+    padding: 0;
+    border-radius: 0.55rem;
+    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
+  }
+
+  .cancel-edit {
+    gap: 0.35rem;
+    padding: 0.5rem 0.85rem;
+    border-radius: 0.6rem;
+    font-size: 0.92rem;
+    font-weight: 600;
+  }
+
+  .note-dismiss:hover,
+  .cancel-edit:hover {
+    color: var(--color-text-primary);
+    border-color: var(--color-text-muted);
+    background: #fafbfc;
+  }
+
+  .add-error {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    color: #8a1622;
+    font-weight: 650;
+    font-size: 0.95rem;
+  }
+
+  .cell-label {
+    display: none;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--color-text-muted);
+  }
+
+  .composer.editing {
+    border-color: var(--color-brand);
+    box-shadow: 0 0 0 1px var(--color-brand) inset;
+  }
+
+  @media (max-width: 1440px) {
+    .add-row {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 1rem 1rem;
+    }
+
+    .add-action {
+      justify-content: flex-end;
+    }
+
+    .add-entry-button {
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 1040px) {
+    .add-row {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0.9rem 1rem;
+    }
+
+    .add-cell:nth-child(2),
+    .add-cell:nth-child(3),
+    .add-dest,
+    .add-action {
+      grid-column: 1 / -1;
+    }
+
+    .add-entry-button {
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 760px) {
+    .composer-head {
+      padding-left: 1.15rem;
+      padding-right: 1.15rem;
+    }
+
+    .composer-title h2 {
+      font-size: 1.28rem;
+    }
+
+    .add-row {
+      grid-template-columns: 1fr 1fr;
+      gap: 0.85rem 1rem;
+      padding: 0 1.15rem 1.15rem;
+    }
+
+    .add-cell .cell-label {
+      display: block;
+    }
+
+    .add-cell:nth-child(2),
+    .add-dest,
+    .add-action {
+      grid-column: 1 / -1;
+    }
+
+    .add-entry-button {
+      width: 100%;
+    }
+  }
+</style>

frontend/src/lib/components/throughput/ThroughputDeleteDialog.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { Trash2 } from 'lucide-svelte';
+
+  import type { ThroughputEntry } from '$lib/types';
+
+  let {
+    pendingDelete,
+    deletingId,
+    formatDate,
+    onCancel,
+    onConfirm,
+    dialogRef = $bindable<HTMLElement | null>(null)
+  }: {
+    pendingDelete: ThroughputEntry;
+    deletingId: number | null;
+    formatDate: (value: string) => string;
+    onCancel: () => void;
+    onConfirm: () => void;
+    dialogRef?: HTMLElement | null;
+  } = $props();
+</script>
+
+<div class="modal-backdrop" role="presentation" onclick={onCancel}>
+  <div
+    class="modal-card"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="delete-title"
+    tabindex="-1"
+    bind:this={dialogRef}
+    onclick={(event) => event.stopPropagation()}
+    onkeydown={(event) => { if (event.key === 'Escape') onCancel(); }}
+  >
+    <div class="modal-icon"><Trash2 size={22} strokeWidth={2.2} /></div>
+    <h2 id="delete-title" class="modal-title">Delete this run?</h2>
+    <p class="modal-text">
+      The <strong>{pendingDelete.product_name_snapshot}</strong> run from
+      {formatDate(pendingDelete.production_date)} will be permanently removed.
+      This cannot be undone.
+    </p>
+    <div class="modal-actions">
+      <button type="button" class="modal-cancel" onclick={onCancel}>Cancel</button>
+      <button
+        type="button"
+        class="modal-confirm"
+        disabled={deletingId === pendingDelete.id}
+        onclick={onConfirm}
+      >
+        {deletingId === pendingDelete.id ? 'Deleting…' : 'Delete run'}
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 80;
+    display: grid;
+    place-items: center;
+    padding: 1.5rem;
+    background: color-mix(in srgb, var(--color-text-primary) 32%, transparent);
+    backdrop-filter: blur(6px);
+  }
+
+  .modal-card {
+    width: min(28rem, 100%);
+    display: grid;
+    gap: 0.7rem;
+    padding: 1.6rem;
+    border: 1px solid var(--color-border);
+    border-radius: 1rem;
+    background: var(--color-bg-surface);
+    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
+    animation: modal-pop 160ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .modal-card:focus {
+    outline: none;
+  }
+
+  .modal-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.8rem;
+    height: 2.8rem;
+    border-radius: 0.8rem;
+    background: #fdecee;
+    color: #b3261e;
+  }
+
+  .modal-title,
+  .modal-text {
+    margin: 0;
+  }
+
+  .modal-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--color-text-primary);
+  }
+
+  .modal-text {
+    font-size: 0.98rem;
+    line-height: 1.5;
+    color: var(--color-text-secondary);
+  }
+
+  .modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.6rem;
+    margin-top: 0.55rem;
+  }
+
+  .modal-cancel,
+  .modal-confirm {
+    min-height: 44px;
+    padding: 0.6rem 1.15rem;
+    border-radius: 0.7rem;
+    font-size: 0.98rem;
+    font-weight: 650;
+    cursor: pointer;
+    transition: background-color 150ms ease, border-color 150ms ease;
+  }
+
+  .modal-cancel {
+    background: var(--color-bg-surface);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-secondary);
+  }
+
+  .modal-cancel:hover {
+    color: var(--color-text-primary);
+    border-color: var(--color-text-muted);
+  }
+
+  .modal-confirm {
+    background: #b3261e;
+    border: 1px solid #b3261e;
+    color: #fff;
+  }
+
+  .modal-confirm:hover:not(:disabled) {
+    background: #95201a;
+  }
+
+  .modal-confirm:disabled {
+    opacity: 0.65;
+    cursor: progress;
+  }
+
+  .modal-cancel:focus-visible,
+  .modal-confirm:focus-visible {
+    outline: 3px solid var(--color-brand);
+    outline-offset: 2px;
+  }
+
+  @keyframes modal-pop {
+    from { opacity: 0; transform: translateY(6px) scale(0.985); }
+    to { opacity: 1; transform: none; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .modal-card {
+      animation: none;
+    }
+  }
+</style>

frontend/src/lib/components/throughput/ThroughputHistory.svelte

@@ -0,0 +1,771 @@
+<script lang="ts">
+  import { ArrowUpDown, ChevronLeft, ChevronRight, History, Pencil, Search, Trash2, TriangleAlert, X } from 'lucide-svelte';
+  import { fade } from 'svelte/transition';
+
+  import type { SortKey } from '$lib/components/throughput/utils';
+  import type { ThroughputEntry, ThroughputProduct, ThroughputQuantityType } from '$lib/types';
+
+  let {
+    products,
+    filtersActive,
+    showFilters = $bindable(false),
+    dateFrom = $bindable(''),
+    dateTo = $bindable(''),
+    productFilter = $bindable(''),
+    staffFilter = $bindable(''),
+    typeFilter = $bindable<'' | ThroughputQuantityType>(''),
+    isLoading,
+    errorMessage,
+    sortKey,
+    highlightId,
+    deletingId,
+    sortedEntries,
+    paginatedEntries,
+    page,
+    totalPages,
+    pageStart,
+    pageEnd,
+    formatDate,
+    formatNumber,
+    packedMain,
+    packedDetail,
+    destinationOf,
+    onApplyFilters,
+    onClearFilters,
+    onToggleSort,
+    onStartEdit,
+    onRequestDelete
+  }: {
+    products: ThroughputProduct[];
+    filtersActive: boolean;
+    showFilters?: boolean;
+    dateFrom?: string;
+    dateTo?: string;
+    productFilter?: string;
+    staffFilter?: string;
+    typeFilter?: '' | ThroughputQuantityType;
+    isLoading: boolean;
+    errorMessage: string;
+    sortKey: SortKey;
+    highlightId: number | null;
+    deletingId: number | null;
+    sortedEntries: ThroughputEntry[];
+    paginatedEntries: ThroughputEntry[];
+    page: number;
+    totalPages: number;
+    pageStart: number;
+    pageEnd: number;
+    formatDate: (value: string) => string;
+    formatNumber: (value: number | null | undefined, digits?: number) => string;
+    packedMain: (entry: ThroughputEntry) => string;
+    packedDetail: (entry: ThroughputEntry) => string;
+    destinationOf: (entry: ThroughputEntry) => { label: string; detail: string | null };
+    onApplyFilters: () => void;
+    onClearFilters: () => void;
+    onToggleSort: (key: SortKey) => void;
+    onStartEdit: (entry: ThroughputEntry) => void;
+    onRequestDelete: (entry: ThroughputEntry) => void;
+  } = $props();
+</script>
+
+<div class="history-shell">
+  <div class="log-controls">
+    <div class="log-title">
+      <h2 class="history-title">
+        {#if !filtersActive}<History size={18} strokeWidth={2.1} />{/if}
+        <span>{filtersActive ? 'Filtered entries' : 'Recent entries'}</span>
+      </h2>
+      <span class="log-subtitle">{filtersActive ? 'Matching runs' : 'Last 30 days'}</span>
+    </div>
+    <button
+      type="button"
+      class="find-button"
+      class:active={showFilters}
+      aria-expanded={showFilters}
+      onclick={() => (showFilters = !showFilters)}
+    >
+      <Search size={18} strokeWidth={2.2} />
+      <span>Find past entries</span>
+      {#if filtersActive}<span class="find-dot" aria-label="filters applied"></span>{/if}
+    </button>
+  </div>
+
+  {#if showFilters}
+    <form
+      class="filters"
+      transition:fade={{ duration: 120 }}
+      onsubmit={(e) => {
+        e.preventDefault();
+        onApplyFilters();
+      }}
+    >
+      <label>
+        <span>From date</span>
+        <input type="date" bind:value={dateFrom} />
+      </label>
+      <label>
+        <span>To date</span>
+        <input type="date" bind:value={dateTo} />
+      </label>
+      <label>
+        <span>Product</span>
+        <select bind:value={productFilter}>
+          <option value="">All products</option>
+          {#each products as product (product.id)}
+            <option value={String(product.id)}>{product.name}</option>
+          {/each}
+        </select>
+      </label>
+      <label>
+        <span>Staff</span>
+        <input type="text" placeholder="Name" bind:value={staffFilter} />
+      </label>
+      <label>
+        <span>Packed as</span>
+        <select bind:value={typeFilter}>
+          <option value="">Bags or kg</option>
+          <option value="bags">Bags</option>
+          <option value="kg">Kilograms</option>
+        </select>
+      </label>
+      <div class="filter-actions">
+        <button type="submit" class="apply-button" disabled={isLoading}>
+          {isLoading ? 'Searching…' : 'Search'}
+        </button>
+        {#if filtersActive}
+          <button type="button" class="clear-button" onclick={onClearFilters}>
+            <X size={16} strokeWidth={2.4} /> Clear
+          </button>
+        {/if}
+      </div>
+    </form>
+  {/if}
+
+  {#if errorMessage}
+    <div class="error" role="alert">
+      <TriangleAlert size={20} strokeWidth={2.2} />
+      <span>{errorMessage}</span>
+      <button type="button" class="retry-button" onclick={onApplyFilters}>Try again</button>
+    </div>
+  {/if}
+
+  <div class="log">
+    <div class="log-head">
+      <button type="button" class="sort-head" class:active={sortKey === 'date'} onclick={() => onToggleSort('date')}>
+        <span>Date</span>
+        <ArrowUpDown size={14} strokeWidth={2.1} />
+      </button>
+      <button type="button" class="sort-head" class:active={sortKey === 'product'} onclick={() => onToggleSort('product')}>
+        <span>Product</span>
+        <ArrowUpDown size={14} strokeWidth={2.1} />
+      </button>
+      <button type="button" class="sort-head" class:active={sortKey === 'packed'} onclick={() => onToggleSort('packed')}>
+        <span>Packed</span>
+        <ArrowUpDown size={14} strokeWidth={2.1} />
+      </button>
+      <button type="button" class="sort-head" class:active={sortKey === 'total'} onclick={() => onToggleSort('total')}>
+        <span>Total kg</span>
+        <ArrowUpDown size={14} strokeWidth={2.1} />
+      </button>
+      <button type="button" class="sort-head" class:active={sortKey === 'staff'} onclick={() => onToggleSort('staff')}>
+        <span>Packed by</span>
+        <ArrowUpDown size={14} strokeWidth={2.1} />
+      </button>
+      <button type="button" class="sort-head" class:active={sortKey === 'destination'} onclick={() => onToggleSort('destination')}>
+        <span>Destination</span>
+        <ArrowUpDown size={14} strokeWidth={2.1} />
+      </button>
+      <button type="button" class="sort-head col-notes-head" class:active={sortKey === 'notes'} onclick={() => onToggleSort('notes')}>
+        <span>Notes</span>
+        <ArrowUpDown size={14} strokeWidth={2.1} />
+      </button>
+      <span class="col-actions-head">Edit</span>
+    </div>
+
+    {#if isLoading}
+      {#each Array(5) as _, i (i)}
+        <div class="row row-skeleton" aria-hidden="true">
+          <span class="sk sk-date"></span>
+          <span class="sk sk-product"></span>
+          <span class="sk sk-packed"></span>
+          <span class="sk sk-staff"></span>
+          <span class="sk sk-qa"></span>
+        </div>
+      {/each}
+    {:else}
+      {#each paginatedEntries as entry (entry.id)}
+        {@const dest = destinationOf(entry)}
+        <div class="row" class:just-added={entry.id === highlightId}>
+          <span class="col-date">
+            <span class="cell-label">Date</span>
+            {formatDate(entry.production_date)}
+          </span>
+          <span class="col-product">
+            <span class="cell-label">Product</span>
+            <span class="product-name">{entry.product_name_snapshot}</span>
+          </span>
+          <span class="col-packed">
+            <span class="cell-label">Packed</span>
+            <span class="packed-main">{packedMain(entry)}</span>
+            <span class="packed-detail">{packedDetail(entry)}</span>
+          </span>
+          <span class="col-total">
+            <span class="cell-label">Total kg</span>
+            <span class="total-kg">{formatNumber(entry.calculated_kg)} kg</span>
+          </span>
+          <span class="col-staff">
+            <span class="cell-label">Packed by</span>
+            {entry.staff_name ?? '—'}
+          </span>
+          <span class="col-dest">
+            <span class="cell-label">Destination</span>
+            <span
+              class="pill"
+              class:pill-stock={dest.label === 'Stock'}
+              class:pill-order={dest.label === 'Order'}
+              class:pill-split={dest.label === 'Split'}
+            >{dest.label}</span>
+            {#if dest.detail}<span class="dest-detail">{dest.detail}</span>{/if}
+          </span>
+          <span class="col-actions">
+            <button
+              type="button"
+              class="row-action"
+              title="Edit this run"
+              aria-label="Edit this run"
+              onclick={() => onStartEdit(entry)}
+            >
+              <Pencil size={16} strokeWidth={2.2} />
+            </button>
+            <button
+              type="button"
+              class="row-action row-action-danger"
+              title="Delete this run"
+              aria-label="Delete this run"
+              disabled={deletingId === entry.id}
+              onclick={() => onRequestDelete(entry)}
+            >
+              <Trash2 size={16} strokeWidth={2.2} />
+            </button>
+          </span>
+          {#if entry.notes}
+            <p class="row-notes"><span class="cell-label">Note</span>{entry.notes}</p>
+          {/if}
+        </div>
+      {:else}
+        <div class="empty">
+          {#if filtersActive}
+            <p class="empty-title">No entries match your search</p>
+            <p class="empty-help">Try a wider date range, or clear the filters to see everything.</p>
+            <button type="button" class="clear-button" onclick={onClearFilters}>
+              <X size={16} strokeWidth={2.4} /> Clear filters
+            </button>
+          {:else}
+            <p class="empty-title">No packing logged yet</p>
+            <p class="empty-help">Use the inline entry area above to add your first run. It appears here immediately, newest first.</p>
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+
+  {#if sortedEntries.length > 0}
+    <div class="pagination">
+      <p class="pagination-summary">{pageStart}-{pageEnd} of {sortedEntries.length}</p>
+      <div class="pagination-actions">
+        <button type="button" class="page-button" disabled={page === 1} onclick={() => (page = Math.max(1, page - 1))}>
+          <ChevronLeft size={16} strokeWidth={2.2} />
+          <span>Previous</span>
+        </button>
+        <span class="page-indicator">Page {page} of {totalPages}</span>
+        <button type="button" class="page-button" disabled={page === totalPages} onclick={() => (page = Math.min(totalPages, page + 1))}>
+          <span>Next</span>
+          <ChevronRight size={16} strokeWidth={2.2} />
+        </button>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .history-shell {
+    display: grid;
+    gap: 0.95rem;
+  }
+
+  .log-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .log-title {
+    display: grid;
+    gap: 0.2rem;
+  }
+
+  .history-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+    margin: 0;
+    font-size: 1.16rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
+
+  .log-subtitle {
+    color: var(--color-text-secondary);
+    font-size: 0.9rem;
+  }
+
+  .find-button,
+  .apply-button,
+  .clear-button,
+  .retry-button,
+  .sort-head,
+  .page-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.45rem;
+    cursor: pointer;
+  }
+
+  .find-button {
+    position: relative;
+    min-height: 44px;
+    padding: 0.6rem 0.95rem;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
+    border-radius: 0.78rem;
+    background: var(--color-bg-surface);
+    color: var(--color-text-primary);
+    font-size: 0.95rem;
+    font-weight: 650;
+  }
+
+  .find-button.active {
+    border-color: var(--color-brand);
+    background: var(--color-brand-tint);
+    color: var(--color-success);
+  }
+
+  .find-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: var(--color-brand);
+  }
+
+  .filters {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
+    gap: 0.8rem;
+    align-items: end;
+    padding: 1rem;
+    border: 1px solid var(--color-border);
+    border-radius: 0.95rem;
+    background: color-mix(in srgb, var(--color-bg-surface) 82%, white);
+  }
+
+  .filters label {
+    display: grid;
+    gap: 0.32rem;
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+  }
+
+  .filters input,
+  .filters select {
+    min-height: 44px;
+    padding: 0.58rem 0.72rem;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, var(--color-border));
+    border-radius: 0.78rem;
+    font-size: 0.97rem;
+    color: var(--color-text-primary);
+    background: var(--color-bg-surface);
+  }
+
+  .filter-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+  }
+
+  .apply-button,
+  .clear-button,
+  .retry-button,
+  .page-button {
+    min-height: 42px;
+    padding: 0.55rem 0.82rem;
+    border: 1px solid var(--color-border);
+    border-radius: 0.72rem;
+    background: var(--color-bg-surface);
+    color: var(--color-text-primary);
+    font-size: 0.92rem;
+    font-weight: 650;
+  }
+
+  .apply-button {
+    border-color: var(--color-brand);
+    background: var(--color-brand);
+    color: #fff;
+  }
+
+  .clear-button {
+    color: var(--color-text-secondary);
+  }
+
+  .error {
+    display: flex;
+    align-items: center;
+    gap: 0.7rem;
+    flex-wrap: wrap;
+    padding: 0.95rem 1rem;
+    border: 1px solid #efc6c2;
+    border-radius: 0.9rem;
+    background: #fff4f2;
+    color: #8a1622;
+  }
+
+  .log {
+    border: 1px solid var(--color-border);
+    border-radius: 1rem;
+    background: var(--color-bg-surface);
+    overflow: clip;
+  }
+
+  .log-head,
+  .row {
+    display: grid;
+    grid-template-columns: 8rem minmax(0, 1.1fr) minmax(0, 0.95fr) 6rem minmax(0, 0.8fr) 10.5rem 4.8rem;
+    gap: 0.85rem;
+    align-items: center;
+  }
+
+  .log-head {
+    padding: 0.9rem 1.45rem;
+    border-bottom: 1px solid var(--color-divider);
+    background: color-mix(in srgb, var(--color-bg-app) 55%, var(--color-bg-surface));
+  }
+
+  .sort-head {
+    justify-content: flex-start;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--color-text-secondary);
+    font-size: 0.8rem;
+    font-weight: 750;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .sort-head.active,
+  .sort-head:hover {
+    color: var(--color-text-primary);
+  }
+
+  .row {
+    padding: 1rem 1.45rem;
+    border-bottom: 1px solid var(--color-divider);
+    transition: background-color 160ms ease;
+  }
+
+  .row:last-child {
+    border-bottom: 0;
+  }
+
+  .row:hover {
+    background: #fafbfc;
+  }
+
+  .row.just-added {
+    animation: flash-in 1.8s ease-out;
+  }
+
+  @keyframes flash-in {
+    0% { background: var(--color-brand-tint); }
+    100% { background: transparent; }
+  }
+
+  .col-product,
+  .col-dest,
+  .col-packed,
+  .col-total {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.1rem;
+  }
+
+  .product-name,
+  .packed-main,
+  .total-kg {
+    font-weight: 650;
+  }
+
+  .dest-detail,
+  .packed-detail {
+    font-size: 0.88rem;
+    color: var(--color-text-secondary);
+  }
+
+  .total-kg,
+  .packed-main,
+  .dest-detail {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .col-actions {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.3rem;
+  }
+
+  .col-actions-head {
+    justify-self: end;
+    color: var(--color-text-muted);
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .row-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.1rem;
+    height: 2.1rem;
+    padding: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 0.55rem;
+    background: var(--color-bg-surface);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
+  }
+
+  .row-action:hover {
+    border-color: var(--color-text-muted);
+    color: var(--color-text-primary);
+    background: #fafbfc;
+  }
+
+  .row-action-danger:hover {
+    border-color: #e2a8af;
+    color: #b3261e;
+    background: #fdecee;
+  }
+
+  .row-action:disabled,
+  .page-button:disabled,
+  .apply-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .row-notes {
+    grid-column: 1 / -1;
+    margin: 0.35rem 0 0;
+    padding-top: 0.65rem;
+    border-top: 1px dashed var(--color-divider);
+    font-size: 0.94rem;
+    color: var(--color-text-secondary);
+  }
+
+  .cell-label {
+    display: none;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--color-text-muted);
+  }
+
+  .col-notes-head {
+    display: none;
+  }
+
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.42rem 0.78rem;
+    border-radius: 999px;
+    font-size: 0.86rem;
+    font-weight: 650;
+    white-space: nowrap;
+  }
+
+  .pill-stock {
+    background: #e8f1fc;
+    color: #0b5cad;
+  }
+
+  .pill-order {
+    background: var(--color-brand-tint);
+    color: var(--color-success);
+  }
+
+  .pill-split {
+    background: #f3e8fc;
+    color: #6b21a8;
+  }
+
+  .row-skeleton {
+    padding: 1.15rem 1.45rem;
+    border-bottom: 1px solid var(--color-divider);
+  }
+
+  .sk {
+    height: 1.1rem;
+    border-radius: 0.4rem;
+    background: linear-gradient(90deg, #eef1f4 25%, #f6f8fa 50%, #eef1f4 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.3s ease-in-out infinite;
+  }
+
+  .sk-staff { width: 70%; }
+  .sk-qa { width: 6rem; height: 1.7rem; border-radius: 999px; }
+
+  @keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  .empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 3rem 1.5rem;
+    text-align: center;
+  }
+
+  .empty-title {
+    margin: 0;
+    font-size: 1.3rem;
+    font-weight: 650;
+    color: var(--color-text-primary);
+  }
+
+  .empty-help {
+    margin: 0;
+    font-size: 1.02rem;
+    color: var(--color-text-secondary);
+    max-width: 42ch;
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+    padding: 1rem 1.45rem 1.15rem;
+    border-top: 1px solid var(--color-divider);
+    background: color-mix(in srgb, var(--color-bg-app) 48%, var(--color-bg-surface));
+  }
+
+  .pagination-summary,
+  .page-indicator {
+    margin: 0;
+    color: var(--color-text-secondary);
+    font-size: 0.94rem;
+    font-weight: 600;
+  }
+
+  .pagination-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: 760px) {
+    .log-controls,
+    .filters,
+    .error {
+      padding-left: 1.15rem;
+      padding-right: 1.15rem;
+    }
+
+    .history-title {
+      font-size: 1.28rem;
+    }
+
+    .log-head {
+      display: none;
+    }
+
+    .row {
+      grid-template-columns: 1fr 1fr;
+      gap: 0.75rem 1rem;
+      padding: 1rem 1.15rem;
+    }
+
+    .col-product,
+    .row-notes {
+      grid-column: 1 / -1;
+    }
+
+    .cell-label {
+      display: block;
+      margin-bottom: 0.1rem;
+    }
+
+    .col-actions {
+      grid-column: 1 / -1;
+      justify-content: flex-start;
+      gap: 0.5rem;
+      padding-top: 0.5rem;
+      border-top: 1px dashed var(--color-divider);
+    }
+
+    .row-action {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+
+    .pagination {
+      padding-left: 1.15rem;
+      padding-right: 1.15rem;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .log-head,
+    .row {
+      grid-template-columns: 8rem minmax(0, 1.1fr) minmax(0, 0.95fr) 6rem minmax(0, 0.8fr) 10.5rem minmax(0, 1.2fr) 4.8rem;
+    }
+
+    .col-notes-head {
+      display: block;
+    }
+
+    .row-notes {
+      grid-column: 7;
+      align-self: center;
+      margin: 0;
+      padding-top: 0;
+      border-top: 0;
+      font-size: 0.95rem;
+    }
+
+    .col-actions {
+      grid-column: 8;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .row.just-added,
+    .sk {
+      animation: none;
+    }
+  }
+</style>

frontend/src/lib/components/throughput/ThroughputSuccessOverlay.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { CheckCircle2 } from 'lucide-svelte';
+  import { fade } from 'svelte/transition';
+
+  import type { ConfettiPiece } from '$lib/components/throughput/utils';
+
+  let { confetti }: { confetti: ConfettiPiece[] } = $props();
+</script>
+
+<div class="success-overlay" role="presentation" transition:fade={{ duration: 160 }}>
+  <div class="success-card" role="status" aria-live="polite">
+    <div class="confetti" aria-hidden="true">
+      {#each confetti as piece, i (i)}
+        <span
+          class="confetti-piece"
+          style="left:{piece.left}%; width:{piece.size}px; height:{piece.size}px; background:{piece.color}; animation-delay:{piece.delay}s; animation-duration:{piece.duration}s; --rot:{piece.rotate}deg; --drift:{piece.drift}px;"
+        ></span>
+      {/each}
+    </div>
+    <span class="success-icon"><CheckCircle2 size={44} strokeWidth={2.4} /></span>
+    <p class="success-title">Added</p>
+    <p class="success-text">Your packing run has been added to the log.</p>
+  </div>
+</div>
+
+<style>
+  .success-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 90;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .success-card {
+    position: relative;
+    overflow: hidden;
+    width: min(30rem, 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.7rem;
+    padding: 2.6rem 2.8rem 2.8rem;
+    border: 1px solid var(--color-border);
+    border-radius: 1.25rem;
+    background: var(--color-bg-surface);
+    box-shadow: 0 28px 70px -18px rgba(0, 0, 0, 0.45);
+    text-align: center;
+    animation: success-pop 240ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  }
+
+  .success-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 4.2rem;
+    height: 4.2rem;
+    border-radius: 50%;
+    background: var(--color-brand-tint);
+    color: var(--color-brand);
+  }
+
+  .success-title,
+  .success-text {
+    margin: 0;
+  }
+
+  .success-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--color-text-primary);
+  }
+
+  .success-text {
+    font-size: 1rem;
+    line-height: 1.45;
+    color: var(--color-text-secondary);
+  }
+
+  .confetti {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .confetti-piece {
+    position: absolute;
+    top: -12%;
+    display: block;
+    border-radius: 2px;
+    opacity: 0;
+    animation-name: confetti-fall;
+    animation-timing-function: ease-in;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes success-pop {
+    from { opacity: 0; transform: scale(0.82); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes confetti-fall {
+    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
+    12% { opacity: 1; }
+    100% { transform: translate(var(--drift), 340px) rotate(var(--rot)); opacity: 0.9; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .success-card {
+      animation: none;
+    }
+
+    .confetti {
+      display: none;
+    }
+  }
+</style>

frontend/src/lib/components/throughput/ThroughputSummary.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+  import { CalendarDays, CalendarRange, Carrot, Gauge, TrendingUp, Wheat } from 'lucide-svelte';
+
+  import { MIX_RANGES } from '$lib/components/throughput/utils';
+
+  let {
+    today,
+    weekRangeLabel,
+    heroStats,
+    mixTotals,
+    mixRangeKey = $bindable<(typeof MIX_RANGES)[number]['key']>('4w'),
+    formatDate,
+    formatNumber
+  }: {
+    today: string;
+    weekRangeLabel: string;
+    heroStats: { today: number; thisWeek: number; avgFourWeek: number };
+    mixTotals: { horse: number; grain: number };
+    mixRangeKey?: (typeof MIX_RANGES)[number]['key'];
+    formatDate: (value: string) => string;
+    formatNumber: (value: number | null | undefined, digits?: number) => string;
+  } = $props();
+</script>
+
+<header class="throughput-summary" aria-label="Throughput summary">
+  <div class="summary-heading">
+    <span class="summary-icon"><Gauge size={17} strokeWidth={2.2} /></span>
+    <h2>Throughput Overview</h2>
+    <div class="range-select" role="group" aria-label="Customer mix date range">
+      {#each MIX_RANGES as range (range.key)}
+        <button
+          type="button"
+          class="range-option"
+          class:active={mixRangeKey === range.key}
+          aria-pressed={mixRangeKey === range.key}
+          onclick={() => (mixRangeKey = range.key)}
+        >{range.label}</button>
+      {/each}
+    </div>
+  </div>
+  <dl class="facts">
+    <div class="fact">
+      <dt><span class="fact-icon"><CalendarDays size={16} strokeWidth={2.2} /></span>Today</dt>
+      <dd>{formatNumber(heroStats.today)} <span class="fact-unit">kg</span></dd>
+      <p class="fact-sub">{formatDate(today)}</p>
+    </div>
+    <div class="fact">
+      <dt><span class="fact-icon"><CalendarRange size={16} strokeWidth={2.2} /></span>This week</dt>
+      <dd>{formatNumber(heroStats.thisWeek)} <span class="fact-unit">kg</span></dd>
+      <p class="fact-sub">{weekRangeLabel}</p>
+    </div>
+    <div class="fact">
+      <dt><span class="fact-icon"><TrendingUp size={16} strokeWidth={2.2} /></span>4-week average</dt>
+      <dd>{formatNumber(heroStats.avgFourWeek)} <span class="fact-unit">kg</span></dd>
+      <p class="fact-sub">Per week, last 4 weeks</p>
+    </div>
+  </dl>
+  <dl class="mix-facts" aria-label="Throughput by customer">
+    <div class="fact">
+      <dt><span class="fact-icon"><Carrot size={16} strokeWidth={2.2} /></span>Horse Mix</dt>
+      <dd>{formatNumber(mixTotals.horse)} <span class="fact-unit">kg</span></dd>
+      <p class="fact-sub">PHF Horsemix · {MIX_RANGES.find((r) => r.key === mixRangeKey)?.sub ?? 'last 4 weeks'}</p>
+    </div>
+    <div class="fact">
+      <dt><span class="fact-icon"><Wheat size={16} strokeWidth={2.2} /></span>Grain Mix</dt>
+      <dd>{formatNumber(mixTotals.grain)} <span class="fact-unit">kg</span></dd>
+      <p class="fact-sub">All other customers · {MIX_RANGES.find((r) => r.key === mixRangeKey)?.sub ?? 'last 4 weeks'}</p>
+    </div>
+  </dl>
+</header>
+
+<style>
+  .throughput-summary {
+    display: grid;
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
+    border-radius: 0.95rem;
+    background:
+      radial-gradient(circle at top right, color-mix(in srgb, var(--color-brand) 12%, transparent), transparent 45%),
+      linear-gradient(180deg, color-mix(in srgb, var(--color-brand) 5%, var(--color-bg-surface)), var(--color-bg-surface));
+  }
+
+  .summary-heading {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.55rem 0.75rem;
+    padding: 1rem 1rem 0;
+  }
+
+  .summary-heading h2 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+  }
+
+  .summary-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.9rem;
+    height: 1.9rem;
+    border-radius: 0.65rem;
+    background: var(--color-brand-tint);
+    color: var(--color-brand);
+  }
+
+  .range-select {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+    margin-left: auto;
+    padding: 0.28rem;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
+    border-radius: 0.8rem;
+    background: color-mix(in srgb, var(--color-bg-surface) 55%, transparent);
+  }
+
+  .range-option {
+    padding: 0.5rem 0.95rem;
+    border: 0;
+    border-radius: 0.6rem;
+    background: transparent;
+    color: var(--color-text-secondary);
+    font-size: 0.95rem;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
+  }
+
+  .range-option:hover {
+    color: var(--color-text-primary);
+  }
+
+  .range-option.active {
+    background: var(--color-brand);
+    color: #fff;
+    box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--color-brand) 85%, transparent);
+  }
+
+  .facts,
+  .mix-facts {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.8rem;
+    padding: 1rem;
+  }
+
+  .mix-facts {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    padding-top: 0;
+  }
+
+  .fact {
+    container-type: inline-size;
+    position: relative;
+    display: grid;
+    gap: 0.28rem;
+    min-height: 7rem;
+    padding: 1rem 1rem 0.9rem;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, var(--color-border));
+    border-radius: 0.95rem;
+    background: color-mix(in srgb, var(--color-bg-surface) 84%, white);
+    box-shadow: 0 12px 36px -28px rgba(15, 23, 42, 0.28);
+  }
+
+  .fact dt {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    margin: 0;
+    font-size: 0.83rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+  }
+
+  .fact-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.7rem;
+    height: 1.7rem;
+    border-radius: 0.6rem;
+    background: var(--color-brand-tint);
+    color: var(--color-brand);
+  }
+
+  .fact dd {
+    margin: 0;
+    font-size: clamp(1.85rem, 4.5cqi, 2.3rem);
+    font-weight: 700;
+    line-height: 1.05;
+    letter-spacing: -0.03em;
+    color: var(--color-text-primary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .fact-unit {
+    font-size: 0.45em;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+  }
+
+  .fact-sub {
+    margin: 0.05rem 0 0;
+    color: var(--color-text-secondary);
+    font-size: 0.88rem;
+    line-height: 1.35;
+  }
+
+  @media (min-width: 1024px) {
+    .throughput-summary {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: 0.75rem;
+      padding: 1rem;
+    }
+
+    .facts,
+    .mix-facts {
+      display: contents;
+    }
+
+    .summary-heading {
+      grid-column: 1 / -1;
+      padding: 0;
+    }
+
+    .fact {
+      min-height: 7rem;
+      padding: 0.9rem 0.85rem;
+    }
+
+    .fact-sub {
+      font-size: 0.78rem;
+    }
+  }
+
+  @media (max-width: 760px) {
+    .facts {
+      grid-template-columns: 1fr;
+      padding: 0.9rem;
+    }
+
+    .mix-facts {
+      grid-template-columns: 1fr;
+      padding: 0 0.9rem 0.9rem;
+    }
+  }
+</style>

frontend/src/lib/components/throughput/utils.ts

@@ -0,0 +1,77 @@
+import type { ThroughputEntry } from '$lib/types';
+
+export type SortKey = 'date' | 'product' | 'packed' | 'total' | 'staff' | 'destination' | 'notes';
+export type SortDirection = 'asc' | 'desc';
+
+export type ConfettiPiece = {
+  left: number;
+  delay: number;
+  duration: number;
+  color: string;
+  rotate: number;
+  drift: number;
+  size: number;
+};
+
+export const CONFETTI_COLORS = ['#16a34a', '#f59e0b', '#3b82f6', '#ec4899', '#8b5cf6', '#ef4444'];
+
+export const MIX_RANGES = [
+  { key: '7d', label: '7 days', sub: 'last 7 days', days: 7 },
+  { key: '4w', label: '4 weeks', sub: 'last 4 weeks', days: 28 },
+  { key: '6w', label: '6 weeks', sub: 'last 6 weeks', days: 42 },
+  { key: '12w', label: '12 weeks', sub: 'last 12 weeks', days: 84 }
+] as const;
+
+export function compareText(a: string | null | undefined, b: string | null | undefined) {
+  return (a ?? '').localeCompare(b ?? '', undefined, { sensitivity: 'base' });
+}
+
+export function compareDate(a: string | null | undefined, b: string | null | undefined) {
+  const aTime = a ? Date.parse(a) : Number.NEGATIVE_INFINITY;
+  const bTime = b ? Date.parse(b) : Number.NEGATIVE_INFINITY;
+  return aTime - bTime;
+}
+
+export function toISODate(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+export function ausToday(): Date {
+  const ymd = new Intl.DateTimeFormat('en-CA', {
+    timeZone: 'Australia/Sydney',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }).format(new Date());
+  const [y, m, d] = ymd.split('-').map(Number);
+  return new Date(y, m - 1, d);
+}
+
+export function startOfWeekMonday(d: Date): Date {
+  const start = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  const dow = (start.getDay() + 6) % 7;
+  start.setDate(start.getDate() - dow);
+  return start;
+}
+
+export function addDays(d: Date, days: number): Date {
+  const next = new Date(d);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+
+export function buildConfetti(colors = CONFETTI_COLORS): ConfettiPiece[] {
+  return Array.from({ length: 42 }, (_, i) => ({
+    left: Math.random() * 100,
+    delay: Math.random() * 1.2,
+    duration: 1 + Math.random() * 0.8,
+    color: colors[i % colors.length],
+    rotate: 220 + Math.random() * 360,
+    drift: (Math.random() - 0.5) * 60,
+    size: 6 + Math.random() * 6
+  }));
+}
+
+export function isStockEntry(entry: ThroughputEntry): boolean {
+  return entry.for_stock || (!entry.for_order && /stock/i.test(entry.notes ?? ''));
+}

frontend/src/routes/+layout.svelte

@@ -7,7 +7,7 @@
   import '$lib/theme';
   import { beforeNavigate, afterNavigate } from '$app/navigation';
   import { page } from '$app/state';
-  import ClientShell from '$lib/components/ClientShell.svelte';
+  import AppShell from '$lib/components/AppShell.svelte';
   import CustomerPortalShell from '$lib/components/CustomerPortalShell.svelte';
   import Toast from '$lib/components/Toast.svelte';
   import { clientSession } from '$lib/session';
@@ -50,9 +50,9 @@
     {@render children()}
   </CustomerPortalShell>
 {:else}
-  <ClientShell>
+  <AppShell>
     {@render children()}
-  </ClientShell>
+  </AppShell>
 {/if}
 
 <Toast />