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 {
  EditOutlined, DownloadOutlined, CheckCircleOutlined,
  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;
  }
`;

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];


type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;


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

const defaultColumns = [
  {
    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',
    editable: true,
  },
];


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 [loading, setLoading] = useState(false);
  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 = [];

  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 [pageIndexToGoto, setPageIndexToGoto] = useState(1);

  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_pages);
      const requestData = fetchRequest(data?.subscription_requests[0].RequestID);
      requestData.then(async (data) => {
        if (data) setCurrentRequest(data);
      }).finally(() => {
        setLoading(false);
      });
    }).finally(() => {
      setLoading(false);
    });
  };

  const gotoNextRequest = () => {
    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_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 && currentRequest["Files"][selectedFileId]) ? baseURL + currentRequest["Files"][selectedFileId]["File URL"].replace("http://be-ctel-sbt:9000/api", "") : "dummy.pdf";

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

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

  const handleSave = (row: DataType) => {
    const newData = [...dataSource];
    console.log(row);
    // const index = newData.findIndex((item) => row.key === item.key);
    // const item = newData[index];
    // newData.splice(index, 1, {
    //   ...item,
    //   ...row,
    // });
    // setDataSource(newData);
  };

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

  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>
        &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"
                  onClick={() => {
                    if (pageIndexToGoto > totalPages) {
                      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" }}>{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 components={components}
          rowClassName={() => 'editable-row'}
          bordered dataSource={dataSource} columns={columns}
        />
      </div>
    </div>
  );
};

export default ReviewPage;