Merge pull request #15 from SDSRV-IDP/fe/fix-acc

fix overview table
2024-02-02 17:45:33 +07:00 · 2024-02-02 17:45:33 +07:00 · 5da5fd6146
commit 5da5fd6146
parent f38f1bf6ec 7fd2daa81c
2 changed files with 83 additions and 243 deletions
--- a/cope2n-fe/src/components/report-detail/report-overview-table.tsx
+++ b/cope2n-fe/src/components/report-detail/report-overview-table.tsx
@ -5,7 +5,7 @@ import React from 'react';
 interface DataType {
  key: React.Key;
  subSidiaries: string;
-  extractionDate: string | Date;
+  extractionDate: string;
  snOrImeiNumber: number;
  invoiceNumber: number;
  totalImages: number;
@ -28,12 +28,33 @@ const columns: TableColumnsType<DataType> = [
    dataIndex: 'subSidiaries',
    key: 'subSidiaries',
    width: '100px',
+    render: (_, record) => {
+      if (record.subSidiaries === '+') return '';
+      return record.subSidiaries;
+    },
+    filters: [
+      { text: 'all', value: 'all' },
+      { text: 'sesp', value: 'sesp' },
+      { text: 'seau', value: 'seau' },
+    ],
+    filterMode: 'menu',
+    onFilter: (value: string, record) => record.subSidiaries.includes(value),
  },
  {
    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',
@ -73,7 +94,7 @@ const columns: TableColumnsType<DataType> = [
        key: 'successfulPercentage',
        width: '120px',
        render: (_, record) => {
-          return <span>{(record.successfulPercentage * 100).toFixed(2)}</span>;
+          return <span>{(record.successfulPercentage * 100)?.toFixed(2)}</span>;
        },
      },
      {
@ -91,7 +112,7 @@ const columns: TableColumnsType<DataType> = [
          const isAbnormal = record.badPercentage * 100 > 10;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.badPercentage * 100).toFixed(2)}
+              {(record.badPercentage * 100)?.toFixed(2)}
            </span>
          );
        },
@ -111,7 +132,7 @@ const columns: TableColumnsType<DataType> = [
          const isAbnormal = record.snImeiAAR * 100 < 98;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.snImeiAAR * 100).toFixed(2)}
+              {(record.snImeiAAR * 100)?.toFixed(2)}
            </span>
          );
        },
@ -139,7 +160,7 @@ const columns: TableColumnsType<DataType> = [
          const isAbnormal = record.retailerNameAAR * 100 < 98;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.retailerNameAAR * 100).toFixed(2)}
+              {(record.retailerNameAAR * 100)?.toFixed(2)}
            </span>
          );
        },
@ -157,7 +178,7 @@ const columns: TableColumnsType<DataType> = [
          const isAbnormal = record.snImeiAPT > 2;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {record.snImeiAPT.toFixed(2)}
+              {record?.snImeiAPT?.toFixed(2)}
            </span>
          );
        },
@ -170,7 +191,7 @@ const columns: TableColumnsType<DataType> = [
          const isAbnormal = record.invoiceAPT > 2;
          return (
            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {record.invoiceAPT.toFixed(2)}
+              {record?.invoiceAPT?.toFixed(2)}
            </span>
          );
        },
