52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { type FC, useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import Table from '@/components/Table';
|
|
import Filters from '@/components/Filters';
|
|
import { useGetFoodOrderReport } from './hooks/useFoodOrderReportData';
|
|
import { useFoodOrderReportFilters } from './hooks/useFoodOrderReportFilters';
|
|
import { getFoodOrderReportTableColumns } from './components/FoodOrderReportTableColumns';
|
|
import { useFoodOrderReportFiltersFields } from './components/FoodOrderReportFiltersFields';
|
|
import type { FoodOrderReportItem } from './types/Types';
|
|
import type { RowDataType } from '@/components/types/TableTypes';
|
|
|
|
const FoodOrderReport: FC = () => {
|
|
const { t } = useTranslation('global');
|
|
const { filters, apiParams, handleFiltersChange } = useFoodOrderReportFilters();
|
|
const { data: reportData, isLoading } = useGetFoodOrderReport(apiParams);
|
|
|
|
const columns = getFoodOrderReportTableColumns();
|
|
const filterFields = useFoodOrderReportFiltersFields();
|
|
|
|
const reportItems = useMemo(() => {
|
|
return (reportData?.data || []).map((item) => ({
|
|
...item,
|
|
id: item.food.id,
|
|
}));
|
|
}, [reportData?.data]);
|
|
|
|
return (
|
|
<div className='mt-5'>
|
|
<div className='flex justify-between items-center'>
|
|
<h1 className='text-lg font-light'>{t('submenu.orders_food_report')}</h1>
|
|
</div>
|
|
|
|
<div className='mt-8'>
|
|
<Filters
|
|
fields={filterFields}
|
|
onChange={handleFiltersChange}
|
|
initialValues={filters}
|
|
showClearButton
|
|
/>
|
|
</div>
|
|
|
|
<Table<FoodOrderReportItem & RowDataType>
|
|
columns={columns}
|
|
data={reportItems as (FoodOrderReportItem & RowDataType)[]}
|
|
isloading={isLoading}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FoodOrderReport;
|