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

// disbursement/history-transaction/blocks/DetailTransaction.tsx
import { KeenIcon } from '@/components';
import { useTransactionContext } from '../hooks/useTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useEffect, useState } from 'react';
import moment from 'moment';
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog';
import TransactionLogViewer from './DetailTransactionLog';

const API_URL = apiConfig.service_disbursement;

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 DetailTransaction = () => {
  const { GetData } = useCallApi();
  const {
    showDetailDialog,
    setShowDetailDialog,
    selectedTransactionId,
    setShowDetailLogDialog,
    setDetailLogData
  } = useTransactionContext();

  const [transactionDetails, setTransactionDetails] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchTransactionDetails = async () => {
      setIsLoading(true);
      if (selectedTransactionId) {
        try {
          const response = await GetData(
            `${API_URL}/transaction/history/${selectedTransactionId}`,
            {
              id: selectedTransactionId
            }
          );
          // console.log(response?.data);
          setTransactionDetails(response?.data);
        } catch (error) {
          console.error('Error fetching transaction', error);
        } finally {
          setIsLoading(false);
        }
      }
    };

    if (showDetailDialog && selectedTransactionId) {
      fetchTransactionDetails();
    }
  }, [showDetailDialog, selectedTransactionId, GetData]);

  const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'

  const resetForm = () => {
    setTransactionDetails(null);
  };

  useEffect(() => {
    if (!showDetailDialog) {
      resetForm();
    }
  }, [showDetailDialog]);

  return (
    <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
      <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
        <DialogHeader>
          <DialogTitle>Transaction Details</DialogTitle>
        </DialogHeader>
        <DialogBody>
          {/* Tab Content */}
          <div className="py-4 overflow-y-auto max-h-[400px]">
            <div className="space-y-4">
              <div className="border rounded-lg overflow-x-auto">
                {isLoading ? (
                  <div className="flex flex-col items-center justify-center p-8">
                    <div className="animate-pulse flex space-x-4 w-full">
                      <div className="flex-1 space-y-4 py-1">
                        <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                        <div className="space-y-2">
                          <div className="h-4 bg-gray-200 rounded"></div>
                          <div className="h-4 bg-gray-200 rounded w-5/6"></div>
                        </div>
                      </div>
                    </div>
                    <p className="mt-4 text-gray-500">Loading Logs Details...</p>
                  </div>
                ) : (
                  <table className="min-w-full table-auto">
                    <thead>
                      <tr className="bg-gray-100">
                        <th className="px-4 py-2 text-left text-sm text-gray-500">Username</th>
                        <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">
                          Invoice Number
                        </th>
                        <th className="px-4 py-2 text-left text-sm text-gray-500">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {transactionDetails?.log && transactionDetails.log.length > 0 ? (
                        transactionDetails.log.map(
                          (
                            log: {
                              id: number;
                              customer: any;
                              amount: number;
                              remark: string;
                              reference: string;
                              request_date: string;
                              payment_response: string;
                              status: string;
                            },
                            index: number
                          ) => (
                            <tr key={index} className="border-t">
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {log.customer?.username ?? 'Not Found'}
                              </td>
                              <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">
                                {renderStatusBadge(log.status) ?? '-'}
                              </td>
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {log.request_date && moment(log.request_date).isValid()
                                  ? moment(log.request_date).format('DD/MM/YYYY HH:mm:ss')
                                  : '-'}
                              </td>
                              <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">
                                <div key={`actions-${log.id}`}>
                                  <button
                                    className="btn btn-sm btn-icon btn-clear btn-light"
                                    onClick={() => {
                                      setDetailLogData(log);
                                      setShowDetailLogDialog(true);
                                    }}
                                  >
                                    <KeenIcon icon="eye" />
                                  </button>
                                </div>
                              </td>
                            </tr>
                          )
                        )
                      ) : (
                        <tr>
                          <td colSpan={8} className="px-4 py-2 text-center text-sm text-gray-500">
                            No logs available
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                )}
              </div>
            </div>
          </div>
        </DialogBody>
      </DialogContent>
    </Dialog>
  );
};

export default DetailTransaction;