From 37747941ce48e14a12b9dae86cbcb4ca85a493a4 Mon Sep 17 00:00:00 2001
From: hosseintaromi <hosseintaromii@gmail.com>
Date: Tue, 22 Jul 2025 00:04:25 +0330
Subject: [PATCH] fix(roles): add fallback and debug for roles API response

- Add console.log to debug roles API response structure
- Handle different API response formats (results, items, data fields)
- Add fallback to empty array when API fails or returns non-array
- Fix roles?.map error by ensuring roles is always an array
- Handle backend API not working scenario
---
 src/pages/roles/core/_requests.ts            | 38 ++++++++-
 src/pages/roles/roles-list/RolesListPage.tsx | 88 ++++++++++----------
 2 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/src/pages/roles/core/_requests.ts b/src/pages/roles/core/_requests.ts
index 3760027..3e968fc 100644
--- a/src/pages/roles/core/_requests.ts
+++ b/src/pages/roles/core/_requests.ts
@@ -15,10 +15,40 @@ import {
 } from "./_models";
 
 export const getRoles = async () => {
-  const response = await httpGetRequest<Role[]>(
-    APIUrlGenerator(API_ROUTES.GET_ROLES)
-  );
-  return response.data;
+  try {
+    const response = await httpGetRequest<Role[]>(
+      APIUrlGenerator(API_ROUTES.GET_ROLES)
+    );
+    console.log("Roles API Response:", response);
+    console.log("Roles data:", response.data);
+
+    // اگر response.data آرایه نیست، ممکن است در فیلد دیگری باشد
+    if (Array.isArray(response.data)) {
+      return response.data;
+    }
+
+    // بررسی اگر در فیلدهای دیگر باشد
+    if (response.data && typeof response.data === "object") {
+      // چک کن آیا در results یا items یا data هست
+      if (Array.isArray((response.data as any).results)) {
+        return (response.data as any).results;
+      }
+      if (Array.isArray((response.data as any).items)) {
+        return (response.data as any).items;
+      }
+      if (Array.isArray((response.data as any).data)) {
+        return (response.data as any).data;
+      }
+    }
+
+    // fallback: آرایه خالی برگردان
+    console.warn("Roles data is not an array:", response.data);
+    return [];
+  } catch (error) {
+    console.error("Error fetching roles:", error);
+    // اگر backend کار نمی‌کند، آرایه خالی برگردان
+    return [];
+  }
 };
 
 export const getRole = async (id: string) => {
diff --git a/src/pages/roles/roles-list/RolesListPage.tsx b/src/pages/roles/roles-list/RolesListPage.tsx
index 7d607ec..d39b624 100644
--- a/src/pages/roles/roles-list/RolesListPage.tsx
+++ b/src/pages/roles/roles-list/RolesListPage.tsx
@@ -4,7 +4,7 @@ import { useRoles, useDeleteRole } from "../core/_hooks";
 import { Button } from "@/components/ui/Button";
 import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
 import { Role } from "@/types/auth";
-import { Trash2, Edit, Plus, Eye, Users } from "lucide-react";
+import { Trash2, Edit, Plus, Eye, Users, Edit3, Shield } from "lucide-react";
 import { Modal } from "@/components/ui/Modal";
 
 const RolesListPage = () => {
@@ -88,65 +88,61 @@ const RolesListPage = () => {
                             </tr>
                         </thead>
                         <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                            {roles?.map((role: Role) => (
+                            {(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">
                                         <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                             {role.title}
                                         </div>
-                                    </td>
-                                    <td className="px-6 py-4">
-                                        <div className="text-sm text-gray-600 dark:text-gray-300 max-w-xs truncate">
+                                        <div className="text-sm text-gray-500 dark:text-gray-400">
                                             {role.description}
                                         </div>
                                     </td>
                                     <td className="px-6 py-4 whitespace-nowrap">
-                                        <span className="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
+                                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                                             {role.permissions?.length || 0} دسترسی
                                         </span>
                                     </td>
-                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                         {new Date(role.created_at).toLocaleDateString('fa-IR')}
                                     </td>
-                                    <td className="px-6 py-4 whitespace-nowrap text-sm">
-                                        <div className="flex items-center gap-2">
-                                            <Button
-                                                size="sm"
-                                                variant="secondary"
-                                                onClick={() => handleView(role.id)}
-                                                className="flex items-center gap-1"
-                                            >
-                                                <Eye className="h-3 w-3" />
-                                                مشاهده
-                                            </Button>
-                                            <Button
-                                                size="sm"
-                                                variant="primary"
-                                                onClick={() => handlePermissions(role.id)}
-                                                className="flex items-center gap-1"
-                                            >
-                                                <Users className="h-3 w-3" />
-                                                دسترسی‌ها
-                                            </Button>
-                                            <Button
-                                                size="sm"
-                                                variant="secondary"
-                                                onClick={() => handleEdit(role.id)}
-                                                className="flex items-center gap-1"
-                                            >
-                                                <Edit className="h-3 w-3" />
-                                                ویرایش
-                                            </Button>
-                                            <Button
-                                                size="sm"
-                                                variant="danger"
-                                                onClick={() => handleDelete(role.id)}
-                                                className="flex items-center gap-1"
-                                            >
-                                                <Trash2 className="h-3 w-3" />
-                                                حذف
-                                            </Button>
-                                        </div>
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => handleView(role.id)}
+                                            className="ml-2"
+                                        >
+                                            <Eye className="h-4 w-4 ml-1" />
+                                            مشاهده
+                                        </Button>
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => handleEdit(role.id)}
+                                            className="ml-2"
+                                        >
+                                            <Edit3 className="h-4 w-4 ml-1" />
+                                            ویرایش
+                                        </Button>
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => handlePermissions(role.id)}
+                                            className="ml-2"
+                                        >
+                                            <Users className="h-4 w-4 ml-1" />
+                                            دسترسی‌ها
+                                        </Button>
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => setDeleteRoleId(role.id.toString())}
+                                            className="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
+                                        >
+                                            <Trash2 className="h-4 w-4 ml-1" />
+                                            حذف
+                                        </Button>
                                     </td>
                                 </tr>
                             ))}