report

src/pages/orders/DailyOrderReport.tsx

@@ -0,0 +1,81 @@
+import { type FC, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DocumentDownload } from 'iconsax-react';
+import Table from '@/components/Table';
+import Filters from '@/components/Filters';
+import Button from '@/components/Button';
+import { useGetDailyOrderReport } from './hooks/useDailyOrderReportData';
+import { useDailyOrderReportFilters } from './hooks/useDailyOrderReportFilters';
+import { getDailyOrderReportTableColumns } from './components/DailyOrderReportTableColumns';
+import { useDailyOrderReportFiltersFields } from './components/DailyOrderReportFiltersFields';
+import { getDailyOrderReport } from './service/OrderService';
+import { exportDailyOrderReportExcel } from './utils/exportDailyOrderReportExcel';
+import type { DailyOrderReportItem } from './types/Types';
+import type { RowDataType } from '@/components/types/TableTypes';
+
+const DailyOrderReport: FC = () => {
+  const { t } = useTranslation('global');
+  const { filters, apiParams, handleFiltersChange } = useDailyOrderReportFilters();
+  const { data: reportData, isLoading } = useGetDailyOrderReport(apiParams);
+  const [isExporting, setIsExporting] = useState(false);
+
+  const columns = getDailyOrderReportTableColumns();
+  const filterFields = useDailyOrderReportFiltersFields();
+
+  const reportItems = useMemo(() => {
+    return (reportData?.data || []).map((item) => ({
+      ...item,
+      id: item.date,
+    }));
+  }, [reportData?.data]);
+
+  const handleExportExcel = async () => {
+    setIsExporting(true);
+    try {
+      const response = await getDailyOrderReport(apiParams);
+      const items = (response?.data || []).map((item) => ({
+        ...item,
+        id: item.date,
+      }));
+      exportDailyOrderReportExcel(items);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <div className='mt-5'>
+      <div className='flex justify-between items-center'>
+        <h1 className='text-lg font-light'>{t('submenu.orders_daily_report')}</h1>
+        <Button
+          className='w-fit px-4'
+          isloading={isExporting}
+          disabled={isLoading}
+          onClick={handleExportExcel}
+        >
+          <div className='flex items-center gap-2'>
+            <DocumentDownload size={18} color='#fff' />
+            <span>خروجی Excel</span>
+          </div>
+        </Button>
+      </div>
+
+      <div className='mt-8'>
+        <Filters
+          fields={filterFields}
+          onChange={handleFiltersChange}
+          initialValues={filters}
+          showClearButton
+        />
+      </div>
+
+      <Table<DailyOrderReportItem & RowDataType>
+        columns={columns}
+        data={reportItems as (DailyOrderReportItem & RowDataType)[]}
+        isloading={isLoading}
+      />
+    </div>
+  );
+};
+
+export default DailyOrderReport;