update

frontend/src/app/admin/layout.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import ProtectedRoute from '@/components/ProtectedRoute'
-import { useAuth } from '@/contexts/AuthContext'
+import { AuthProvider, useAuth } from '@/contexts/AuthContext'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import {
@@ -16,7 +16,8 @@ import {
   Clock,
   Building2,
   LogOut,
-  LayoutDashboard
+  LayoutDashboard,
+  Users2
 } from 'lucide-react'
 
 function AdminLayoutContent({ children }: { children: React.ReactNode }) {
@@ -27,6 +28,7 @@ function AdminLayoutContent({ children }: { children: React.ReactNode }) {
     { icon: LayoutDashboard, label: 'لوحة التحكم', href: '/admin', exact: true },
     { icon: Users, label: 'إدارة المستخدمين', href: '/admin/users' },
     { icon: Shield, label: 'الأدوار والصلاحيات', href: '/admin/roles' },
+    { icon: Users2, label: 'مجموعات الصلاحيات', href: '/admin/permission-groups' },
     { icon: Database, label: 'النسخ الاحتياطي', href: '/admin/backup' },
     { icon: Settings, label: 'إعدادات النظام', href: '/admin/settings' },
     { icon: FileText, label: 'سجل العمليات', href: '/admin/audit-logs' },
@@ -37,9 +39,7 @@ function AdminLayoutContent({ children }: { children: React.ReactNode }) {
   ]
 
   const isActive = (href: string, exact?: boolean) => {
-    if (exact) {
-      return pathname === href
-    }
+    if (exact) return pathname === href
     return pathname.startsWith(href)
   }
 
@@ -57,6 +57,7 @@ function AdminLayoutContent({ children }: { children: React.ReactNode }) {
               <p className="text-xs text-gray-600">System Admin</p>
             </div>
           </div>
+
           <div className="bg-red-50 border border-red-200 rounded-lg p-3">
             <p className="text-xs font-semibold text-red-900">{user?.username}</p>
             <p className="text-xs text-red-700">{user?.role?.name}</p>
@@ -72,9 +73,7 @@ function AdminLayoutContent({ children }: { children: React.ReactNode }) {
                 key={item.href}
                 href={item.href}
                 className={`flex items-center gap-3 px-4 py-3 rounded-lg mb-2 transition-all ${
-                  active
-                    ? 'bg-red-600 text-white shadow-md'
-                    : 'text-gray-700 hover:bg-gray-100'
+                  active ? 'bg-red-600 text-white shadow-md' : 'text-gray-700 hover:bg-gray-100'
                 }`}
               >
                 <Icon className="h-5 w-5" />
@@ -104,18 +103,17 @@ function AdminLayoutContent({ children }: { children: React.ReactNode }) {
       </aside>
 
       {/* Main Content */}
-      <main className="mr-64 flex-1 p-8">
-        {children}
-      </main>
+      <main className="mr-64 flex-1 p-8">{children}</main>
     </div>
   )
 }
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
   return (
-    <ProtectedRoute>
-      <AdminLayoutContent>{children}</AdminLayoutContent>
-    </ProtectedRoute>
+    <AuthProvider>
+      <ProtectedRoute>
+        <AdminLayoutContent>{children}</AdminLayoutContent>
+      </ProtectedRoute>
+    </AuthProvider>
   )
 }
-