feat(dashboard): simplify navigation — frequency-based IA
CI/CD / CI · API (dotnet build + test) (push) Successful in 47s
CI/CD / CI · Admin API (dotnet build) (push) Successful in 28s
CI/CD / CI · Dashboard (tsc) (push) Successful in 1m6s
CI/CD / CI · Admin Web (tsc) (push) Successful in 40s
CI/CD / CI · Website (tsc) (push) Successful in 44s
CI/CD / CI · Koja (tsc) (push) Successful in 50s
CI/CD / Deploy · all services (push) Successful in 2m43s

The sidebar had 22 items in 5 accordion groups, all defaulting closed:
first visit showed five vague headers and zero destinations, there was
no Dashboard/Home link at all, and rare pages (taxes, subscription) had
equal weight with POS. Restructured around usage frequency:

- Flat primary (always visible, no header): Dashboard, POS, Tables,
  Kitchen, Queue, Reservations, Menu, Reports
- Two collapsible groups: Customers & marketing (crm, coupons, sms,
  reviews, discover) and Café management (inventory, expenses, shifts,
  taxes, hr, branches)
- Footer utility icons: settings, subscription, support
- Removed "notifications" from the nav (duplicate of the topbar bell)

Other fixes folded in:
- Deleted [locale]/page.tsx which redirected "/" to /pos — it made the
  POS exit button a no-op loop and left OverviewScreen unreachable.
  "/" now renders the overview home; login still lands on /pos.
- Branch gating moved from group-level to an item whitelist
  (BRANCH_ALLOWED_NAV_KEYS) — also closes the hole where branch
  accounts could deep-link to /reports etc. past the RouteGuard.
- RouteGuard now checks footer items too (subscription stays gated).
- revalidate=300 on the locale layout: Next emitted s-maxage=31536000
  and the WCDN edge kept serving year-old HTML shells after deploys.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-11 22:06:59 +03:30
