Craze-Data-check/src/components/Sidebar.tsx

import React from 'react';
import { FileText, Table, Box, DollarSign, Package, Clock, History, AlertTriangle } from 'lucide-react';
import { cn } from '../lib/utils';

interface SidebarProps {
  activeModule: string;
  setActiveModule: (m: 'descriptions' | 'article_details' | 'matrix' | 'dimensions' | 'pricing' | 'pending_validation' | 'history' | 'missing_data') => void;
  userEmail: string;
}

export function Sidebar({ activeModule, setActiveModule, userEmail }: SidebarProps) {
  const isMasterUser = userEmail?.toLowerCase() === 'christian.vidal@craze-group.com';

  type ModuleId = 'descriptions' | 'article_details' | 'matrix' | 'dimensions' | 'pricing' | 'pending_validation' | 'history' | 'missing_data';

  const navItems: { id: ModuleId; label: string; icon: React.ElementType }[] = [
    { id: 'matrix', label: 'Matrix', icon: Table },
    { id: 'descriptions', label: 'Product Descriptions', icon: FileText },
    { id: 'article_details', label: 'Article Details', icon: Package },
    { id: 'dimensions', label: 'Dimensions', icon: Box },
    { id: 'pricing', label: 'Pricing & Units', icon: DollarSign },
    { id: 'missing_data', label: 'Missing Data', icon: AlertTriangle },
    ...(isMasterUser ? [
      { id: 'pending_validation' as ModuleId, label: 'Pending Validation', icon: Clock },
      { id: 'history' as ModuleId, label: 'Change History', icon: History }
    ] : [])
  ];

  return (
    <aside className="w-60 bg-slate-800 border-r border-slate-700 flex flex-col shrink-0">
      <div className="p-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">
        Modules
      </div>
      <nav className="flex-1 px-2 space-y-1">
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = activeModule === item.id;
          return (
            <button
              key={item.id}
              onClick={() => setActiveModule(item.id)}
              className={cn(
                "w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors",
                isActive
                  ? "bg-blue-600/10 text-blue-400"
                  : "text-slate-300 hover:bg-slate-700/50 hover:text-white"
              )}
            >
              <Icon className={cn("w-5 h-5", isActive ? "text-blue-500" : "text-slate-400")} />
              {item.label}
            </button>
          );
        })}
      </nav>
    </aside>
  );
}