mirror of
https://github.com/christianvidalwolf-prog/Craze-Data-check.git
synced 2026-08-03 14:35:23 +02:00
Christian Vidal WolfandClaude Sonnet 4.6
7eeccdaf8c
Replaces the tab approach with a dedicated 'Missing Data' module in the sidebar. The module has two sub-tabs: 'Missing Classification' and 'Missing Launch Date'. Shows SKU, Name, Classification, Launch Date and Ready to Order columns. Includes a local Excel serial date formatter so dates that slipped through the App.tsx pre-processing are rendered correctly instead of showing as raw numbers. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
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>
|
|
);
|
|
}
|