Add dashboard chrome to POS and collapsible sidebar

Wrap the POS terminal in the sidebar + topbar layout via a nested
fullscreen layout, and make the sidebar collapse to an icon-only rail
with a persisted toggle so operators keep navigation on the POS screen.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/dashboard/src/app/[locale]/(fullscreen)/pos/layout.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useLocale } from "next-intl";
+import { Sidebar } from "@/components/layout/sidebar";
+import { Topbar } from "@/components/layout/topbar";
+import { CafeThemeProvider } from "@/components/theme/cafe-theme-provider";
+
+/**
+ * POS route layout — wraps the terminal in the standard dashboard chrome
+ * (collapsible sidebar + topbar) but keeps the main content area
+ * overflow-hidden so PosScreen can manage its own internal scrolling.
+ */
+export default function PosLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const locale = useLocale();
+  const isRtl = locale !== "en";
+
+  const mainColumn = (
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <Topbar />
+      <main className="min-h-0 flex-1 overflow-hidden bg-background p-3 md:p-4">
+        {children}
+      </main>
+    </div>
+  );
+
+  return (
+    <CafeThemeProvider>
+      <div
+        className="flex h-screen min-h-0 overflow-hidden bg-background"
+        dir={isRtl ? "rtl" : "ltr"}
+      >
+        {isRtl ? (
+          <>
+            <Sidebar side="right" />
+            {mainColumn}
+          </>
+        ) : (
+          <>
+            <Sidebar side="left" />
+            {mainColumn}
+          </>
+        )}
+      </div>
+    </CafeThemeProvider>
+  );
+}

web/dashboard/src/app/[locale]/(fullscreen)/pos/page.tsx

@@ -1,16 +1,11 @@
 import { Suspense } from "react";
-import { CafeThemeProvider } from "@/components/theme/cafe-theme-provider";
 import { PosScreen } from "@/components/pos/pos-screen";
 
-/** Full-viewport POS terminal — no sidebar, no topbar. */
+/** POS terminal — chrome (sidebar + topbar) is provided by layout.tsx */
 export default function PosPage() {
   return (
-    <CafeThemeProvider>
-      <div className="flex h-screen min-h-0 flex-col overflow-hidden bg-background p-4 md:p-6">
-        <Suspense fallback={null}>
-          <PosScreen />
-        </Suspense>
-      </div>
-    </CafeThemeProvider>
+    <Suspense fallback={null}>
+      <PosScreen />
+    </Suspense>
   );
 }

web/dashboard/src/components/layout/sidebar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Link, usePathname } from "@/i18n/routing";
 import { canSeeNavGroup, canSeeNavItem } from "@/lib/auth-permissions";
@@ -18,6 +18,17 @@ import { cn } from "@/lib/utils";
 
 type OpenGroupsState = Partial<Record<NavGroupId, boolean>>;
 
