access logs detail
This commit is contained in:
hamid zarghami
@@ -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 */}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user