sbt-idp/cope2n-fe/src/pages/reviews/index.tsx

import { t } from '@lingui/macro';
import { Button, Input, Table, Tag, DatePicker, Form, Modal, Select, Space, Checkbox } from 'antd';
import { useState, useEffect } from 'react';
import { Layout } from 'antd';
import {
  EditOutlined, DownloadOutlined, CheckCircleOutlined,
  ClockCircleOutlined,
  ArrowLeftOutlined,
  ArrowRightOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
} from '@ant-design/icons';
import FileViewer from '@cyntler/react-doc-viewer';
import styled from 'styled-components';
const { Sider, Content } = Layout;
import { baseURL } from "request/api";
import moment from 'moment';

const siderStyle: React.CSSProperties = {
  backgroundColor: '#fafafa',
  padding: 10,
  width: 200,
};


const StyledTable = styled(Table)`
  & .sbt-table-cell {
    padding: 4px!important;
  }
`;


const StyledEditOutlined = styled(EditOutlined)`
  & {
    color: #6666ff;
    margin-left: 8px;
  }
  &:hover {
    color: #0000ff;
  }
`;

const columns = [
  {
    title: 'Key',
    dataIndex: 'key',
    key: 'key',
    width: 200,
  },
  {
    title: 'Accuracy',
    dataIndex: 'acc',
    key: 'acc',
    render: (text, record) => {
      return <div>100%</div>;
    },
    width: 150,
  },
  {
    title: 'Predicted',
    dataIndex: 'predicted',
    key: 'predicted',
  },
  {
    title: 'Submitted',
    dataIndex: 'submitted',
    key: 'submitted',
  },
  {
    title: 'Revised',
    dataIndex: 'revised',
    key: 'revised',
    render: (text, record) => {
      return (
        <div style={{
          display: 'flex',
          lineHeight: '2',
        }}>
          {text}
        </div>
      )
    },
  },
  {
    title: 'Action',
    key: 'operation',
    fixed: 'right',
    width: 100,
    render: () => <a><StyledEditOutlined /></a>,
  },
];


