From c2afbb70ca845ac0b92bfd737cdc5226bed7bfc0 Mon Sep 17 00:00:00 2001 From: Viet Anh Nguyen Date: Mon, 5 Feb 2024 18:20:10 +0700 Subject: [PATCH] New API for dashboard --- .../report-detail/report-overview-table.tsx | 40 +++--------- cope2n-fe/src/models/report.ts | 5 ++ cope2n-fe/src/pages/dashboard/index.tsx | 62 ++++--------------- cope2n-fe/src/pages/reports/index.tsx | 10 ++- cope2n-fe/src/queries/report.ts | 4 +- cope2n-fe/src/request/report.ts | 10 +-- 6 files changed, 39 insertions(+), 92 deletions(-) diff --git a/cope2n-fe/src/components/report-detail/report-overview-table.tsx b/cope2n-fe/src/components/report-detail/report-overview-table.tsx index af544ed..3292d8e 100644 --- a/cope2n-fe/src/components/report-detail/report-overview-table.tsx +++ b/cope2n-fe/src/components/report-detail/report-overview-table.tsx @@ -30,15 +30,19 @@ const columns: TableColumnsType = [ 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 = [ ]; 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 = ({ - pagination, - setPagination, isLoading, data, }) => { @@ -270,20 +262,6 @@ const ReportOverViewTable: React.FC = ({ 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, - }} /> ); diff --git a/cope2n-fe/src/models/report.ts b/cope2n-fe/src/models/report.ts index 77b03ed..23db378 100644 --- a/cope2n-fe/src/models/report.ts +++ b/cope2n-fe/src/models/report.ts @@ -53,6 +53,11 @@ export type ReportListParams = { subsidiary?: string; }; +export type DashboardOverviewParams = { + duration?: string; + subsidiary?: string; +}; + export interface MakeReportResponse { report_id: string; } diff --git a/cope2n-fe/src/pages/dashboard/index.tsx b/cope2n-fe/src/pages/dashboard/index.tsx index 40e952c..35cf110 100644 --- a/cope2n-fe/src/pages/dashboard/index.tsx +++ b/cope2n-fe/src/pages/dashboard/index.tsx @@ -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('30d'); - const [subsidiary, setSubsidiary] = useState('all'); + const [subsidiary, setSubsidiary] = useState('ALL'); const [form] = Form.useForm(); - 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 = () => { diff --git a/cope2n-fe/src/pages/reports/index.tsx b/cope2n-fe/src/pages/reports/index.tsx index a4d8ec9..b2baa2c 100644 --- a/cope2n-fe/src/pages/reports/index.tsx +++ b/cope2n-fe/src/pages/reports/index.tsx @@ -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' }, ]} /> diff --git a/cope2n-fe/src/queries/report.ts b/cope2n-fe/src/queries/report.ts index 377aca1..fe3e58b 100644 --- a/cope2n-fe/src/queries/report.ts +++ b/cope2n-fe/src/queries/report.ts @@ -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), diff --git a/cope2n-fe/src/request/report.ts b/cope2n-fe/src/request/report.ts index f0a0cd7..c2a2d17 100644 --- a/cope2n-fe/src/request/report.ts +++ b/cope2n-fe/src/request/report.ts @@ -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('/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,