fix(FE): refactor UI Dashboard pixel perfect figma

src/components/pages/dashboard/export/DashboardPDF.ts

@@ -3,18 +3,19 @@ import { toPng } from 'html-to-image';
 import toast from 'react-hot-toast';
 import { formatDate } from '@/lib/helper';
 import { DashboardFilterType } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
-import { DashboardAllChartsRef } from '@/components/pages/dashboard/chart/DashboardAllCharts';
+import { DashboardExportChartsRef } from '@/components/pages/dashboard/export/DashboardExportCharts';
+import { DashboardExportStatsRef } from '@/components/pages/dashboard/export/DashboardExportStats';
 
 interface DashboardPDFExportParams {
   filterValues: DashboardFilterType;
-  statsRef: React.RefObject<HTMLDivElement | null>;
-  allChartsRef: React.RefObject<DashboardAllChartsRef | null>;
+  allStatsRef: React.RefObject<DashboardExportStatsRef | null>;
+  allChartsRef: React.RefObject<DashboardExportChartsRef | null>;
   setExporting: (value: boolean) => void;
 }
 
 export const generateDashboardPDF = async ({
   filterValues,
-  statsRef,
+  allStatsRef,
   allChartsRef,
   setExporting,
 }: DashboardPDFExportParams): Promise<void> => {
@@ -168,31 +169,34 @@ export const generateDashboardPDF = async ({
     yPosition += 10;
 
     // Capture and add stats if available
-    if (statsRef.current) {
-      const statsImage = await toPng(statsRef.current, {
-        quality: 1,
-        pixelRatio: 2,
-      });
-      const statsImgProps = pdf.getImageProperties(statsImage);
-      const statsWidth = pageWidth - 2 * margin;
-      const statsHeight =
-        (statsImgProps.height * statsWidth) / statsImgProps.width;
+    if (allStatsRef.current) {
+      const statsContainer = allStatsRef.current.getContainerRef();
+      if (statsContainer) {
+        const statsImage = await toPng(statsContainer, {
+          quality: 1,
+          pixelRatio: 2,
+        });
+        const statsImgProps = pdf.getImageProperties(statsImage);
+        const statsWidth = pageWidth - 2 * margin;
+        const statsHeight =
+          (statsImgProps.height * statsWidth) / statsImgProps.width;
 
-      // Check if we need a new page
-      if (yPosition + statsHeight > pageHeight - margin) {
-        pdf.addPage();
-        yPosition = margin;
+        // Check if we need a new page
+        if (yPosition + statsHeight > pageHeight - margin) {
+          pdf.addPage();
+          yPosition = margin;
+        }
+
+        pdf.addImage(
+          statsImage,
+          'PNG',
+          margin,
+          yPosition,
+          statsWidth,
+          statsHeight
+        );
+        yPosition += statsHeight + 10;
       }
-
-      pdf.addImage(
-        statsImage,
-        'PNG',
-        margin,
-        yPosition,
-        statsWidth,
-        statsHeight
-      );
-      yPosition += statsHeight + 10;
     }
 
     if (allChartsRef.current) {