+const SIDEBAR_COLLAPSED_STORAGE_KEY = "meezi.sidebar.collapsed";
+
+function readStoredCollapsed(): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    return localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
 function readStoredOpenGroups(): OpenGroupsState {
   if (typeof window === "undefined") return {};
   try {
@@ -50,17 +61,22 @@ function NavLink({
   item,
   label,
   active,
+  collapsed,
 }: {
   item: NavItemDef;
   label: string;
   active: boolean;
+  collapsed: boolean;
 }) {
   const Icon = item.icon;
   return (
     <Link
       href={item.href}
+      title={collapsed ? label : undefined}
+      aria-label={collapsed ? label : undefined}
       className={cn(
-        "group flex items-center rounded-lg px-3 py-2 text-sm transition-colors cursor-pointer",
+        "group flex items-center rounded-lg py-2 text-sm transition-colors cursor-pointer",
+        collapsed ? "justify-center px-0" : "px-3",
         active
           ? "bg-accent text-accent-foreground font-medium"
           : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
@@ -68,11 +84,12 @@ function NavLink({
     >
       <Icon
         className={cn(
-          "h-4 w-4 shrink-0 me-2.5",
+          "h-4 w-4 shrink-0",
+          collapsed ? "" : "me-2.5",
           active ? "text-primary" : "text-muted-foreground group-hover:text-foreground"
         )}
       />
-      <span className="min-w-0 truncate">{label}</span>
+      {!collapsed && <span className="min-w-0 truncate">{label}</span>}
     </Link>
   );
 }
@@ -86,6 +103,7 @@ function NavGroupSection({
   role,
   branchId,
   tItem,
+  collapsed,
 }: {
   group: NavGroupDef;
   title: string;
@@ -95,12 +113,35 @@ function NavGroupSection({
   role: string | undefined;
   branchId: string | null | undefined;
   tItem: (key: string) => string;
+  collapsed: boolean;
 }) {
   const visibleItems = group.items.filter((item) =>
     canSeeNavItem(item.key, role, branchId)
   );
   if (visibleItems.length === 0) return null;
 
+  // Collapsed: drop the group header, show items as a flat icon-only list
+  // with a subtle divider between groups.
+  if (collapsed) {
+    return (
+      <div className="mb-1 space-y-0.5 border-t border-border/60 pt-1 first:border-t-0 first:pt-0">
+        {visibleItems.map((item) => {
+          const active =
+            pathname === item.href || pathname.startsWith(`${item.href}/`);
+          return (
+            <NavLink
+              key={item.key}
+              item={item}
+              label={tItem(item.key)}
+              active={active}
+              collapsed
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
   return (
     <div className="mb-1">
       <button
@@ -137,6 +178,7 @@ function NavGroupSection({
                   item={item}
                   label={tItem(item.key)}
                   active={active}
+                  collapsed={false}
                 />
               );
             })}
@@ -158,6 +200,30 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
   const branchId = user?.branchId ?? null;
 
   const [openGroups, setOpenGroups] = useState<OpenGroupsState>(buildDefaultOpenGroups);
+  const [collapsed, setCollapsed] = useState<boolean>(readStoredCollapsed);
+
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev;
+      try {
+        localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, next ? "1" : "0");
+      } catch {
+        /* ignore quota */
+      }
+      return next;
+    });
+  }, []);
+
+  // Chevron points "inward" (toward the panel) to collapse, "outward" to expand.
+  // For a left-docked sidebar inward = left; for a right-docked one inward = right.
+  const CollapseIcon =
+    side === "left"
+      ? collapsed
+        ? ChevronRight
+        : ChevronLeft
+      : collapsed
+        ? ChevronLeft
+        : ChevronRight;
 
   const visibleGroups = useMemo(
     () =>
@@ -190,21 +256,30 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
   return (
     <aside
       className={cn(
-        "flex w-56 shrink-0 flex-col bg-background",
+        "flex shrink-0 flex-col bg-background overflow-hidden",
+        "transition-[width] duration-200 ease-in-out",
+        collapsed ? "w-14" : "w-56",
         "border-border",
         side === "right" ? "border-s" : "border-e"
       )}
     >
       {/* Logo */}
-      <div className="flex h-14 items-center gap-2.5 px-4 border-b border-border">
+      <div
+        className={cn(
+          "flex h-14 shrink-0 items-center border-b border-border",
+          collapsed ? "justify-center px-0" : "gap-2.5 px-4"
+        )}
+      >
         <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary/10">
           <svg viewBox="0 0 24 24" className="h-4 w-4 fill-primary" aria-hidden>
             <path d="M3 6h18v2H3V6zm2 4h14v2H5v-2zm-2 4h18v2H3v-2zm4 4h10v2H7v-2z" />
           </svg>
         </div>
-        <span className="text-sm font-bold tracking-tight text-foreground">
-          {tBrand("name")}
-        </span>
+        {!collapsed && (
+          <span className="min-w-0 truncate text-sm font-bold tracking-tight text-foreground">
+            {tBrand("name")}
+          </span>
+        )}
       </div>
 
       {/* Nav */}
@@ -220,20 +295,30 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
           /* Skeleton — shown for ~50ms until Zustand rehydrates from localStorage.
              Prevents the flash where all groups are briefly visible before
              permission-based filtering kicks in for branch-scoped accounts. */
-          <div className="space-y-3 px-1 pt-1">
-            {[40, 32, 40, 32, 40].map((w, i) => (
-              <div key={i} className="space-y-1.5">
-                <div className="h-2 w-20 animate-pulse rounded bg-muted" />
-                {Array.from({ length: i % 2 === 0 ? 3 : 2 }).map((_, j) => (
-                  <div
-                    key={j}
-                    className={`h-8 animate-pulse rounded-lg bg-muted`}
-                    style={{ width: `${w + j * 4}%` }}
-                  />
-                ))}
-              </div>
-            ))}
-          </div>
+          collapsed ? (
+            <div className="space-y-1.5">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className="flex justify-center">
+                  <div className="h-8 w-8 animate-pulse rounded-lg bg-muted" />
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="space-y-3 px-1 pt-1">
+              {[40, 32, 40, 32, 40].map((w, i) => (
+                <div key={i} className="space-y-1.5">
+                  <div className="h-2 w-20 animate-pulse rounded bg-muted" />
+                  {Array.from({ length: i % 2 === 0 ? 3 : 2 }).map((_, j) => (
+                    <div
+                      key={j}
+                      className="h-8 animate-pulse rounded-lg bg-muted"
+                      style={{ width: `${w + j * 4}%` }}
+                    />
+                  ))}
+                </div>
+              ))}
+            </div>
+          )
         ) : (
           visibleGroups.map((group) => {
             const isOpen = openGroups[group.id] ?? group.defaultOpen;
@@ -248,30 +333,61 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
                 role={role}
                 branchId={branchId}
                 tItem={(key) => t(key)}
+                collapsed={collapsed}
               />
             );
           })
         )}
       </nav>
 
-      {/* Footer — user role badge */}
-      {user && (
-        <div className="border-t border-border px-4 py-3">
-          <div className="flex items-center gap-2">
-            <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10">
+      {/* Footer — user info + collapse toggle */}
+      <div className="shrink-0 border-t border-border">
+        {/* User badge */}
+        {user && (
+          <div
+            className={cn(
+              "flex items-center py-3",
+              collapsed ? "justify-center px-0" : "gap-2 px-4"
+            )}
+          >
+            <div
+              className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10"
+              title={collapsed ? (user.actor ?? user.userId) : undefined}
+            >
               <span className="text-[11px] font-semibold text-primary">
                 {(user.actor ?? user.role).charAt(0).toUpperCase()}
               </span>
             </div>
-            <div className="min-w-0 flex-1">
-              <p className="truncate text-xs font-medium text-foreground">
-                {user.actor ?? user.userId}
-              </p>
-              <p className="truncate text-[10px] text-muted-foreground">{user.role}</p>
-            </div>
+            {!collapsed && (
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-xs font-medium text-foreground">
+                  {user.actor ?? user.userId}
+                </p>
+                <p className="truncate text-[10px] text-muted-foreground">
+                  {user.role}
+                </p>
+              </div>
+            )}
           </div>
-        </div>
-      )}
+        )}
+
+        {/* Collapse toggle */}
+        <button
+          type="button"
+          onClick={toggleCollapsed}
+          title={collapsed ? t("expandSidebar") : t("collapseSidebar")}
+          aria-label={collapsed ? t("expandSidebar") : t("collapseSidebar")}
+          className={cn(
+            "flex w-full items-center gap-2 border-t border-border/50 py-2.5 text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground cursor-pointer",
+            collapsed ? "justify-center px-0" : "px-4"
+          )}
+        >
+          <CollapseIcon className="h-4 w-4 shrink-0" aria-hidden />
+          {!collapsed && (
+            <span className="text-xs">{t("collapseSidebar")}</span>
+          )}
+        </button>
+      </div>
     </aside>
   );
 }

web/dashboard/src/components/pos/pos-screen.tsx

@@ -7,7 +7,6 @@ import { useTranslations, useLocale } from "next-intl";
 import {
   ChevronLeft,
   ChevronRight,
-  LayoutDashboard,
   Minus,
   Package,
   Plus,
@@ -902,17 +901,6 @@ export function PosScreen() {
         </Button>
 
         <div className="flex-1" />
-
-        {/* Dashboard shortcut — only visible to Owner / Manager */}
-        {isManager && (
-          <a
-            href="/"
-            className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          >
-            <LayoutDashboard className="size-4" />
-            <span className="hidden sm:inline">{cafeName}</span>
-          </a>
-        )}
       </div>
 
       {/* ── Pay mode ──────────────────────────────────────────────────────── */}