تطوير نظام لأنشطة التدريب الداخلي

## 1. Project Overview & Objective

The objective of this project is to develop, test, and deploy a modernized, high-fidelity sidebar navigation component based on the provided UI layout. The UI follows an Executive / Glassmorphism aesthetic, designed to optimize leadership oversight and systemic clarity.Crucially, this update incorporates a strategic alignment of organizational terminology across the front end, ensuring a shift from operational language to a more strategic outlook.

## 2. Scope of Deliverables### A. Front-End Development & UI EngineeringComponent Architecture: Build a responsive, accessible, and reusable sidebar navigation component using Next.js and Tailwind CSS.Visual Style (Executive / Glassmorphic):Implement translucent background blurs (backdrop-blur), subtle borders, and sophisticated dark-mode gradients.Incorporate high-contrast active states using custom amber/gold accent highlighting (as seen in the Learning Ops and Governance items).Strategic Terminology Implementation: Ensure that the front-end display matches the new strategic terminology perfectly while leaving the backend database schemas and keys completely untouched.Navigation Hierarchy & Labels:COMMAND $\rightarrow$ WorkspaceLEARNING OPS $\rightarrow$ Faculty & Class Delivery (Updated from Training Delivery)TALENT $\rightarrow$ People & ResourcesCONTROL $\rightarrow$ OperationsGROWTH $\rightarrow$ Sales & FinanceANALYTICS $\rightarrow$ ReportsGOVERNANCE $\rightarrow$ AdministrationInteractive Elements: * Incorporate smooth hover/active state transitions.Include dynamic dynamic badge counters (e.g., indicating item counts like 4, 5, 6, 9, 10) driven by real-time client-side state.Implement collapsible accordion sub-menus indicated by the chevron down (v) icons.### B. Testing & Quality Assurance (QA)Unit & Component Testing: Verify individual menu items, active state triggers, and accordion toggle behaviors using Jest and React Testing Library.Terminology & Mapping Verification: Audit the UI to guarantee that all instances of "Training" display as "Learning" and "Trainer" displays as "Faculty" on the client side, while ensuring backend API requests map correctly back to existing database fields.Cross-Browser & Responsiveness Testing: Validate fluid layouts across desktop, tablet, and mobile viewport breakpoints. Ensure seamless rendering on Chrome, Safari, and Edge.Accessibility (a11y): Ensure proper ARIA labeling (aria-expanded, aria-controls), keyboard navigation accessibility (Tab indexing), and contrast ratios compliance for executive viewing.### C. Deployment & HostingEnvironment Orchestration: Configure environments across Staging and Production.CI/CD Pipeline Integration: Automate build processes via GitHub actions connected to Vercel.Deployment Target: Deploy the frontend application seamlessly to Vercel, utilizing edge caching for fast global navigation load times.Post-Deployment Verification (Smoke Testing): Execute automated live checks to ensure database-driven badge counters fetch correctly through Supabase real-time subscriptions without disrupting existing user sessions.