ui: update navigation and routing

- Add routes for admin users, roles, and permissions management
- Update sidebar with System Management section
- Remove undeveloped menu items for cleaner demo
- Add proper route protection and loading states
- Export new permission management types

src/App.tsx

@@ -5,6 +5,7 @@ import { AuthProvider } from './contexts/AuthContext';
 import { ThemeProvider } from './contexts/ThemeContext';
 import { ToastProvider } from './contexts/ToastContext';
 import { ErrorBoundary } from './components/common/ErrorBoundary';
+import { LoadingSpinner } from './components/ui/LoadingSpinner';
 import { queryClient } from './lib/queryClient';
 import { useAuth } from './contexts/AuthContext';
 import { Login } from './pages/Login';
@@ -22,8 +23,25 @@ import RoleFormPage from './pages/roles/role-form/RoleFormPage';
 import RoleDetailPage from './pages/roles/role-detail/RoleDetailPage';
 import RolePermissionsPage from './pages/roles/role-permissions/RolePermissionsPage';
 
+// Admin Users Pages
+import AdminUsersListPage from './pages/admin-users/admin-users-list/AdminUsersListPage';
+import AdminUserFormPage from './pages/admin-users/admin-user-form/AdminUserFormPage';
+
+// Permissions Pages
+import PermissionsListPage from './pages/permissions/permissions-list/PermissionsListPage';
+import PermissionFormPage from './pages/permissions/permission-form/PermissionFormPage';
+
 const ProtectedRoute = ({ children }: { children: any }) => {
-    const { user } = useAuth();
+    const { user, isLoading } = useAuth();
+
+    if (isLoading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <LoadingSpinner />
+            </div>
+        );
+    }
+
     return user ? children : <Navigate to="/login" replace />;
 };
 
@@ -49,12 +67,22 @@ const AppRoutes = () => {
                 <Route path="roles/:id" element={<RoleDetailPage />} />
                 <Route path="roles/:id/edit" element={<RoleFormPage />} />
                 <Route path="roles/:id/permissions" element={<RolePermissionsPage />} />
+
+                {/* Admin Users Routes */}
+                <Route path="admin-users" element={<AdminUsersListPage />} />
+                <Route path="admin-users/create" element={<AdminUserFormPage />} />
+                <Route path="admin-users/:id/edit" element={<AdminUserFormPage />} />
+
+                {/* Permissions Routes */}
+                <Route path="permissions" element={<PermissionsListPage />} />
+                <Route path="permissions/create" element={<PermissionFormPage />} />
+                <Route path="permissions/:id/edit" element={<PermissionFormPage />} />
             </Route>
         </Routes>
     );
 };
 
-function App() {
+const App = () => {
     return (
         <ErrorBoundary>
             <QueryClientProvider client={queryClient}>
@@ -71,6 +99,6 @@ function App() {
             </QueryClientProvider>
         </ErrorBoundary>
     );
-}
+};
 
 export default App; 

src/components/layout/Sidebar.tsx

@@ -1,230 +1,166 @@
-import { useState } from 'react';
+import React from 'react';
 import { NavLink } from 'react-router-dom';
 import {
-    LayoutDashboard,
-    Users,
-    ShoppingBag,
-    ShoppingCart,
-    FileText,
-    Bell,
-    X,
+    Home,
+    Settings,
+    Shield,
+    UserCog,
+    Key,
+    LogOut,
     ChevronDown,
-    Shield
+    ChevronRight
 } from 'lucide-react';
 import { useAuth } from '../../contexts/AuthContext';
 import { PermissionWrapper } from '../common/PermissionWrapper';
-import { MenuItem } from '../../types';
+
+interface MenuItem {
+    title: string;
+    icon: any;
+    path?: string;
+    permission?: number;
+    children?: MenuItem[];
+}
 
 const menuItems: MenuItem[] = [
     {
-        id: 'dashboard',
-        label: 'داشبورد',
-        icon: LayoutDashboard,
+        title: 'داشبورد',
+        icon: Home,
         path: '/',
     },
     {
-        id: 'users',
-        label: 'کاربران',
-        icon: Users,
-        path: '/users',
-        permission: 10,
-    },
-    {
-        id: 'roles',
-        label: 'نقش‌ها',
-        icon: Shield,
-        path: '/roles',
-        permission: 5,
-    },
-    {
-        id: 'products',
-        label: 'محصولات',
-        icon: ShoppingBag,
-        path: '/products',
-        permission: 15,
-    },
-    {
-        id: 'orders',
-        label: 'سفارشات',
-        icon: ShoppingCart,
-        path: '/orders',
-        permission: 20,
-    },
-    {
-        id: 'reports',
-        label: 'گزارش‌ها',
-        icon: FileText,
-        path: '/reports',
-        permission: 25,
-    },
-    {
-        id: 'notifications',
-        label: 'اعلانات',
-        icon: Bell,
-        path: '/notifications',
-        permission: 30,
-    },
+        title: 'مدیریت سیستم',
+        icon: Settings,
+        children: [
+            {
+                title: 'نقش‌ها',
+                icon: Shield,
+                path: '/roles',
+                permission: 22,
+            },
+            {
+                title: 'کاربران ادمین',
+                icon: UserCog,
+                path: '/admin-users',
+                permission: 22,
+            },
+            {
+                title: 'دسترسی‌ها',
+                icon: Key,
+                path: '/permissions',
+                permission: 22,
+            },
+        ]
+    }
 ];
 
