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

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 fileList = [
  {
    name: "invoice.pdf",
    url: "/dummpy.pdf",
    type: "invoice",
    isBadQuality: false,
  },
  {
    name: "invoice.pdf",
    url: "/dummpy.pdf",
    type: "imei",
    isBadQuality: true,
  }
]

const dataSource = [
  {
    key: 'retailer_name',
    value: 'Mike',
  },
  {
    key: '2',
    value: 'Mike',
  },
  {
    key: '3',
    value: 'Mike',
  },
  {
    key: '3',
    value: 'Mike',
  },
  {
    key: '3',
    value: 'Mike',
  },
  {
    key: '3',
    value: 'Mike',
  },
  {
    key: '3',
    value: 'Mike',
  },
  {
    key: '3',
    value: 'Mike',
  },
  {
    key: '3',
    value: 'Mike',
  },
  {
    key: '3',
    value: 'Mike',
  },
];

const columns = [
  {
    title: 'Key',
    dataIndex: 'key',
    key: 'key',
  },
  {
    title: 'Accuracy',
    dataIndex: 'acc',
    key: 'acc',
    render: (text, record) => {
      return <div>100%</div>;
    },
  },
  {
    title: 'Predicted',
    dataIndex: 'value',
    key: 'value',
  },
  {
    title: 'Submitted',
    dataIndex: 'value',
    key: 'value',
  },
  {
    title: 'Revised',
    dataIndex: 'value',
    key: 'value',
    render: (text, record) => {
      return (
        <div style={{
          display: 'flex',
          lineHeight: '2',
        }}>
          {text}
          <StyledEditOutlined />
        </div>
      )
    },

  },
];


const FileCard = ({ file, isSelected, onClick }) => {
  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.type.toUpperCase()}</span>
        <span style={{
          fontSize: '12px',
          color: '#aaa',
          fontWeight: 'bold',
          padding: '4px 8px',
          cursor: 'default',
        }}>{file.name}</span>
      </div>
      <div style={{
        padding: '4px',
        position: 'absolute',
        bottom: 2,
        right: 2,
      }}>
        <Button style={{
          margin: '4px 2px',
        }}>
          Review
        </Button>
        <Button style={{
          margin: '4px 2px',
        }}>
          <DownloadOutlined />
        </Button>
      </div>
    </div>
  );

};

const ReviewPage = () => {
  const [fullscreen, setFullscreen] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedFileId, setSelectedFileId] = useState(0);
  const selectFileByIndex = (index) => {
    setSelectedFileId(index);
  };
  const [filterDateRange, setFilterDateRange] = useState(null);
  const [filterSubsidiaries, setFilterSubsidiaries] = useState('');
  const [filterReviewState, setFilterReviewState] = useState('');

  return (
    <div style={fullscreen ? {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: '#fff',
      zIndex: 1000,
    } : {
      height: '100%',
    }}>
      <Button onClick={() => {
        setFullscreen(!fullscreen);
      }}>
        {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
        {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
      </Button>
      <Layout style={{
        overflow: 'auto',
        width: '100%',
        height: '100%',
        maxWidth: '100%',
        minHeight: '60%',
        maxHeight: '60%',
        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 ({fileList.length})</h2>
            {fileList.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: "/dummy.pdf" }
              ]
            } config={{
              header: {
                disableHeader: true,
                disableFileName: true,
                retainURLParams: true,
              },
              csvDelimiter: ",", // "," as default,
              pdfVerticalScrollByDefault: true, // false as default
            }} />
          </div>
        </Content>
        <Sider width="300px" style={siderStyle}>
          <Space.Compact style={{ width: '100%', marginBottom: 16 }}>
            <Input defaultValue="All" 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">
                <ArrowLeftOutlined />
                Previous
              </Button>
              <Button type="default">
                Next
                <ArrowRightOutlined />
              </Button>
              <Button type="default">
                Go to
              </Button>
            </div>
          </div>
          <h2 style={{ margin: "20px 0 10px 0" }}>Request Review</h2>
          <Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly />
          <Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly />
          <Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly />
          <Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly />
          <Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly />
          <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);
          }
        }
        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) => {
                console.log(value);
                setFilterDateRange(value);
              }}
              style={{ width: 200 }}
            />
          </Form.Item>
          <div style={{ marginTop: 10, display: 'flex' }}>
            <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' },
                ]}
              />
            </Form.Item>
            <Form.Item
              name='reviewed'
              label={t`Reviewed`}
              rules={[
                {
                  required: true,
                  message: 'Please select review status',
                },
              ]}
              style={{ marginLeft: 16 }}
            >
              <Select
                style={{ width: 200 }}
                options={[
                  { value: 'ALL', label: 'ALL' },
                  { value: 'YES', label: 'YES' },
                  { value: 'NO', label: 'NO' },
                ]}
                defaultValue={'ALL'}
              />
            </Form.Item>
          </div>
        </Form>
      </Modal>
      <div 
        style={{
          height: '40%',
          overflowY: 'auto',
        }}
      >
        <StyledTable dataSource={dataSource} columns={columns} 
        />
      </div>
    </div>
  );
};

export default ReviewPage;