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);

    useEffect(() => {
        const fetchTransactionDetails = async () => {
            console.log(selectedTransactionId)
            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);
                }
            }
        };

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

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

    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">
                                <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 ?? '-'}</td>
                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.customer.fullname ?? '-'}</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('YYYY-MM-DD 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;