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

import type { TableColumnsType } from 'antd';
import { Table } from 'antd';
import React from 'react';

interface DataType {
  key: React.Key;
  subSidiaries: string;
  extractionDate: string;
  snOrImeiNumber: number;
  invoiceNumber: number;
  totalImages: number;
  successfulNumber: number;
  successfulPercentage: number;
  badNumber: number;
  badPercentage: number;
  snImeiAAR: number; // AAR: Average Accuracy Rate
  purchaseDateAAR: number;
  retailerNameAAR: number;
  snImeiAPT: number; // APT: Average Processing Time
  invoiceAPT: number;
  snImeiTC: number; // TC: transaction count
  invoiceTC: number;
}

const columns: TableColumnsType<DataType> = [
  {
    title: 'Subs',
    dataIndex: 'subSidiaries',
    key: 'subSidiaries',
    width: '100px',
    render: (_, record) => {
      if (record.subSidiaries === '+') return '';
      return String(record.subSidiaries).toUpperCase();
    },
    filters: [
      { text: 'ALL', value: 'ALL' },
      { text: 'SEAU', value: 'SEAU' },
      { text: 'SESP', value: 'SESP' },
      { text: 'SME', value: 'SME' },
      { text: 'SEPCO', value: 'SEPCO' },
      { text: 'TSE', value: 'TSE' },
      { text: 'SEIN', value: 'SEIN' },
    ],
    filterMode: 'menu',
    onFilter: (value: string, record) => record.subSidiaries.includes(String(value).toUpperCase()),
  },
  {
    title: 'OCR extraction date',
    dataIndex: 'extractionDate',
    key: 'extractionDate',
    width: '130px',
    render: (_, record) => {
      if (record.extractionDate.includes('Subtotal'))
        return (
          <span style={{ fontWeight: 'bold' }}>{record.extractionDate}</span>
        );
      return record.extractionDate;
    },
    filters: [{ text: 'Subtotal', value: 'Subtotal' }],
    filterMode: 'menu',
    onFilter: (value: string, record) => record.extractionDate.includes(value),
  },
  {
    title: 'OCR Images',
    children: [
      {
        title: 'SN/IMEI',
        dataIndex: 'snOrImeiNumber',
        key: 'snOrImeiNumber',
        width: '50px',
      },
      {
        title: 'Invoice',
        dataIndex: 'invoiceNumber',
        key: 'invoiceNumber',
        width: '50px',
      },
    ],
  },
  {
    title: 'Total Images',
    dataIndex: 'totalImages',
    key: 'totalImages',
    width: '130px',
  },
  {
    title: 'Image Quality',
    children: [
      {
        title: 'Successful',
        dataIndex: 'successfulNumber',
        key: 'successfulNumber',
        width: '50px',
      },
      {
        title: '% Successful',
        dataIndex: 'successfulPercentage',
        key: 'successfulPercentage',
        width: '120px',
        render: (_, record) => {
          return <span>{(record.successfulPercentage * 100)?.toFixed(2)}</span>;
        },
      },
      {
        title: 'Bad',
        dataIndex: 'badNumber',
        key: 'badNumber',
        width: '30px',
      },
      {
        title: '% Bad',
        dataIndex: 'badPercentage',
        key: 'badPercentage',
        width: '60px',
        render: (_, record) => {
          const isAbnormal = record.badPercentage * 100 > 10;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
              {(record.badPercentage * 100)?.toFixed(2)}
            </span>
          );
        },
      },
    ],
  },

  {
    title: 'Average accuracy rate (%) \n(※ character-based)',
    children: [
      {
        title: 'IMEI / Serial no.',
        dataIndex: 'snImeiAAR',
        key: 'snImeiAAR',
        width: '130px',
        render: (_, record) => {
          const isAbnormal = record.snImeiAAR * 100 < 95;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
              {(record.snImeiAAR * 100)?.toFixed(2)}
            </span>
          );
        },
      },
      {
        title: 'Purchase date',
        dataIndex: 'purchaseDateAAR',
        key: 'purchaseDateAAR',
        width: '130px',
        render: (_, record) => {
          const isAbnormal = record.purchaseDateAAR * 100 < 98;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
              {(record.purchaseDateAAR * 100).toFixed(2)}
            </span>
          );
        },
      },
      {
        title: 'Retailer name',
        dataIndex: 'retailerNameAAR',
        key: 'retailerNameAAR',
        width: '130px',
        render: (_, record) => {
          const isAbnormal = record.retailerNameAAR * 100 < 98;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
              {(record.retailerNameAAR * 100)?.toFixed(2)}
            </span>
          );
        },
      },
    ],
  },
  {
    title: 'Average Processing Time',
    children: [
      {
        title: 'SN/IMEI',
        dataIndex: 'snImeiAPT',
        key: 'snImeiAPT',
        render: (_, record) => {
          const isAbnormal = record.snImeiAPT > 2;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
              {record?.snImeiAPT?.toFixed(2)}
            </span>
          );
        },
      },
      {
        title: 'Invoice',
        dataIndex: 'invoiceAPT',
        key: 'invoiceAPT',
        render: (_, record) => {
          const isAbnormal = record.invoiceAPT > 2;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
              {record?.invoiceAPT?.toFixed(2)}
            </span>
          );
        },
      },
    ],
  },
  {
    title: 'Usage (Transaction Count)',
    children: [
      {
        title: 'SN/IMEI',
        dataIndex: 'snImeiTC',
        key: 'snImeiTC',
      },
      {
        title: 'Invoice',
        dataIndex: 'invoiceTC',
        key: 'invoiceTC',
      },
    ],
  },
];

interface ReportOverViewTableProps {
  isLoading: boolean;
  data: any;
}

const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
  isLoading,
  data,
}) => {
  const overviewDataResponse = data as any;
  const dataSubsRows = overviewDataResponse?.overview_data.map(
    (item, index) => {
      return {
        key: index,
        subSidiaries: item.subs,
        extractionDate: item.extraction_date,
        snOrImeiNumber: item.num_imei,
        invoiceNumber: item.num_invoice,
        totalImages: item.total_images,
        successfulNumber: item.images_quality.successful,
        successfulPercentage: item.images_quality.successful_percent,
        badNumber: item.images_quality.bad,
        badPercentage: item.images_quality.bad_percent,
        snImeiAAR: item.average_accuracy_rate.imei,
        purchaseDateAAR: item.average_accuracy_rate.purchase_date,
        retailerNameAAR: item.average_accuracy_rate.retailer_name,
        snImeiAPT: item.average_processing_time.imei,
        invoiceAPT: item.average_processing_time.invoice,
        snImeiTC: item.usage.imei,
        invoiceTC: item.usage.invoice,
      };
    },
  );

  return (
    <div>
      <Table
        loading={isLoading}
        columns={columns}
        dataSource={dataSubsRows}
        bordered
        size='small'
        scroll={{ x: 2000 }}
      />
    </div>
  );
};

export default ReportOverViewTable;