sbt-idp/cope2n-fe/src/components/report-detail/report-table.tsx

import type { TableColumnsType } from 'antd';
import { Button, Table } from 'antd';
import { ReportDetail } from 'models';
import { useReportList } from 'queries/report';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { downloadReport } from 'request/report';
import { formatPercent, ensureMin, ensureMax } from 'utils/metric-format';
import { datetimeStrToDate } from 'utils/time';


const ReportTable: React.FC = () => {
  const { isLoading, data: reportData } = useReportList({
    page_size: 100,
  });
  const report_data: any = reportData;
  const navigate = useNavigate();

  const [pagination, setPagination] = useState(() => ({
    page: 1,
    page_size: 10,
  }));

  const handleDownloadReport = async (report_id: string) => {
    const {file, filename} = await downloadReport(report_id);
    const anchorElement = document.createElement('a');
    anchorElement.href = URL.createObjectURL(file);
    anchorElement.download = filename;

    document.body.appendChild(anchorElement);
    anchorElement.click();

    // Clean up
    document.body.removeChild(anchorElement);
    URL.revokeObjectURL(anchorElement.href);
  };

  const columns: TableColumnsType<ReportDetail> = [
    {
      title: 'ID',
      dataIndex: 'ID',
      key: 'ID',
    },
    {
      title: 'Report Date',
      dataIndex: 'Created Date',
      key: 'Created Date',
      render: (_, record) => {
        return <span>{datetimeStrToDate(record['Created Date'], 'Asia/Singapore')}</span>;
      },
      width: 110,
    },
    {
      title: 'Start Date',
      dataIndex: 'Start Date',
      key: 'Start Date',
      render: (_, record) => {
        return <span>{datetimeStrToDate(record['Start Date'], 'Asia/Singapore')}</span>;
      },
      width: 110,
    },
    {
      title: 'End Date',
      dataIndex: 'End Date',
      key: 'End Date',
      render: (_, record) => {
        return <span>{datetimeStrToDate(record['End Date'], 'Asia/Singapore')}</span>;
      },
      width: 110,
    },
    {
      title: 'Subsidiary',
      dataIndex: 'Subsidiary',
      key: 'Subsidiary',
      render: (_, record) => {
        return <span>{String(record['Subsidiary']).toUpperCase()}</span>;
       },
      width: 110,
    },
    {
      title: 'No. Requests',
      dataIndex: 'No. Requests',
      key: 'No. Requests',
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (_, record) => {
        return <>{record.Status}</>;
      },
    },
    {
      title: 'Purchase Date Accuracy',
      dataIndex: 'Purchase Date Acc',
      key: 'Purchase Date Acc',
      render: (_, record) => {
        const isAbnormal = ensureMin(record['Purchase Date Acc'], 0.95);
        return (
          <span style={{ color: isAbnormal ? 'red' : '' }}>
            {formatPercent(record['Purchase Date Acc'])}
          </span>
        );
      },
    },

    {
      title: 'Retailer Accuracy',
      dataIndex: 'Retailer Acc',
      key: 'Retailer Acc',
      render: (_, record) => {
        const isAbnormal = ensureMin(record['Retailer Acc'], 0.95);
        return (
          <span style={{ color: isAbnormal ? 'red' : '' }}>
            {formatPercent(record['Retailer Acc'])}
          </span>
        );
      },
    },
    {
      title: 'IMEI Accuracy',
      dataIndex: 'IMEI Acc',
      key: 'IMEI Acc',
      render: (_, record) => {
        const isAbnormal = ensureMin(record['IMEI Acc'], 0.95);
        return (
          <span style={{ color: isAbnormal ? 'red' : '' }}>
            {formatPercent(Number(record['IMEI Acc']))}
          </span>
        );
      },
    },
    {
      title: 'Avg. Accuracy',
      dataIndex: 'Avg. Accuracy',
      key: 'Avg. Accuracy',
      render: (_, record) => {
        const isAbnormal = ensureMin(record['Avg. Accuracy'], 0.95);
        return (
          <span style={{ color: isAbnormal ? 'red' : '' }}>
            {formatPercent(Number(record['Avg. Accuracy']))}
          </span>
        );
      },
    },
    {
      title: 'Avg. OCR Processing Time',
      dataIndex: 'Avg. OCR Processing Time',
      key: 'Avg. OCR Processing Time',
      render: (_, record) => {
        const isAbnormal = ensureMax(record['Avg. OCR Processing Time'], 2);
        return (
          <span style={{ color: isAbnormal ? 'red' : '' }}>
            {Number(record['Avg. OCR Processing Time'])?.toFixed(2)}
          </span>
        );
      },
    },
    {
      title: 'Actions',
      dataIndex: 'actions',
      key: 'actions',
      width: 240,
      render: (_, record) => {
        return (
          <div style={{ flexDirection: 'row' }}>
            <Button
              onClick={() => {
                navigate(`/reports/${record.report_id}/detail`);
              }}
              style={{ marginRight: 10 }}
            >
              Details
            </Button>
            <Button onClick={() => handleDownloadReport(record.report_id)}>
              Download
            </Button>
          </div>
        );
      },
    },
  ];

  return (
    <>
      <Table
        loading={isLoading}
        columns={columns}
        dataSource={(report_data && report_data?.report_detail) || []}
        bordered
        size='small'
        pagination={{
          current: pagination.page,
          pageSize: pagination.page_size,
          total: report_data?.count || 0,
          onChange: (page, pageSize) => {
            setPagination({ page, page_size: pageSize || 10 });
          },
          showSizeChanger: false,
        }}
      />
    </>
  );
};

export default ReportTable;