255 lines
7.9 KiB
TypeScript
255 lines
7.9 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
FiX,
|
|
FiCheckCircle,
|
|
FiXCircle,
|
|
FiClock,
|
|
FiUser,
|
|
FiCalendar,
|
|
FiFileText,
|
|
FiAlertTriangle,
|
|
FiTruck,
|
|
FiUserCheck,
|
|
FiUserX,
|
|
FiPackage,
|
|
FiMapPin,
|
|
FiEye,
|
|
FiRotateCcw
|
|
} from "react-icons/fi";
|
|
|
|
interface AuditModalProps {
|
|
closeModal: () => void;
|
|
}
|
|
|
|
const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
|
const [activeTab, setActiveTab] = useState<'status' | 'audit'>('status');
|
|
|
|
const statusHistory = [
|
|
{
|
|
id: 1,
|
|
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 = [
|
|
{
|
|
id: 1,
|
|
title: "Batch 11317 Pickup Request Created",
|
|
author: "Sandra Darlington",
|
|
location: "Lagos General Hospital Gbagada",
|
|
time: "11 Aug, 2023 09:23 AM",
|
|
icon: <FiPackage className="w-4 h-4" />,
|
|
type: "created"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Batch 11317 Pickup Request",
|
|
author: "Oladejo Israel",
|
|
location: "Institute of Human Virology H3Africa BioRepository",
|
|
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) => {
|
|
const statusClasses = {
|
|
'Approved': 'bg-green-100 text-green-800',
|
|
'Rejected': 'bg-red-100 text-red-800',
|
|
'Reviewed': 'bg-yellow-100 text-yellow-800',
|
|
'Ready to Review': 'bg-blue-100 text-blue-800'
|
|
};
|
|
return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
|
|
};
|
|
|
|
const getAuditTypeColor = (type: string) => {
|
|
const colors = {
|
|
'created': 'text-blue-600',
|
|
'approved': 'text-green-600',
|
|
'initiated': 'text-purple-600',
|
|
'assigned': 'text-indigo-600',
|
|
'rejected': 'text-red-600',
|
|
'synced': 'text-green-600',
|
|
'disconnected': 'text-orange-600'
|
|
};
|
|
return colors[type as keyof typeof colors] || 'text-gray-600';
|
|
};
|
|
|
|
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>
|
|
<button
|
|
onClick={closeModal}
|
|
className="text-white cursor-pointer transition-colors"
|
|
>
|
|
<FiX className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
|
|
<div className="space-y-1.5">
|
|
<div className="text-sm text-gray-500 font-medium mb-2">TODAY</div>
|
|
|
|
{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">
|
|
<div className={`${item.statusColor} mt-1`}>
|
|
{item.icon}
|
|
</div>
|
|
<div className="flex-1">
|
|
<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">
|
|
<span>By {item.author}</span>
|
|
{item.role && (
|
|
<>
|
|
<span>•</span>
|
|
<span className="text-blue-600 text-xs">({item.role})</span>
|
|
</>
|
|
)}
|
|
</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">
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.fromStatus)}`}>
|
|
{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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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;
|