tannedcung/sbt-idp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

View images on review UI

Browse Source
This commit is contained in:
Viet Anh Nguyen 2024-02-22 16:36:03 +07:00
parent 21a805334a
commit 4a483e1519
3 changed files with 170 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
cope2n-fe/package-lock.json generated
View File

@ -25,6 +25,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-chartjs-2": "^5.2.0", "react-chartjs-2": "^5.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hotkeys-hook": "^4.5.0",
"react-json-view-lite": "^1.2.1", "react-json-view-lite": "^1.2.1",
"react-office-viewer": "^1.0.4", "react-office-viewer": "^1.0.4",
"react-router-dom": "^6.6.1", "react-router-dom": "^6.6.1",
@ -11407,6 +11408,15 @@
"react": "^18.2.0" "react": "^18.2.0"
} }
}, },
"node_modules/react-hotkeys-hook": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz",
"integrity": "sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==",
"peerDependencies": {
"react": ">=16.8.1",
"react-dom": ">=16.8.1"
}
},
"node_modules/react-i18next": { "node_modules/react-i18next": {
"version": "11.18.6", "version": "11.18.6",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz",

43
cope2n-fe/package.json
View File

@ -27,27 +27,28 @@
}, },
"dependencies": { "dependencies": {
"@ant-design/colors": "^6.0.0", "@ant-design/colors": "^6.0.0",
"@ant-design/icons": "^4.8.0", "@ant-design/icons": "^4.8.0",
"@ant-design/plots": "^1.2.3", "@ant-design/plots": "^1.2.3",
"@ant-design/pro-layout": "^7.10.3", "@ant-design/pro-layout": "^7.10.3",
"@babel/core": "^7.13.10", "@babel/core": "^7.13.10",
"@cyntler/react-doc-viewer": "^1.14.1", "@cyntler/react-doc-viewer": "^1.14.1",
"@tanstack/react-query": "^4.20.4", "@tanstack/react-query": "^4.20.4",
"antd": "^5.4.0", "antd": "^5.4.0",
"axios": "^1.2.2", "axios": "^1.2.2",
"chart.js": "^4.4.1", "chart.js": "^4.4.1",
"history": "^5.3.0", "history": "^5.3.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"mousetrap": "^1.6.5", "mousetrap": "^1.6.5",
"process": "^0.11.10", "process": "^0.11.10",
"react": "^18.2.0", "react": "^18.2.0",
"react-chartjs-2": "^5.2.0", "react-chartjs-2": "^5.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-json-view-lite": "^1.2.1", "react-hotkeys-hook": "^4.5.0",
"react-office-viewer": "^1.0.4", "react-json-view-lite": "^1.2.1",
"react-router-dom": "^6.6.1", "react-office-viewer": "^1.0.4",
"styled-components": "^5.3.6", "react-router-dom": "^6.6.1",
"uuid": "^9.0.0" "styled-components": "^5.3.6",
"uuid": "^9.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/plugin-syntax-jsx": "^7.12.13", "@babel/plugin-syntax-jsx": "^7.12.13",

209
cope2n-fe/src/pages/reviews/index.tsx
View File

@ -9,12 +9,14 @@ import {
ArrowRightOutlined, ArrowRightOutlined,
FullscreenOutlined, FullscreenOutlined,
FullscreenExitOutlined, FullscreenExitOutlined,
ClockCircleFilled,
} from '@ant-design/icons'; } from '@ant-design/icons';
import FileViewer from '@cyntler/react-doc-viewer'; import FileViewer from '@cyntler/react-doc-viewer';
import styled from 'styled-components'; import styled from 'styled-components';
const { Sider, Content } = Layout; const { Sider, Content } = Layout;
import { baseURL } from "request/api"; import { baseURL } from "request/api";
import moment from 'moment'; import moment from 'moment';
import { useHotkeys } from "react-hotkeys-hook";
const siderStyle: React.CSSProperties = { const siderStyle: React.CSSProperties = {
@ -138,15 +140,6 @@ const defaultColumns = [
key: 'key', key: 'key',
width: 200, width: 200,
}, },
// {
// title: 'Accuracy',
// dataIndex: 'acc',
// key: 'acc',
// render: (text, record) => {
// return <div>100%</div>;
// },
// width: 150,
// },
{ {
title: 'Predicted', title: 'Predicted',
dataIndex: 'predicted', dataIndex: 'predicted',
@ -166,7 +159,7 @@ const defaultColumns = [
]; ];
const FileCard = ({ file, isSelected, onClick }) => { const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
const fileName = file["File Name"]; const fileName = file["File Name"];
return ( return (
@ -179,6 +172,7 @@ const FileCard = ({ file, isSelected, onClick }) => {
marginTop: '2px', marginTop: '2px',
position: 'relative', position: 'relative',
height: '100px', height: '100px',
overflow: 'hidden',
}} onClick={onClick}> }} onClick={onClick}>
<div> <div>
<span style={{ <span style={{
@ -209,7 +203,11 @@ const FileCard = ({ file, isSelected, onClick }) => {
}}> }}>
<Button style={{ <Button style={{
margin: '4px 2px', margin: '4px 2px',
}}> }}
onClick={() => {
setIsReasonModalOpen(true);
}}
>
Review Review
</Button> </Button>
<Button style={{ <Button style={{
@ -227,8 +225,8 @@ const FileCard = ({ file, isSelected, onClick }) => {
}; };
const fetchAllRequests = async (filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, page = 1, page_size = 20) => { const fetchAllRequests = async (filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, page = 1, page_size = 20) => {
const startDate = (filterDateRange && filterDateRange[0]) ? filterDateRange[0].format('YYYY-MM-DD') : ''; const startDate = (filterDateRange && filterDateRange[0]) ? filterDateRange[0] : '';
const endDate = (filterDateRange && filterDateRange[1]) ? filterDateRange[1].format('YYYY-MM-DD') : ''; const endDate = (filterDateRange && filterDateRange[1]) ? filterDateRange[1] : '';
let filterStr = ""; let filterStr = "";
filterStr += `page=${page}&page_size=${page_size}&`; filterStr += `page=${page}&page_size=${page_size}&`;
if (filterSubsidiaries) { if (filterSubsidiaries) {
@ -238,7 +236,7 @@ const fetchAllRequests = async (filterDateRange, filterSubsidiaries, filterRevie
filterStr += `is_reviewed=${filterReviewState}&`; filterStr += `is_reviewed=${filterReviewState}&`;
} }
if (filterIncludeTests) { if (filterIncludeTests) {
filterStr += `includes_tests=${filterIncludeTests}&`; filterStr += `includes_test=${filterIncludeTests}&`;
} }
if (startDate && endDate) { if (startDate && endDate) {
filterStr += `start_date=${startDate}&end_date=${endDate}&`; filterStr += `start_date=${startDate}&end_date=${endDate}&`;
@ -272,13 +270,14 @@ const ReviewPage = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [isReasonModalOpen, setIsReasonModalOpen] = useState(false);
const [selectedFileId, setSelectedFileId] = useState(0); const [selectedFileId, setSelectedFileId] = useState(0);
const [selectedFileData, setSelectedFileData] = useState(null); const [selectedFileData, setSelectedFileData] = useState(null);
const [selectedFileName, setSelectedFileName] = useState(null);
// Default date range: 1 month ago to today // Default date range: 1 month ago to today
const [filterDateRange, setFilterDateRange] = useState([ const [filterDateRange, setFilterDateRange] = useState([
moment().subtract(1, 'month'), "", ""
moment(),
]); ]);
const [filterSubsidiaries, setFilterSubsidiaries] = useState('ALL'); const [filterSubsidiaries, setFilterSubsidiaries] = useState('ALL');
@ -288,17 +287,36 @@ const ReviewPage = () => {
const [currentRequest, setCurrentRequest] = useState(null); const [currentRequest, setCurrentRequest] = useState(null);
const [currentRequestIndex, setCurrentRequestIndex] = useState(1); const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
const [hasNextRequest, setHasNextRequest] = useState(true); const [hasNextRequest, setHasNextRequest] = useState(true);
const [totalPages, setTotalPages] = useState(0); const [totalRequests, setTotalPages] = useState(0);
const [dataSource, setDataSource] = useState([]); const [dataSource, setDataSource] = useState([]);
const [pageIndexToGoto, setPageIndexToGoto] = useState(1); 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) => { const loadCurrentRequest = (requestID) => {
setLoading(true); setLoading(true);
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, requestID, 2).then((data) => { fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, requestID, 2).then((data) => {
setRequests(data?.subscription_requests); setRequests(data?.subscription_requests);
setHasNextRequest(data?.subscription_requests.length > 1); setHasNextRequest(data?.subscription_requests.length > 1);
setTotalPages(data?.page?.total_pages); setTotalPages(data?.page?.total_requests);
const requestData = fetchRequest(data?.subscription_requests[0].RequestID); const requestData = fetchRequest(data?.subscription_requests[0].RequestID);
requestData.then(async (data) => { requestData.then(async (data) => {
if (data) setCurrentRequest(data); if (data) setCurrentRequest(data);
@ -317,6 +335,7 @@ const ReviewPage = () => {
} }
setDataSource(tableRows); setDataSource(tableRows);
setLoading(false); setLoading(false);
setAndLoadSelectedFile(data, 0);
}).finally(() => { }).finally(() => {
setLoading(false); setLoading(false);
}); });
@ -326,6 +345,9 @@ const ReviewPage = () => {
}; };
const gotoNextRequest = () => { const gotoNextRequest = () => {
if (currentRequestIndex >= totalRequests) {
return;
}
const nextRequestIndex = currentRequestIndex + 1; const nextRequestIndex = currentRequestIndex + 1;
setCurrentRequestIndex(nextRequestIndex); setCurrentRequestIndex(nextRequestIndex);
loadCurrentRequest(nextRequestIndex); loadCurrentRequest(nextRequestIndex);
@ -340,32 +362,16 @@ const ReviewPage = () => {
loadCurrentRequest(previousRequestIndex); loadCurrentRequest(previousRequestIndex);
}; };
const setAndLoadSelectedFile = (index) => {
setCurrentRequestIndex(index);
const fileURL = currentRequest["Files"][index]["File URL"];
fetch(fileURL)
.then(response => response.blob())
.then(blob => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = () => {
setSelectedFileData(reader.result);
};
});
};
const reloadFilters = () => { const reloadFilters = () => {
setCurrentRequestIndex(1); setCurrentRequestIndex(1);
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => { fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
setTotalPages(data?.page?.total_pages); setTotalPages(data?.page?.total_requests);
setRequests(data?.subscription_requests); setRequests(data?.subscription_requests);
setHasNextRequest(data?.subscription_requests.length > 1); setHasNextRequest(data?.subscription_requests.length > 1);
const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID); const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
firstRequest.then(async (data) => { firstRequest.then(async (data) => {
if (data) setCurrentRequest(data); if (data) setCurrentRequest(data);
setTimeout(() => { setAndLoadSelectedFile(data, 0);
setAndLoadSelectedFile(0);
}, 300);
}); });
}); });
@ -374,13 +380,13 @@ const ReviewPage = () => {
useEffect(() => { useEffect(() => {
setCurrentRequestIndex(1); setCurrentRequestIndex(1);
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => { fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
setTotalPages(data?.page?.total_pages); setTotalPages(data?.page?.total_requests);
setRequests(data?.subscription_requests); setRequests(data?.subscription_requests);
setHasNextRequest(data?.subscription_requests.length > 1); setHasNextRequest(data?.subscription_requests.length > 1);
const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID); const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
firstRequest.then(async (data) => { firstRequest.then(async (data) => {
console.log(firstRequest)
if (data) setCurrentRequest(data); if (data) setCurrentRequest(data);
setAndLoadSelectedFile(data, 0);
}); });
}); });
}, []); }, []);
@ -400,10 +406,9 @@ const ReviewPage = () => {
revised: string; revised: string;
}; };
const updateRevisedData = async (newRevisedData:any) => { const updateRevisedData = async (newRevisedData: any) => {
const requestID = newRevisedData.request_id; const requestID = newRevisedData.request_id;
const token = localStorage.getItem('sbt-token') || ''; const token = localStorage.getItem('sbt-token') || '';
console.log(newRevisedData)
await fetch(`${baseURL}/ctel/request/${requestID}/`, { await fetch(`${baseURL}/ctel/request/${requestID}/`, {
method: 'POST', method: 'POST',
headers: { headers: {
@ -432,7 +437,13 @@ const ReviewPage = () => {
for (let i = 0; i < newData.length; i++) { for (let i = 0; i < newData.length; i++) {
newRevisedData[newData[i].key] = newData[i].revised; newRevisedData[newData[i].key] = newData[i].revised;
} }
updateRevisedData(newRevisedData); updateRevisedData(newRevisedData).then(() => {
// "[Is Reviewed]" => true
setCurrentRequest({
...currentRequest,
["Is Reviewed"]: true,
})
})
}; };
const columns = defaultColumns.map((col) => { const columns = defaultColumns.map((col) => {
@ -443,7 +454,7 @@ const ReviewPage = () => {
...col, ...col,
onCell: (record: DataType) => ({ onCell: (record: DataType) => ({
record, record,
editable: col.editable, editable: col.key != "request_id" && col.editable,
dataIndex: col.dataIndex, dataIndex: col.dataIndex,
title: col.title, title: col.title,
handleSave, handleSave,
@ -451,6 +462,12 @@ const ReviewPage = () => {
}; };
}); });
// use left/right keys to navigate
useHotkeys("left", gotoPreviousRequest);
useHotkeys("right", gotoNextRequest);
const fileExtension = selectedFileName ? selectedFileName.split('.').pop() : '';
return ( return (
<div style={fullscreen ? { <div style={fullscreen ? {
position: 'fixed', position: 'fixed',
@ -465,7 +482,7 @@ const ReviewPage = () => {
position: 'relative', position: 'relative',
}}> }}>
<div <div
style={{ height: '100%', position: 'absolute', top: 0, left: 0, width: '100%', background: "#00000033", zIndex: 1000, display: loading? 'block' : 'none' }} style={{ height: '100%', position: 'absolute', top: 0, left: 0, width: '100%', background: "#00000033", zIndex: 1000, display: loading ? 'block' : 'none' }}
> >
<Spin spinning={true} style={{ <Spin spinning={true} style={{
position: 'absolute', position: 'absolute',
@ -485,7 +502,7 @@ const ReviewPage = () => {
{fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />} {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
</Button> </Button>
&nbsp;&nbsp;&nbsp;<b>Request ID:</b> {currentRequest?.RequestID} {totalRequests ? <>&nbsp;&nbsp;&nbsp;<b>Request ID:</b> {currentRequest?.RequestID}</> : ""}
</div> </div>
<Layout style={{ <Layout style={{
overflow: 'auto', overflow: 'auto',
@ -505,7 +522,7 @@ const ReviewPage = () => {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
}}> }}>
<div {totalRequests > 0 && <div
style={{ style={{
width: "200px", width: "200px",
display: "flex", display: "flex",
@ -522,18 +539,18 @@ const ReviewPage = () => {
{currentRequest?.Files.map((file, index) => ( {currentRequest?.Files.map((file, index) => (
<FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={ <FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
() => { () => {
setAndLoadSelectedFile(index); setAndLoadSelectedFile(currentRequest, index);
} }
} /> } setIsReasonModalOpen={setIsReasonModalOpen} />
))} ))}
</div> </div>}
<div style={{ <div style={{
border: "1px solid #ccc", border: "1px solid #ccc",
flexGrow: 1, flexGrow: 1,
height: '100%', height: '100%',
}}> }}>
{selectedFileData && <FileViewer documents={[ {selectedFileData === "FAILED_TO_LOAD_FILE" ? <p style={{ color: "#333" }}>Failed to load file.</p> : ( fileExtension === "pdf" ? (<FileViewer documents={[
{uri: selectedFileData} { uri: selectedFileData }
]} config={{ ]} config={{
header: { header: {
disableHeader: true, disableHeader: true,
@ -542,13 +559,17 @@ const ReviewPage = () => {
}, },
csvDelimiter: ",", // "," as default, csvDelimiter: ",", // "," as default,
pdfVerticalScrollByDefault: true, // false as default pdfVerticalScrollByDefault: true, // false as default
}} />} }} />) : <div style={{
height: "100%",
width: "100%",
overflow: "auto",
}}><img width={"100%"} src={selectedFileData} alt="file" /></div>)}
</div> </div>
</Content> </Content>
<Sider width="400px" style={siderStyle}> <Sider width="400px" style={siderStyle}>
<Space.Compact style={{ width: '100%', marginBottom: 16 }}> <Space.Compact style={{ width: '100%', marginBottom: 16 }}>
<Input value={ <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}` `Sub: ${filterSubsidiaries}, Date:${filterDateRange[0] ? (filterDateRange[0] + " to " + filterDateRange[1]) : "All"}, Reviewed: ${filterReviewState}, Tests: ${filterIncludeTests}`
} readOnly /> } readOnly />
<Button type="primary" size="large" <Button type="primary" size="large"
onClick={() => { onClick={() => {
@ -567,7 +588,7 @@ const ReviewPage = () => {
}} }}
> >
<ArrowLeftOutlined /> <ArrowLeftOutlined />
Previous Previou
</Button> </Button>
<Button type="default" style={{ height: 38 }} <Button type="default" style={{ height: 38 }}
disabled={!hasNextRequest} disabled={!hasNextRequest}
@ -584,7 +605,7 @@ const ReviewPage = () => {
<Input size='middle' addonBefore="To" style={{ marginBottom: "4px", marginLeft: "4px", width: 180 }} defaultValue={currentRequestIndex} addonAfter={ <Input size='middle' addonBefore="To" style={{ marginBottom: "4px", marginLeft: "4px", width: 180 }} defaultValue={currentRequestIndex} addonAfter={
<Button type="default" <Button type="default"
onClick={() => { onClick={() => {
if (pageIndexToGoto > totalPages) { if (pageIndexToGoto > totalRequests) {
message.error("RequestID is out of range."); message.error("RequestID is out of range.");
return; return;
} }
@ -605,21 +626,21 @@ const ReviewPage = () => {
/> />
</div> </div>
</div> </div>
<h2 style={{ margin: "20px 0 10px 0" }}>{totalPages ? ("Request: " + currentRequestIndex + "/" + totalPages) : "No Request. Adjust your search criteria to see more results."}</h2> <h2 style={{ margin: "20px 0 10px 0" }}>{totalRequests ? ("Request: " + currentRequestIndex + "/" + totalRequests) : "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 : ""} /> {totalRequests > 0 && <div>
<Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly value={currentRequest?.RedemptionID ? currentRequest.RedemptionID : ""} /> <Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.RequestID : ""} />
<Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.created_at : ""} /> <Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly value={currentRequest?.RedemptionID ? currentRequest.RedemptionID : ""} />
<Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Client Request Time (ms)"] : ""} /> <Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.created_at : ""} />
<Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Server Processing Time (ms)"] : ""} /> <Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Client Request Time (ms)"] : ""} />
<div style={{ marginBottom: "8px", marginTop: "8px", display: "flex" }}> <Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Server Processing Time (ms)"] : ""} />
<Button type="primary">Mark Not-reviewed</Button> <div style={{ marginBottom: "8px", marginTop: "8px", display: "flex" }}>
{/* <Tag icon={<ClockCircleOutlined />} color="warning" style={{ padding: "4px 16px", marginLeft: 8 }}> {currentRequest && (currentRequest["Is Reviewed"] ? <Tag icon={<CheckCircleOutlined />} color="success" style={{ padding: "4px 16px" }}>
Not Reviewed Reviewed
</Tag> */} </Tag> : <Tag icon={<ClockCircleFilled />} color="warning" style={{ padding: "4px 16px" }}>
<Tag icon={<CheckCircleOutlined />} color="success" style={{ padding: "4px 16px", marginLeft: 8 }}> Not Reviewed
Reviewed </Tag>)}
</Tag> </div>
</div> </div>}
</Sider> </Sider>
</Layout> </Layout>
<Modal <Modal
@ -657,6 +678,9 @@ const ReviewPage = () => {
}} }}
> >
<DatePicker.RangePicker <DatePicker.RangePicker
onChange={(date, dateString) => {
setFilterDateRange(dateString);
}}
style={{ width: 200 }} style={{ width: 200 }}
/> />
</Form.Item> </Form.Item>
@ -738,7 +762,50 @@ const ReviewPage = () => {
</div> </div>
</Form> </Form>
</Modal> </Modal>
<div <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={{ style={{
height: '25%', height: '25%',
overflowY: 'auto', overflowY: 'auto',
@ -748,7 +815,7 @@ const ReviewPage = () => {
rowClassName={() => 'editable-row'} rowClassName={() => 'editable-row'}
bordered dataSource={dataSource} columns={columns} bordered dataSource={dataSource} columns={columns}
/> />
</div> </div>}
</div> </div>
); );
}; };