🚀 Initialize Musadaq SaaS: Full Backend + AI + React Dashboard + Docker Setup

frontend/src/components/layout/Sidebar.tsx

@@ -0,0 +1,70 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — Premium Sidebar
+ * ════════════════════════════════════════════════════════════
+ */
+
+import { NavLink } from 'react-router-dom';
+import { 
+  LayoutDashboard, 
+  FileText, 
+  Building2, 
+  Users, 
+  Settings, 
+  LogOut 
+} from 'lucide-react';
+import { useAuthStore } from '../../store/authStore';
+
+const menuItems = [
+  { icon: LayoutDashboard, label: 'الرئيسية', path: '/dashboard' },
+  { icon: FileText, label: 'الفواتير', path: '/invoices' },
+  { icon: Building2, label: 'الشركات', path: '/companies' },
+  { icon: Users, label: 'الموظفون', path: '/staff' },
+  { icon: Settings, label: 'الإعدادات', path: '/settings' },
+];
+
+export const Sidebar = () => {
+  const clearAuth = useAuthStore((state) => state.clearAuth);
+
+  return (
+    <aside className="w-64 h-screen glass border-l border-slate-200 sticky top-0 flex flex-col p-4">
+      <div className="flex items-center gap-3 px-2 py-6">
+        <div className="w-10 h-10 bg-primary-600 rounded-xl flex items-center justify-center shadow-lg shadow-primary-500/30">
+          <FileText className="text-white w-6 h-6" />
+        </div>
+        <h1 className="text-xl font-bold bg-gradient-to-br from-slate-900 to-slate-500 bg-clip-text text-transparent">
+          مُصادَق
+        </h1>
+      </div>
+
+      <nav className="flex-1 mt-4 space-y-1">
+        {menuItems.map((item) => (
+          <NavLink
+            key={item.path}
+            to={item.path}
+            className={({ isActive }) =>
+              `flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group ${
+                isActive 
+                  ? 'bg-primary-50 text-primary-600 shadow-sm border border-primary-100' 
+                  : 'text-slate-500 hover:bg-slate-50 hover:text-slate-900'
+              }`
+            }
+          >
+            <item.icon className="w-5 h-5" />
+            <span className="font-medium">{item.label}</span>
+          </NavLink>
+        ))}
+      </nav>
+
+      <div className="pt-4 border-t border-slate-100">
+        <button
+          onClick={clearAuth}
+          className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-red-500 hover:bg-red-50 transition-all group"
+        >
+          <LogOut className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
+          <span className="font-medium">تسجيل الخروج</span>
+        </button>
+      </div>
+    </aside>
+  );
+};