access logs detail

src/pages/accessLogs/AccessLogsList.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import {
     DocumentText,
-    Refresh,
     Activity,
-    InfoCircle
+    InfoCircle,
+    Refresh
 } from "iconsax-react";
 import Button from "../../components/Button";
 import Pagination from "../../components/Pagination";
@@ -14,7 +14,7 @@ import FilterPanel from "./components/FilterPanel";
 import AccessLogsTable from "./components/AccessLogsTable";
 import LogDetailsModal from "./components/LogDetailsModal";
 import { useAccessLogs, useAccessLogDetail } from "./hooks/useAccessLogs";
-import { AccessLog } from "./types/AccessLogTypes";
+import { AccessLog, OperationType, UserType } from "./types/AccessLogTypes";
 
 const AccessLogsList: React.FC = () => {
     const {
@@ -28,17 +28,32 @@ const AccessLogsList: React.FC = () => {
         refetch,
     } = useAccessLogs();
 
-    const { log: selectedLog, fetchLog, clearLog } = useAccessLogDetail();
+    const { log: selectedLog, loading: detailLoading, error: detailError, fetchLog, clearLog } = useAccessLogDetail();
     const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
+    const [directLog, setDirectLog] = useState<AccessLog | null>(null);
 
     const handleViewDetails = async (log: AccessLog) => {
-        await fetchLog(log.id);
+        try {
             setIsDetailsModalOpen(true);
+            // اگر لاگ کامل است (مثل داده‌های نمونه)، مستقیماً نمایش بده
+            if (log.user !== undefined || log.oldValues !== undefined || log.newValues !== undefined) {
+                setDirectLog(log);
+                clearLog(); // پاک کردن selectedLog
+            } else {
+                // اگر لاگ از API آمده، جزئیات کامل را دریافت کن
+                setDirectLog(null);
+                await fetchLog(log.id);
+            }
+        } catch (error) {
+            console.error('خطا در دریافت جزئیات لاگ:', error);
+            // مودال باز می‌ماند تا خطا نمایش داده شود
+        }
     };
 
     const handleCloseDetailsModal = () => {
         setIsDetailsModalOpen(false);
         clearLog();
+        setDirectLog(null);
     };
 
     const handleSort = (field: string, order: "ASC" | "DESC") => {
@@ -80,6 +95,36 @@ const AccessLogsList: React.FC = () => {
                 </div>
 
                 <div className="flex items-center gap-3">
+                    <Button
+                        onClick={() => {
+                            // تست مودال با داده‌های نمونه
+                            const sampleLog: AccessLog = {
+                                id: "eb528348-d1c8-4216-8a78-fa62ca56b65a",
+                                createdAt: "2025-09-02T12:55:47.593Z",
+                                updatedAt: "2025-09-02T12:55:47.593Z",
+                                operationType: "UPDATE" as OperationType,
+                                userType: "ADMIN" as UserType,
+                                entityName: "Blog",
+                                entityId: "9763ceb4-ce32-4474-979c-5581c9d2cd24",
+                                actionDescription: "Updated Blog",
+                                oldValues: undefined,
+                                newValues: '{"userId":"2c6895a4-e04a-4b1d-aa22-390c37353630","userType":"ADMIN","actionDescription":"Admin updated blog: میل سرور چیست؟ راهنمای کاربردی + معرفی بهترین گزینه برای شرکت‌ها  | DanakCorp","metadata":{"categoryId":"a940f9b5-c1a9-4ff1-b67d-ae78c62fc792"}}',
+                                ipAddress: undefined,
+                                userAgent: undefined,
+                                endpoint: undefined,
+                                statusCode: undefined,
+                                errorMessage: undefined,
+                                metadata: undefined,
+                                requestId: undefined,
+                                user: undefined
+                            };
+                            handleViewDetails(sampleLog);
+                        }}
+                        className="flex items-center gap-2 border border-blue-300 bg-blue-50 text-blue-700 hover:bg-blue-100"
+                    >
+                        <InfoCircle size={16} />
+                        تست مودال
+                    </Button>
                     <Button
                         onClick={refetch}
                         disabled={loading}
@@ -174,9 +219,11 @@ const AccessLogsList: React.FC = () => {
 
             {/* Details Modal */}
             <LogDetailsModal
-                log={selectedLog}
+                log={directLog || selectedLog}
                 isOpen={isDetailsModalOpen}
                 onClose={handleCloseDetailsModal}
+                loading={detailLoading}
+                error={detailError}
             />
 
             {/* Empty State Info */}

src/pages/accessLogs/components/AccessLogsTable.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Eye, ArrowUp, ArrowDown, Clock, User, DocumentText } from "iconsax-react";
+import { ArrowUp, ArrowDown, Clock, User, DocumentText } from "iconsax-react";
 import Button from "../../../components/Button";
 import StatusCircle from "../../../components/StatusCircle";
 import Td from "../../../components/Td";
@@ -224,9 +224,8 @@ const AccessLogsTable: React.FC<AccessLogsTableProps> = ({
                             <Td text="">
                                 <Button
                                     onClick={() => onViewDetails(log)}
-                                    className="text-sm px-3 py-1 bg-transparent text-blue-600 hover:text-blue-800 hover:bg-blue-50"
+                                    className="w-fit px-4"
                                 >
-                                    <Eye size={16} className="ml-1" />
                                     جزئیات
                                 </Button>
                             </Td>

src/pages/accessLogs/components/LogDetailsModal.tsx

@@ -26,14 +26,18 @@ interface LogDetailsModalProps {
     log: AccessLog | null;
     isOpen: boolean;
     onClose: () => void;
+    loading?: boolean;
+    error?: string | null;
 }
 
 const LogDetailsModal: React.FC<LogDetailsModalProps> = ({
     log,
     isOpen,
     onClose,
+    loading = false,
+    error = null,
 }) => {
-    if (!log) return null;
+    if (!isOpen) return null;
 
     const getOperationTypeColor = (type: OperationType): string => {
         const colors = {
@@ -154,6 +158,32 @@ const LogDetailsModal: React.FC<LogDetailsModalProps> = ({
                     </Button>
                 </div>
 
+                {/* Loading State */}
+                {loading && (
+                    <div className="flex items-center justify-center py-12">
+                        <div className="text-center">
+                            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+                            <p className="text-gray-600">در حال بارگذاری جزئیات...</p>
+                        </div>
+                    </div>
+                )}
+
+                {/* Error State */}
+                {error && (
+                    <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+                        <div className="flex items-center gap-3">
+                            <Warning2 size={20} className="text-red-600" />
+                            <div>
+                                <h3 className="text-sm font-medium text-red-900">خطا در بارگذاری</h3>
+                                <p className="text-sm text-red-700 mt-1">{error}</p>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* Content - Only show if not loading and no error */}
+                {!loading && !error && log && (
+                    <>
                         {/* Basic Information */}
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                             <InfoRow
@@ -357,6 +387,16 @@ const LogDetailsModal: React.FC<LogDetailsModalProps> = ({
                                 بستن
                             </Button>
                         </div>
+                    </>
+                )}
+
+                {/* No Data State */}
+                {!loading && !error && !log && (
+                    <div className="text-center py-12">
+                        <InfoCircle size={48} className="text-gray-400 mx-auto mb-4" />
+                        <p className="text-gray-600">هیچ داده‌ای برای نمایش وجود ندارد</p>
+                    </div>
+                )}
             </div>
         </DefaulModal>
     );

src/pages/accessLogs/service/AccessLogService.ts

@@ -79,6 +79,14 @@ class AccessLogsService {
   // Get specific log by ID
   async getLogById(id: string): Promise<{ accessLog: AccessLog }> {
     const response = await axios.get(`${this.baseUrl}/${id}`);
+
+    // Handle the nested data structure
+    if (response.data.data && response.data.data.accessLog) {
+      return {
+        accessLog: response.data.data.accessLog,
+      };
+    }
+
     return response.data;
   }