Move working documents to it's own area

frontend/src/lib/components/ClientShell.svelte

@@ -13,26 +13,34 @@
     keywords: string;
   };
 
-  const navigation = [
+  type NavItem = {
-    { href: '/', label: 'Overview', shortLabel: 'OV' },
+    href: string;
+    label: string;
+    shortLabel: string;
+    icon?: 'home';
+  };
+
+  const dashboardItem: NavItem = { href: '/', label: 'Dashboard', shortLabel: 'DB', icon: 'home' };
+  const workingDocumentItems: NavItem[] = [
     { href: '/raw-materials', label: 'Raw Materials', shortLabel: 'RM' },
     { href: '/mixes', label: 'Mix Master', shortLabel: 'MM' },
     { href: '/products', label: 'Products', shortLabel: 'PR' },
     { href: '/scenarios', label: 'Scenarios', shortLabel: 'SC' }
   ];
+  const navigation = [dashboardItem, ...workingDocumentItems];
 
   const footerLinks = [
     { href: '/products', label: 'Delivered Pricing', shortLabel: 'DP' },
     { href: '/scenarios', label: 'Planning View', shortLabel: 'PV' }
   ];
-  const primaryBottomNavigation = navigation.slice(0, 4);
+  const primaryBottomNavigation = [dashboardItem, ...workingDocumentItems.slice(0, 3)];
 
   const searchItems: SearchItem[] = [
     {
       href: '/',
-      label: 'Open Hunter Overview',
+      label: 'Open Dashboard',
       description: 'Jump to the Hunter Premium Produce workspace summary.',
-      keywords: 'hunter premium produce overview dashboard workspace'
+      keywords: 'hunter premium produce overview dashboard workspace home'
     },
     {
       href: '/raw-materials',
@@ -92,7 +100,7 @@
   }
 
   function pageTitle(pathname: string) {
-    return navigation.find((item) => matchesRoute(item.href, pathname))?.label ?? 'Overview';
+    return navigation.find((item) => matchesRoute(item.href, pathname))?.label ?? 'Dashboard';
   }
 
   function pageDescription(pathname: string) {
@@ -248,14 +256,48 @@
         </button>
 
         <nav class="nav-list" aria-label="Client navigation">
-          {#each navigation as item}
+          <a class:active={matchesRoute(dashboardItem.href, page.url.pathname)} href={dashboardItem.href}>
-            <a class:active={matchesRoute(item.href, page.url.pathname)} href={item.href}>
+            <span class="nav-icon">
-              <span class="nav-icon">{item.shortLabel}</span>
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
-              <span>{item.label}</span>
+                <path
-            </a>
+                  d="M3.75 10.5 12 3.75l8.25 6.75"
-          {/each}
+                  stroke="currentColor"
+                  stroke-width="1.85"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M5.25 9.75v9h13.5v-9"
+                  stroke="currentColor"
+                  stroke-width="1.85"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M10.125 18.75v-5.25h3.75v5.25"
+                  stroke="currentColor"
+                  stroke-width="1.85"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </span>
+            <span>{dashboardItem.label}</span>
+          </a>
         </nav>
 
+        <div class="nav-group" aria-label="Working documents">
+          <p class="nav-group-label">Working Documents</p>
+          <nav class="nav-sublist" aria-label="Working document pages">
+            {#each workingDocumentItems as item}
+              <a class:active={matchesRoute(item.href, page.url.pathname)} href={item.href}>
+                <span class="nav-icon">{item.shortLabel}</span>
+                <span>{item.label}</span>
+              </a>
+            {/each}
+          </nav>
+        </div>
+
         <div class="sidebar-footer">
           {#each footerLinks as item}
             <a href={item.href}>
@@ -346,7 +388,7 @@
                   {$sessionHydrated
                     ? $clientSession
                       ? $clientSession.email
-                      : 'Return to the overview page to sign in.'
+                      : 'Return to the dashboard page to sign in.'
                     : 'Waiting for the browser session check to complete.'}
                 </span>
               </div>
@@ -389,7 +431,35 @@
   <nav class="bottom-nav" aria-label="Tablet navigation">
     {#each primaryBottomNavigation as item}
       <a class:active={matchesRoute(item.href, page.url.pathname)} href={item.href}>
-        <span class="bottom-nav-icon">{item.shortLabel}</span>
+        <span class="bottom-nav-icon">
+          {#if item.icon === 'home'}
+            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path
+                d="M3.75 10.5 12 3.75l8.25 6.75"
+                stroke="currentColor"
+                stroke-width="1.85"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M5.25 9.75v9h13.5v-9"
+                stroke="currentColor"
+                stroke-width="1.85"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M10.125 18.75v-5.25h3.75v5.25"
+                stroke="currentColor"
+                stroke-width="1.85"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          {:else}
+            {item.shortLabel}
+          {/if}
+        </span>
         <span>{item.label}</span>
       </a>
     {/each}
@@ -428,12 +498,44 @@
 
       <div class="drawer-grid">
         <nav class="drawer-section" aria-label="All workspace pages">
-          {#each navigation as item}
+          <a class:active={matchesRoute(dashboardItem.href, page.url.pathname)} href={dashboardItem.href} onclick={() => (navOpen = false)}>
-            <a class:active={matchesRoute(item.href, page.url.pathname)} href={item.href} onclick={() => (navOpen = false)}>
+            <span class="nav-icon">
-              <span class="nav-icon">{item.shortLabel}</span>
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
-              <span>{item.label}</span>
+                <path
-            </a>
+                  d="M3.75 10.5 12 3.75l8.25 6.75"
-          {/each}
+                  stroke="currentColor"
+                  stroke-width="1.85"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M5.25 9.75v9h13.5v-9"
+                  stroke="currentColor"
+                  stroke-width="1.85"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M10.125 18.75v-5.25h3.75v5.25"
+                  stroke="currentColor"
+                  stroke-width="1.85"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </span>
+            <span>{dashboardItem.label}</span>
+          </a>
+
+          <div class="drawer-group">
+            <p class="drawer-group-label">Working Documents</p>
+            {#each workingDocumentItems as item}
+              <a class:active={matchesRoute(item.href, page.url.pathname)} href={item.href} onclick={() => (navOpen = false)}>
+                <span class="nav-icon">{item.shortLabel}</span>
+                <span>{item.label}</span>
+              </a>
+            {/each}
+          </div>
         </nav>
 
         <div class="drawer-section drawer-actions">
@@ -725,12 +827,14 @@
   }
 
   .nav-list,
+  .nav-sublist,
   .sidebar-footer {
     display: grid;
     gap: 0.3rem;
   }
 
   .nav-list a,
+  .nav-sublist a,
   .sidebar-footer a {
     display: flex;
     align-items: center;
@@ -742,22 +846,70 @@
   }
 
   .nav-list a:hover,
+  .nav-sublist a:hover,
   .sidebar-footer a:hover,
-  .nav-list a.active {
+  .nav-list a.active,
+  .nav-sublist a.active {
     background: var(--green-soft);
   }
 
-  .nav-list a.active {
+  .nav-list a.active,
+  .nav-sublist a.active {
     color: var(--green-deep);
     font-weight: 600;
   }
 
+  .nav-group {
+    display: grid;
+    gap: 0.55rem;
+    padding-top: 0.15rem;
+  }
+
+  .nav-group-label,
+  .drawer-group-label {
+    margin: 0;
+    color: var(--muted);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .nav-group-label {
+    padding: 0 0.68rem;
+  }
+
+  .nav-sublist {
+    position: relative;
+    padding-left: 1rem;
+  }
+
+  .nav-sublist::before {
+    content: '';
+    position: absolute;
+    top: 0.4rem;
+    bottom: 0.4rem;
+    left: 0.7rem;
+    width: 1px;
+    background: var(--line);
+  }
+
+  .nav-sublist a {
+    position: relative;
+  }
+
   .nav-icon {
     width: 1.56rem;
     height: 1.56rem;
     border-radius: 0.56rem;
   }
 
+  .nav-icon svg,
+  .bottom-nav-icon svg {
+    width: 0.9rem;
+    height: 0.9rem;
+  }
+
   .nav-icon.muted {
     background: linear-gradient(135deg, #95a39b 0%, #6e7c73 100%);
   }
@@ -1271,6 +1423,16 @@
       background: var(--green-soft);
     }
 
+    .drawer-group {
+      display: grid;
+      gap: 0.4rem;
+      padding-top: 0.35rem;
+    }
+
+    .drawer-group-label {
+      padding: 0 0.2rem;
+    }
+
     .drawer-footer {
       display: grid;
       gap: 0.5rem;

frontend/src/routes/+page.svelte

@@ -270,17 +270,17 @@
 {:else if !$clientSession}
   <section class="dashboard-intro">
     <div>
-      <p class="eyebrow">Client Workspace</p>
+     <!-- <p class="eyebrow">Client Workspace</p>-->
-      <h2>Hunter Premium Produce costing overview.</h2>
+      <h2>Welcome to the Hunter Premium Produce App</h2>
-      <p>Sign in to load live input pricing, mixes, delivered products, and planning scenarios.</p>
+      <p>Sign in to load input pricing, Mix Master products, and Scenario Builder.</p>
     </div>
   </section>
 
   <section class="workspace-banner login-banner">
     <div>
       <p class="eyebrow">Client Sign-In</p>
-      <h3>Authenticate before the frontend can return any Hunter Premium Produce data.</h3>
+      <h3>Login to Hunter Premium Produce</h3>
-      <p>`operator@example.com` is the client account. Lean 101 administration is isolated under `/admin`.</p>
+      <p>Enter your username & password to begin</p>
     </div>
 
     <form class="signin-form" onsubmit={handleLogin}>