feat(FE): adding export xlsx for report expense, change report data fetching, adding progress bar

src/components/pages/report/expense/pdf/ReportExpenseExport.tsx

@@ -1,88 +1,64 @@
-import Button from '@/components/Button';
 import { ReportExpense } from '@/types/api/report/report-expense';
-import { Icon } from '@iconify/react';
 import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
-import { useMemo, useState } from 'react';
 import { formatCurrency, formatDate } from '@/lib/helper';
 import pdfStyles from '@/components/pages/report/expense/pdf/styles/ReportExpenseStyles';
 import toast from 'react-hot-toast';
-import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
 
-interface ReportExpenseExportProps {
-  data: ReportExpense[];
-  className?: string;
+export interface PDFParams {
+  location_name?: string;
+  supplier_name?: string;
+  kandang_name?: string;
+  nonstock_name?: string;
+  category?: string;
+  realization_date?: string;
+  search?: string;
 }
 
-const ReportExpenseExport = ({ data }: ReportExpenseExportProps) => {
-  const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
-
-  const handleDownloadPDF = async () => {
-    if (!data || data.length === 0) {
-      toast.error('No report expense data available');
-      return;
-    }
-    setIsGeneratingPDF(true);
-    try {
-      const blob = await pdf(<PDFDocument data={data} />).toBlob();
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = `Laporan-BOP-${formatDate(new Date(), 'DD-MMM-YYYY')}.pdf`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    } catch (error) {
-      toast.error('Failed to generate PDF. Please try again.');
-      return error;
-    } finally {
-      setIsGeneratingPDF(false);
-    }
-  };
-
-  return (
-    <Button
-      color='error'
-      className='min-w-32'
-      onClick={handleDownloadPDF}
-      isLoading={isGeneratingPDF}
-    >
-      <Icon icon='mdi:file-pdf-box' width={20} height={20} />
-      Export PDF
-    </Button>
-  );
+const getStatusStyle = (action?: string) => {
+  switch (action) {
+    case 'APPROVED':
+      return { backgroundColor: '#dcfce7' };
+    case 'REJECTED':
+      return { backgroundColor: '#fee2e2' };
+    default:
+      return { backgroundColor: '#fef3c7' };
+  }
 };
 
-export default ReportExpenseExport;
-
-const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
+const PDFDocument = ({
+  data,
+  params,
+}: {
+  data: ReportExpense[];
+  params: PDFParams;
+}) => {
   // Group data by supplier
-  const groupedBySupplier = useMemo(() => {
+  const groupedBySupplier = (() => {
     const groups: Record<string, ReportExpense[]> = {};
     data.forEach((item) => {
-      const supplierName = item.supplier.name;
+      const supplierName = item.supplier?.name || 'Unknown Supplier';
       if (!groups[supplierName]) {
         groups[supplierName] = [];
       }
       groups[supplierName].push(item);
     });
     return groups;
-  }, [data]);
+  })();
 
   // Calculate grand totals
-  const grandTotals = useMemo(() => {
-    return data.reduce(
-      (acc, item) => {
-        const pengajuanTotal = item.pengajuan.qty * item.pengajuan.price;
-        const realisasiTotal = item.realisasi.qty * item.realisasi.price;
-        return {
-          pengajuan: acc.pengajuan + pengajuanTotal,
-          realisasi: acc.realisasi + realisasiTotal,
-        };
-      },
-      { pengajuan: 0, realisasi: 0 }
-    );
-  }, [data]);
+  const grandTotals = data.reduce(
+    (acc, item) => {
+      const pengajuanTotal =
+        (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0);
+      const realisasiTotal =
+        (item.realisasi?.qty || 0) * (item.realisasi?.price || 0);
+      return {
+        pengajuan: acc.pengajuan + pengajuanTotal,
+        realisasi: acc.realisasi + realisasiTotal,
+      };
+    },
+    { pengajuan: 0, realisasi: 0 }
+  );
 
   return (
     <Document>
@@ -111,15 +87,35 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
           </View>
         </View>
 
+        {/* Filters Info if any */}
+        {(params.location_name ||
+          params.supplier_name ||
+          params.realization_date) && (
+          <View style={{ marginBottom: 10, fontSize: 8 }}>
+            {params.location_name && (
+              <Text>Lokasi: {params.location_name}</Text>
+            )}
+            {params.supplier_name && (
+              <Text>Supplier: {params.supplier_name}</Text>
+            )}
+            {params.realization_date && (
+              <Text>
+                Tanggal Realisasi:{' '}
+                {formatDate(params.realization_date, 'DD MMM YYYY')}
+              </Text>
+            )}
+          </View>
+        )}
+
         {/* Grouped Tables by Supplier */}
         {Object.entries(groupedBySupplier).map(
           ([supplierName, items], groupIndex) => {
             const supplierTotals = items.reduce(
               (acc, item) => {
                 const pengajuanTotal =
-                  item.pengajuan.qty * item.pengajuan.price;
+                  (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0);
                 const realisasiTotal =
-                  item.realisasi.qty * item.realisasi.price;
+                  (item.realisasi?.qty || 0) * (item.realisasi?.price || 0);
                 return {
                   pengajuan: acc.pengajuan + pengajuanTotal,
                   realisasi: acc.realisasi + realisasiTotal,
@@ -210,7 +206,7 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
                       <Text>Kandang</Text>
                     </View>
 
-                    {/* Pengajuan Group - spans 3 columns: XSmall + Medium + Medium */}
+                    {/* Pengajuan Group */}
                     <View
                       style={[
                         pdfStyles.tableCellXSmallHeader,
@@ -240,7 +236,7 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
                       <Text></Text>
                     </View>
 
-                    {/* Realisasi Group - spans 3 columns: XSmall + Medium + Medium */}
+                    {/* Realisasi Group */}
                     <View
                       style={[
                         pdfStyles.tableCellXSmallHeader,
@@ -340,9 +336,9 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
                   {/* Table Body */}
                   {items.map((item, index) => {
                     const pengajuanTotal =
-                      item.pengajuan.qty * item.pengajuan.price;
+                      (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0);
                     const realisasiTotal =
-                      item.realisasi.qty * item.realisasi.price;
+                      (item.realisasi?.qty || 0) * (item.realisasi?.price || 0);
 
                     return (
                       <View key={index} style={pdfStyles.tableRow}>
@@ -350,10 +346,10 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
                           <Text>{index + 1}</Text>
                         </View>
                         <View style={pdfStyles.tableCellWrap}>
-                          <Text>{item.po_number}</Text>
+                          <Text>{item.po_number || '-'}</Text>
                         </View>
                         <View style={pdfStyles.tableCellWrap}>
-                          <Text>{item.reference_number}</Text>
+                          <Text>{item.reference_number || '-'}</Text>
                         </View>
                         <View style={pdfStyles.tableCellMedium}>
                           <Text>
@@ -366,54 +362,53 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
                           </Text>
                         </View>
                         <View style={pdfStyles.tableCellXSmall}>
-                          <Text>{item.category.split('-').join(' ')}</Text>
+                          <Text>
+                            {item.category?.split('-').join(' ') || '-'}
+                          </Text>
                         </View>
                         <View style={pdfStyles.tableCell}>
-                          <Text>{item.pengajuan.nonstock.name}</Text>
+                          <Text>{item.pengajuan?.nonstock?.name || '-'}</Text>
                         </View>
                         <View style={pdfStyles.tableCellSmall}>
-                          <Text>{item.kandang.location.name}</Text>
+                          <Text>{item.kandang?.location?.name || '-'}</Text>
                         </View>
                         <View style={pdfStyles.tableCellSmall}>
-                          <Text>{item.kandang.name}</Text>
+                          <Text>{item.kandang?.name || '-'}</Text>
                         </View>
                         <View style={pdfStyles.tableCellRightXSmall}>
                           <Text>
-                            {item.pengajuan.qty.toLocaleString('id-ID')}
+                            {(item.pengajuan?.qty || 0).toLocaleString('id-ID')}
                           </Text>
                         </View>
                         <View style={pdfStyles.tableCellRightMedium}>
-                          <Text>{formatCurrency(item.pengajuan.price)}</Text>
+                          <Text>
+                            {formatCurrency(item.pengajuan?.price || 0)}
+                          </Text>
                         </View>
                         <View style={pdfStyles.tableCellRightMedium}>
                           <Text>{formatCurrency(pengajuanTotal)}</Text>
                         </View>
                         <View style={pdfStyles.tableCellRightXSmall}>
                           <Text>
-                            {item.realisasi.qty.toLocaleString('id-ID')}
+                            {(item.realisasi?.qty || 0).toLocaleString('id-ID')}
                           </Text>
                         </View>
                         <View style={pdfStyles.tableCellRightMedium}>
-                          <Text>{formatCurrency(item.realisasi.price)}</Text>
+                          <Text>
+                            {formatCurrency(item.realisasi?.price || 0)}
+                          </Text>
                         </View>
                         <View style={pdfStyles.tableCellRightMedium}>
                           <Text>{formatCurrency(realisasiTotal)}</Text>
                         </View>
                         <View style={pdfStyles.tableCellMedium}>
                           <Text
-                            style={{
-                              fontSize: 7,
-                              backgroundColor:
-                                item.latest_approval.action === 'APPROVED'
-                                  ? '#dcfce7'
-                                  : item.latest_approval.action === 'REJECTED'
-                                    ? '#fee2e2'
-                                    : '#fef3c7',
-                              padding: 2,
-                              borderRadius: 2,
-                            }}
+                            style={[
+                              { fontSize: 7, padding: 2, borderRadius: 2 },
+                              getStatusStyle(item.latest_approval?.action),
+                            ]}
                           >
-                            {item.latest_approval.step_name}
+                            {item.latest_approval?.step_name || '-'}
                           </Text>
                         </View>
                       </View>
@@ -422,7 +417,6 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
 
                   {/* Supplier Subtotal Row */}
                   <View style={pdfStyles.grandTotalRow}>
-                    {/* Empty cells for columns before subtotal */}
                     <View
                       style={[
                         pdfStyles.tableCellNarrow,
@@ -526,7 +520,6 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
                       </Text>
                     </View>
 
-                    {/* Empty cell for Status BOP */}
                     <View style={pdfStyles.tableCellMedium}>
                       <Text></Text>
                     </View>
@@ -540,17 +533,15 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
         {/* Grand Total Section */}
         <View style={pdfStyles.allocationSection}>
           <View
-            style={[
-              {
-                width: '30%',
-                borderTopWidth: 1,
-                borderTopColor: '#000000',
-                borderTopStyle: 'solid',
-                borderLeftWidth: 1,
-                borderLeftColor: '#000000',
-                borderLeftStyle: 'solid',
-              },
-            ]}
+            style={{
+              width: '30%',
+              borderTopWidth: 1,
+              borderTopColor: '#000000',
+              borderTopStyle: 'solid',
+              borderLeftWidth: 1,
+              borderLeftColor: '#000000',
+              borderLeftStyle: 'solid',
+            }}
           >
             <View style={pdfStyles.innerRow}>
               <View style={pdfStyles.tableCell}>
@@ -589,3 +580,23 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
     </Document>
   );
 };
+
+export const generateReportExpensePDF = async (
+  data: ReportExpense[],
+  params: PDFParams
+): Promise<void> => {
+  try {
+    const doc = <PDFDocument data={data} params={params} />;
+    const blob = await pdf(doc).toBlob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `Laporan-BOP-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  } catch (error) {
+    throw error;
+  }
+};