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

import { t } from '@lingui/macro';
import { Button, Input, Table, Tag, DatePicker, Form, Modal, Select, Space, Spin, message } from 'antd';
import React, { useContext, useEffect, useRef, useState } from 'react';
import type { GetRef } from 'antd';
import { Layout } from 'antd';
import {
  DownloadOutlined, CheckCircleOutlined,
  ArrowLeftOutlined,
  ArrowRightOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  ClockCircleFilled,
} 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';
import { useHotkeys } from "react-hotkeys-hook";


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


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

type InputRef = GetRef<typeof Input>;
type FormInstance<T> = GetRef<typeof Form<T>>;

const EditableContext = React.createContext<FormInstance<any> | null>(null);

interface Item {
  key: string;
  accuracy: number;
  submitted: string;
  revised: string;
  action: string;
}

interface EditableRowProps {
  index: number;
}

const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};

interface EditableCellProps {
  title: React.ReactNode;
  editable: boolean;
  children: React.ReactNode;
  dataIndex: keyof Item;
  record: Item;
  handleSave: (record: Item) => void;
}


const EditableCell: React.FC<EditableCellProps> = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef<InputRef>(null);
  const form = useContext(EditableContext)!;

  useEffect(() => {
    if (editing) {
      inputRef.current!.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({ [dataIndex]: record[dataIndex] });
  };

  const save = async () => {
    try {
      const values = await form.validateFields();

      toggleEdit();
      handleSave({ ...record, ...values });
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };

  let childNode = children;

  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{ margin: 0 }}
        name={dataIndex}
        rules={[
          {
            required: true,
            message: `${title} is required.`,
          },
        ]}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
      <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
        {children}
      </div>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};

// type EditableTableProps = Parameters<typeof Table>[0];

const defaultColumns = [
  {
    title: 'Key',
    dataIndex: 'key',
    key: 'key',
    width: 200,
  },
  {
    title: 'Predicted',
    dataIndex: 'predicted',
    key: 'predicted',
  },
  {
    title: 'Submitted',
    dataIndex: 'submitted',
    key: 'submitted',
  },
  {
    title: 'Revised',
    dataIndex: 'revised',
    key: 'revised',
    editable: true,
  },
];


const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
  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',
      overflow: 'hidden',
    }} 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',
        }}
          onClick={() => {
            setIsReasonModalOpen(true);
          }}
        >
          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] : '';
  const endDate = (filterDateRange && filterDateRange[1]) ? filterDateRange[1] : '';
  let filterStr = "";
  filterStr += `page=${page}&page_size=${page_size}&`;
  if (filterSubsidiaries) {
    filterStr += `subsidiary=${filterSubsidiaries}&`;
  }
  if (filterReviewState) {
    filterStr += `is_reviewed=${filterReviewState}&`;
  }
  if (filterIncludeTests) {
    filterStr += `includes_test=${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 [loading, setLoading] = useState(false);
  const [fullscreen, setFullscreen] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isReasonModalOpen, setIsReasonModalOpen] = useState(false);
  const [selectedFileId, setSelectedFileId] = useState(0);
  const [selectedFileData, setSelectedFileData] = useState(null);
  const [selectedFileName, setSelectedFileName] = useState(null);

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

  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 [totalRequests, setTotalPages] = useState(0);
  const [dataSource, setDataSource] = useState([]);

  const [pageIndexToGoto, setPageIndexToGoto] = useState(1);

  const setAndLoadSelectedFile = async (requestData, index) => {
    setSelectedFileId(index);
    if (!requestData["Files"][index]) {
      setSelectedFileData("FAILED_TO_LOAD_FILE");
      return;
    };
    const fileName = requestData["Files"][index]["File Name"];
    const fileURL = requestData["Files"][index]["File URL"];
    const response = await fetch(fileURL);
    if (response.status === 200) {
      setSelectedFileName(fileName);
      setSelectedFileData(fileURL);
      console.log("Loading file: " + fileName);
      console.log("URL: " + fileURL);
    } else {
      setSelectedFileData("FAILED_TO_LOAD_FILE");
    }
  };

  const loadCurrentRequest = (requestID) => {
    setLoading(true);
    fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, requestID, 2).then((data) => {
      setRequests(data?.subscription_requests);
      setHasNextRequest(data?.subscription_requests.length > 1);
      setTotalPages(data?.page?.total_requests);
      const requestData = fetchRequest(data?.subscription_requests[0].RequestID);
      requestData.then(async (data) => {
        if (data) setCurrentRequest(data);
        const predicted = (data && data["Reviewed Result"]) ? data["Reviewed Result"] : {};
        const submitted = (data && data["Feedback Result"]) ? data["Feedback Result"] : {};
        const revised = (data && data["Reviewed Result"]) ? data["Reviewed Result"] : {};
        const keys = Object.keys(predicted);
        const tableRows = [];
        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]];
          tableRows.push(instance);
        }
        setDataSource(tableRows);
        setLoading(false);
        setAndLoadSelectedFile(data, 0);
      }).finally(() => {
        setLoading(false);
      });
    }).finally(() => {
      setLoading(false);
    });
  };

  const gotoNextRequest = () => {
    if (currentRequestIndex >= totalRequests) {
      return;
    }
    const nextRequestIndex = currentRequestIndex + 1;
    setCurrentRequestIndex(nextRequestIndex);
    loadCurrentRequest(nextRequestIndex);
  };

  const gotoPreviousRequest = () => {
    if (currentRequestIndex === 1) {
      return;
    }
    const previousRequestIndex = currentRequestIndex - 1;
    setCurrentRequestIndex(previousRequestIndex);
    loadCurrentRequest(previousRequestIndex);
  };

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

  };

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

  const components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  };

  // "Key", "Accuracy", "Submitted", "Revised"
  interface DataType {
    key: string;
    accuracy: number;
    submitted: string;
    revised: string;
  };

  const updateRevisedData = async (newRevisedData: any) => {
    const requestID = newRevisedData.request_id;
    const token = localStorage.getItem('sbt-token') || '';
    await fetch(`${baseURL}/ctel/request/${requestID}/`, {
      method: 'POST',
      headers: {
        "Authorization": `${JSON.parse(token)}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        "reviewed_result": newRevisedData
      }),
    }).catch((error) => {
      console.log(error);
      message.error("Could not update revised data");
    });
  };

  const handleSave = (row: DataType) => {
    const newData = [...dataSource];
    const index = newData.findIndex((item) => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    setDataSource(newData);
    const newRevisedData = {};
    for (let i = 0; i < newData.length; i++) {
      newRevisedData[newData[i].key] = newData[i].revised;
    }
    updateRevisedData(newRevisedData).then(() => {
      // "[Is Reviewed]" => true
      setCurrentRequest({
        ...currentRequest,
        ["Is Reviewed"]: true,
      })
    })
  };

  const columns = defaultColumns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record: DataType) => ({
        record,
        editable: col.key != "request_id" && col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });

  // use left/right keys to navigate
  useHotkeys("left", gotoPreviousRequest);
  useHotkeys("right", gotoNextRequest);

  const fileExtension = selectedFileName ? selectedFileName.split('.').pop() : '';

  return (
    <div style={fullscreen ? {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: '#fff',
      zIndex: 1000,
    } : {
      height: '100%',
      position: 'relative',
    }}>
      <div
        style={{ height: '100%', position: 'absolute', top: 0, left: 0, width: '100%', background: "#00000033", zIndex: 1000, display: loading ? 'block' : 'none' }}
      >
        <Spin spinning={true} style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          marginTop: -12,
          marginLeft: -12,
          width: 24,
          height: 24,
          borderRadius: '50%',
        }} size='large' />
      </div>
      <div>
        <Button onClick={() => {
          setFullscreen(!fullscreen);
        }}>
          {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
          {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
        </Button>
        {totalRequests ? <>&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',
        }}>
          {totalRequests > 0 && <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={
                () => {
                  setAndLoadSelectedFile(currentRequest, index);
                }
              } setIsReasonModalOpen={setIsReasonModalOpen} />
            ))}
          </div>}
          <div style={{
            border: "1px solid #ccc",
            flexGrow: 1,
            height: '100%',
          }}>
            {selectedFileData === "FAILED_TO_LOAD_FILE" ? <p style={{ color: "#333" }}>Failed to load file.</p> : ( fileExtension === "pdf" ? (<FileViewer documents={[
              { uri: selectedFileData }
            ]} config={{
              header: {
                disableHeader: true,
                disableFileName: true,
                retainURLParams: true,
              },
              csvDelimiter: ",", // "," as default,
              pdfVerticalScrollByDefault: true, // false as default
            }} />) : <div style={{
              height: "100%",
              width: "100%",
              overflow: "auto",
            }}><img width={"100%"} src={selectedFileData} alt="file" /></div>)}
          </div>
        </Content>
        <Sider width="400px" style={siderStyle}>
          <Space.Compact style={{ width: '100%', marginBottom: 16 }}>
            <Input value={
              `Sub: ${filterSubsidiaries}, Date:${filterDateRange[0] ? (filterDateRange[0] + " to " + filterDateRange[1]) : "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 />
                Previou
              </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"
                  onClick={() => {
                    if (pageIndexToGoto > totalRequests) {
                      message.error("RequestID is out of range.");
                      return;
                    }
                    if (pageIndexToGoto < 1) {
                      message.error("RequestID is out of range.");
                      return;
                    }
                    setCurrentRequestIndex(pageIndexToGoto);
                    loadCurrentRequest(pageIndexToGoto);
                  }}>
                  Go to
                </Button>
              }
                value={pageIndexToGoto}
                onChange={e => {
                  setPageIndexToGoto(parseInt(e.target.value));
                }}
              />
            </div>
          </div>
          <h2 style={{ margin: "20px 0 10px 0" }}>{totalRequests ? ("Request: " + currentRequestIndex + "/" + totalRequests) : "No Request. Adjust your search criteria to see more results."}</h2>
          {totalRequests > 0 && <div>
            <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" }}>
              {currentRequest && (currentRequest["Is Reviewed"] ? <Tag icon={<CheckCircleOutlined />} color="success" style={{ padding: "4px 16px" }}>
                Reviewed
              </Tag> : <Tag icon={<ClockCircleFilled />} color="warning" style={{ padding: "4px 16px" }}>
                Not Reviewed
              </Tag>)}
            </div>
          </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
              onChange={(date, dateString) => {
                setFilterDateRange(dateString);
              }}
              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>
      <Modal
        title={t`Review`}
        open={isReasonModalOpen}
        width={700}
        onOk={
          () => {

          }
        }
        onCancel={
          () => {
            setIsReasonModalOpen(false);
          }
        }
      >
        {currentRequest && JSON.stringify(currentRequest["Files"][selectedFileId])}
        <Form
          style={{
            marginTop: 30,
          }}
        >
          <Form.Item
            name='reason'
            label={t`Reason for bad quality:`}
            style={{
              marginBottom: 10,
            }}
          >
            <Select
              placeholder='Select a reason'
              style={{ width: 200 }}
              options={[
                { value: 'invalid_image', label: t`Invalid image` },
                { value: 'missing_information', label: t`Missing information` },
                { value: 'too_blurry_text', label: t`Too blurry text` },
                { value: 'too_small_text', label: t`Too small text` },
                { value: 'handwritten', label: t`Handwritten` },
                { value: 'recheck', label: t`Recheck` },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
      {totalRequests > 0 && <div
        style={{
          height: '25%',
          overflowY: 'auto',
        }}
      >
        <StyledTable components={components}
          rowClassName={() => 'editable-row'}
          bordered dataSource={dataSource} columns={columns}
        />
      </div>}
    </div>
  );
};

export default ReviewPage;