Muluhabt ERP modules

apps/finance-web/src/shared/components/AppShell.tsx

@@ -0,0 +1,97 @@
+import { DashboardLayout } from "@edr/ui-common";
+import { Box } from "@mantine/core";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import type { ReactNode } from "react";
+
+import { useAuth } from "@/auth/AuthContext";
+import { setLanguage } from "@/i18n";
+import { FINANCE_NAV, findActive, visibleNav } from "@/shared/nav/nav-model";
+import { localized } from "@/shared/lib/localizedName";
+import {
+  CommandPalette,
+  openCommandPalette,
+} from "@/shared/components/CommandPalette";
+
+const LANGUAGES = [
+  { code: "en", label: "English" },
+  { code: "am", label: "አማርኛ" },
+];
+
+/** The shortcut is only discoverable if something on screen names it. */
+function SearchPill() {
+  return (
+    <button
+      type="button"
+      onClick={openCommandPalette}
+      data-testid="command-palette-trigger"
+      className="ml-3 hidden shrink-0 items-center gap-2 rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-muted-foreground transition hover:border-[#10B981]/30 hover:text-foreground sm:inline-flex"
+    >
+      <span>Search</span>
+      <kbd className="rounded border border-border bg-background px-1.5 py-0.5 text-xs">
+        ⌘K
+      </kbd>
+    </button>
+  );
+}
+
+export function AppShell({ children }: { children: ReactNode }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user, logout, can } = useAuth();
+  const { i18n } = useTranslation();
+
+  const items = visibleNav(FINANCE_NAV, can);
+  const { group, entry } = findActive(FINANCE_NAV, location.pathname);
+
+  const name = localized(user?.name, "en") || user?.username || "";
+
+  const breadcrumb = entry ? (
+    <span data-testid="breadcrumb" className="truncate">
+      {group ? (
+        <>
+          <span className="text-muted-foreground">{group.label}</span>
+          <span className="mx-1.5 text-muted-foreground">/</span>
+        </>
+      ) : null}
+      <span className="font-semibold">{entry.label}</span>
+    </span>
+  ) : (
+    <span data-testid="breadcrumb">EDR Finance</span>
+  );
+
+  return (
+    <>
+      <CommandPalette />
+      <DashboardLayout
+        title="EDR Finance"
+        sidebarItems={items}
+        activeHref={location.pathname}
+        onNavigate={(href) => navigate(href)}
+        userName={name}
+        userEmail={user?.email}
+        userInitials={name.slice(0, 2).toUpperCase()}
+        onLogout={logout}
+        enableThemeToggle
+        breadcrumb={breadcrumb}
+        headerLeft={<SearchPill />}
+        languages={LANGUAGES}
+        language={i18n.language}
+        onLanguageChange={(code) => setLanguage(code as "en" | "am")}
+        // No notification source exists in this app yet.
+        showNotifications={false}
+        // finance-web has no profile screen — an entry that 404s is worse than
+        // no entry.
+        showProfileLink={false}
+        responsiveSidebar
+        sidebarPersistKey="finance-nav-expanded"
+      >
+        {/* `main` in ui-common has zero padding by design — its other ~94
+            consumers pad themselves — so the gutter belongs here. */}
+        <Box px="xl" py="lg">
+          {children}
+        </Box>
+      </DashboardLayout>
+    </>
+  );
+}