audit

src/components/process/CompletionScreen/DocumentCompletionScreen.tsx

@@ -448,7 +448,7 @@ const DocumentSubmissionOptions = () => {
                 </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 */}
                     <div className="space-y-6 ">
 

src/components/transactions/AuditModal.tsx

@@ -1,254 +1,320 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import { 
+import {
-  FiX, 
+    FiX,
-  FiCheckCircle, 
+    FiCheckCircle,
-  FiXCircle, 
+    FiXCircle,
-  FiClock, 
+    FiClock,
-  FiUser, 
+    FiUser,
-  FiCalendar,
+    FiCalendar,
-  FiFileText,
+    FiFileText,
-  FiAlertTriangle,
+    FiAlertTriangle,
-  FiTruck,
+    FiTruck,
-  FiUserCheck,
+    FiUserCheck,
-  FiUserX,
+    FiUserX,
-  FiPackage,
+    FiPackage,
-  FiMapPin,
+    FiMapPin,
-  FiEye,
+    FiEye,
-  FiRotateCcw
+    FiRotateCcw,
+    FiSend,
+    FiMail,
+    FiActivity,
+    FiRefreshCw,
+    FiLock,
+    FiUnlock,
+    FiUserPlus,
+    FiEdit
 } 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 {
-  closeModal: () => void;
+    closeModal: () => void;
 }
 
 const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
-  const [activeTab, setActiveTab] = useState<'status' | 'audit'>('status');
+    const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
 
-  const statusHistory = [
+    if (!accountId || !transactionId) {
-    {
+        window.location.href = "/";
-      id: 1,
+        return null;
-      title: "The Accrual status has been successfully changed to Approved.",
-      author: "Alexander Turner",
-      role: "Analyst Perspective on Transaction",
-      time: "34m ago",
-      fromStatus: "Ready to Review",
-      toStatus: "Approved",
-      icon: <FiCheckCircle className="w-4 h-4" />,
-      statusColor: "text-green-600"
-    },
-    {
-      id: 2,
-      title: "The Accrual has been updated to reflect a status of Reject.",
-      author: "Alexander Turner",
-      time: "3h ago",
-      fromStatus: "Ready to Review",
-      toStatus: "Rejected",
-      icon: <FiXCircle className="w-4 h-4" />,
-      statusColor: "text-red-600"
-    },
-    {
-      id: 3,
-      title: "The Accrual has been revised for accuracy.",
-      author: "Alex Turner",
-      role: "Manager View Transaction State",
-      time: "7d ago",
-      fromStatus: "Rejected",
-      toStatus: "Reviewed",
-      icon: <FiRotateCcw className="w-4 h-4" />,
-      statusColor: "text-yellow-600"
-    },
-    {
-      id: 4,
-      title: "The Accrual state has been updated from 'ready' to 'under review'.",
-      author: "Alexander Turner",
-      role: "Analyst Perspective on Transaction",
-      time: "34m ago",
-      fromStatus: "Ready to Review",
-      toStatus: "Reviewed",
-      icon: <FiEye className="w-4 h-4" />,
-      statusColor: "text-blue-600"
-    },
-    {
-      id: 5,
-      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 = [
+    let [auditStatus, setAuditStatus] = useState([])
-    {
+    let [loading, setLoading] = useState(false)
-      id: 1,
+    const getAuditDetails = async () => {
-      title: "Batch 11317 Pickup Request Created",
+        setLoading(true)
-      author: "Sandra Darlington",
+        try {
-      location: "Lagos General Hospital Gbagada",
+            let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit`)
-      time: "11 Aug, 2023 09:23 AM",
+            if (res?.status === 200) {
-      icon: <FiPackage className="w-4 h-4" />,
+                // console.log(res?.data?.events)
-      type: "created"
+                let auditResponse = res?.data?.events
-    },
+                setAuditStatus(auditResponse)
-    {
+            }
-      id: 2,
+        } catch (error) {
-      title: "Batch 11317 Pickup Request",
+            console.log(error)
-      author: "Oladejo Israel",
+        } finally {
-      location: "Institute of Human Virology H3Africa BioRepository",
+            setLoading(false)
-      time: "12 Aug, 2023 11:19 AM",
+        }
-      status: "Approved",
-      icon: <FiCheckCircle className="w-4 h-4" />,
-      type: "approved"
-    },
-    {
-      id: 3,
-      title: "Batch 11317 was Initiated",
-      author: "Sandra Darlington",
-      location: "Lagos General Hospital Gbagada",
-      time: "12 Aug, 2023 11:19 AM",
-      icon: <FiFileText className="w-4 h-4" />,
-      type: "initiated"
-    },
-    {
-      id: 4,
-      title: "Sandra Darlington Assigned batch 11317",
-      assignee: "Yusuf Ahmed",
-      time: "12 Aug, 2023 11:20 AM",
-      icon: <FiUserCheck className="w-4 h-4" />,
-      type: "assigned"
-    },
-    {
-      id: 5,
-      title: "Batch 11317 was rejected by Yusuf Ahmed",
-      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) => {
+    useEffect(() => {
-    const statusClasses = {
+        if (accountId && transactionId) {
-      'Approved': 'bg-green-100 text-green-800',
+            getAuditDetails()
-      'Rejected': 'bg-red-100 text-red-800',
+        }
-      'Reviewed': 'bg-yellow-100 text-yellow-800',
+    }, [accountId, transactionId])
-      'Ready to Review': 'bg-blue-100 text-blue-800'
+
+
+    const statusHistory = [
+        {
+            "action": "SENT",
+            "message": "Transaction Sent by John Doe <john@email.com>",
+            "status": "SENT",
+            "eventData": {
+                "ip": "192.168.1.1",
+                "longitude": "3.3792",
+                "latitude": "6.5244",
+                "timezone": "WAT"
+            },
+            "timestamp": "2025-01-15T10:30:00Z",
+            "language": "en"
+        },
+        {
+            "action": "INVITED",
+            "message": "Invitation Sent to Jane Smith <jane@email.com> to sign documents",
+            "status": "SENT",
+            "eventData": {
+                "ip": "0.0.0.0",
+                "longitude": "11",
+                "latitude": "12",
+                "timezone": ""
+            },
+            "timestamp": "2025-01-15T11:45:00Z",
+            "language": "es"
+        },
+        {
+            "action": "VIEWED",
+            "message": "Document viewed by recipient Alice Johnson <alice@email.com>",
+            "status": "VIEWED",
+            "eventData": {
+                "ip": "203.0.113.5",
+                "longitude": "-74.0059",
+                "latitude": "40.7128",
+                "timezone": "EST"
+            },
+            "timestamp": "2025-01-15T14:20:00Z",
+            "language": "en"
+        },
+        {
+            "action": "SIGNED",
+            "message": "Document signed by Bob Wilson <bob@email.com>",
+            "status": "COMPLETED",
+            "eventData": {
+                "ip": "198.51.100.10",
+                "longitude": "-122.4194",
+                "latitude": "37.7749",
+                "timezone": "PST"
+            },
+            "timestamp": "2025-01-15T16:10:00Z",
+            "language": "en"
+        }
+    ];
+
+    const getActionIcon = (action: string) => {
+        const icons = {
+            'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />,
+            'SENT': <FiSend className="w-4 h-4" />,
+            'INVITED': <FiMail className="w-4 h-4" />,
+            'COMPLETED': <FiCheckCircle className="w-4 h-4" />,
+            'RE_SENT_INVITATION': <FiRefreshCw className="w-4 h-4" />,
+            'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />,
+            '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" />,
+            'ACCESS_CODE_FAILED': <FiLock className="w-4 h-4 text-red-500" />,
+            'ACCESS_CODE_VALIDATED': <FiUnlock className="w-4 h-4 text-green-500" />,
+            'AUTH_VALIDATED': <FiCheckCircle className="w-4 h-4 text-green-500" />,
+            'SIGNED': <FiCheckCircle className="w-4 h-4" />,
+            'EXPIRED': <MdAccessTime className="w-4 h-4 text-gray-500" />,
+            'CANCELLED': <MdCancel className="w-4 h-4 text-red-500" />,
+            'DECLINED': <FiXCircle className="w-4 h-4 text-red-500" />,
+            'PENDING': <FiClock className="w-4 h-4" />,
+            'ASSIGNED': <FiUserCheck className="w-4 h-4" />,
+            'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
+            'EDITED': <FiEdit className="w-4 h-4" />,
+        };
+
+        return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
     };
-    return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
-  };
 
-  const getAuditTypeColor = (type: string) => {
+    const getActionColor = (action: string, status: string) => {
-    const colors = {
+        if (status === 'COMPLETED') return 'text-green-600';
-      'created': 'text-blue-600',
+        if (status === 'FAILED' || status === 'REJECTED') return 'text-red-600';
-      'approved': 'text-green-600',
+        if (status === 'PENDING') return 'text-yellow-600';
-      'initiated': 'text-purple-600',
+
-      'assigned': 'text-indigo-600',
+        const colors = {
-      'rejected': 'text-red-600',
+            'SENT': 'text-blue-600',
-      'synced': 'text-green-600',
+            'INVITED': 'text-indigo-600',
-      'disconnected': 'text-orange-600'
+            'VIEWED': 'text-purple-600',
+            'SIGNED': 'text-green-600',
+            'REJECTED': 'text-red-600'
+        };
+        return colors[action as keyof typeof colors] || 'text-gray-600';
     };
-    return colors[type as keyof typeof colors] || 'text-gray-600';
-  };
 
-  return (
+    const getStatusBadge = (status: string) => {
-    <div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50">
+        const statusClasses = {
-      <div className="bg-white rounded-md shadow-md w-full max-w-[75vw] max-h-[95vh] min-h-[85vh]  flex flex-col">
+            'SENT': 'bg-blue-100 text-blue-800',
-        {/* Header */}
+            'COMPLETED': 'bg-green-100 text-green-800',
-        <div className="flex items-center justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md">
+            'FAILED': 'bg-red-100 text-red-800',
-          <div className="flex items-center">
+            'PENDING': 'bg-yellow-100 text-yellow-800',
-            <h2 className="text-xl font-semibold text-white">
+            'VIEWED': 'bg-purple-100 text-purple-800',
-              Audit Status
+            'REJECTED': 'bg-red-100 text-red-800'
-            </h2>
+        };
-          </div>
+        return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
-          <button
+    };
-            onClick={closeModal}
-            className="text-white cursor-pointer transition-colors"
-          >
-            <FiX className="w-5 h-5" />
-          </button>
-        </div>
 
-        {/* Content */}
+    const formatTimestamp = (timestamp: string) => {
-        <div className="flex-1 overflow-y-auto p-4">
+        try {
-          
+            const date = new Date(timestamp);
-            <div className="space-y-1.5">
+            if (isNaN(date.getTime())) {
-              <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div>
+                return timestamp;
-              
+            }
-              {statusHistory.slice(0, 2).map((item) => (
+
-                <div key={item.id} className="flex items-start space-x-4 pb-2 border-b border-gray-100 last:border-b-0">
+            const now = new Date();
-                  <div className={`${item.statusColor} mt-1`}>
+            const diffMs = now.getTime() - date.getTime();
-                    {item.icon}
+            const diffMins = Math.floor(diffMs / (1000 * 60));
-                  </div>
+            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-                  <div className="flex-1">
+            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-                    <p className="text-gray-800 font-medium text-sm mb-0.5">{item.title}</p>
+
-                    <div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
+            if (diffMins < 60) {
-                      <span>By {item.author}</span>
+                return `${diffMins}m ago`;
-                      {item.role && (
+            } else if (diffHours < 24) {
-                        <>
+                return `${diffHours}h ago`;
-                          <span>•</span>
+            } else if (diffDays < 7) {
-                          <span className="text-blue-600 text-xs">({item.role})</span>
+                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;
+        }
+    };
+
+    const extractEmailFromMessage = (message: string) => {
+        const emailMatch = message.match(/<([^>]+)>/);
+        return emailMatch ? emailMatch[1] : '';
+    };
+
+    return (
+        <div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50">
+            <div className="bg-white rounded-md shadow-md w-full max-w-[75vw] max-h-[95vh] min-h-[85vh] flex flex-col">
+                {/* Header */}
+                <div className="flex items-center justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md">
+                    <div className="flex items-center">
+                        <h2 className="text-xl font-semibold text-white">
+                            Audit Status
+                        </h2>
                     </div>
-                    <div className="flex items-center space-x-3">
+                    <button
-                      <span className="text-xs text-gray-500">{item.time}</span>
+                        onClick={closeModal}
-                      <div className="flex items-center space-x-2">
+                        className="text-white cursor-pointer transition-colors hover:text-gray-200"
-                        <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.fromStatus)}`}>
+                    >
-                          {item.fromStatus}
+                        <FiX className="w-5 h-5" />
-                        </span>
+                    </button>
-                        <span className="text-gray-400">→</span>
-                        <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.toStatus)}`}>
-                          {item.toStatus}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
                 </div>
-              ))}
 
-              
+                {/* Content */}
+                <div className="flex-1 overflow-y-auto p-4 no-scrollbar">
+                    {/* {loading ? <LoaderUi /> :  ""} */}
+                    {auditStatus.length ?
+                        <div className="space-y-1.5">
+                            {/* <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div> */}
+                            {auditStatus.map((item, index) => (
+                                <div key={index} className="flex items-start space-x-4 pb-3 border-b border-gray-100 last:border-b-0">
+                                    <div className={`${getActionColor(item.action)} mt-1`}>
+                                        {getActionIcon(item.action)}
+                                    </div>
+                                    <div className="flex-1">
+                                        <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">
+                                            <span>Action: {item.action}</span>
+                                            {extractEmailFromMessage(item.message) && (
+                                                <>
+                                                    <span>•</span>
+                                                    <span className="text-blue-600">{extractEmailFromMessage(item.message)}</span>
+                                                </>
+                                            )}
+                                        </div>
+
+                                        <div className="flex items-center space-x-2 mb-2">
+                                            <span className="text-xs text-gray-600">Status:</span> <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.status)}`}>
+                                                {item.status}
+                                            </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>
+
+                                        {/* 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>
+                                        )}
+                                        {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 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>
+
+                {/* Footer */}
+                <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
+                        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"
+                    >
+                        Close
+                    </button>
+                </div>
             </div>
-          
         </div>
-
+    );
-        {/* Footer */}
-        <div className="flex justify-end p-2 border-t border-gray-200">
-          <button
-            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"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  );
 };
 
-export default AuditModal;
+export default AuditModal;