New API for dashboard

This commit is contained in:
Viet Anh Nguyen 2024-02-05 18:20:10 +07:00
parent a064448fc4
commit c2afbb70ca
6 changed files with 39 additions and 92 deletions
cope2n-fe/src
components/report-detail
models
pages
dashboard
reports
queries
request

View File

@ -30,15 +30,19 @@ const columns: TableColumnsType<DataType> = [
width: '100px',
render: (_, record) => {
if (record.subSidiaries === '+') return '';
return record.subSidiaries;
return String(record.subSidiaries).toUpperCase();
},
filters: [
{ text: 'all', value: 'all' },
{ text: 'sesp', value: 'sesp' },
{ text: 'seau', value: 'seau' },
{ text: 'ALL', value: 'ALL' },
{ 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',
onFilter: (value: string, record) => record.subSidiaries.includes(value),
onFilter: (value: string, record) => record.subSidiaries.includes(String(value).toUpperCase()),
},
{
title: 'OCR extraction date',
@ -216,23 +220,11 @@ const columns: TableColumnsType<DataType> = [
];
interface ReportOverViewTableProps {
pagination: {
page: number;
page_size: number;
};
setPagination: React.Dispatch<
React.SetStateAction<{
page: number;
page_size: number;
}>
>;
isLoading: boolean;
data: any;
}
const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
pagination,
setPagination,
isLoading,
data,
}) => {
@ -270,20 +262,6 @@ const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
bordered
size='small'
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>
);

View File

@ -53,6 +53,11 @@ export type ReportListParams = {
subsidiary?: string;
};
export type DashboardOverviewParams = {
duration?: string;
subsidiary?: string;
};
export interface MakeReportResponse {
report_id: string;
}

View File

@ -1,8 +1,7 @@
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 { ReportOverViewTable } from 'components/report-detail';
import { Dayjs } from 'dayjs';
import { useOverViewReport } from 'queries/report';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
@ -11,55 +10,18 @@ import { downloadDashboardReport } from 'request/report';
export interface ReportFormValues {
duration: string;
dateRange: [Dayjs, Dayjs];
subsidiary: string;
}
const Dashboard = () => {
const navigate = useNavigate();
const [duration, setDuration] = useState<string>('30d');
const [subsidiary, setSubsidiary] = useState<string>('all');
const [subsidiary, setSubsidiary] = useState<string>('ALL');
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({
start_date: fromData.start_date,
end_date: fromData.end_date,
subsidiary: fromData.subsidiary,
page: pagination.page,
page_size: 30,
duration: duration,
subsidiary: subsidiary,
});
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 () => {
console.log('duration >>>', duration);
@ -112,6 +74,7 @@ const Dashboard = () => {
style={{ width: 200 }}
options={[
{ value: '30d', label: 'Last 30 days' },
{ value: '7d', label: 'Last 7 days' },
]}
value={duration}
onChange={(value) => {
@ -129,11 +92,15 @@ const Dashboard = () => {
placeholder='Select a subsidiary'
style={{ width: 200 }}
options={[
{ value: 'all', label: 'ALL' },
{ value: 'sesp', label: 'SESP' },
{ value: 'seau', label: 'SEAU' },
{ 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' },
]}
defaultValue={'all'}
defaultValue='ALL'
value={subsidiary}
onChange={(value) => {
setSubsidiary(value);
@ -142,15 +109,12 @@ const Dashboard = () => {
</Form.Item>
<Form.Item>
<Button type='primary' style={{ height: 38 }}
onClick={changeView}
>
View
</Button>
</Form.Item>
</Form>
<ReportOverViewTable
pagination={pagination}
setPagination={setPagination}
isLoading={isLoading}
data={data}
/>

View File

@ -105,9 +105,13 @@ const ReportsPage = () => {
placeholder='Select a subsidiary'
style={{ width: 200 }}
options={[
{ value: 'all', label: 'ALL' },
{ value: 'sesp', label: 'SESP' },
{ value: 'seau', label: 'SEAU' },
{ 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>

View File

@ -1,5 +1,5 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { ReportListParams } from 'models';
import { ReportListParams, DashboardOverviewParams } from 'models';
import {
getOverViewReport,
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({
queryKey: ['overview-report', params],
queryFn: () => getOverViewReport(params),

View File

@ -7,6 +7,7 @@ import {
ReportDetailListParams,
ReportListParams,
ReportListType,
DashboardOverviewParams,
} from 'models';
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 {
const response = await API.get<OverViewDataResponse>('/ctel/overview/', {
params: {
page: params?.page,
page_size: params?.page_size,
start_date: params?.start_date,
end_date: params?.end_date,
duration: params?.duration,
subsidiary: params?.subsidiary,
},
});
@ -104,8 +102,6 @@ export async function downloadReport(report_id: string) {
const file = new Blob([response.data], {
type: 'application/vnd.ms-excel',
});
// const fileURL = URL.createObjectURL(file);
// window.open(fileURL);
return {
file: file,
filename: filename,