const FileCard = ({ file, isSelected, onClick }) => {
  const fileName = file["File Name"];

  return (
    <div style={{
      border: '1px solid #ccc',
      width: '200px',
      backgroundColor: isSelected ? '#d4ecff' : '#fff',
      padding: '4px 8px',
      marginRight: '4px',
      marginTop: '2px',
      position: 'relative',
      height: '100px',
    }} onClick={onClick}>
      <div>
        <span style={{
          fontSize: '12px',
          color: '#333',
          fontWeight: 'bold',
          padding: '4px 8px',
          cursor: 'default',
        }}>{file["Doc Type"].toUpperCase()}</span>
        <span style={{
          fontSize: '12px',
          color: '#aaa',
          fontWeight: 'bold',
          padding: '4px 8px',
          cursor: 'default',
          maxWidth: '50px',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}>
          {fileName ? fileName.substring(0, 25).replace("temp_", "") : fileName}
        </span>
      </div>
      <div style={{
        padding: '4px',
        position: 'absolute',
        bottom: 2,
        right: 2,
      }}>
        <Button style={{
          margin: '4px 2px',
        }}>
          Review
        </Button>
        <Button style={{
          margin: '4px 2px',
        }} onClick={() => {
          const downloadUrl = file["File URL"];
          window.open(downloadUrl, '_blank');
        }}>
          <DownloadOutlined />
        </Button>
      </div>
    </div>
  );

};

const fetchAllRequests = async (filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, page = 1, page_size = 20) => {
  const startDate = (filterDateRange && filterDateRange[0]) ? filterDateRange[0].format('YYYY-MM-DD') : '';
  const endDate = (filterDateRange && filterDateRange[1]) ? filterDateRange[1].format('YYYY-MM-DD') : '';
  let filterStr = "";
  filterStr += `page=${page}&page_size=${page_size}&`;
  if (filterSubsidiaries) {
    filterStr += `subsidiary=${filterSubsidiaries}&`;
  }
  if (filterReviewState) {
    filterStr += `is_reviewed=${filterReviewState}&`;
  }
  if (filterIncludeTests) {
    filterStr += `includes_tests=${filterIncludeTests}&`;
  }
  if (startDate && endDate) {
    filterStr += `start_date=${startDate}&end_date=${endDate}&`;
  }
  const token = localStorage.getItem('sbt-token') || '';
  const data = await fetch(`${baseURL}/ctel/request_list/?${filterStr}`, {
    method: 'GET',
    headers: {
      "Authorization": `${JSON.parse(token)}`
    }
  })
    .then(async (res) => {
      const data = await res.json();
      return data;
    });
  return data;
};

const fetchRequest = async (id) => {
  const token = localStorage.getItem('sbt-token') || '';
  const response = await fetch(`${baseURL}/ctel/request/${id}/`, {
    method: 'GET',
    headers: {
      "Authorization": `${JSON.parse(token)}`
    }
  });
  return await (await response.json()).subscription_requests[0];
};

const ReviewPage = () => {
  const [fullscreen, setFullscreen] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedFileId, setSelectedFileId] = useState(0);
  const selectFileByIndex = (index) => {
    setSelectedFileId(index);
  };

  // Default date range: 1 month ago to today
  const [filterDateRange, setFilterDateRange] = useState([
    moment().subtract(1, 'month'),
    moment(),
  ]);

  const [filterSubsidiaries, setFilterSubsidiaries] = useState('ALL');
  const [filterReviewState, setFilterReviewState] = useState('all');
  const [filterIncludeTests, setFilterIncludesTests] = useState('true');
  const [requests, setRequests] = useState([]);
  const [currentRequest, setCurrentRequest] = useState(null);
  const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
  const [hasNextRequest, setHasNextRequest] = useState(true);
  const [totalPages, setTotalPages] = useState(0);

  // purchase_date: "2024-01-20",
  // retailername: "Test Retailer",
  // sold_to_party: "Test Party",
  const dataSource = [
    // {
    //   key: "imei_number",
    //   predicted: "352271450941944",
    //   submitted: "352271450941944",
    //   revised: "352271450941944",
    // },
  ];

  const predicted = (currentRequest && currentRequest["Reviewed Result"]) ? currentRequest["Reviewed Result"] : {};
  const submitted = (currentRequest && currentRequest["Feedback Result"]) ? currentRequest["Feedback Result"] : {};
  const revised = (currentRequest && currentRequest["Reviewed Result"]) ? currentRequest["Reviewed Result"] : {};
  const keys = Object.keys(predicted);
  for (let i = 0; i < keys.length; i++) {
    let instance = {};
    instance["key"] = keys[i];
    instance["predicted"] = predicted[keys[i]];
    instance["submitted"] = submitted[keys[i]];
    instance["revised"] = revised[keys[i]];
    dataSource.push(instance);
  }

  const gotoNextRequest = () => {
    const nextRequestIndex = currentRequestIndex + 1;
    setCurrentRequestIndex(nextRequestIndex);
    fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, nextRequestIndex, 2).then((data) => {
      setRequests(data?.subscription_requests);
      setHasNextRequest(data?.subscription_requests.length > 1);
      setTotalPages(data?.page?.total_pages);
      const requestData = fetchRequest(data?.subscription_requests[0].RequestID);
      requestData.then(async (data) => {
        console.log(data)
        if (data) setCurrentRequest(data);
      });
    });
  };

  const gotoPreviousRequest = () => {
    if (currentRequestIndex === 1) {
      return;
    }
    const previousRequestIndex = currentRequestIndex - 1;
    setCurrentRequestIndex(previousRequestIndex);
    fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, previousRequestIndex, 2).then((data) => {
      setRequests(data?.subscription_requests);
      setHasNextRequest(data?.subscription_requests.length > 1);
      setTotalPages(data?.page?.total_pages);
      const requestData = fetchRequest(data?.subscription_requests[0].RequestID);
      requestData.then(async (data) => {
        console.log(data)
        if (data) setCurrentRequest(data);
      });
    });
  };


  const reloadFilters = () => {
    setCurrentRequestIndex(1);
    fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
      setTotalPages(data?.page?.total_pages);
      setRequests(data?.subscription_requests);
      setHasNextRequest(data?.subscription_requests.length > 1);
      const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
      firstRequest.then(async (data) => {
        console.log(firstRequest)
        if (data) setCurrentRequest(data);
      });
    });

  };

  useEffect(() => {
    setCurrentRequestIndex(1);
    fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
      setTotalPages(data?.page?.total_pages);
      setRequests(data?.subscription_requests);
      setHasNextRequest(data?.subscription_requests.length > 1);
      const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
      firstRequest.then(async (data) => {
        console.log(firstRequest)
        if (data) setCurrentRequest(data);
      });
    });
  }, []);

  const fileURL = currentRequest ? baseURL + currentRequest["Files"][selectedFileId]["File URL"].replace("http://be-ctel-sbt:9000/api", "") : "dummy.pdf";

  return (
    <div style={fullscreen ? {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: '#fff',
      zIndex: 1000,
    } : {
      height: '100%',
    }}>
      <div>
        <Button onClick={() => {
          setFullscreen(!fullscreen);
        }}>
          {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
          {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
        </Button>
        &nbsp;&nbsp;&nbsp;<b>Request ID:</b> {currentRequest?.RequestID}
      </div>
      <Layout style={{
        overflow: 'auto',
        width: '100%',
        height: '100%',
        maxWidth: '100%',
        minHeight: '70%',
        maxHeight: '70%',
        display: 'flex',
        padding: '8px',
      }}>
        <Content style={{
          textAlign: 'center',
          color: '#fff',
          backgroundColor: '#efefef',
          height: '100%',
          display: 'flex',
          flexDirection: 'row',
        }}>
          <div
            style={{
              width: "200px",
              display: "flex",
              flexDirection: "column",
              flexGrow: 0,
            }}>
            <h2
              style={{
                color: "#333",
                padding: 10,
                fontWeight: 'bold'
              }}
            >Files ({currentRequest?.Files?.length})</h2>
            {currentRequest?.Files.map((file, index) => (
              <FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
                () => {
                  setSelectedFileId(index);
                }
              } />
            ))}
          </div>
          <div style={{
            border: "1px solid #ccc",
            flexGrow: 1,
            height: '100%',
          }}>
            <FileViewer documents={
              [
                { uri: fileURL }
              ]
            } config={{
              header: {
                disableHeader: true,
                disableFileName: true,
                retainURLParams: true,
              },
              csvDelimiter: ",", // "," as default,
              pdfVerticalScrollByDefault: true, // false as default
            }} />
          </div>
        </Content>
        <Sider width="400px" style={siderStyle}>
          <Space.Compact style={{ width: '100%', marginBottom: 16 }}>
            <Input value={
              `Sub: ${filterSubsidiaries}, Date:${filterDateRange[0] ? (filterDateRange[0]?.format('YYYY-MM-DD') + " to " + filterDateRange[1].format('YYYY-MM-DD')) : "All"}, Reviewed: ${filterReviewState}, Tests: ${filterIncludeTests}`
            } readOnly />
            <Button type="primary" size="large"
              onClick={() => {
                setIsModalOpen(true);
              }}
            >
              Filters
            </Button>
          </Space.Compact>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
            <div>
              <Button type="default" style={{height: 38}}
                disabled={currentRequestIndex === 1}
                onClick={() => {
                  gotoPreviousRequest();
                }}
              >
                <ArrowLeftOutlined />
                Previous
              </Button>
              <Button type="default" style={{height: 38}}
                disabled={!hasNextRequest}
                onClick={() => {
                  if (!hasNextRequest) {
                    return;
                  }
                  gotoNextRequest();
                }}
              >
                Next
                <ArrowRightOutlined />
              </Button>
              <Input size='middle' addonBefore="To" style={{ marginBottom: "4px", marginLeft: "4px", width: 180 }} defaultValue={currentRequestIndex} addonAfter={
                <Button type="default">
                  Go to
                </Button>
              } />
            </div>
          </div>
          <h2 style={{ margin: "20px 0 10px 0" }}>{totalPages ? ("Request: " + currentRequestIndex + "/" + totalPages) : "No Request. Adjust your search criteria to see more results."}</h2>
          <Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.RequestID : ""} />
          <Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly value={currentRequest?.RedemptionID ? currentRequest.RedemptionID : ""} />
          <Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.created_at : ""} />
          <Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Client Request Time (ms)"] : ""} />
          <Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Server Processing Time (ms)"] : ""} />
          <div style={{ marginBottom: "8px", marginTop: "8px", display: "flex" }}>
            <Button type="primary">Mark Not-reviewed</Button>
            {/* <Tag icon={<ClockCircleOutlined />} color="warning" style={{ padding: "4px 16px", marginLeft: 8 }}>
              Not Reviewed
            </Tag> */}
            <Tag icon={<CheckCircleOutlined />} color="success" style={{ padding: "4px 16px", marginLeft: 8 }}>
              Reviewed
            </Tag>
          </div>
        </Sider>
      </Layout>
      <Modal
        title={t`Report Filters`}
        open={isModalOpen}
        width={700}
        onOk={
          () => {
            setIsModalOpen(false);
            reloadFilters();
          }
        }
        onCancel={
          () => {
            setIsModalOpen(false);
          }
        }
      >
        <Form
          style={{
            marginTop: 30,
          }}
        >
          <Form.Item
            name='dateRange'
            label={t`Date (GMT+8)`}
            rules={[
              {
                required: true,
                message: 'Please select a date range',
              },
            ]}
            style={{
              marginBottom: 10,
            }}
          >
            <DatePicker.RangePicker
              value={filterDateRange}
              onChange={(value) => {
                setFilterDateRange(value);
              }}
              style={{ width: 200 }}
            />
          </Form.Item>
          <Form.Item
            name='subsidiary'
            label={t`Subsidiary`}
            rules={[
              {
                required: true,
                message: 'Please select a subsidiary',
              },
            ]}
            style={{
              marginBottom: 10,
            }}
          >
            <Select
              placeholder='Select a subsidiary'
              style={{ width: 200 }}
              options={[
                { value: 'ALL', label: 'ALL' },
                { value: 'SEAU', label: 'SEAU' },
                { value: 'SESP', label: 'SESP' },
                { value: 'SME', label: 'SME' },
                { value: 'SEPCO', label: 'SEPCO' },
                { value: 'TSE', label: 'TSE' },
                { value: 'SEIN', label: 'SEIN' },
              ]}
              value={filterSubsidiaries}
              defaultValue={filterSubsidiaries}
              onChange={setFilterSubsidiaries}
            />
          </Form.Item>
          <div style={{ marginTop: 10, display: 'flex', marginLeft: 0, padding: 0 }}>
            <Form.Item
              name='reviewed'
              label={t`Reviewed`}
              rules={[
                {
                  required: true,
                  message: 'Please select review status',
                },
              ]}
            >
              <Select
                style={{ width: 200 }}
                options={[
                  { label: 'All', value: 'all' },
                  { label: 'Reviewed', value: 'reviewed' },
                  { label: 'Not Reviewed', value: 'not_reviewed' },
                ]}
                value={filterReviewState}
                defaultValue={filterReviewState}
                onChange={setFilterReviewState}
              />
            </Form.Item>
            <Form.Item
              name='is_test'
              label={t`Is Test`}
              rules={[
                {
                  required: true,
                  message: 'Please select test status',
                },
              ]}
              style={{ marginLeft: 16 }}
            >
              <Select
                style={{ width: 200 }}
                options={[
                  { label: 'Include tests', value: 'true' },
                  { label: 'Exclude tests', value: 'false' },
                ]}
                value={filterIncludeTests}
                defaultValue={filterIncludeTests}
                onChange={setFilterIncludesTests}
              />
            </Form.Item>
          </div>
        </Form>
      </Modal>
      <div
        style={{
          height: '25%',
          overflowY: 'auto',
        }}
      >
        <StyledTable dataSource={dataSource} columns={columns}
        />
      </div>
    </div>
  );
};

export default ReviewPage;