detail transaction disbursement

2025-04-14 14:52:32 +07:00
parent 1a88492759
commit e17e99a6de
4 changed files with 229 additions and 17 deletions
--- a/src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx
+++ b/src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx
@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import moment from 'moment';
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody } from '@/components/ui/dialog';
+
+interface LogType {
+  id: string;
+  amount: number;
+  remark: string;
+  reference: string;
+  response_date: string;
+  status: string;
+  customer?: {
+    username: string;
+    fullname: string;
+  };
+  payment_response?: string;
+}
+
+type StatusCode = 'W' | 'O' | 'F' | 'D';
+
+interface StatusInfo {
+  label: string;
+  bg: string;
+  text: string;
+}
+
+const statusMap: Record<StatusCode, StatusInfo> = {
+  W: { label: 'Waiting Schedule', bg: 'bg-yellow-100', text: 'text-yellow-600' },
+  O: { label: 'On Process', bg: 'bg-blue-100', text: 'text-blue-600' },
+  F: { label: 'Fail', bg: 'bg-red-100', text: 'text-red-600' },
+  D: { label: 'Done', bg: 'bg-green-100', text: 'text-green-600' },
+};
+
+export const renderStatusBadge = (statusRaw: string | null | undefined) => {
+    const status = statusRaw as StatusCode;
+    const { label, bg, text } = statusMap[status] ?? {
+      label: 'Unknown',
+      bg: 'bg-gray-100',
+      text: 'text-gray-600',
+    };
+  
+    return (
+      <span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
+        {label}
+      </span>
+    );
+  };
+
+const TransactionLogViewer = () => {
+	const {
+		showDetailLogDialog,
+		setShowDetailLogDialog,
+		detailLogData
+	} = useTransactionContext();
+
+	console.log('detailLogData: ', detailLogData)
+
+	
+
+  return (
+    <Dialog open={showDetailLogDialog} onOpenChange={setShowDetailLogDialog}>
+        <DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden">
+            <DialogHeader>
+            <DialogTitle>Detail Record</DialogTitle>
+            </DialogHeader>
+            <DialogBody >
+							{/* Tab Content */}
+							{detailLogData && detailLogData != null ? (
+								<div className="py-4 overflow-y-auto">
+									<div className="space-y-4">
+										<div className="border rounded-lg overflow-x-auto">
+											<table className='min-w-full table-auto'>
+												<tbody>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">ID</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.customer.id}</td>
+													</tr>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">Username</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.customer.username}</td>
+													</tr>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">Name</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.customer.fullname}</td>
+													</tr>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">Amount</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.amount}</td>
+													</tr>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">Remark</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.remark}</td>
+													</tr>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">Payment Request</td>
+														<td className="px-4 py-2 text-sm text-gray-500"><pre className="whitespace-pre-wrap break-words max-w-full overflow-auto bg-gray-100 p-2 rounded text-sm">{detailLogData.payment_request}</pre></td>
+													</tr>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">Payment Response</td>
+														<td className="px-4 py-2 text-sm text-gray-500"><pre className="whitespace-pre-wrap break-words max-w-full overflow-auto bg-gray-100 p-2 rounded text-sm">{detailLogData.payment_response}</pre></td>
+													</tr>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">Status</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{renderStatusBadge(detailLogData.status)}</td>
+													</tr>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">Prosess Date</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.request_date && moment(detailLogData.request_date).isValid() ? moment(detailLogData.request_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
+													</tr>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">Response Date</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
+													</tr>
+													<tr className='border-t'>
+														<td className="px-4 py-2 text-sm text-gray-500">Reference Number</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.reference}</td>
+													</tr>
+												</tbody>
+											</table>
+										</div>
+									</div>
+								</div>
+							) : (<div></div>)}
+            </DialogBody>
+        </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TransactionLogViewer;