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
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:
@@ -6,6 +6,20 @@
|
|||||||
"runtimeExecutable": "dotnet",
|
"runtimeExecutable": "dotnet",
|
||||||
"runtimeArgs": ["run", "--project", "F:/Projects/DrSousan/DrSousan.Api", "--urls", "http://localhost:5000"],
|
"runtimeArgs": ["run", "--project", "F:/Projects/DrSousan/DrSousan.Api", "--urls", "http://localhost:5000"],
|
||||||
"port": 5000
|
"port": 5000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "meezi-website",
|
||||||
|
"runtimeExecutable": "node",
|
||||||
|
"runtimeArgs": ["node_modules/next/dist/bin/next", "dev", "-p", "3013"],
|
||||||
|
"cwd": "web/website",
|
||||||
|
"port": 3013
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "meezi-dashboard",
|
||||||
|
"runtimeExecutable": "node",
|
||||||
|
"runtimeArgs": ["node_modules/next/dist/bin/next", "dev", "-p", "3015"],
|
||||||
|
"cwd": "web/dashboard",
|
||||||
|
"port": 3015
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -102,12 +102,10 @@
|
|||||||
"collapseSidebar": "طي الشريط الجانبي",
|
"collapseSidebar": "طي الشريط الجانبي",
|
||||||
"expandSidebar": "توسيع الشريط الجانبي",
|
"expandSidebar": "توسيع الشريط الجانبي",
|
||||||
"groups": {
|
"groups": {
|
||||||
"operations": "العمليات اليومية",
|
"customers": "العملاء والتسويق",
|
||||||
"menuSales": "القائمة والمبيعات",
|
|
||||||
"customers": "العملاء",
|
|
||||||
"finance": "التقارير والمالية",
|
|
||||||
"management": "إدارة المقهى"
|
"management": "إدارة المقهى"
|
||||||
},
|
},
|
||||||
|
"home": "لوحة التحكم",
|
||||||
"pos": "نقطة البيع",
|
"pos": "نقطة البيع",
|
||||||
"tables": "الطاولات",
|
"tables": "الطاولات",
|
||||||
"menu": "القائمة",
|
"menu": "القائمة",
|
||||||
|
|||||||
@@ -113,12 +113,10 @@
|
|||||||
"collapseSidebar": "Collapse sidebar",
|
"collapseSidebar": "Collapse sidebar",
|
||||||
"expandSidebar": "Expand sidebar",
|
"expandSidebar": "Expand sidebar",
|
||||||
"groups": {
|
"groups": {
|
||||||
"operations": "Daily operations",
|
"customers": "Customers & marketing",
|
||||||
"menuSales": "Menu & sales",
|
|
||||||
"customers": "Customers",
|
|
||||||
"finance": "Reports & finance",
|
|
||||||
"management": "Café management"
|
"management": "Café management"
|
||||||
},
|
},
|
||||||
|
"home": "Dashboard",
|
||||||
"pos": "POS",
|
"pos": "POS",
|
||||||
"tables": "Tables",
|
"tables": "Tables",
|
||||||
"crm": "CRM",
|
"crm": "CRM",
|
||||||
|
|||||||
@@ -113,12 +113,10 @@
|
|||||||
"collapseSidebar": "جمع کردن نوار کناری",
|
"collapseSidebar": "جمع کردن نوار کناری",
|
||||||
"expandSidebar": "باز کردن نوار کناری",
|
"expandSidebar": "باز کردن نوار کناری",
|
||||||
"groups": {
|
"groups": {
|
||||||
"operations": "عملیات روزانه",
|
"customers": "مشتریان و بازاریابی",
|
||||||
"menuSales": "منو و فروش",
|
|
||||||
"customers": "مشتریان",
|
|
||||||
"finance": "گزارش و مالی",
|
|
||||||
"management": "مدیریت کافه"
|
"management": "مدیریت کافه"
|
||||||
},
|
},
|
||||||
|
"home": "داشبورد",
|
||||||
"pos": "صندوق",
|
"pos": "صندوق",
|
||||||
"tables": "میزها",
|
"tables": "میزها",
|
||||||
"crm": "مشتریان",
|
"crm": "مشتریان",
|
||||||
|
|||||||
@@ -24,6 +24,12 @@ export function generateStaticParams() {
|
|||||||
return routing.locales.map((locale) => ({ locale }));
|
return routing.locales.map((locale) => ({ locale }));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Cap the prerendered-HTML cache lifetime. Without this Next emits
|
||||||
|
// `s-maxage=31536000` and the WCDN edge in front of app.meezi.ir keeps serving
|
||||||
|
// year-old HTML shells (pointing at deleted JS chunks) long after a deploy.
|
||||||
|
// 5 minutes keeps pages static+fast while letting deploys go live promptly.
|
||||||
|
export const revalidate = 300;
|
||||||
|
|
||||||
export default async function LocaleLayout({
|
export default async function LocaleLayout({
|
||||||
children,
|
children,
|
||||||
params,
|
params,
|
||||||
|
|||||||
@@ -1,10 +0,0 @@
|
|||||||
import { redirect } from "@/i18n/routing";
|
|
||||||
|
|
||||||
export default async function HomePage({
|
|
||||||
params,
|
|
||||||
}: {
|
|
||||||
params: Promise<{ locale: string }>;
|
|
||||||
}) {
|
|
||||||
const { locale } = await params;
|
|
||||||
redirect({ href: "/pos", locale });
|
|
||||||
}
|
|
||||||
@@ -4,7 +4,7 @@ import { useMemo } from "react";
|
|||||||
import { ShieldX } from "lucide-react";
|
import { ShieldX } from "lucide-react";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { usePathname } from "@/i18n/routing";
|
import { usePathname } from "@/i18n/routing";
|
||||||
import { NAV_GROUPS, type NavItemKey } from "@/lib/sidebar-nav";
|
import { ALL_NAV_ITEMS, type NavItemKey } from "@/lib/sidebar-nav";
|
||||||
import { NAV_REQUIRED_PERMISSION } from "@/lib/permissions";
|
import { NAV_REQUIRED_PERMISSION } from "@/lib/permissions";
|
||||||
import { canSeeNavItem } from "@/lib/auth-permissions";
|
import { canSeeNavItem } from "@/lib/auth-permissions";
|
||||||
import { permissionsOf } from "@/lib/permissions";
|
import { permissionsOf } from "@/lib/permissions";
|
||||||
@@ -12,13 +12,15 @@ import { useAuthStore } from "@/lib/stores/auth.store";
|
|||||||
|
|
||||||
/** Resolve the nav item key that owns the given pathname (locale already stripped). */
|
/** Resolve the nav item key that owns the given pathname (locale already stripped). */
|
||||||
function navKeyForPath(pathname: string): NavItemKey | null {
|
function navKeyForPath(pathname: string): NavItemKey | null {
|
||||||
for (const group of NAV_GROUPS) {
|
for (const item of ALL_NAV_ITEMS) {
|
||||||
for (const item of group.items) {
|
if (item.href === "/") {
|
||||||
|
if (pathname === "/") return item.key;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
if (pathname === item.href || pathname.startsWith(`${item.href}/`)) {
|
if (pathname === item.href || pathname.startsWith(`${item.href}/`)) {
|
||||||
return item.key;
|
return item.key;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -4,9 +4,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
|
|||||||
import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
|
import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { Link, usePathname } from "@/i18n/routing";
|
import { Link, usePathname } from "@/i18n/routing";
|
||||||
import { canSeeNavGroup, canSeeNavItem } from "@/lib/auth-permissions";
|
import { canSeeNavItem } from "@/lib/auth-permissions";
|
||||||
import { permissionsOf } from "@/lib/permissions";
|
import { permissionsOf } from "@/lib/permissions";
|
||||||
import {
|
import {
|
||||||
|
FOOTER_NAV,
|
||||||
NAV_GROUPS,
|
NAV_GROUPS,
|
||||||
NAV_GROUPS_STORAGE_KEY,
|
NAV_GROUPS_STORAGE_KEY,
|
||||||
findNavGroupForPath,
|
findNavGroupForPath,
|
||||||
@@ -45,8 +46,8 @@ function buildDefaultOpenGroups(): OpenGroupsState {
|
|||||||
const stored = readStoredOpenGroups();
|
const stored = readStoredOpenGroups();
|
||||||
const defaults: OpenGroupsState = {};
|
const defaults: OpenGroupsState = {};
|
||||||
for (const g of NAV_GROUPS) {
|
for (const g of NAV_GROUPS) {
|
||||||
// Default ALL groups closed on first visit; only restore if user explicitly saved state.
|
if (g.flat) continue; // flat groups are always expanded — no state
|
||||||
defaults[g.id] = stored[g.id] ?? false;
|
defaults[g.id] = stored[g.id] ?? g.defaultOpen;
|
||||||
}
|
}
|
||||||
return defaults;
|
return defaults;
|
||||||
}
|
}
|
||||||
@@ -59,6 +60,11 @@ function persistOpenGroups(next: OpenGroupsState): void {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isItemActive(item: NavItemDef, pathname: string): boolean {
|
||||||
|
if (item.href === "/") return pathname === "/";
|
||||||
|
return pathname === item.href || pathname.startsWith(`${item.href}/`);
|
||||||
|
}
|
||||||
|
|
||||||
function NavLink({
|
function NavLink({
|
||||||
item,
|
item,
|
||||||
label,
|
label,
|
||||||
@@ -124,24 +130,27 @@ function NavGroupSection({
|
|||||||
);
|
);
|
||||||
if (visibleItems.length === 0) return null;
|
if (visibleItems.length === 0) return null;
|
||||||
|
|
||||||
// Collapsed: drop the group header, show items as a flat icon-only list
|
// Flat groups (daily-use primary nav) and the collapsed-rail mode both render
|
||||||
// with a subtle divider between groups.
|
// as a plain list — no header, always expanded.
|
||||||
if (collapsed) {
|
if (group.flat || 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 (
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"space-y-0.5",
|
||||||
|
collapsed
|
||||||
|
? "mb-1 border-t border-border/60 pt-1 first:border-t-0 first:pt-0"
|
||||||
|
: "mb-2"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{visibleItems.map((item) => (
|
||||||
<NavLink
|
<NavLink
|
||||||
key={item.key}
|
key={item.key}
|
||||||
item={item}
|
item={item}
|
||||||
label={tItem(item.key)}
|
label={tItem(item.key)}
|
||||||
active={active}
|
active={isItemActive(item, pathname)}
|
||||||
collapsed
|
collapsed={collapsed}
|
||||||
/>
|
/>
|
||||||
);
|
))}
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -173,19 +182,15 @@ function NavGroupSection({
|
|||||||
>
|
>
|
||||||
<div className="overflow-hidden">
|
<div className="overflow-hidden">
|
||||||
<div className="space-y-0.5 pb-1 pt-0.5">
|
<div className="space-y-0.5 pb-1 pt-0.5">
|
||||||
{visibleItems.map((item) => {
|
{visibleItems.map((item) => (
|
||||||
const active =
|
|
||||||
pathname === item.href || pathname.startsWith(`${item.href}/`);
|
|
||||||
return (
|
|
||||||
<NavLink
|
<NavLink
|
||||||
key={item.key}
|
key={item.key}
|
||||||
item={item}
|
item={item}
|
||||||
label={tItem(item.key)}
|
label={tItem(item.key)}
|
||||||
active={active}
|
active={isItemActive(item, pathname)}
|
||||||
collapsed={false}
|
collapsed={false}
|
||||||
/>
|
/>
|
||||||
);
|
))}
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -232,10 +237,14 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
|
|||||||
|
|
||||||
const visibleGroups = useMemo(
|
const visibleGroups = useMemo(
|
||||||
() =>
|
() =>
|
||||||
NAV_GROUPS.filter((g) => {
|
NAV_GROUPS.filter((g) =>
|
||||||
if (!canSeeNavGroup(g.id, role, branchId)) return false;
|
g.items.some((item) => canSeeNavItem(item.key, role, branchId, permissions))
|
||||||
return g.items.some((item) => canSeeNavItem(item.key, role, branchId, permissions));
|
),
|
||||||
}),
|
[role, branchId, permissions]
|
||||||
|
);
|
||||||
|
|
||||||
|
const visibleFooterItems = useMemo(
|
||||||
|
() => FOOTER_NAV.filter((item) => canSeeNavItem(item.key, role, branchId, permissions)),
|
||||||
[role, branchId, permissions]
|
[role, branchId, permissions]
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -244,6 +253,7 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
|
|||||||
setOpenGroups((_prev) => {
|
setOpenGroups((_prev) => {
|
||||||
const next: OpenGroupsState = {};
|
const next: OpenGroupsState = {};
|
||||||
for (const g of NAV_GROUPS) {
|
for (const g of NAV_GROUPS) {
|
||||||
|
if (g.flat) continue;
|
||||||
// If opening: only the clicked group becomes true; everything else closes.
|
// If opening: only the clicked group becomes true; everything else closes.
|
||||||
// If closing: just close the clicked group, leave others as-is.
|
// If closing: just close the clicked group, leave others as-is.
|
||||||
next[g.id] = open ? g.id === groupId : g.id === groupId ? false : (_prev[g.id] ?? false);
|
next[g.id] = open ? g.id === groupId : g.id === groupId ? false : (_prev[g.id] ?? false);
|
||||||
@@ -253,7 +263,7 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
|
|||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// When navigating to a new path, open only the group that contains that path (accordion).
|
// When navigating to a path inside a collapsible group, open that group.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const activeGroup = findNavGroupForPath(pathname);
|
const activeGroup = findNavGroupForPath(pathname);
|
||||||
if (!activeGroup) return;
|
if (!activeGroup) return;
|
||||||
@@ -262,6 +272,7 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
|
|||||||
// Accordion: open active group, close all others
|
// Accordion: open active group, close all others
|
||||||
const next: OpenGroupsState = {};
|
const next: OpenGroupsState = {};
|
||||||
for (const g of NAV_GROUPS) {
|
for (const g of NAV_GROUPS) {
|
||||||
|
if (g.flat) continue;
|
||||||
next[g.id] = g.id === activeGroup;
|
next[g.id] = g.id === activeGroup;
|
||||||
}
|
}
|
||||||
persistOpenGroups(next);
|
persistOpenGroups(next);
|
||||||
@@ -320,29 +331,24 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-3 px-1 pt-1">
|
<div className="space-y-1.5 px-1 pt-1">
|
||||||
{[40, 32, 40, 32, 40].map((w, i) => (
|
{[88, 72, 80, 64, 76, 84, 68, 60].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
|
<div
|
||||||
key={j}
|
key={i}
|
||||||
className="h-8 animate-pulse rounded-lg bg-muted"
|
className="h-8 animate-pulse rounded-lg bg-muted"
|
||||||
style={{ width: `${w + j * 4}%` }}
|
style={{ width: `${w}%` }}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
visibleGroups.map((group) => {
|
visibleGroups.map((group) => {
|
||||||
const isOpen = openGroups[group.id] ?? group.defaultOpen;
|
const isOpen = group.flat ? true : (openGroups[group.id] ?? group.defaultOpen);
|
||||||
return (
|
return (
|
||||||
<NavGroupSection
|
<NavGroupSection
|
||||||
key={group.id}
|
key={group.id}
|
||||||
group={group}
|
group={group}
|
||||||
title={tGroups(group.id)}
|
title={group.flat ? "" : tGroups(group.id)}
|
||||||
open={isOpen}
|
open={isOpen}
|
||||||
onToggle={() => setGroupOpen(group.id, !isOpen)}
|
onToggle={() => setGroupOpen(group.id, !isOpen)}
|
||||||
pathname={pathname}
|
pathname={pathname}
|
||||||
@@ -357,8 +363,40 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
|
|||||||
)}
|
)}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Footer — user info + collapse toggle */}
|
{/* Footer — utility links + user info + collapse toggle */}
|
||||||
<div className="shrink-0 border-t border-border">
|
<div className="shrink-0 border-t border-border">
|
||||||
|
{/* Utility links (settings / subscription / support) — compact icon row */}
|
||||||
|
{hasHydrated && visibleFooterItems.length > 0 && (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex border-b border-border/50",
|
||||||
|
collapsed ? "flex-col items-center gap-0.5 py-1.5" : "items-center justify-around px-2 py-1.5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{visibleFooterItems.map((item) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
const active = isItemActive(item, pathname);
|
||||||
|
const label = t(item.key);
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.key}
|
||||||
|
href={item.href}
|
||||||
|
title={label}
|
||||||
|
aria-label={label}
|
||||||
|
className={cn(
|
||||||
|
"flex h-9 w-9 items-center justify-center rounded-lg transition-colors cursor-pointer",
|
||||||
|
active
|
||||||
|
? "bg-accent text-primary"
|
||||||
|
: "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="h-4 w-4" aria-hidden />
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* User badge */}
|
{/* User badge */}
|
||||||
{user && (
|
{user && (
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -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";
|
import { NAV_REQUIRED_PERMISSION } from "@/lib/permissions";
|
||||||
|
|
||||||
/** Cafe owner (HQ) — billing, taxes, branches. */
|
/** 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 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(
|
export function canSeeNavItem(
|
||||||
key: string,
|
key: string,
|
||||||
role: string | undefined,
|
role: string | undefined,
|
||||||
branchId: string | null | undefined,
|
branchId: string | null | undefined,
|
||||||
permissions?: Set<string> | null
|
permissions?: Set<string> | null
|
||||||
): boolean {
|
): 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;
|
return false;
|
||||||
}
|
}
|
||||||
if (key === "branches" && isBranchAccount(branchId)) {
|
if ((OWNER_ONLY_NAV_KEYS as readonly string[]).includes(key) && !isCafeOwner(role)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
// Permission-based page visibility. `permissions === null` means a legacy
|
// Permission-based page visibility. `permissions === null` means a legacy
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import type { LucideIcon } from "lucide-react";
|
import type { LucideIcon } from "lucide-react";
|
||||||
import {
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
LayoutGrid,
|
LayoutGrid,
|
||||||
UtensilsCrossed,
|
UtensilsCrossed,
|
||||||
Users,
|
Users,
|
||||||
@@ -14,7 +15,6 @@ import {
|
|||||||
Receipt,
|
Receipt,
|
||||||
Settings,
|
Settings,
|
||||||
ChefHat,
|
ChefHat,
|
||||||
Bell,
|
|
||||||
ListOrdered,
|
ListOrdered,
|
||||||
Building2,
|
Building2,
|
||||||
CreditCard,
|
CreditCard,
|
||||||
@@ -24,23 +24,23 @@ import {
|
|||||||
Compass,
|
Compass,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
export type NavGroupId = "operations" | "menuSales" | "customers" | "finance" | "management";
|
export type NavGroupId = "main" | "customers" | "management";
|
||||||
|
|
||||||
export type NavItemKey =
|
export type NavItemKey =
|
||||||
|
| "home"
|
||||||
| "pos"
|
| "pos"
|
||||||
| "tables"
|
| "tables"
|
||||||
| "queue"
|
|
||||||
| "kds"
|
| "kds"
|
||||||
| "notifications"
|
| "queue"
|
||||||
| "reservations"
|
| "reservations"
|
||||||
| "menu"
|
| "menu"
|
||||||
| "inventory"
|
| "reports"
|
||||||
| "coupons"
|
|
||||||
| "crm"
|
| "crm"
|
||||||
|
| "coupons"
|
||||||
| "sms"
|
| "sms"
|
||||||
| "reviews"
|
| "reviews"
|
||||||
| "discover"
|
| "discover"
|
||||||
| "reports"
|
| "inventory"
|
||||||
| "expenses"
|
| "expenses"
|
||||||
| "shifts"
|
| "shifts"
|
||||||
| "taxes"
|
| "taxes"
|
||||||
@@ -58,72 +58,86 @@ export type NavItemDef = {
|
|||||||
|
|
||||||
export type NavGroupDef = {
|
export type NavGroupDef = {
|
||||||
id: NavGroupId;
|
id: NavGroupId;
|
||||||
|
/** Flat groups render without a header and are always expanded. */
|
||||||
|
flat?: boolean;
|
||||||
defaultOpen: boolean;
|
defaultOpen: boolean;
|
||||||
items: NavItemDef[];
|
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[] = [
|
export const NAV_GROUPS: NavGroupDef[] = [
|
||||||
{
|
{
|
||||||
id: "operations",
|
id: "main",
|
||||||
|
flat: true,
|
||||||
defaultOpen: true,
|
defaultOpen: true,
|
||||||
items: [
|
items: [
|
||||||
|
{ key: "home", href: "/", icon: LayoutDashboard },
|
||||||
{ key: "pos", href: "/pos", icon: LayoutGrid },
|
{ key: "pos", href: "/pos", icon: LayoutGrid },
|
||||||
{ key: "tables", href: "/tables", icon: UtensilsCrossed },
|
{ key: "tables", href: "/tables", icon: UtensilsCrossed },
|
||||||
{ key: "queue", href: "/queue", icon: ListOrdered },
|
|
||||||
{ key: "kds", href: "/kds", icon: ChefHat },
|
{ key: "kds", href: "/kds", icon: ChefHat },
|
||||||
{ key: "notifications", href: "/notifications", icon: Bell },
|
{ key: "queue", href: "/queue", icon: ListOrdered },
|
||||||
{ key: "reservations", href: "/reservations", icon: Calendar },
|
{ key: "reservations", href: "/reservations", icon: Calendar },
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "menuSales",
|
|
||||||
defaultOpen: true,
|
|
||||||
items: [
|
|
||||||
{ key: "menu", href: "/menu", icon: BookOpen },
|
{ key: "menu", href: "/menu", icon: BookOpen },
|
||||||
{ key: "inventory", href: "/inventory", icon: Package },
|
{ key: "reports", href: "/reports", icon: BarChart3 },
|
||||||
{ key: "coupons", href: "/coupons", icon: Ticket },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "customers",
|
id: "customers",
|
||||||
defaultOpen: true,
|
defaultOpen: false,
|
||||||
items: [
|
items: [
|
||||||
{ key: "crm", href: "/crm", icon: Users },
|
{ key: "crm", href: "/crm", icon: Users },
|
||||||
|
{ key: "coupons", href: "/coupons", icon: Ticket },
|
||||||
{ key: "sms", href: "/sms", icon: MessageSquare },
|
{ key: "sms", href: "/sms", icon: MessageSquare },
|
||||||
{ key: "reviews", href: "/reviews", icon: Star },
|
{ key: "reviews", href: "/reviews", icon: Star },
|
||||||
{ key: "discover", href: "/discover", icon: Compass },
|
{ key: "discover", href: "/discover", icon: Compass },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "finance",
|
id: "management",
|
||||||
defaultOpen: true,
|
defaultOpen: false,
|
||||||
items: [
|
items: [
|
||||||
{ key: "reports", href: "/reports", icon: BarChart3 },
|
{ key: "inventory", href: "/inventory", icon: Package },
|
||||||
{ key: "expenses", href: "/expenses", icon: Wallet },
|
{ key: "expenses", href: "/expenses", icon: Wallet },
|
||||||
{ key: "shifts", href: "/shifts", icon: Clock },
|
{ key: "shifts", href: "/shifts", icon: Clock },
|
||||||
{ key: "taxes", href: "/taxes", icon: Receipt },
|
{ key: "taxes", href: "/taxes", icon: Receipt },
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "management",
|
|
||||||
defaultOpen: true,
|
|
||||||
items: [
|
|
||||||
{ key: "hr", href: "/hr", icon: UserCog },
|
{ key: "hr", href: "/hr", icon: UserCog },
|
||||||
{ key: "branches", href: "/branches", icon: Building2 },
|
{ 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. */
|
/** Every nav destination (groups + footer) — used by the route guard. */
|
||||||
export const BRANCH_ONLY_NAV_GROUP: NavGroupId = "operations";
|
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 {
|
export function findNavGroupForPath(pathname: string): NavGroupId | null {
|
||||||
for (const group of NAV_GROUPS) {
|
for (const group of NAV_GROUPS) {
|
||||||
|
if (group.flat) continue; // flat groups have no open/closed state
|
||||||
for (const item of group.items) {
|
for (const item of group.items) {
|
||||||
if (pathname === item.href || pathname.startsWith(`${item.href}/`)) {
|
if (pathname === item.href || pathname.startsWith(`${item.href}/`)) {
|
||||||
return group.id;
|
return group.id;
|
||||||
|
|||||||
Reference in New Issue
Block a user