@ -215,49 +236,9 @@ const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
  isLoading,
  data,
 }) => {
-  // const [pagination, setPagination] = useState({
-  //   page: 1,
-  //   page_size: 10,
-  // });
-  // const { isLoading, data } = useOverViewReport({
-  //   page: pagination.page,
-  // });
-
-  console.log('check >>>', pagination, isLoading, data);
-
  const overviewDataResponse = data as any;
-  const dataSubsRows = overviewDataResponse?.overview_data
-    .map((item, index) => {
-      if (item.subs.includes('+')) {
-        return {
-          key: index,
-          subSidiaries: '',
-          extractionDate: item.extraction_date,
-          snOrImeiNumber: '',
-          invoiceNumber: '',
-          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,
-        };
-      } else {
-        return null;
-      }
-    })
-    .filter((item) => item);
-
-  const expandedRowRender = () => {
-    const subData = overviewDataResponse?.overview_data
-      .map((item, index) => {
-        if (!item.subs.includes('+')) {
+  const dataSubsRows = overviewDataResponse?.overview_data.map(
+    (item, index) => {
      return {
        key: index,
        subSidiaries: item.subs,
@ -277,172 +258,9 @@ const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
        snImeiTC: item.usage.imei,
        invoiceTC: item.usage.invoice,
      };
-        } else {
-          return null;
-        }
-      })
-      .filter((item) => item);
+    },
+  );

-    const subColumns: TableColumnsType<DataType> = [
-      {
-        title: 'Subs',
-        dataIndex: 'subSidiaries',
-        key: 'subSidiaries',
-        width: '100px',
-      },
-      {
-        title: 'OCR extraction date',
-        dataIndex: 'extractionDate',
-        key: 'extractionDate',
-        width: '130px',
-        render: (_, record) => {
-          return <span>{record?.extractionDate.toString().split('T')[0]}</span>;
-        },
-      },
-      {
-        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: '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: 'IMEI / Serial no.',
-        dataIndex: 'snImeiAAR',
-        key: 'snImeiAAR',
-        width: '130px',
-        render: (_, record) => {
-          const isAbnormal = record.snImeiAAR * 100 < 98;
-          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: '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: 'SN/IMEI',
-        dataIndex: 'snImeiTC',
-        key: 'snImeiTC',
-      },
-      {
-        title: 'Invoice',
-        dataIndex: 'invoiceTC',
-        key: 'invoiceTC',
-      },
-    ];
-    return (
-      <Table
-        columns={subColumns}
-        dataSource={subData}
-        pagination={false}
-        bordered
-        // showHeader={false}
-      />
-    );
-  };
  return (
    <div>
      <Table
@ -451,7 +269,6 @@ const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
        dataSource={dataSubsRows}
        bordered
        size='small'
-        expandable={{ expandedRowRender, defaultExpandedRowKeys: [0, 1] }}
        scroll={{ x: 2000 }}
        pagination={{
          current: pagination.page,
--- a/cope2n-fe/src/components/report-detail/report-table.tsx
+++ b/cope2n-fe/src/components/report-detail/report-table.tsx
@ -65,9 +65,12 @@ const ReportTable: React.FC = () => {
      dataIndex: 'Purchase Date Acc',
      key: 'Purchase Date Acc',
      render: (_, record) => {
+        const isAbnormal = record['Purchase Date Acc'] * 100 < 98;
        return (
-          record['Purchase Date Acc'] &&
-          Number(record['Purchase Date Acc']).toFixed(2)
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['Purchase Date Acc'] &&
+              (Number(record['Purchase Date Acc']) * 100)?.toFixed(2)}
+          </span>
        );
      },
    },
@ -77,8 +80,12 @@ const ReportTable: React.FC = () => {
      dataIndex: 'Retailer Acc',
      key: 'Retailer Acc',
      render: (_, record) => {
+        const isAbnormal = record['Retailer Acc'] * 100 < 98;
        return (
-          record['Retailer Acc'] && Number(record['Retailer Acc']).toFixed(2)
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['Retailer Acc'] &&
+              (Number(record['Retailer Acc']) * 100)?.toFixed(2)}
+          </span>
        );
      },
    },
@ -87,7 +94,13 @@ const ReportTable: React.FC = () => {
      dataIndex: 'IMEI Acc',
      key: 'IMEI Acc',
      render: (_, record) => {
-        return record['IMEI Acc'] && Number(record['IMEI Acc']).toFixed(2);
+        const isAbnormal = record['IMEI Acc'] * 100 < 98;
+        return (
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['IMEI Acc'] &&
+              (Number(record['IMEI Acc']) * 100)?.toFixed(2)}
+          </span>
+        );
      },
    },
    {
@ -95,8 +108,12 @@ const ReportTable: React.FC = () => {
      dataIndex: 'Avg Accuracy',
      key: 'Avg Accuracy',
      render: (_, record) => {
+        const isAbnormal = record['Avg Accuracy'] * 100 < 98;
        return (
-          record['Avg Accuracy'] && Number(record['Avg Accuracy']).toFixed(2)
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['Avg Accuracy'] &&
+              (Number(record['Avg Accuracy']) * 100)?.toFixed(2)}
+          </span>
        );
      },
    },
@ -105,9 +122,12 @@ const ReportTable: React.FC = () => {
      dataIndex: 'Avg. Client Request Time',
      key: 'Avg. Client Request Time',
      render: (_, record) => {
+        const isAbnormal = record['Avg Client Request Time'] > 2;
        return (
-          record['Avg Client Request Time'] &&
-          Number(record['Avg Client Request Time']).toFixed(2)
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['Avg Client Request Time'] &&
+              Number(record['Avg Client Request Time'])?.toFixed(2)}
+          </span>
        );
      },
    },
@ -116,9 +136,12 @@ const ReportTable: React.FC = () => {
      dataIndex: 'Avg. OCR Processing Time',
      key: 'Avg. OCR Processing Time',
      render: (_, record) => {
+        const isAbnormal = record['Avg. OCR Processing Time'] > 2;
        return (
-          record['Avg. OCR Processing Time'] &&
-          Number(record['Avg. OCR Processing Time']).toFixed(2)
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['Avg. OCR Processing Time'] &&
+              Number(record['Avg. OCR Processing Time'])?.toFixed(2)}
+          </span>
        );
      },
    },