import React, { useState, ReactNode } from 'react'; import { NavLink, Outlet } from 'react-router-dom'; import { useTheme } from '../contexts/ThemeContext'; import { Theme, NavItem } from '../types'; import { useOrg } from '../contexts/OrgContext'; import { useAuth } from '../contexts/AuthContext'; import FigmaSidebar from './figma/Sidebar'; // ========== ICONS ========== export const CompanyWikiIcon = ({ className }: { className?: string }) => ( ); export const SubmissionsIcon = ({ className }: { className?: string }) => ( ); export const ReportsIcon = ({ className }: { className?: string }) => ( ); export const ChatIcon = ({ className }: { className?: string }) => ( ); export const HelpIcon = ({ className }: { className?: string }) => ( ); export const SettingsIcon = ({ className }: { className?: string }) => ( ); export const CopyIcon = ({ className }: { className?: string }) => ( ); export const PlusIcon = ({ className }: { className?: string }) => ( ); export const ChevronDownIcon = ({ className }: { className?: string }) => ( ); export const UploadIcon = ({ className }: { className?: string }) => ( ); export const CheckIcon = ({ className }: { className?: string }) => ( ); export const WarningIcon = ({ className }: { className?: string }) => ( ); export const DownloadIcon = ({ className }: { className?: string }) => ( ); export const MinusIcon = ({ className }: { className?: string }) => ( ); export const SunIcon = ({ className }: { className?: string }) => ( ); export const MoonIcon = ({ className }: { className?: string }) => ( ); export const SystemIcon = ({ className }: { className?: string }) => ( ); export const SendIcon = ({ className }: { className?: string }) => ( ); const NAV_ITEMS: NavItem[] = [ { href: '/company-wiki', label: 'Company Wiki', icon: CompanyWikiIcon }, { href: '/submissions', label: 'Submissions', icon: SubmissionsIcon }, { href: '/reports', label: 'Reports', icon: ReportsIcon }, { href: '/chat', label: 'Chat', icon: ChatIcon }, { href: '/help', label: 'Help', icon: HelpIcon }, ]; const BOTTOM_NAV_ITEMS: NavItem[] = [ { href: '/settings', label: 'Settings', icon: SettingsIcon } ]; // ========== LAYOUT COMPONENTS ========== const Sidebar = () => { const { org, issueInviteViaApi } = useOrg(); const { signOutUser } = useAuth(); const [showInviteModal, setShowInviteModal] = useState(false); const [inviteForm, setInviteForm] = useState({ name: '', email: '', role: '', department: '' }); const [inviteLink, setInviteLink] = useState(''); const [emailLink, setEmailLink] = useState(''); const commonLinkClasses = "flex items-center w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-200"; const activeClass = "bg-[--sidebar-active-bg] text-[--sidebar-active-text]"; const inactiveClass = "text-[--sidebar-text] hover:bg-[--sidebar-active-bg] hover:text-[--sidebar-active-text]"; const handleInvite = async () => { try { const result = await issueInviteViaApi({ name: inviteForm.name, email: inviteForm.email, role: inviteForm.role, department: inviteForm.department }); setInviteLink(result.inviteLink); setEmailLink(result.emailLink); setInviteForm({ name: '', email: '', role: '', department: '' }); } catch (error) { console.error('Failed to invite employee:', error); } }; const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text); }; const renderNavItems = (items: NavItem[]) => items.map(item => (
  • `${commonLinkClasses} ${isActive ? activeClass : inactiveClass}`} > {item.label}
    • )); return ( ); }; export const Layout = () => { const { org } = useOrg(); return (
    ); }; // ========== UI PRIMITIVES ========== interface CardProps extends React.HTMLAttributes { children: ReactNode; className?: string; padding?: 'sm' | 'md' | 'lg'; } export const Card: React.FC = ({ children, className, padding = 'md', ...props }) => { const paddingClasses = { sm: 'p-4', md: 'p-6', lg: 'p-8', }; return (
    {children}
    ); }; interface ButtonProps extends React.ButtonHTMLAttributes { children: ReactNode; variant?: 'primary' | 'secondary' | 'danger' | 'ghost'; size?: 'sm' | 'md' | 'lg'; } export const Button: React.FC = ({ children, variant = 'primary', size = 'md', className, ...props }) => { const baseClasses = 'inline-flex items-center justify-center font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed'; const variantClasses = { primary: 'bg-[--accent] text-[--accent-text] hover:bg-[--accent-hover] focus:ring-[--accent]', secondary: 'bg-[--button-secondary-bg] text-[--text-primary] hover:bg-[--button-secondary-hover] focus:ring-[--accent] border border-[--border-color]', danger: 'bg-[--status-red] text-white hover:bg-red-700 focus:ring-red-500', ghost: 'bg-transparent text-[--text-primary] hover:bg-[--background-tertiary]' }; const sizeClasses = { sm: 'px-3 py-1.5 text-xs', md: 'px-4 py-2 text-sm', lg: 'px-6 py-3 text-base', }; return ( ); }; interface AccordionProps { items: { question: string; answer: string }[]; } export const Accordion = ({ items }: AccordionProps) => { const [openIndex, setOpenIndex] = useState(0); const toggleItem = (index: number) => { setOpenIndex(openIndex === index ? null : index); }; return (
    {items.map((item, index) => (
    {openIndex === index && (
    {item.answer}
    )}
    ))}
    ); };