GitHub Enterprise
commit
18d9be2987
698
cope2n-fe/package-lock.json
generated
698
cope2n-fe/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -27,26 +27,27 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^6.0.0",
|
||||
"@ant-design/icons": "^4.8.0",
|
||||
"@ant-design/plots": "^1.2.3",
|
||||
"@ant-design/pro-layout": "^7.10.3",
|
||||
"@babel/core": "^7.13.10",
|
||||
"@tanstack/react-query": "^4.20.4",
|
||||
"antd": "^5.4.0",
|
||||
"axios": "^1.2.2",
|
||||
"chart.js": "^4.4.1",
|
||||
"history": "^5.3.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mousetrap": "^1.6.5",
|
||||
"process": "^0.11.10",
|
||||
"react": "^18.2.0",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-json-view-lite": "^1.2.1",
|
||||
"react-office-viewer": "^1.0.4",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"styled-components": "^5.3.6",
|
||||
"uuid": "^9.0.0"
|
||||
"@ant-design/icons": "^4.8.0",
|
||||
"@ant-design/plots": "^1.2.3",
|
||||
"@ant-design/pro-layout": "^7.10.3",
|
||||
"@babel/core": "^7.13.10",
|
||||
"@cyntler/react-doc-viewer": "^1.14.1",
|
||||
"@tanstack/react-query": "^4.20.4",
|
||||
"antd": "^5.4.0",
|
||||
"axios": "^1.2.2",
|
||||
"chart.js": "^4.4.1",
|
||||
"history": "^5.3.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mousetrap": "^1.6.5",
|
||||
"process": "^0.11.10",
|
||||
"react": "^18.2.0",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-json-view-lite": "^1.2.1",
|
||||
"react-office-viewer": "^1.0.4",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"styled-components": "^5.3.6",
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-syntax-jsx": "^7.12.13",
|
||||
|
||||
BIN
cope2n-fe/public/dummy.pdf
Normal file
BIN
cope2n-fe/public/dummy.pdf
Normal file
Binary file not shown.
@ -1,4 +1,4 @@
|
||||
import { AppstoreOutlined, BarChartOutlined, RotateRightOutlined } from '@ant-design/icons';
|
||||
import { AppstoreOutlined, BarChartOutlined, RotateRightOutlined, FileSearchOutlined } from '@ant-design/icons';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Menu, MenuProps } from 'antd';
|
||||
import React from 'react';
|
||||
@ -34,8 +34,8 @@ function LeftMenu() {
|
||||
|
||||
const generalSubItems = [
|
||||
getItem(t`Dashboard`, '/dashboard', <AppstoreOutlined />),
|
||||
// getItem(t`Reviews`, '/reviews', <FileSearchOutlined />),
|
||||
getItem(t`Reports`, '/reports', <BarChartOutlined />),
|
||||
// getItem(t`Review`, '/reviews', <FileSearchOutlined />),
|
||||
getItem(t`Inference`, '/inference', <RotateRightOutlined />),
|
||||
// getItem(t`Users`, '/users', <UsergroupAddOutlined />),
|
||||
];
|
||||
|
||||
@ -69,7 +69,8 @@ const columns: TableColumnsType<DataType> = [
|
||||
width: '130px',
|
||||
className: 'hide-border-right',
|
||||
render: (_, record) => {
|
||||
return <span>{record.snImeiTC + record.invoiceTC}</span>;
|
||||
const value = record.snImeiTC + record.invoiceTC;
|
||||
return <span>{value ? value : '-'}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -81,12 +82,20 @@ const columns: TableColumnsType<DataType> = [
|
||||
key: 'snImeiTC',
|
||||
width: '50px',
|
||||
className: 'show-border-left',
|
||||
render: (_, record) => {
|
||||
const value = record.snImeiTC;
|
||||
return <span>{value ? value : '-'}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Invoice',
|
||||
dataIndex: 'invoiceTC',
|
||||
key: 'invoiceTC',
|
||||
width: '50px',
|
||||
render: (_, record) => {
|
||||
const value = record.invoiceTC;
|
||||
return <span>{value ? value : '-'}</span>;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -1,5 +1,181 @@
|
||||
function Reviews() {
|
||||
return <div>Reviews</div>;
|
||||
}
|
||||
import { t } from '@lingui/macro';
|
||||
import { Button, message, Upload, Input, Table } from 'antd';
|
||||
import { SbtPageHeader } from 'components/page-header';
|
||||
import { useState } from 'react';
|
||||
import { Layout } from 'antd';
|
||||
import FileViewer from '@cyntler/react-doc-viewer';
|
||||
const { Sider, Content } = Layout;
|
||||
|
||||
export default Reviews;
|
||||
const siderStyle: React.CSSProperties = {
|
||||
backgroundColor: '#fafafa',
|
||||
padding: 10,
|
||||
width: 200,
|
||||
};
|
||||
|
||||
|
||||
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: '1',
|
||||
value: 'Mike',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
value: 'Mike',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
value: 'Mike',
|
||||
},
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Key',
|
||||
dataIndex: 'key',
|
||||
key: 'key',
|
||||
},
|
||||
{
|
||||
title: 'Predicted',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
},
|
||||
{
|
||||
title: 'Submitted',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
},
|
||||
{
|
||||
title: 'Revised',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const FileCard = ({ file, isSelected, onClick }) => {
|
||||
return (
|
||||
<div style={{
|
||||
border: '1px solid #ccc',
|
||||
width: '200px',
|
||||
backgroundColor: isSelected ? '#d4ecff' : '#fff',
|
||||
padding: '4px 8px',
|
||||
marginRight: '4px',
|
||||
marginTop: '4px',
|
||||
}} onClick={onClick}>
|
||||
<div>
|
||||
<span style={{
|
||||
fontSize: '12px',
|
||||
color: '#333',
|
||||
fontWeight: 'bold',
|
||||
padding: '4px 8px',
|
||||
}}>{file.type.toUpperCase()}</span>
|
||||
<span style={{
|
||||
fontSize: '12px',
|
||||
color: '#aaa',
|
||||
fontWeight: 'bold',
|
||||
padding: '4px 8px',
|
||||
}}>{file.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
const InferencePage = () => {
|
||||
const [selectedFileId, setSelectedFileId] = useState(0);
|
||||
const selectFileByIndex = (index) => {
|
||||
setSelectedFileId(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <SbtPageHeader
|
||||
title={t`Result Review`}
|
||||
/> */}
|
||||
<Layout style={{
|
||||
overflow: 'hidden',
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
minHeight: 'calc(100vh - 100px)',
|
||||
maxHeight: 'calc(100vh - 100px)',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
}}>
|
||||
<Content style={{
|
||||
textAlign: 'center',
|
||||
color: '#fff',
|
||||
backgroundColor: '#efefef',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
}}>
|
||||
<div style={{
|
||||
border: "1px solid #ccc",
|
||||
flexGrow: 1,
|
||||
height: '500px',
|
||||
}}>
|
||||
<FileViewer documents={
|
||||
[
|
||||
{ uri: "/dummy.pdf" }
|
||||
]
|
||||
} config={{
|
||||
header: {
|
||||
disableHeader: true,
|
||||
disableFileName: true,
|
||||
retainURLParams: true,
|
||||
},
|
||||
csvDelimiter: ",", // "," as default,
|
||||
pdfVerticalScrollByDefault: true, // false as default
|
||||
}} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
height: "100px",
|
||||
flexGrow: 0,
|
||||
}}>
|
||||
{fileList.map((file, index) => (
|
||||
<FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
|
||||
() => {
|
||||
setSelectedFileId(index);
|
||||
}
|
||||
} />
|
||||
))}
|
||||
</div>
|
||||
</Content>
|
||||
<Sider width="400px" style={siderStyle}>
|
||||
<h2 style={{ margin: "0 0 10px 0" }}>Overview</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" size='middle'>Confirm result</Button>
|
||||
</div>
|
||||
<Table dataSource={dataSource} columns={columns} />
|
||||
</Sider>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InferencePage;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user