parent e0c786fcd1
commit d811b7d6d5
10 changed files with 177 additions and 129 deletions
+4 -14
View File
@@ -1,4 +1,4 @@
import { BRANCH_ONLY_NAV_GROUP, type NavGroupId, type NavItemKey } from "@/lib/sidebar-nav";
import { BRANCH_ALLOWED_NAV_KEYS, type NavItemKey } from "@/lib/sidebar-nav";
import { NAV_REQUIRED_PERMISSION } from "@/lib/permissions";
/** Cafe owner (HQ) — billing, taxes, branches. */
@@ -13,27 +13,17 @@ export function isBranchAccount(branchId: string | null | undefined): boolean {
export const OWNER_ONLY_NAV_KEYS = ["subscription", "taxes", "branches"] as const;
export function canSeeNavGroup(
groupId: NavGroupId,
role: string | undefined,
branchId: string | null | undefined
): boolean {
if (isBranchAccount(branchId) && groupId !== BRANCH_ONLY_NAV_GROUP) {
return false;
}
return true;
}
export function canSeeNavItem(
key: string,
role: string | undefined,
branchId: string | null | undefined,
permissions?: Set<string> | null
): boolean {
if ((OWNER_ONLY_NAV_KEYS as readonly string[]).includes(key) && !isCafeOwner(role)) {
// Branch-scoped staff only see daily-operations destinations.
if (isBranchAccount(branchId) && !BRANCH_ALLOWED_NAV_KEYS.has(key as NavItemKey)) {
return false;
}
if (key === "branches" && isBranchAccount(branchId)) {
if ((OWNER_ONLY_NAV_KEYS as readonly string[]).includes(key) && !isCafeOwner(role)) {
return false;
}
// Permission-based page visibility. `permissions === null` means a legacy
+48 -34
View File
@@ -1,5 +1,6 @@
import type { LucideIcon } from "lucide-react";
import {
LayoutDashboard,
LayoutGrid,
UtensilsCrossed,
Users,
@@ -14,7 +15,6 @@ import {
Receipt,
Settings,
ChefHat,
Bell,
ListOrdered,
Building2,
CreditCard,
@@ -24,23 +24,23 @@ import {
Compass,
} from "lucide-react";
export type NavGroupId = "operations" | "menuSales" | "customers" | "finance" | "management";
export type NavGroupId = "main" | "customers" | "management";
export type NavItemKey =
| "home"
| "pos"
| "tables"
| "queue"
| "kds"
| "notifications"
| "queue"
| "reservations"
| "menu"
| "inventory"
| "coupons"
| "reports"
| "crm"
| "coupons"
| "sms"
| "reviews"
| "discover"
| "reports"
| "inventory"
| "expenses"
| "shifts"
| "taxes"
@@ -58,72 +58,86 @@ export type NavItemDef = {
export type NavGroupDef = {
id: NavGroupId;
/** Flat groups render without a header and are always expanded. */
flat?: boolean;
defaultOpen: boolean;
items: NavItemDef[];
};
/**
* Frequency-based IA: the flat "main" group holds everything a café touches
* daily (always visible, no clicks to reach); the two collapsible groups hold
* weekly/monthly destinations; FOOTER_NAV holds rare utility pages.
*/
export const NAV_GROUPS: NavGroupDef[] = [
{
id: "operations",
id: "main",
flat: true,
defaultOpen: true,
items: [
{ key: "home", href: "/", icon: LayoutDashboard },
{ key: "pos", href: "/pos", icon: LayoutGrid },
{ key: "tables", href: "/tables", icon: UtensilsCrossed },
{ key: "queue", href: "/queue", icon: ListOrdered },
{ key: "kds", href: "/kds", icon: ChefHat },
{ key: "notifications", href: "/notifications", icon: Bell },
{ key: "queue", href: "/queue", icon: ListOrdered },
{ key: "reservations", href: "/reservations", icon: Calendar },
],
},
{
id: "menuSales",
defaultOpen: true,
items: [
{ key: "menu", href: "/menu", icon: BookOpen },
{ key: "inventory", href: "/inventory", icon: Package },
{ key: "coupons", href: "/coupons", icon: Ticket },
{ key: "reports", href: "/reports", icon: BarChart3 },
],
},
{
id: "customers",
defaultOpen: true,
defaultOpen: false,
items: [
{ key: "crm", href: "/crm", icon: Users },
{ key: "coupons", href: "/coupons", icon: Ticket },
{ key: "sms", href: "/sms", icon: MessageSquare },
{ key: "reviews", href: "/reviews", icon: Star },
{ key: "discover", href: "/discover", icon: Compass },
],
},
{
id: "finance",
defaultOpen: true,
id: "management",
defaultOpen: false,
items: [
{ key: "reports", href: "/reports", icon: BarChart3 },
{ key: "inventory", href: "/inventory", icon: Package },
{ key: "expenses", href: "/expenses", icon: Wallet },
{ key: "shifts", href: "/shifts", icon: Clock },
{ key: "taxes", href: "/taxes", icon: Receipt },
],
},
{
id: "management",
defaultOpen: true,
items: [
{ key: "hr", href: "/hr", icon: UserCog },
{ key: "branches", href: "/branches", icon: Building2 },
{ key: "subscription", href: "/subscription", icon: CreditCard },
{ key: "settings", href: "/settings", icon: Settings },
{ key: "support", href: "/support", icon: LifeBuoy },
],
},
];
export const NAV_GROUPS_STORAGE_KEY = "meezi:nav-groups:v4";
/** Compact utility links rendered in the sidebar footer (outside the scroll area). */
export const FOOTER_NAV: NavItemDef[] = [
{ key: "settings", href: "/settings", icon: Settings },
{ key: "subscription", href: "/subscription", icon: CreditCard },
{ key: "support", href: "/support", icon: LifeBuoy },
];
/** Branch-scoped staff only see daily operations. */
export const BRANCH_ONLY_NAV_GROUP: NavGroupId = "operations";
/** Every nav destination (groups + footer) — used by the route guard. */
export const ALL_NAV_ITEMS: NavItemDef[] = [
...NAV_GROUPS.flatMap((g) => g.items),
...FOOTER_NAV,
];
export const NAV_GROUPS_STORAGE_KEY = "meezi:nav-groups:v5";
/** Branch-scoped staff only see daily-operations destinations. */
export const BRANCH_ALLOWED_NAV_KEYS: ReadonlySet<NavItemKey> = new Set<NavItemKey>([
"home",
"pos",
"tables",
"kds",
"queue",
"reservations",
]);
export function findNavGroupForPath(pathname: string): NavGroupId | null {
for (const group of NAV_GROUPS) {
if (group.flat) continue; // flat groups have no open/closed state
for (const item of group.items) {
if (pathname === item.href || pathname.startsWith(`${item.href}/`)) {
return group.id;