edr-platform/apps/edr-freight-web/backoffice/src/layout/AppSidebar.tsx

import { Link, useLocation } from "react-router-dom";
import {
  BarChart,
  Building2,
  ClipboardList,
  FileText,
  LogOut,
  Settings,
  Users2,
  UsersRound,
  ChartAreaIcon,
} from "lucide-react";
import { useAuth } from "@/shared/context/AuthContext";

interface MenuItem {
  label: string;
  href: string;
  icon: React.ReactNode;
  roles: string[]; // role keys allowed to see this item
}

export const AppSidebar = () => {
  const location = useLocation();
  const { user } = useAuth();

  const userRoles = user?.roles.map((role) => role.key) || [];

  const menuItems: MenuItem[] = [
    {
      label: "Dashboard",
      href: "/dashboard",
      icon: <BarChart className="h-5 w-5" />,
      roles: ["super_admin"],
    },
    {
      label: "Dashboard",
      href: "/user_management-dashboard",
      icon: <BarChart className="h-5 w-5" />,
      roles: ["admin", "unit_admin"],
    },
    {
      label: "Organizations",
      href: "/organizations",
      icon: <Building2 className="h-5 w-5" />,
      roles: ["super_admin"],
    },
    {
      label: "Organization Admins",
      href: "/organization_admins",
      icon: <Users2 className="h-5 w-5" />,
      roles: ["super_admin"],
    },
    {
      label: "User Management",
      href: "/user_management",
      icon: <UsersRound className="h-5 w-5" />,
      roles: ["admin", "unit_admin"],
    },
    {
      label: "Content Management",
      href: "/content-management",
      icon: <FileText className="h-5 w-5" />,
      roles: ["admin", "unit_admin"],
    },
    {
      label: "Bulk Upload",
      href: "/bulk-upload",
      icon: <FileText className="h-5 w-5" />,
      roles: ["unit_admin"],
    },
    {
      label: "Archives",
      href: "/archives",
      icon: <FileText className="h-5 w-5" />,
      roles: ["unit_admin"],
    },
    {
      label: "Activity Log",
      href: "/activity_log",
      icon: <ClipboardList className="h-5 w-5" />,
      roles: ["super_admin"],
    },
    {
      label: "Settings",
      href: "/settings",
      icon: <Settings className="h-5 w-5" />,
      roles: ["super_admin"],
    },
    {
      label: "Sector Reports",
      href: "/sector-reports",
      icon: <ChartAreaIcon className="h-5 w-5" />,
      roles: ["unit_admin", "admin"],
    },
  ];

  const filteredMenu = menuItems.filter((item) =>
    item.roles.some((r) => userRoles.includes(r)),
  );

  return (
    <div className="flex flex-col h-full border-r bg-gray-50">
      <div className="p-4">
        <img
          src="/assets/smart-office-logo.svg"
          alt="Smart Office"
          className="w-40"
        />
      </div>

      <div className="flex flex-col gap-1 px-2 py-4 flex-1">
        {filteredMenu.map((item) => (
          <MenuItem
            key={item.href}
            label={item.label}
            href={item.href}
            icon={item.icon}
            isActive={location.pathname === item.href}
          />
        ))}
      </div>

      <div className="p-4 mt-auto border-t">
        <MenuItem
          label="Logout"
          href="/"
          icon={<LogOut className="h-5 w-5" />}
          isActive={false}
        />
      </div>
    </div>
  );
};

interface MenuItemProps {
  label: string;
  href: string;
  icon: React.ReactNode;
  isActive?: boolean;
}

const MenuItem = ({ label, href, icon, isActive = false }: MenuItemProps) => {
  return (
    <Link
      to={href}
      className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
        isActive
          ? "bg-primary text-primary-foreground"
          : "hover:bg-primary/10 text-slate-800"
      }`}
    >
      {icon}
      <span className="text-sm font-medium">{label}</span>
    </Link>
  );
};