import React, { useState, ReactNode, useRef, useEffect } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { Button, PlusIcon, CopyIcon } from '../UiKit'; import { useOrg } from '../../contexts/OrgContext'; import { useAuth } from '../../contexts/AuthContext'; import { useUserOrganizations } from '../../contexts/UserOrganizationsContext'; import { FigmaPrimaryButton, FigmaSecondaryButton } from './FigmaButton'; import { FigmaIcons } from './figmaIcon'; import { FigmaInviteEmployeesModal } from './FigmaInviteEmployeesModal'; interface SidebarProps { companyName?: string; collapsed?: boolean; } export default function Sidebar({ companyName = "Zitlac Media", collapsed = false }: SidebarProps) { const { org, issueInviteViaApi } = useOrg(); const { createOrganization, selectOrganization, organizations, refreshOrganizations } = useUserOrganizations(); const { signOutUser } = useAuth(); const location = useLocation(); const navigate = useNavigate(); const [showInviteModal, setShowInviteModal] = useState(false); const [showOrgDropdown, setShowOrgDropdown] = useState(false); const [showCreateOrgModal, setShowCreateOrgModal] = useState(false); const [createOrgForm, setCreateOrgForm] = useState({ name: '', description: '' }); const [inviteLink, setInviteLink] = useState(''); const [emailLink, setEmailLink] = useState(''); const dropdownRef = useRef(null); // Close dropdown when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setShowOrgDropdown(false); } } document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); const handleCreateOrg = async () => { try { let { orgId } = await createOrganization( createOrgForm.name ); setCreateOrgForm({ name: '', description: '' }); setShowCreateOrgModal(false); selectOrganization(orgId); navigate(`/company-wiki`); } catch (error) { console.error('Failed to create organization:', error); } }; const handleOrgSwitch = (orgId: string) => { selectOrganization(orgId); setShowOrgDropdown(false); }; const handleInvite = async (emails: string[]) => { try { // Send invitations for multiple emails const results = await Promise.allSettled( emails.map(email => issueInviteViaApi({ name: '', // Name can be extracted from email or left empty email: email, role: '', department: '' })) ); // Check for any successful invites to generate links const successfulResults = results.filter(result => result.status === 'fulfilled') as PromiseFulfilledResult[]; if (successfulResults.length > 0) { // Use the first successful result for link generation const result = successfulResults[0].value; setInviteLink(result.inviteLink); // if (process.env.SENDGRID_API_KEY) { // setEmailLink(result.emailLink); // } } console.log(`Successfully sent ${successfulResults.length} invitations out of ${emails.length}`); } catch (error) { console.error('Failed to invite employees:', error); throw error; } }; const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text); }; const navItems = [ { icon: ( ), label: "Company Wiki", path: "/company-wiki", active: location.pathname === "/company-wiki" }, { icon: ( ), label: "Submissions", path: "/submissions", active: location.pathname === "/submissions" }, { icon: ( ), label: "Reports", path: "/reports", active: location.pathname === "/reports" || location.pathname === "/" }, { icon: ( ), label: "Chat", path: "/chat", active: location.pathname === "/chat" }, { icon: ( ), label: "Help", path: "/help", active: location.pathname === "/help" } ]; const settingsIcon = ( ); const handleNavClick = (path: string) => { navigate(path); }; return (
{/* Header Section */}
{/* Company Selector Dropdown */}
refreshOrganizations() && setShowOrgDropdown(!showOrgDropdown)} >
{org?.name || 'Select Organization'}
{/* Dropdown Menu */} {showOrgDropdown && (
{/* Current Organizations */} {organizations.map((organization) => (
handleOrgSwitch(organization.orgId)} >
{organization.name.charAt(0).toUpperCase()}
{organization.name}
{organization.name && (
{organization.name}
)}
{org?.orgId === organization.orgId && (
)}
))} {/* Divider */} {organizations.length > 0 && (
)} {/* Create New Organization */}
{ setShowOrgDropdown(false); setShowCreateOrgModal(true); }} >
Create New Organization
)}
{/* Navigation Items */}
{navItems.map((item, index) => (
handleNavClick(item.path)} className={`w-full px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer ${item.active ? 'bg-[--Neutrals-NeutralSlate100]' : 'hover:bg-[--Neutrals-NeutralSlate50]' }`} >
{React.cloneElement(item.icon, { stroke: item.active ? "var(--Brand-Orange)" : "var(--Neutrals-NeutralSlate400)" })}
{item.label}
))}
{/* Create Organization Modal */} {showCreateOrgModal && (

Create New Organization

setCreateOrgForm(prev => ({ ...prev, name: e.target.value }))} className="w-full px-3 py-2.5 border border-[--Neutrals-NeutralSlate200] rounded-xl bg-[--Neutrals-NeutralSlate0] text-[--Text-Gray-950] focus:outline-none focus:ring-2 focus:ring-[--Brand-Orange] focus:border-transparent" placeholder="Enter organization name" />