excel export

src/pages/orders/FoodOrderReport.tsx

@@ -1,11 +1,15 @@
-import { type FC, useMemo } from 'react';
+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 { useGetFoodOrderReport } from './hooks/useFoodOrderReportData';
 import { useFoodOrderReportFilters } from './hooks/useFoodOrderReportFilters';
 import { getFoodOrderReportTableColumns } from './components/FoodOrderReportTableColumns';
 import { useFoodOrderReportFiltersFields } from './components/FoodOrderReportFiltersFields';
+import { getFoodOrderReport } from './service/OrderService';
+import { exportFoodOrderReportExcel } from './utils/exportFoodOrderReportExcel';
 import type { FoodOrderReportItem } from './types/Types';
 import type { RowDataType } from '@/components/types/TableTypes';
 
@@ -13,6 +17,7 @@ const FoodOrderReport: FC = () => {
   const { t } = useTranslation('global');
   const { filters, apiParams, handleFiltersChange } = useFoodOrderReportFilters();
   const { data: reportData, isLoading } = useGetFoodOrderReport(apiParams);
+  const [isExporting, setIsExporting] = useState(false);
 
   const columns = getFoodOrderReportTableColumns();
   const filterFields = useFoodOrderReportFiltersFields();
@@ -24,10 +29,35 @@ const FoodOrderReport: FC = () => {
     }));
   }, [reportData?.data]);
 
+  const handleExportExcel = async () => {
+    setIsExporting(true);
+    try {
+      const response = await getFoodOrderReport(apiParams);
+      const items = (response?.data || []).map((item) => ({
+        ...item,
+        id: item.food.id,
+      }));
+      exportFoodOrderReportExcel(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_food_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'>

src/pages/orders/utils/exportFoodOrderReportExcel.ts

@@ -0,0 +1,18 @@
+import * as XLSX from 'xlsx';
+import type { FoodOrderReportItem } from '../types/Types';
+
+export const exportFoodOrderReportExcel = (items: FoodOrderReportItem[]) => {
+  const rows = items.map((item) => ({
+    غذا: item.food.title || '-',
+    تعداد: item.count,
+    قیمت: item.price,
+    'جمع کل': item.totalPrice,
+  }));
+
+  const worksheet = XLSX.utils.json_to_sheet(rows);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'گزارش فروش غذا');
+
+  const fileName = `food-order-report-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.xlsx`;
+  XLSX.writeFile(workbook, fileName);
+};