Integrate APIs

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

@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Button, Input, Table, Tag, DatePicker, Form, Modal, Select, Space, Checkbox } from 'antd';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Layout } from 'antd';
 import {
   EditOutlined, DownloadOutlined, CheckCircleOutlined,
@@ -13,6 +13,8 @@ import {
 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',
@@ -38,22 +40,6 @@ const StyledEditOutlined = styled(EditOutlined)`
   }
 `;
 
-
-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',
@@ -102,6 +88,7 @@ const columns = [
     title: 'Key',
     dataIndex: 'key',
     key: 'key',
+    width: 200,
   },
   {
     title: 'Accuracy',
@@ -110,6 +97,7 @@ const columns = [
     render: (text, record) => {
       return <div>100%</div>;
     },
+    width: 150,
   },
   {
     title: 'Predicted',
@@ -142,6 +130,8 @@ const columns = [
 
 
 const FileCard = ({ file, isSelected, onClick }) => {
+  const fileName = file["File Name"];
+
   return (
     <div style={{
       border: '1px solid #ccc',
@@ -160,14 +150,19 @@ const FileCard = ({ file, isSelected, onClick }) => {
           fontWeight: 'bold',
           padding: '4px 8px',
           cursor: 'default',
-        }}>{file.type.toUpperCase()}</span>
+        }}>{file["Doc Type"].toUpperCase()}</span>
         <span style={{
           fontSize: '12px',
           color: '#aaa',
           fontWeight: 'bold',
           padding: '4px 8px',
           cursor: 'default',
-        }}>{file.name}</span>
+          maxWidth: '50px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}>
+          {fileName? fileName.substring(0, 10) : fileName }
+        </span>
       </div>
       <div style={{
         padding: '4px',
@@ -191,6 +186,48 @@ const FileCard = ({ file, isSelected, onClick }) => {
 
 };
 
+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);
@@ -198,9 +235,86 @@ const ReviewPage = () => {
   const selectFileByIndex = (index) => {
     setSelectedFileId(index);
   };
-  const [filterDateRange, setFilterDateRange] = useState(null);
+
-  const [filterSubsidiaries, setFilterSubsidiaries] = useState('');
+  // Default date range: 1 month ago to today
-  const [filterReviewState, setFilterReviewState] = useState('');
+  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);
+
+  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 ? {
@@ -225,8 +339,8 @@ const ReviewPage = () => {
         width: '100%',
         height: '100%',
         maxWidth: '100%',
-        minHeight: '60%',
+        minHeight: '70%',
-        maxHeight: '60%',
+        maxHeight: '70%',
         display: 'flex',
         padding: '8px',
       }}>
@@ -249,10 +363,10 @@ const ReviewPage = () => {
               style={{
                 color: "#333",
                 padding: 10,
-                fontWeight: 'bold'                 
+                fontWeight: 'bold'
               }}
-            >Files ({fileList.length})</h2>
+            >Files ({currentRequest?.Files?.length})</h2>
-            {fileList.map((file, index) => (
+            {currentRequest?.Files.map((file, index) => (
               <FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
                 () => {
                   setSelectedFileId(index);
@@ -267,7 +381,7 @@ const ReviewPage = () => {
           }}>
             <FileViewer documents={
               [
-                { uri: "/dummy.pdf" }
+                { uri: fileURL }
               ]
             } config={{
               header: {
@@ -280,9 +394,11 @@ const ReviewPage = () => {
             }} />
           </div>
         </Content>
-        <Sider width="300px" style={siderStyle}>
+        <Sider width="400px" style={siderStyle}>
           <Space.Compact style={{ width: '100%', marginBottom: 16 }}>
-            <Input defaultValue="All" readOnly />
+            <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);
@@ -293,11 +409,24 @@ const ReviewPage = () => {
           </Space.Compact>
           <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
             <div>
-              <Button type="default">
+              <Button type="default"
+                disabled={currentRequestIndex === 1}
+                onClick={() => {
+                  gotoPreviousRequest();
+                }}
+              >
                 <ArrowLeftOutlined />
                 Previous
               </Button>
-              <Button type="default">
+              <Button type="default"
+                disabled={!hasNextRequest}
+                onClick={() => {
+                  if (!hasNextRequest) {
+                    return;
+                  }
+                  gotoNextRequest();
+                }}
+              >
                 Next
                 <ArrowRightOutlined />
               </Button>
@@ -306,12 +435,12 @@ const ReviewPage = () => {
               </Button>
             </div>
           </div>
-          <h2 style={{ margin: "20px 0 10px 0" }}>Request Review</h2>
+          <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 />
+          <Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.RequestID : ""} />
-          <Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly />
+          <Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly value={currentRequest?.RedemptionID ? currentRequest.RedemptionID : "<Unknown>"} />
-          <Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly />
+          <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 />
+          <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 />
+          <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 }}>
@@ -330,6 +459,7 @@ const ReviewPage = () => {
         onOk={
           () => {
             setIsModalOpen(false);
+            reloadFilters();
           }
         }
         onCancel={
@@ -359,40 +489,42 @@ const ReviewPage = () => {
             <DatePicker.RangePicker
               value={filterDateRange}
               onChange={(value) => {
-                console.log(value);
                 setFilterDateRange(value);
               }}
               style={{ width: 200 }}
             />
           </Form.Item>
-          <div style={{ marginTop: 10, display: 'flex' }}>
+          <Form.Item
-            <Form.Item
+            name='subsidiary'
-              name='subsidiary'
+            label={t`Subsidiary`}
-              label={t`Subsidiary`}
+            rules={[
-              rules={[
+              {
-                {
+                required: true,
-                  required: true,
+                message: 'Please select a subsidiary',
-                  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' },
               ]}
-              style={{
+              value={filterSubsidiaries}
-                marginBottom: 10,
+              defaultValue={filterSubsidiaries}
-              }}
+              onChange={setFilterSubsidiaries}
-            >
+            />
-              <Select
+          </Form.Item>
-                placeholder='Select a subsidiary'
+          <div style={{ marginTop: 10, display: 'flex', marginLeft: 0, padding: 0 }}>
-                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`}
@@ -402,28 +534,51 @@ const ReviewPage = () => {
                   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={[
-                  { value: 'ALL', label: 'ALL' },
+                  { label: 'Include tests', value: 'true' },
-                  { value: 'YES', label: 'YES' },
+                  { label: 'Exclude tests', value: 'false' },
-                  { value: 'NO', label: 'NO' },
                 ]}
-                defaultValue={'ALL'}
+                value={filterIncludeTests}
+                defaultValue={filterIncludeTests}
+                onChange={setFilterIncludesTests}
               />
             </Form.Item>
           </div>
         </Form>
       </Modal>
-      <div 
+      <div
         style={{
-          height: '40%',
+          height: '25%',
           overflowY: 'auto',
         }}
       >
-        <StyledTable dataSource={dataSource} columns={columns} 
+        <StyledTable dataSource={dataSource} columns={columns}
         />
       </div>
     </div>

cope2n-fe/src/request/api.ts

@@ -11,7 +11,7 @@ const environment = process.env.NODE_ENV;
 const AXIOS_TIMEOUT_MS = 30 * 60 * 1000; // This config sastified long-live upload file request
 const EXPIRED_PASSWORD_SIGNAL = 'expired_password';
 
-export const baseURL = environment === 'development' ? 'http://42.96.42.13:9000/api' : '/api';
+export const baseURL = environment === 'development' ? 'http://42.96.42.13:9881/api' : '/api';
 
 export const API = axios.create({
   timeout: AXIOS_TIMEOUT_MS,