audit
This commit is contained in:
parent
ac6c42e50a
commit
6ef3e36141
|
|
@ -448,7 +448,7 @@ const DocumentSubmissionOptions = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 ">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 max-w-5xl mx-auto">
|
||||||
{/* Left Panel - Configuration */}
|
{/* Left Panel - Configuration */}
|
||||||
<div className="space-y-6 ">
|
<div className="space-y-6 ">
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import {
|
import {
|
||||||
FiX,
|
FiX,
|
||||||
FiCheckCircle,
|
FiCheckCircle,
|
||||||
|
|
@ -14,166 +14,205 @@ import {
|
||||||
FiPackage,
|
FiPackage,
|
||||||
FiMapPin,
|
FiMapPin,
|
||||||
FiEye,
|
FiEye,
|
||||||
FiRotateCcw
|
FiRotateCcw,
|
||||||
|
FiSend,
|
||||||
|
FiMail,
|
||||||
|
FiActivity,
|
||||||
|
FiRefreshCw,
|
||||||
|
FiLock,
|
||||||
|
FiUnlock,
|
||||||
|
FiUserPlus,
|
||||||
|
FiEdit
|
||||||
} from "react-icons/fi";
|
} from "react-icons/fi";
|
||||||
|
import api from "../../config/api";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import logoRecord from '../../assets/record.svg'
|
||||||
|
import LoaderUi from "../../helper/LoaderUi";
|
||||||
|
import { FaRegEyeSlash } from "react-icons/fa";
|
||||||
|
import { MdAccessTime, MdCancel } from "react-icons/md";
|
||||||
|
|
||||||
interface AuditModalProps {
|
interface AuditModalProps {
|
||||||
closeModal: () => void;
|
closeModal: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
||||||
const [activeTab, setActiveTab] = useState<'status' | 'audit'>('status');
|
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||||
|
|
||||||
|
if (!accountId || !transactionId) {
|
||||||
|
window.location.href = "/";
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let [auditStatus, setAuditStatus] = useState([])
|
||||||
|
let [loading, setLoading] = useState(false)
|
||||||
|
const getAuditDetails = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit`)
|
||||||
|
if (res?.status === 200) {
|
||||||
|
// console.log(res?.data?.events)
|
||||||
|
let auditResponse = res?.data?.events
|
||||||
|
setAuditStatus(auditResponse)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (accountId && transactionId) {
|
||||||
|
getAuditDetails()
|
||||||
|
}
|
||||||
|
}, [accountId, transactionId])
|
||||||
|
|
||||||
|
|
||||||
const statusHistory = [
|
const statusHistory = [
|
||||||
{
|
{
|
||||||
id: 1,
|
"action": "SENT",
|
||||||
title: "The Accrual status has been successfully changed to Approved.",
|
"message": "Transaction Sent by John Doe <john@email.com>",
|
||||||
author: "Alexander Turner",
|
"status": "SENT",
|
||||||
role: "Analyst Perspective on Transaction",
|
"eventData": {
|
||||||
time: "34m ago",
|
"ip": "192.168.1.1",
|
||||||
fromStatus: "Ready to Review",
|
"longitude": "3.3792",
|
||||||
toStatus: "Approved",
|
"latitude": "6.5244",
|
||||||
icon: <FiCheckCircle className="w-4 h-4" />,
|
"timezone": "WAT"
|
||||||
statusColor: "text-green-600"
|
},
|
||||||
|
"timestamp": "2025-01-15T10:30:00Z",
|
||||||
|
"language": "en"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
"action": "INVITED",
|
||||||
title: "The Accrual has been updated to reflect a status of Reject.",
|
"message": "Invitation Sent to Jane Smith <jane@email.com> to sign documents",
|
||||||
author: "Alexander Turner",
|
"status": "SENT",
|
||||||
time: "3h ago",
|
"eventData": {
|
||||||
fromStatus: "Ready to Review",
|
"ip": "0.0.0.0",
|
||||||
toStatus: "Rejected",
|
"longitude": "11",
|
||||||
icon: <FiXCircle className="w-4 h-4" />,
|
"latitude": "12",
|
||||||
statusColor: "text-red-600"
|
"timezone": ""
|
||||||
|
},
|
||||||
|
"timestamp": "2025-01-15T11:45:00Z",
|
||||||
|
"language": "es"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
"action": "VIEWED",
|
||||||
title: "The Accrual has been revised for accuracy.",
|
"message": "Document viewed by recipient Alice Johnson <alice@email.com>",
|
||||||
author: "Alex Turner",
|
"status": "VIEWED",
|
||||||
role: "Manager View Transaction State",
|
"eventData": {
|
||||||
time: "7d ago",
|
"ip": "203.0.113.5",
|
||||||
fromStatus: "Rejected",
|
"longitude": "-74.0059",
|
||||||
toStatus: "Reviewed",
|
"latitude": "40.7128",
|
||||||
icon: <FiRotateCcw className="w-4 h-4" />,
|
"timezone": "EST"
|
||||||
statusColor: "text-yellow-600"
|
},
|
||||||
|
"timestamp": "2025-01-15T14:20:00Z",
|
||||||
|
"language": "en"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
"action": "SIGNED",
|
||||||
title: "The Accrual state has been updated from 'ready' to 'under review'.",
|
"message": "Document signed by Bob Wilson <bob@email.com>",
|
||||||
author: "Alexander Turner",
|
"status": "COMPLETED",
|
||||||
role: "Analyst Perspective on Transaction",
|
"eventData": {
|
||||||
time: "34m ago",
|
"ip": "198.51.100.10",
|
||||||
fromStatus: "Ready to Review",
|
"longitude": "-122.4194",
|
||||||
toStatus: "Reviewed",
|
"latitude": "37.7749",
|
||||||
icon: <FiEye className="w-4 h-4" />,
|
"timezone": "PST"
|
||||||
statusColor: "text-blue-600"
|
|
||||||
},
|
},
|
||||||
{
|
"timestamp": "2025-01-15T16:10:00Z",
|
||||||
id: 5,
|
"language": "en"
|
||||||
title: "The Accrual has been updated from rejected to reviewed.",
|
|
||||||
author: "Alex Turner",
|
|
||||||
role: "Analyst View Transaction",
|
|
||||||
time: "34m ago",
|
|
||||||
fromStatus: "Rejected",
|
|
||||||
toStatus: "Reviewed",
|
|
||||||
icon: <FiRotateCcw className="w-4 h-4" />,
|
|
||||||
statusColor: "text-blue-600"
|
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const auditTrail = [
|
const getActionIcon = (action: string) => {
|
||||||
{
|
const icons = {
|
||||||
id: 1,
|
'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />,
|
||||||
title: "Batch 11317 Pickup Request Created",
|
'SENT': <FiSend className="w-4 h-4" />,
|
||||||
author: "Sandra Darlington",
|
'INVITED': <FiMail className="w-4 h-4" />,
|
||||||
location: "Lagos General Hospital Gbagada",
|
'COMPLETED': <FiCheckCircle className="w-4 h-4" />,
|
||||||
time: "11 Aug, 2023 09:23 AM",
|
'RE_SENT_INVITATION': <FiRefreshCw className="w-4 h-4" />,
|
||||||
icon: <FiPackage className="w-4 h-4" />,
|
'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />,
|
||||||
type: "created"
|
'VIEWED': <FiEye className="w-4 h-4" />,
|
||||||
},
|
'VIEWED_IN_PERSON': <FaRegEyeSlash className="w-4 h-4" />, // Slightly different eye icon
|
||||||
{
|
'AUTH_FAILED': <FiXCircle className="w-4 h-4 text-red-500" />,
|
||||||
id: 2,
|
'ACCESS_CODE_FAILED': <FiLock className="w-4 h-4 text-red-500" />,
|
||||||
title: "Batch 11317 Pickup Request",
|
'ACCESS_CODE_VALIDATED': <FiUnlock className="w-4 h-4 text-green-500" />,
|
||||||
author: "Oladejo Israel",
|
'AUTH_VALIDATED': <FiCheckCircle className="w-4 h-4 text-green-500" />,
|
||||||
location: "Institute of Human Virology H3Africa BioRepository",
|
'SIGNED': <FiCheckCircle className="w-4 h-4" />,
|
||||||
time: "12 Aug, 2023 11:19 AM",
|
'EXPIRED': <MdAccessTime className="w-4 h-4 text-gray-500" />,
|
||||||
status: "Approved",
|
'CANCELLED': <MdCancel className="w-4 h-4 text-red-500" />,
|
||||||
icon: <FiCheckCircle className="w-4 h-4" />,
|
'DECLINED': <FiXCircle className="w-4 h-4 text-red-500" />,
|
||||||
type: "approved"
|
'PENDING': <FiClock className="w-4 h-4" />,
|
||||||
},
|
'ASSIGNED': <FiUserCheck className="w-4 h-4" />,
|
||||||
{
|
'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
|
||||||
id: 3,
|
'EDITED': <FiEdit className="w-4 h-4" />,
|
||||||
title: "Batch 11317 was Initiated",
|
};
|
||||||
author: "Sandra Darlington",
|
|
||||||
location: "Lagos General Hospital Gbagada",
|
return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
|
||||||
time: "12 Aug, 2023 11:19 AM",
|
};
|
||||||
icon: <FiFileText className="w-4 h-4" />,
|
|
||||||
type: "initiated"
|
const getActionColor = (action: string, status: string) => {
|
||||||
},
|
if (status === 'COMPLETED') return 'text-green-600';
|
||||||
{
|
if (status === 'FAILED' || status === 'REJECTED') return 'text-red-600';
|
||||||
id: 4,
|
if (status === 'PENDING') return 'text-yellow-600';
|
||||||
title: "Sandra Darlington Assigned batch 11317",
|
|
||||||
assignee: "Yusuf Ahmed",
|
const colors = {
|
||||||
time: "12 Aug, 2023 11:20 AM",
|
'SENT': 'text-blue-600',
|
||||||
icon: <FiUserCheck className="w-4 h-4" />,
|
'INVITED': 'text-indigo-600',
|
||||||
type: "assigned"
|
'VIEWED': 'text-purple-600',
|
||||||
},
|
'SIGNED': 'text-green-600',
|
||||||
{
|
'REJECTED': 'text-red-600'
|
||||||
id: 5,
|
};
|
||||||
title: "Batch 11317 was rejected by Yusuf Ahmed",
|
return colors[action as keyof typeof colors] || 'text-gray-600';
|
||||||
reason: "due to faulty vehicle",
|
};
|
||||||
time: "12 Aug, 2023 11:20 AM",
|
|
||||||
icon: <FiXCircle className="w-4 h-4" />,
|
|
||||||
type: "rejected"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: "Sandra Darlington Assigned batch 11317",
|
|
||||||
assignee: "Kolado Jolade",
|
|
||||||
time: "12 Aug, 2023 11:20 AM",
|
|
||||||
icon: <FiUserCheck className="w-4 h-4" />,
|
|
||||||
type: "assigned"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
title: "Logger Synced",
|
|
||||||
deviceId: "ID: LGR-0421",
|
|
||||||
status: "95% remaining",
|
|
||||||
time: "12 Aug, 2023 11:25 AM",
|
|
||||||
icon: <FiCheckCircle className="w-4 h-4" />,
|
|
||||||
type: "synced"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
title: "Logger Disconnected",
|
|
||||||
deviceId: "ID: LGR-0421",
|
|
||||||
time: "12 Aug, 2023 11:25 AM",
|
|
||||||
icon: <FiAlertTriangle className="w-4 h-4" />,
|
|
||||||
type: "disconnected"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const getStatusBadge = (status: string) => {
|
const getStatusBadge = (status: string) => {
|
||||||
const statusClasses = {
|
const statusClasses = {
|
||||||
'Approved': 'bg-green-100 text-green-800',
|
'SENT': 'bg-blue-100 text-blue-800',
|
||||||
'Rejected': 'bg-red-100 text-red-800',
|
'COMPLETED': 'bg-green-100 text-green-800',
|
||||||
'Reviewed': 'bg-yellow-100 text-yellow-800',
|
'FAILED': 'bg-red-100 text-red-800',
|
||||||
'Ready to Review': 'bg-blue-100 text-blue-800'
|
'PENDING': 'bg-yellow-100 text-yellow-800',
|
||||||
|
'VIEWED': 'bg-purple-100 text-purple-800',
|
||||||
|
'REJECTED': 'bg-red-100 text-red-800'
|
||||||
};
|
};
|
||||||
return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
|
return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
|
||||||
};
|
};
|
||||||
|
|
||||||
const getAuditTypeColor = (type: string) => {
|
const formatTimestamp = (timestamp: string) => {
|
||||||
const colors = {
|
try {
|
||||||
'created': 'text-blue-600',
|
const date = new Date(timestamp);
|
||||||
'approved': 'text-green-600',
|
if (isNaN(date.getTime())) {
|
||||||
'initiated': 'text-purple-600',
|
return timestamp;
|
||||||
'assigned': 'text-indigo-600',
|
}
|
||||||
'rejected': 'text-red-600',
|
|
||||||
'synced': 'text-green-600',
|
const now = new Date();
|
||||||
'disconnected': 'text-orange-600'
|
const diffMs = now.getTime() - date.getTime();
|
||||||
|
const diffMins = Math.floor(diffMs / (1000 * 60));
|
||||||
|
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
||||||
|
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||||
|
|
||||||
|
if (diffMins < 60) {
|
||||||
|
return `${diffMins}m ago`;
|
||||||
|
} else if (diffHours < 24) {
|
||||||
|
return `${diffHours}h ago`;
|
||||||
|
} else if (diffDays < 7) {
|
||||||
|
return `${diffDays}d ago`;
|
||||||
|
} else {
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return timestamp;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
return colors[type as keyof typeof colors] || 'text-gray-600';
|
|
||||||
|
const extractEmailFromMessage = (message: string) => {
|
||||||
|
const emailMatch = message.match(/<([^>]+)>/);
|
||||||
|
return emailMatch ? emailMatch[1] : '';
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -188,57 +227,84 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={closeModal}
|
onClick={closeModal}
|
||||||
className="text-white cursor-pointer transition-colors"
|
className="text-white cursor-pointer transition-colors hover:text-gray-200"
|
||||||
>
|
>
|
||||||
<FiX className="w-5 h-5" />
|
<FiX className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="flex-1 overflow-y-auto p-4">
|
<div className="flex-1 overflow-y-auto p-4 no-scrollbar">
|
||||||
|
{/* {loading ? <LoaderUi /> : ""} */}
|
||||||
|
{auditStatus.length ?
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<div className="text-sm text-gray-500 font-medium mb-2">TODAY</div>
|
{/* <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div> */}
|
||||||
|
{auditStatus.map((item, index) => (
|
||||||
{statusHistory.slice(0, 2).map((item) => (
|
<div key={index} className="flex items-start space-x-4 pb-3 border-b border-gray-100 last:border-b-0">
|
||||||
<div key={item.id} className="flex items-start space-x-4 pb-2 border-b border-gray-100 last:border-b-0">
|
<div className={`${getActionColor(item.action)} mt-1`}>
|
||||||
<div className={`${item.statusColor} mt-1`}>
|
{getActionIcon(item.action)}
|
||||||
{item.icon}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<p className="text-gray-800 font-medium text-sm mb-0.5">{item.title}</p>
|
<p className="text-gray-600 font-medium text-sm mb-1">{item.message}</p>
|
||||||
|
|
||||||
<div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
|
<div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
|
||||||
<span>By {item.author}</span>
|
<span>Action: {item.action}</span>
|
||||||
{item.role && (
|
{extractEmailFromMessage(item.message) && (
|
||||||
<>
|
<>
|
||||||
<span>•</span>
|
<span>•</span>
|
||||||
<span className="text-blue-600 text-xs">({item.role})</span>
|
<span className="text-blue-600">{extractEmailFromMessage(item.message)}</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<span className="text-xs text-gray-500">{item.time}</span>
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
<div className="flex items-center space-x-2">
|
<span className="text-xs text-gray-600">Status:</span> <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.status)}`}>
|
||||||
<span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.fromStatus)}`}>
|
{item.status}
|
||||||
{item.fromStatus}
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-400">→</span>
|
|
||||||
<span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.toStatus)}`}>
|
|
||||||
{item.toStatus}
|
|
||||||
</span>
|
</span>
|
||||||
|
<span className="text-xs text-gray-500">{formatTimestamp(item.timestamp)}</span>
|
||||||
|
{item.language && (
|
||||||
|
<span className="text-xs text-gray-400 uppercase">{item.language}</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Event Data Details */}
|
||||||
|
{/* <div className="grid grid-cols-2 gap-4 text-xs text-gray-600 bg-gray-50 p-2 rounded">
|
||||||
|
{item.eventData.ip && (
|
||||||
|
<div>
|
||||||
|
<span className="font-medium text-gray-700">IP:</span> {item.eventData.ip}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
{item.eventData.timezone && (
|
||||||
|
<div>
|
||||||
|
<span className="font-medium text-gray-700">Timezone:</span> {item.eventData.timezone}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.eventData.latitude && item.eventData.longitude && (
|
||||||
|
<div className="col-span-2">
|
||||||
|
<span className="font-medium text-gray-700">Location:</span>
|
||||||
|
<span className="ml-1">Lat: {item.eventData.latitude}, Lng: {item.eventData.longitude}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
</div> :
|
||||||
|
<div className="flex justify-center items-center">
|
||||||
|
<img
|
||||||
|
src={logoRecord}
|
||||||
|
alt="Record Not Found"
|
||||||
|
className="w-80 h-80 opacity-70" // adjust size and appearance
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<div className="flex justify-end p-2 border-t border-gray-200">
|
<div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50">
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''}
|
||||||
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={closeModal}
|
onClick={closeModal}
|
||||||
className="cursor-pointer px-4 py-1.5 bg-[var(--sendForSignBgCol)] text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
|
className="cursor-pointer px-4 py-1.5 bg-[var(--sendForSignBgCol)] text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue