teatea-pension/modules/shared/components/AppShell.tsx

import Link from "next/link";
import {
  Bell,
  BedDouble,
  ClipboardCheck,
  HeartPulse,
  Home,
  LayoutDashboard,
  Radio,
  Settings,
  ShieldAlert,
  Stethoscope,
  TabletSmartphone,
  Users,
  Wrench,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import type { Permission, PublicAccount } from "@/modules/core/types";
import { SignOutButton } from "@/modules/auth/components/SignOutButton";

type NavItem = {
  href: string;
  label: string;
  icon: LucideIcon;
};

const navItems: NavItem[] = [
  {
    href: "/app/dashboard",
    label: "运营看板",
    icon: LayoutDashboard,
  },
  {
    href: "/app/elders",
    label: "老人档案",
    icon: Users,
  },
  {
    href: "/app/beds",
    label: "床位房间",
    icon: BedDouble,
  },
  {
    href: "/app/health",
    label: "健康照护",
    icon: HeartPulse,
  },
  {
    href: "/app/care",
    label: "护理服务",
    icon: ClipboardCheck,
  },
  {
    href: "/app/emergency",
    label: "安全应急",
    icon: ShieldAlert,
  },
  {
    href: "/app/devices",
    label: "设备运维",
    icon: Wrench,
  },
  {
    href: "/app/notices",
    label: "公告通知",
    icon: Bell,
  },
  {
    href: "/app/alerts",
    label: "规则预警",
    icon: Radio,
  },
  {
    href: "/app/family",
    label: "家属服务",
    icon: TabletSmartphone,
  },
  {
    href: "/app/settings",
    label: "权限设置",
    icon: Settings,
  },
];

type AppShellProps = {
  children: React.ReactNode;
  account: PublicAccount;
  permissions: Permission[];
};

export function AppShell({ children, account, permissions }: AppShellProps): React.ReactElement {
  const canCreateElder = permissions.includes("elder:create");

  return (
    <div className="flex min-h-svh items-stretch bg-background text-foreground">
      <aside className="hidden w-64 shrink-0 border-r bg-white/78 backdrop-blur xl:block">
        <div className="flex h-full min-h-0 flex-col">
          <Link href="/app/dashboard" className="flex min-h-16 items-center gap-3 border-b px-5">
            <span className="inline-flex size-10 items-center justify-center rounded-md bg-primary text-primary-foreground">
              <Stethoscope className="size-5" aria-hidden="true" />
            </span>
            <span>
              <span className="block text-base font-semibold">TeaTea 康护</span>
            </span>
          </Link>

          <nav className="min-h-0 flex-1 overflow-y-auto px-3 py-4" aria-label="主导航">
            <ul className="space-y-1">
              {navItems.map((item) => (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    className="group flex min-h-11 items-center gap-3 rounded-md px-3 text-sm transition-colors hover:bg-secondary"
                  >
                    <item.icon
                      className="size-4 shrink-0 text-muted-foreground group-hover:text-primary"
                      aria-hidden="true"
                    />
                    <span className="min-w-0 truncate font-medium">{item.label}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </div>
      </aside>

      <div className="flex min-w-0 flex-1 flex-col">
        <header className="sticky top-0 z-20 flex min-h-14 items-center justify-between border-b bg-background/88 px-4 backdrop-blur md:px-8">
          <div className="flex items-center gap-3">
            <span className="inline-flex size-10 items-center justify-center rounded-md bg-primary text-primary-foreground xl:hidden">
              <Stethoscope className="size-5" aria-hidden="true" />
            </span>
            <div>
              <p className="text-sm font-medium">工作台</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <div className="hidden text-right sm:block">
              <p className="text-sm font-medium">{account.name}</p>
              <p className="text-xs text-muted-foreground">{account.email}</p>
            </div>
            <Button size="sm" disabled={!canCreateElder}>
              <Home className="size-4" aria-hidden="true" />
              入住
            </Button>
            <SignOutButton />
          </div>
        </header>

        <main className="min-h-0 flex-1 overflow-y-auto px-4 py-5 md:px-8">{children}</main>
      </div>
    </div>
  );
}

export { navItems };