fix: resolve roles management issues

- Fix missing icon imports in RoleDetailPage (Edit, Calendar, FileText)
- Fix role title display in roles list (change from role.name to role.title)
- Fix role data fetching with proper API response structure
- Add RoleResponse interface for better API handling
- Improve error handling in getRole function

src/pages/roles/core/_models.ts

@@ -11,6 +11,10 @@ export interface UpdateRoleRequest {
   description: string;
 }
 
+export interface RoleResponse {
+  role: Role;
+}
+
 export interface RoleWithPermissions extends Role {
   permissions: Permission[];
 }

src/pages/roles/core/_requests.ts

@@ -10,6 +10,7 @@ import { Role, Permission } from "@/types/auth";
 import {
   CreateRoleRequest,
   UpdateRoleRequest,
+  RoleResponse,
   DeleteRoleResponse,
   AssignPermissionResponse,
 } from "./_models";
@@ -42,10 +43,27 @@ export const getRoles = async () => {
 };
 
 export const getRole = async (id: string) => {
-  const response = await httpGetRequest<Role>(
-    APIUrlGenerator(API_ROUTES.GET_ROLE(id))
-  );
-  return response.data;
+  try {
+    const response = await httpGetRequest<RoleResponse>(
+      APIUrlGenerator(API_ROUTES.GET_ROLE(id))
+    );
+    console.log("Role API Response:", response);
+
+    // Try nested structure first (like categories)
+    if (response.data && response.data.role) {
+      return response.data.role;
+    }
+
+    // Fallback to direct structure if nested doesn't exist
+    if (response.data) {
+      return response.data as unknown as Role;
+    }
+
+    throw new Error("No role data found in response");
+  } catch (error) {
+    console.error("Error fetching role:", error);
+    throw error;
+  }
 };
 
 export const createRole = async (roleData: CreateRoleRequest) => {

src/pages/roles/role-detail/RoleDetailPage.tsx

@@ -1,8 +1,10 @@
-import { useNavigate, useParams } from "react-router-dom";
-import { useRole } from "../core/_hooks";
-import { Button } from "@/components/ui/Button";
-import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
-import { ArrowRight, Edit, Users, Calendar, FileText } from "lucide-react";
+import { useParams, useNavigate } from 'react-router-dom';
+import { ArrowRight, Shield, Users, Key, Edit, Calendar, FileText } from 'lucide-react';
+import { Button } from '../../../components/ui/Button';
+import { LoadingSpinner } from '../../../components/ui/LoadingSpinner';
+import { useRole } from '../core/_hooks';
+import { PermissionWrapper } from '../../../components/common/PermissionWrapper';
+import { PageContainer, PageTitle, SectionTitle, SectionSubtitle, BodyText } from '../../../components/ui/Typography';
 
 const RoleDetailPage = () => {
     const navigate = useNavigate();

src/pages/roles/role-form/RoleFormPage.tsx

@@ -1,14 +1,15 @@
-import { useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-import { useRole, useCreateRole, useUpdateRole } from "../core/_hooks";
+import React, { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { useRole, useCreateRole, useUpdateRole } from '../core/_hooks';
+import { RoleFormData } from '../core/_models';
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
-import { RoleFormData } from "../core/_models";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Shield } from "lucide-react";
+import { FormHeader, PageContainer, Label } from '../../../components/ui/Typography';
 
 const roleSchema = yup.object({
     title: yup
@@ -75,9 +76,10 @@ const RoleFormPage = () => {
     const isLoading = creating || updating;
 
     return (
-        <div className="p-6">
-            <div className="mb-6">
-                <div className="flex items-center gap-4 mb-4">
+        <PageContainer>
+            <FormHeader
+                title={isEdit ? 'ویرایش نقش' : 'ایجاد نقش جدید'}
+                actions={
                     <Button
                         variant="secondary"
                         onClick={() => navigate('/roles')}
@@ -86,11 +88,8 @@ const RoleFormPage = () => {
                         <ArrowRight className="h-4 w-4" />
                         بازگشت
                     </Button>
-                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-                        {isEdit ? 'ویرایش نقش' : 'ایجاد نقش جدید'}
-                    </h1>
-                </div>
-            </div>
+                }
+            />
 
             <div className="max-w-2xl">
                 <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
@@ -104,14 +103,15 @@ const RoleFormPage = () => {
                         />
 
                         <div className="space-y-1">
-                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                            <Label htmlFor="description">
                                 توضیحات
-                            </label>
+                            </Label>
                             <textarea
+                                id="description"
                                 placeholder="توضیحات نقش را وارد کنید"
                                 className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-none h-24 ${errors.description
-                                        ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
-                                        : 'border-gray-300 dark:border-gray-600'
+                                    ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
+                                    : 'border-gray-300 dark:border-gray-600'
                                     } dark:bg-gray-700 dark:text-gray-100`}
                                 {...register('description')}
                             />
@@ -142,7 +142,7 @@ const RoleFormPage = () => {
                     </form>
                 </div>
             </div>
-        </div>
+        </PageContainer>
     );
 };
 

src/pages/roles/roles-list/RolesListPage.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/Button";
 import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
 import { Trash2, Edit3, Plus, UserCog, Shield, Eye, Settings } from "lucide-react";
 import { Modal } from "@/components/ui/Modal";
+import { PageContainer, PageTitle, SectionSubtitle } from '../../../components/ui/Typography';
 
 // Skeleton Loading Component
 const RolesTableSkeleton = () => (
@@ -135,22 +136,24 @@ const RolesListPage = () => {
     }
 
     return (
-        <div className="p-6 space-y-6">
+        <PageContainer>
             {/* Header */}
-            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div className="flex flex-col space-y-3 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
                 <div>
-                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
+                    <div className="flex items-center gap-2 mb-2">
                         <UserCog className="h-6 w-6" />
-                        مدیریت نقش‌ها
-                    </h1>
-                    <p className="text-gray-600 dark:text-gray-400 mt-1">
-                        مدیریت نقش‌ها و دسترسی‌های سیستم
-                    </p>
+                        <PageTitle>مدیریت نقش‌ها</PageTitle>
+                    </div>
+                    <p className="text-gray-600 dark:text-gray-400">مدیریت نقش‌ها و دسترسی‌های سیستم</p>
                 </div>
-                <Button onClick={handleCreate} className="flex items-center gap-2">
-                    <Plus className="h-4 w-4" />
-                    نقش جدید
-                </Button>
+
+                <button
+                    onClick={handleCreate}
+                    className="flex items-center justify-center w-12 h-12 bg-primary-600 hover:bg-primary-700 rounded-full transition-colors duration-200 text-white shadow-lg hover:shadow-xl"
+                    title="نقش جدید"
+                >
+                    <Plus className="h-5 w-5" />
+                </button>
             </div>
 
             {/* Filters */}
@@ -219,7 +222,7 @@ const RolesListPage = () => {
                                     {(roles || []).map((role: Role) => (
                                         <tr key={role.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                                             <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                                                {role.name}
+                                                {role.title}
                                             </td>
                                             <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                                 {role.description}
@@ -273,7 +276,7 @@ const RolesListPage = () => {
                                 <div className="flex justify-between items-start mb-2">
                                     <div>
                                         <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                                            {role.name}
+                                            {role.title}
                                         </h3>
                                         <p className="text-sm text-gray-600 dark:text-gray-400">
                                             {role.description}
@@ -344,7 +347,7 @@ const RolesListPage = () => {
                     </div>
                 </div>
             </Modal>
-        </div>
+        </PageContainer>
     );
 };