-interface SidebarProps {
-    isOpen: boolean;
-    onClose: () => void;
-}
+export const Sidebar = () => {
+    const { user, logout, hasPermission } = useAuth();
+    const [expandedItems, setExpandedItems] = React.useState<string[]>(['مدیریت سیستم']);
 
-export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
-    const { user, hasPermission } = useAuth();
-    const [expandedItems, setExpandedItems] = useState<string[]>([]);
-
-    const toggleExpanded = (itemId: string) => {
+    const toggleExpanded = (title: string) => {
         setExpandedItems(prev =>
-            prev.includes(itemId)
-                ? prev.filter(id => id !== itemId)
-                : [...prev, itemId]
+            prev.includes(title)
+                ? prev.filter(item => item !== title)
+                : [...prev, title]
         );
     };
 
-    const renderMenuItem = (item: MenuItem) => {
+    const renderMenuItem = (item: MenuItem, depth = 0) => {
         const hasChildren = item.children && item.children.length > 0;
-        const isExpanded = expandedItems.includes(item.id);
+        const isExpanded = expandedItems.includes(item.title);
+        const paddingLeft = depth * 16;
 
-        const menuContent = (
-            <>
-                <div
-                    className={`flex items-center justify-between px-4 py-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors ${hasChildren ? 'cursor-pointer' : ''
-                        }`}
-                    onClick={hasChildren ? () => toggleExpanded(item.id) : undefined}
-                >
-                    <div className="flex items-center">
-                        <item.icon className="h-5 w-5 ml-3" />
-                        <span className="font-medium">{item.label}</span>
-                    </div>
-                    {hasChildren && (
-                        <ChevronDown
-                            className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
-                        />
+        if (hasChildren) {
+            return (
+                <div key={item.title} className="space-y-1">
+                    <button
+                        onClick={() => toggleExpanded(item.title)}
+                        className={`w-full flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors
+                            text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700`}
+                        style={{ paddingLeft: `${paddingLeft + 16}px` }}
+                    >
+                        <item.icon className="ml-3 h-5 w-5" />
+                        <span className="flex-1 text-right">{item.title}</span>
+                        {isExpanded ? (
+                            <ChevronDown className="h-4 w-4" />
+                        ) : (
+                            <ChevronRight className="h-4 w-4" />
+                        )}
+                    </button>
+                    {isExpanded && item.children && (
+                        <div className="space-y-1">
+                            {item.children.map(child => renderMenuItem(child, depth + 1))}
+                        </div>
                     )}
                 </div>
-
-                {hasChildren && isExpanded && (
-                    <div className="mr-8 mt-1 space-y-1">
-                        {item.children?.map(child => (
-                            <div key={child.id}>
-                                {child.permission ? (
-                                    <PermissionWrapper permission={child.permission}>
-                                        <NavLink
-                                            to={child.path}
-                                            className={({ isActive }) =>
-                                                `block px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors ${isActive ? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300' : ''
-                                                }`
-                                            }
-                                            onClick={onClose}
-                                        >
-                                            {child.label}
-                                        </NavLink>
-                                    </PermissionWrapper>
-                                ) : (
-                                    <NavLink
-                                        to={child.path}
-                                        className={({ isActive }) =>
-                                            `block px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors ${isActive ? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300' : ''
-                                            }`
-                                        }
-                                        onClick={onClose}
-                                    >
-                                        {child.label}
-                                    </NavLink>
-                                )}
-                            </div>
-                        ))}
-                    </div>
-                )}
-            </>
-        );
-
-        if (!hasChildren) {
-            return (
-                <NavLink
-                    to={item.path}
-                    className={({ isActive }) =>
-                        `flex items-center px-4 py-3 rounded-lg transition-colors ${isActive
-                            ? 'text-primary-700 dark:text-primary-300 bg-primary-100 dark:bg-primary-900'
-                            : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-                        }`
-                    }
-                    onClick={onClose}
-                >
-                    <item.icon className="h-5 w-5 ml-3" />
-                    <span className="font-medium">{item.label}</span>
-                </NavLink>
             );
         }
 
-        return <div>{menuContent}</div>;
+        const menuContent = (
+            <NavLink
+                to={item.path!}
+                className={({ isActive }) =>
+                    `w-full flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors ${isActive
+                        ? 'bg-primary-50 dark:bg-primary-900 text-primary-600 dark:text-primary-400'
+                        : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                    }`
+                }
+                style={{ paddingLeft: `${paddingLeft + 16}px` }}
+            >
+                <item.icon className="ml-3 h-5 w-5" />
+                {item.title}
+            </NavLink>
+        );
+
+        if (item.permission) {
+            return (
+                <PermissionWrapper key={item.title} permission={item.permission}>
+                    {menuContent}
+                </PermissionWrapper>
+            );
+        }
+
+        return <div key={item.title}>{menuContent}</div>;
     };
 
     return (
-        <>
-            {isOpen && (
-                <div
-                    className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
-                    onClick={onClose}
-                />
-            )}
+        <div className="flex h-full w-64 flex-col bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700">
+            {/* Logo */}
+            <div className="flex h-16 items-center justify-center border-b border-gray-200 dark:border-gray-700">
+                <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+                    پنل مدیریت
+                </h1>
+            </div>
 
-            <div className={`
-        fixed top-0 right-0 h-full w-64 bg-white dark:bg-gray-800 shadow-lg z-50 transform transition-transform duration-300 ease-in-out
-        ${isOpen ? 'translate-x-0' : 'translate-x-full'}
-        lg:relative lg:translate-x-0
-      `}>
-                <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-                    <div className="flex items-center">
-                        <div className="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
-                            <LayoutDashboard className="h-5 w-5 text-white" />
-                        </div>
-                        <span className="mr-3 text-xl font-bold text-gray-900 dark:text-gray-100">
-                            پنل مدیریت
+            {/* Navigation */}
+            <nav className="flex-1 space-y-1 px-4 py-6">
+                {menuItems.map(item => renderMenuItem(item))}
+            </nav>
+
+            {/* User Info */}
+            <div className="border-t border-gray-200 dark:border-gray-700 p-4">
+                <div className="flex items-center space-x-3 space-x-reverse">
+                    <div className="h-8 w-8 rounded-full bg-primary-600 flex items-center justify-center">
+                        <span className="text-sm font-medium text-white">
+                            {user?.first_name?.[0]}{user?.last_name?.[0]}
                         </span>
                     </div>
+                    <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                            {user?.first_name} {user?.last_name}
+                        </p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                            {user?.username}
+                        </p>
+                    </div>
                     <button
-                        onClick={onClose}
-                        className="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 lg:hidden"
+                        onClick={logout}
+                        className="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400"
                     >
-                        <X className="h-5 w-5" />
+                        <LogOut className="h-5 w-5" />
                     </button>
                 </div>
-
-                <div className="p-4">
-                    <div className="flex items-center mb-6 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
-                        <div className="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center">
-                            <span className="text-white font-medium">
-                                {user?.first_name?.charAt(0) || 'A'}
-                            </span>
-                        </div>
-                        <div className="mr-3">
-                            <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                                {user?.first_name} {user?.last_name}
-                            </p>
-                            <p className="text-xs text-gray-500 dark:text-gray-400">
-                                {user?.username}
-                            </p>
-                        </div>
-                    </div>
-
-                    <nav className="space-y-2">
-                        {menuItems.map(item => (
-                            <div key={item.id}>
-                                {item.permission ? (
-                                    <PermissionWrapper permission={item.permission}>
-                                        {renderMenuItem(item)}
-                                    </PermissionWrapper>
-                                ) : (
-                                    renderMenuItem(item)
-                                )}
-                            </div>
-                        ))}
-                    </nav>
-                </div>
             </div>
-        </>
+        </div>
     );
 }; 

src/types/index.ts

@@ -1,5 +1,42 @@
+import { Permission } from "./auth";
+
 export * from "./auth";
 
+// Permission Management Types
+export interface CreatePermissionRequest {
+  title: string;
+  description: string;
+}
+
+export interface UpdatePermissionRequest {
+  id: number;
+  title: string;
+  description: string;
+}
+
+export interface CreatePermissionResponse {
+  permission: Permission;
+}
+
+export interface UpdatePermissionResponse {
+  permission: Permission;
+}
+
+export interface GetPermissionByIDResponse {
+  permission: Permission;
+}
+
+export interface GetAllPermissionsResponse {
+  permissions: Permission[];
+}
+
+export interface DeletePermissionResponse {
+  message: string;
+}
+
+// Re-export Permission from auth for convenience
+export type { Permission } from "./auth";
+
 export interface User {
   id: string;
   name: string;