New API for dashboard
This commit is contained in:
parent
a064448fc4
commit
c2afbb70ca
@ -30,15 +30,19 @@ const columns: TableColumnsType<DataType> = [
|
|||||||
width: '100px',
|
width: '100px',
|
||||||
render: (_, record) => {
|
render: (_, record) => {
|
||||||
if (record.subSidiaries === '+') return '';
|
if (record.subSidiaries === '+') return '';
|
||||||
return record.subSidiaries;
|
return String(record.subSidiaries).toUpperCase();
|
||||||
},
|
},
|
||||||
filters: [
|
filters: [
|
||||||
{ text: 'all', value: 'all' },
|
{ text: 'ALL', value: 'ALL' },
|
||||||
{ text: 'sesp', value: 'sesp' },
|
{ text: 'SEAU', value: 'SEAU' },
|
||||||
{ text: 'seau', value: 'seau' },
|
{ text: 'SESP', value: 'SESP' },
|
||||||
|
{ text: 'SME', value: 'SME' },
|
||||||
|
{ text: 'SEPCO', value: 'SEPCO' },
|
||||||
|
{ text: 'TSE', value: 'TSE' },
|
||||||
|
{ text: 'SEIN', value: 'SEIN' },
|
||||||
],
|
],
|
||||||
filterMode: 'menu',
|
filterMode: 'menu',
|
||||||
onFilter: (value: string, record) => record.subSidiaries.includes(value),
|
onFilter: (value: string, record) => record.subSidiaries.includes(String(value).toUpperCase()),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'OCR extraction date',
|
title: 'OCR extraction date',
|
||||||
@ -216,23 +220,11 @@ const columns: TableColumnsType<DataType> = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
interface ReportOverViewTableProps {
|
interface ReportOverViewTableProps {
|
||||||
pagination: {
|
|
||||||
page: number;
|
|
||||||
page_size: number;
|
|
||||||
};
|
|
||||||
setPagination: React.Dispatch<
|
|
||||||
React.SetStateAction<{
|
|
||||||
page: number;
|
|
||||||
page_size: number;
|
|
||||||
}>
|
|
||||||
>;
|
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
data: any;
|
data: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
|
const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
|
||||||
pagination,
|
|
||||||
setPagination,
|
|
||||||
isLoading,
|
isLoading,
|
||||||
data,
|
data,
|
||||||
}) => {
|
}) => {
|
||||||
@ -270,20 +262,6 @@ const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
|
|||||||
bordered
|
bordered
|
||||||
size='small'
|
size='small'
|
||||||
scroll={{ x: 2000 }}
|
scroll={{ x: 2000 }}
|
||||||
pagination={{
|
|
||||||
current: pagination.page,
|
|
||||||
pageSize: 10,
|
|
||||||
total: dataSubsRows?.length,
|
|
||||||
// showTotal: (total, range) =>
|
|
||||||
// `${range[0]}-${range[1]} of ${total} items`,
|
|
||||||
onChange: (page, pageSize) => {
|
|
||||||
setPagination({
|
|
||||||
page,
|
|
||||||
page_size: pageSize || 10,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
showSizeChanger: false,
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -53,6 +53,11 @@ export type ReportListParams = {
|
|||||||
subsidiary?: string;
|
subsidiary?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type DashboardOverviewParams = {
|
||||||
|
duration?: string;
|
||||||
|
subsidiary?: string;
|
||||||
|
};
|
||||||
|
|
||||||
export interface MakeReportResponse {
|
export interface MakeReportResponse {
|
||||||
report_id: string;
|
report_id: string;
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import { t } from '@lingui/macro';
|
import { t } from '@lingui/macro';
|
||||||
import { Button, DatePicker, Form, Select } from 'antd';
|
import { Button, Form, Select } from 'antd';
|
||||||
import { SbtPageHeader } from 'components/page-header';
|
import { SbtPageHeader } from 'components/page-header';
|
||||||
import { ReportOverViewTable } from 'components/report-detail';
|
import { ReportOverViewTable } from 'components/report-detail';
|
||||||
import { Dayjs } from 'dayjs';
|
|
||||||
import { useOverViewReport } from 'queries/report';
|
import { useOverViewReport } from 'queries/report';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
@ -11,55 +10,18 @@ import { downloadDashboardReport } from 'request/report';
|
|||||||
|
|
||||||
export interface ReportFormValues {
|
export interface ReportFormValues {
|
||||||
duration: string;
|
duration: string;
|
||||||
dateRange: [Dayjs, Dayjs];
|
|
||||||
subsidiary: string;
|
subsidiary: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [duration, setDuration] = useState<string>('30d');
|
const [duration, setDuration] = useState<string>('30d');
|
||||||
const [subsidiary, setSubsidiary] = useState<string>('all');
|
const [subsidiary, setSubsidiary] = useState<string>('ALL');
|
||||||
const [form] = Form.useForm<ReportFormValues>();
|
const [form] = Form.useForm<ReportFormValues>();
|
||||||
const [pagination, setPagination] = useState({
|
|
||||||
page: 1,
|
|
||||||
page_size: 10,
|
|
||||||
});
|
|
||||||
const [fromData, setFormData] = useState<{
|
|
||||||
start_date: string;
|
|
||||||
end_date: string;
|
|
||||||
subsidiary: string;
|
|
||||||
}>({
|
|
||||||
start_date: '',
|
|
||||||
end_date: '',
|
|
||||||
subsidiary: '',
|
|
||||||
});
|
|
||||||
const { isLoading, data } = useOverViewReport({
|
const { isLoading, data } = useOverViewReport({
|
||||||
start_date: fromData.start_date,
|
duration: duration,
|
||||||
end_date: fromData.end_date,
|
subsidiary: subsidiary,
|
||||||
subsidiary: fromData.subsidiary,
|
|
||||||
page: pagination.page,
|
|
||||||
page_size: 30,
|
|
||||||
});
|
});
|
||||||
const get30dDateRangeDayJS = () => {
|
|
||||||
const prev = new Date();
|
|
||||||
prev.setDate(prev.getDate() - 30);
|
|
||||||
const today = new Date();
|
|
||||||
return [prev, today];
|
|
||||||
};
|
|
||||||
const formatDate = (date: Date) => {
|
|
||||||
// YYYY-MM-DDTHH:mm:ssZ
|
|
||||||
const formated = date.toISOString().split('.')[0] + '+0000';
|
|
||||||
console.log('formated >>>', formated);
|
|
||||||
return formated;
|
|
||||||
}
|
|
||||||
const changeView = () => {
|
|
||||||
const dateRange = get30dDateRangeDayJS();
|
|
||||||
setFormData({
|
|
||||||
start_date: formatDate(dateRange[0]),
|
|
||||||
end_date: formatDate(dateRange[1]),
|
|
||||||
subsidiary: subsidiary,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDownloadReport = async () => {
|
const handleDownloadReport = async () => {
|
||||||
console.log('duration >>>', duration);
|
console.log('duration >>>', duration);
|
||||||
@ -112,6 +74,7 @@ const Dashboard = () => {
|
|||||||
style={{ width: 200 }}
|
style={{ width: 200 }}
|
||||||
options={[
|
options={[
|
||||||
{ value: '30d', label: 'Last 30 days' },
|
{ value: '30d', label: 'Last 30 days' },
|
||||||
|
{ value: '7d', label: 'Last 7 days' },
|
||||||
]}
|
]}
|
||||||
value={duration}
|
value={duration}
|
||||||
onChange={(value) => {
|
onChange={(value) => {
|
||||||
@ -129,11 +92,15 @@ const Dashboard = () => {
|
|||||||
placeholder='Select a subsidiary'
|
placeholder='Select a subsidiary'
|
||||||
style={{ width: 200 }}
|
style={{ width: 200 }}
|
||||||
options={[
|
options={[
|
||||||
{ value: 'all', label: 'ALL' },
|
{ value: 'ALL', label: 'ALL' },
|
||||||
{ value: 'sesp', label: 'SESP' },
|
{ value: 'SEAU', label: 'SEAU' },
|
||||||
{ value: 'seau', label: 'SEAU' },
|
{ value: 'SESP', label: 'SESP' },
|
||||||
|
{ value: 'SME', label: 'SME' },
|
||||||
|
{ value: 'SEPCO', label: 'SEPCO' },
|
||||||
|
{ value: 'TSE', label: 'TSE' },
|
||||||
|
{ value: 'SEIN', label: 'SEIN' },
|
||||||
]}
|
]}
|
||||||
defaultValue={'all'}
|
defaultValue='ALL'
|
||||||
value={subsidiary}
|
value={subsidiary}
|
||||||
onChange={(value) => {
|
onChange={(value) => {
|
||||||
setSubsidiary(value);
|
setSubsidiary(value);
|
||||||
@ -142,15 +109,12 @@ const Dashboard = () => {
|
|||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item>
|
<Form.Item>
|
||||||
<Button type='primary' style={{ height: 38 }}
|
<Button type='primary' style={{ height: 38 }}
|
||||||
onClick={changeView}
|
|
||||||
>
|
>
|
||||||
View
|
View
|
||||||
</Button>
|
</Button>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
<ReportOverViewTable
|
<ReportOverViewTable
|
||||||
pagination={pagination}
|
|
||||||
setPagination={setPagination}
|
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
data={data}
|
data={data}
|
||||||
/>
|
/>
|
||||||
|
@ -105,9 +105,13 @@ const ReportsPage = () => {
|
|||||||
placeholder='Select a subsidiary'
|
placeholder='Select a subsidiary'
|
||||||
style={{ width: 200 }}
|
style={{ width: 200 }}
|
||||||
options={[
|
options={[
|
||||||
{ value: 'all', label: 'ALL' },
|
{ value: 'ALL', label: 'ALL' },
|
||||||
{ value: 'sesp', label: 'SESP' },
|
{ value: 'SEAU', label: 'SEAU' },
|
||||||
{ 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>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
import { ReportListParams } from 'models';
|
import { ReportListParams, DashboardOverviewParams } from 'models';
|
||||||
import {
|
import {
|
||||||
getOverViewReport,
|
getOverViewReport,
|
||||||
getReportDetailList,
|
getReportDetailList,
|
||||||
@ -42,7 +42,7 @@ export function useReportList(params?: ReportListParams, options?: any) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useOverViewReport(params?: ReportListParams, options?: any) {
|
export function useOverViewReport(params?: DashboardOverviewParams, options?: any) {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey: ['overview-report', params],
|
queryKey: ['overview-report', params],
|
||||||
queryFn: () => getOverViewReport(params),
|
queryFn: () => getOverViewReport(params),
|
||||||
|
@ -7,6 +7,7 @@ import {
|
|||||||
ReportDetailListParams,
|
ReportDetailListParams,
|
||||||
ReportListParams,
|
ReportListParams,
|
||||||
ReportListType,
|
ReportListType,
|
||||||
|
DashboardOverviewParams,
|
||||||
} from 'models';
|
} from 'models';
|
||||||
import { API } from './api';
|
import { API } from './api';
|
||||||
|
|
||||||
@ -68,14 +69,11 @@ export async function getReportList(params?: ReportListParams) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getOverViewReport(params?: ReportListParams) {
|
export async function getOverViewReport(params?: DashboardOverviewParams) {
|
||||||
try {
|
try {
|
||||||
const response = await API.get<OverViewDataResponse>('/ctel/overview/', {
|
const response = await API.get<OverViewDataResponse>('/ctel/overview/', {
|
||||||
params: {
|
params: {
|
||||||
page: params?.page,
|
duration: params?.duration,
|
||||||
page_size: params?.page_size,
|
|
||||||
start_date: params?.start_date,
|
|
||||||
end_date: params?.end_date,
|
|
||||||
subsidiary: params?.subsidiary,
|
subsidiary: params?.subsidiary,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -104,8 +102,6 @@ export async function downloadReport(report_id: string) {
|
|||||||
const file = new Blob([response.data], {
|
const file = new Blob([response.data], {
|
||||||
type: 'application/vnd.ms-excel',
|
type: 'application/vnd.ms-excel',
|
||||||
});
|
});
|
||||||
// const fileURL = URL.createObjectURL(file);
|
|
||||||
// window.open(fileURL);
|
|
||||||
return {
|
return {
|
||||||
file: file,
|
file: file,
|
||||||
filename: filename,
|
filename: filename,
|
||||||
|
Loading…
Reference in New Issue
Block a user