王明 / Food-Labeling-Management-Platform

  import React, { useMemo, useState } from 'react';

  import { 
    LayoutDashboard, 
    Tag, 
    MapPin, 
    Users, 
    Package, 
    FileText, 
    HelpCircle, 
    LogOut, 
    ChevronDown, 
    ChevronRight,
    Layers,
    Type,
    FileBox,
    Settings
  } from 'lucide-react';
  import { cn } from '../ui/utils';
  import { ScrollArea } from '../ui/scroll-area';
  import logo from "figma:asset/773f0c39e1986271e9144596caac519f934a6ae6.png";

  import type { CurrentUserMenuNodeDto } from '../../types/authSession';

  
  interface SidebarProps {
    currentView: string;
    setCurrentView: (view: string) => void;

    menus?: CurrentUserMenuNodeDto[];
    onLogout?: () => void;

  }
  

  const FALLBACK_ICONS = {
    Dashboard: LayoutDashboard,
    Labeling: Tag,
    Labels: Tag,
    "Label Categories": Layers,
    "Label Types": Type,
    "Label Templates": FileBox,

    "Multiple Option Sets": Settings,

    "Multiple Options": Settings,
    "Location Manager": MapPin,
    "Account Management": Users,
    "Menu Management": Package,
    "System Menu": Settings,
    Reports: FileText,
    Support: HelpCircle,
    "Log Out": LogOut,
  } as const;
  
  function normalizeLabel(name: string) {
    return name.trim() || "N/A";
  }
  

  function displayMenuLabel(name: string) {
    const s = normalizeLabel(name);
    if (s === "Multiple Options") return "Multiple Option Sets";
    return s;
  }
  

  function pickIconKeyFromNode(node: CurrentUserMenuNodeDto, label: string): keyof typeof FALLBACK_ICONS | null {
    const raw = String((node as any)?.menuIcon ?? (node as any)?.MenuIcon ?? "").trim();
    if (raw && raw in FALLBACK_ICONS) return raw as keyof typeof FALLBACK_ICONS;
    if (label in FALLBACK_ICONS) return label as keyof typeof FALLBACK_ICONS;
    return null;
  }
  
  function MenuNode({
    node,
    level,
    currentKey,
    onSelect,
  }: {
    node: CurrentUserMenuNodeDto;
    level: number;
    currentKey: string;
    onSelect: (key: string) => void;
  }) {
    const [open, setOpen] = React.useState(true);
    const children = node.children ?? [];
    const isDir = (node.menuType ?? 0) === 0 || children.length > 0;
    const label = normalizeLabel(String(node.menuName ?? node.routerName ?? node.routeUrl ?? node.id ?? ""));

    const viewKey = label === "Multiple Options" ? "Multiple Option Sets" : label;
    const active = currentKey === viewKey;
    const iconKey = pickIconKeyFromNode(node, viewKey);

    const Icon = iconKey ? FALLBACK_ICONS[iconKey] : null;
  
    if (isDir) {
      return (
        <div className="space-y-1">
          <button
            onClick={() => setOpen((x) => !x)}
            className={cn(
              "w-full flex items-center justify-between px-4 py-2.5 text-sm font-medium rounded-lg transition-colors",
              "hover:bg-blue-800/50 text-blue-100",
              level > 0 && "ml-1",
            )}
            style={{ paddingLeft: 16 + level * 12 }}
          >
            <div className="flex items-center gap-3 min-w-0">
              {level === 0 && Icon ? <Icon className="w-4 h-4 shrink-0" /> : <div className="w-1.5 h-1.5 rounded-full bg-blue-200 shrink-0" />}

              <span className="truncate">{displayMenuLabel(label)}</span>

            </div>
            {open ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
          </button>
          {open && children.length > 0 && (
            <div className="space-y-1">
              {children.map((c) => (
                <MenuNode key={String(c.id ?? Math.random())} node={c} level={level + 1} currentKey={currentKey} onSelect={onSelect} />
              ))}
            </div>
          )}
        </div>
      );
    }
  
    return (
      <button
        onClick={() => onSelect(label)}
        className={cn(
          "w-full flex items-center gap-3 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors",
          active ? "bg-blue-700 text-white shadow-md shadow-blue-900/20" : "text-blue-100 hover:bg-blue-800 hover:text-white",
        )}
        style={{ paddingLeft: 16 + level * 12 }}
      >
        {level === 0 && Icon ? <Icon className="w-4 h-4 shrink-0" /> : <div className="w-1 h-1 rounded-full bg-current" />}

        <span className="truncate">{displayMenuLabel(label)}</span>

      </button>
    );
  }
  
  export function Sidebar({ currentView, setCurrentView, menus, onLogout }: SidebarProps) {

    const [labelingOpen, setLabelingOpen] = useState(true);
  

    const fallbackMenuItems = [

      { name: 'Dashboard', icon: LayoutDashboard, type: 'item' },
      { type: 'header', name: 'MODULES' },
      { 
        name: 'Labeling', 
        icon: Tag, 
        type: 'sub', 
        isOpen: labelingOpen, 
        toggle: () => setLabelingOpen(!labelingOpen),
        children: [
          { name: 'Labels', icon: Tag },
          { name: 'Label Categories', icon: Layers },
          { name: 'Label Types', icon: Type },
          { name: 'Label Templates', icon: FileBox },

          { name: 'Multiple Option Sets', icon: Settings },

        ]
      },
      { type: 'header', name: 'MANAGEMENT' },

      { name: 'Account Management', icon: Users, type: 'item' },

      { name: 'Menu Management', icon: Package, type: 'item' },
      { name: 'System Menu', icon: Settings, type: 'item' },

      { name: 'Reports', icon: FileText, type: 'item' },
      { name: 'Support', icon: HelpCircle, type: 'item' },
      { name: 'Log Out', icon: LogOut, type: 'item' },
    ];
  

    const hasRemoteMenus = (menus?.length ?? 0) > 0;
    const logoutHandler = () => (onLogout ? onLogout() : setCurrentView("Log Out"));
  
    const remoteMenuNodes = useMemo(() => menus ?? [], [menus]);
    const { moduleMenus, accountMenus } = useMemo(() => {
      const ACCOUNT_LABELS = new Set([
        "Location Manager",
        "Account Management",
        "Menu Management",
        "System Menu",
        "Reports",
        "Support",
      ]);
  
      const roots = remoteMenuNodes;
      const moduleMenus: CurrentUserMenuNodeDto[] = [];
      const accountMenus: CurrentUserMenuNodeDto[] = [];
  
      for (const n of roots) {
        const label = normalizeLabel(String(n.menuName ?? n.routerName ?? n.routeUrl ?? n.id ?? ""));
        if (label === "Management") {
          const children = n.children ?? [];
          for (const c of children) {
            const cl = normalizeLabel(String(c.menuName ?? c.routerName ?? c.routeUrl ?? c.id ?? ""));
            if (ACCOUNT_LABELS.has(cl)) accountMenus.push(c);
            else moduleMenus.push(c);
          }
          continue;
        }
  
        if (ACCOUNT_LABELS.has(label)) {
          accountMenus.push(n);
          continue;
        }
        moduleMenus.push(n);
      }
  
      return { moduleMenus, accountMenus };
    }, [remoteMenuNodes]);
  

    return (
      <div className="w-64 bg-[#1e3a8a] text-white flex flex-col h-screen border-r border-blue-800 shadow-xl z-20 shrink-0">
        <div className="flex items-center justify-center border-b border-blue-800/50 bg-white px-4 shrink-0" style={{ height: 90 }}>
          <img src={logo} alt="MedVantage" className="h-16 w-auto object-contain" />
        </div>
  
        <ScrollArea className="flex-1 py-4">
          <div className="px-3 space-y-1">

            {hasRemoteMenus ? (
              <>
                <button
                  onClick={() => setCurrentView("Dashboard")}
                  className={cn(
                    "w-full flex items-center gap-3 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors",
                    currentView === "Dashboard" ? "bg-blue-700 text-white shadow-md shadow-blue-900/20" : "text-blue-100 hover:bg-blue-800 hover:text-white",
                  )}
                >
                  <LayoutDashboard className="w-4 h-4" />
                  Dashboard
                </button>
  
                <div className="px-4 py-2 mt-4 text-xs font-semibold text-blue-300 uppercase tracking-wider">MODULES</div>
                {moduleMenus.map((n) => (
                  <MenuNode key={String(n.id ?? Math.random())} node={n} level={0} currentKey={currentView} onSelect={setCurrentView} />
                ))}
  
                <div className="px-4 py-2 mt-4 text-xs font-semibold text-blue-300 uppercase tracking-wider">MANAGEMENT</div>
                {accountMenus.map((n) => (
                  <MenuNode key={String(n.id ?? Math.random())} node={n} level={0} currentKey={currentView} onSelect={setCurrentView} />
                ))}
                <button
                  onClick={logoutHandler}
                  className={cn(
                    "w-full flex items-center gap-3 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors",
                    "text-red-300 hover:bg-red-900/20 hover:text-red-200",
                  )}
                >
                  <LogOut className="w-4 h-4" />
                  Log Out
                </button>
              </>
            ) : (
              fallbackMenuItems.map((item, index) => {

              if (item.type === 'header') {
                return (
                  <div key={index} className="px-4 py-2 mt-4 text-xs font-semibold text-blue-300 uppercase tracking-wider">
                    {item.name}
                  </div>
                );
              }
  
              if (item.type === 'sub') {

                const Icon = item.icon;

                return (
                  <div key={index} className="space-y-1">
                    <button
                      onClick={item.toggle}
                      className={cn(
                        "w-full flex items-center justify-between px-4 py-2.5 text-sm font-medium rounded-lg transition-colors",
                        "hover:bg-blue-800/50 text-blue-100"
                      )}
                    >
                      <div className="flex items-center gap-3">

                        {Icon ? <Icon className="w-4 h-4" /> : null}

                        {item.name}
                      </div>
                      {item.isOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
                    </button>
                    
                    {item.isOpen && (
                      <div className="pl-4 space-y-1">
                        {item.children?.map((child, childIndex) => (
                          <button
                            key={childIndex}
                            onClick={() => setCurrentView(child.name)}
                            className={cn(
                              "w-full flex items-center gap-3 px-4 py-2 text-sm font-medium rounded-lg transition-colors border-l-2",
                              currentView === child.name
                                ? "bg-blue-800 border-blue-400 text-white"
                                : "border-transparent hover:bg-blue-800/30 text-blue-200 hover:text-white"
                            )}
                          >
                            <div className="w-1 h-1 rounded-full bg-current" />
                            {child.name}
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                );
              }
  

              const Icon = item.icon;

              return (
                <button
                  key={index}

                  onClick={() => (item.name === "Log Out" ? logoutHandler() : setCurrentView(item.name))}

                  className={cn(
                    "w-full flex items-center gap-3 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors",
                    currentView === item.name
                      ? "bg-blue-700 text-white shadow-md shadow-blue-900/20"
                      : item.name === 'Log Out'
                        ? "text-red-300 hover:bg-red-900/20 hover:text-red-200"
                        : "text-blue-100 hover:bg-blue-800 hover:text-white"
                  )}
                >

                  {Icon ? <Icon className="w-4 h-4" /> : null}

                  {item.name}
                </button>
              );

            }))}

          </div>
        </ScrollArea>
      </div>
    );
  }