fix disbursement detail

src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx

@@ -146,14 +146,13 @@ const handleExport = async () => {
     }
   };
 
-
   return (
     <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
       <DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden">
         <DialogHeader>
           <DialogTitle className="text-2xl font-bold">Transaction Details</DialogTitle>
         </DialogHeader>
-        <DialogBody>
+        <DialogBody className="flex flex-col overflow-hidden h-full">
           <div className="py-4 overflow-y-auto max-h-[600px] space-y-6">
             {/* Summary Info */}
             {transactionDetails && (
@@ -213,7 +212,6 @@ const handleExport = async () => {
               </div>
             )}
 
-            {/* Log Table */}
             <div className="border rounded-lg overflow-x-auto">
               {isLoading ? (
                 <div className="flex flex-col items-center justify-center p-8">
@@ -229,6 +227,32 @@ const handleExport = async () => {
                   <p className="mt-4 text-gray-500">Loading Logs Details...</p>
                 </div>
               ) : (
+                <>
+                  <div className="flex justify-end m-5">
+                    <button
+                      className={`px-5 py-2 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition-colors flex items-center ${isExporting ? 'opacity-50 pointer-events-none' : ''}`}
+                      onClick={() => {
+                        if (!isExporting) {
+                          handleExport();
+                        }
+                      }}
+                    >
+                      {isExporting ? (
+                        <>
+                          <span className="animate-spin ">
+                            <KeenIcon icon="spinner" />
+                          </span>
+                          Exporting...
+                        </>
+                      ) : (
+                        <>
+                          <KeenIcon icon="download" />
+                          Export
+                        </>
+                      )}
+                    </button>
+                  </div>
+                  <div className="max-h-[900px] overflow-y-auto border rounded-lg">
                     <table className="min-w-full table-auto">
                       <thead>
                         <tr className="bg-gray-100">
@@ -236,8 +260,12 @@ const handleExport = async () => {
                           <th className="px-4 py-2 text-left text-sm text-gray-500">Fullname</th>
                           <th className="px-4 py-2 text-left text-sm text-gray-500">Amount</th>
                           <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
-                      <th className="px-4 py-2 text-left text-sm text-gray-500">Process Date</th>
+                          <th className="px-4 py-2 text-left text-sm text-gray-500">
-                      <th className="px-4 py-2 text-left text-sm text-gray-500">Invoice Number</th>
+                            Process Date
+                          </th>
+                          <th className="px-4 py-2 text-left text-sm text-gray-500">
+                            Invoice Number
+                          </th>
                           <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 1</th>
                           <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 2</th>
                           <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 3</th>
@@ -254,7 +282,9 @@ const handleExport = async () => {
                               <td className="px-4 py-2 text-sm text-gray-500">
                                 {log.customer?.fullname ?? 'Not Found'}
                               </td>
-                          <td className="px-4 py-2 text-sm text-gray-500">{log.amount ?? '-'}</td>
+                              <td className="px-4 py-2 text-sm text-gray-500">
+                                {log.amount ?? '-'}
+                              </td>
                               <td className="px-4 py-2 text-sm text-gray-500">
                                 {renderStatusBadge(log.status) ?? '-'}
                               </td>
@@ -266,9 +296,15 @@ const handleExport = async () => {
                               <td className="px-4 py-2 text-sm text-gray-500">
                                 {log.reference ?? '-'}
                               </td>
-                          <td className="px-4 py-2 text-sm text-gray-500">{log.remark_1 ?? '-'}</td>
+                              <td className="px-4 py-2 text-sm text-gray-500">
-                          <td className="px-4 py-2 text-sm text-gray-500">{log.remark_2 ?? '-'}</td>
+                                {log.remark_1 ?? '-'}
-                          <td className="px-4 py-2 text-sm text-gray-500">{log.remark_3 ?? '-'}</td>
+                              </td>
+                              <td className="px-4 py-2 text-sm text-gray-500">
+                                {log.remark_2 ?? '-'}
+                              </td>
+                              <td className="px-4 py-2 text-sm text-gray-500">
+                                {log.remark_3 ?? '-'}
+                              </td>
                               <td className="px-4 py-2 text-sm text-gray-500">
                                 <button
                                   className="btn btn-sm btn-icon btn-clear btn-light"
@@ -284,40 +320,19 @@ const handleExport = async () => {
                           ))
                         ) : (
                           <tr>
-                        <td colSpan={10} className="px-4 py-2 text-center text-sm text-gray-500">
+                            <td
+                              colSpan={10}
+                              className="px-4 py-2 text-center text-sm text-gray-500"
+                            >
                               No logs available
                             </td>
                           </tr>
                         )}
                       </tbody>
                     </table>
-              )}
                   </div>
-
-            {/* Export Button - Moved to bottom right after table */}
-            <div className="flex justify-end">
-              <button
-                className={`px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center ${isExporting ? 'opacity-50 pointer-events-none' : ''}`}
-                onClick={() => {
-                  if (!isExporting) {
-                    handleExport();
-                  }
-                }}
-              >
-                {isExporting ? (
-                  <>
-                    <span className="animate-spin mr-2">
-                      <KeenIcon icon="spinner" />
-                    </span>
-                    Exporting...
-                  </>
-                ) : (
-                  <>
-                    <KeenIcon icon="download" className="mr-2" />
-                    Export
                 </>
               )}
-              </button>
             </div>
           </div>
         </DialogBody>