add pdf export function

2025-06-05 12:27:51 +08:00 · 2025-06-05 12:27:51 +08:00 · a81c6e9a29
commit a81c6e9a29
parent 62252a1689
4 changed files with 420 additions and 27 deletions
--- a/app/(admin)/adminDashboard/page.tsx
+++ b/app/(admin)/adminDashboard/page.tsx
@ -1,14 +1,21 @@
 'use client';

-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
-
 import SiteSelector from '@/components/dashboards/SiteSelector';
 import SiteStatus from '@/components/dashboards/SiteStatus';
-import EnergyLineChart from '@/components/dashboards/EnergyLineChart';
 import KPI_Table from '@/components/dashboards/KPIStatus';
-import MonthlyBarChart from '@/components/dashboards/MonthlyBarChart';
 import DashboardLayout from './dashlayout';
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
+import dynamic from 'next/dynamic';
+const EnergyLineChart = dynamic(() => import('@/components/dashboards/EnergyLineChart'), {
+  ssr: false,
+});
+
+const MonthlyBarChart = dynamic(() => import('@/components/dashboards/MonthlyBarChart'), {
+  ssr: false,
+});

 import { SiteName, SiteDetails, mockSiteData } from '@/types/SiteData';

@ -63,9 +70,49 @@ const AdminDashboard = () => {
    alert('Exported raw data to CSV (mock)');
  };

-  const handlePDFExport = () => {
-    alert('Exported chart images to PDF (mock)');
-  };
+  const energyChartRef = useRef(null);
+  const monthlyChartRef = useRef(null);
+
+  const handlePDFExport = async () => {
+  const doc = new jsPDF('p', 'mm', 'a4'); // portrait, millimeters, A4
+  const chartRefs = [
+    { ref: energyChartRef, title: 'Energy Line Chart' },
+    { ref: monthlyChartRef, title: 'Monthly Energy Yield' }
+  ];
+
+  let yOffset = 10;
+
+  for (const chart of chartRefs) {
+    if (!chart.ref.current) continue;
+
+    // Capture chart as image
+    const canvas = await html2canvas(chart.ref.current, {
+      scale: 2, // Higher scale for better resolution
+    });
+
+    const imgData = canvas.toDataURL('image/png');
+    const imgProps = doc.getImageProperties(imgData);
+
+    const pdfWidth = doc.internal.pageSize.getWidth() - 20; // 10 margin each side
+    const imgHeight = (imgProps.height * pdfWidth) / imgProps.width;
+
+    // Add title and image
+    doc.setFontSize(14);
+    doc.text(chart.title, 10, yOffset);
+    yOffset += 6; // Space between title and chart
+
+    // If content will overflow page, add a new page
+    if (yOffset + imgHeight > doc.internal.pageSize.getHeight()) {
+      doc.addPage();
+      yOffset = 10;
+    }
+
+    doc.addImage(imgData, 'PNG', 10, yOffset, pdfWidth, imgHeight);
+    yOffset += imgHeight + 10; // Update offset for next chart
+  }
+
+  doc.save('dashboard_charts.pdf');
+};

  return (
    <DashboardLayout>
@ -92,14 +139,14 @@ const AdminDashboard = () => {
          </div>
        </div>

-        <div className="grid md:grid-cols-2 gap-6">
-          <div className="pb-5">
+        <div className="grid md:grid-cols-2 gap-6 lg:flex-col justify-center">
+          <div ref={energyChartRef} className="pb-5">
            <EnergyLineChart
              consumptionData={currentSiteDetails.consumptionData}
              generationData={currentSiteDetails.generationData}
            />
          </div>
-          <div className="pb-5">
+          <div ref={monthlyChartRef} className="pb-5">
            <MonthlyBarChart siteData={currentSiteDetails} />
          </div>
        </div>
--- a/components/dashboards/MonthlyBarChart.tsx
+++ b/components/dashboards/MonthlyBarChart.tsx
@ -71,11 +71,11 @@ const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteData }) => {
                <h2 className="text-lg font-bold pb-3">Monthly Energy Yield</h2>
            </div>

-            <div className="h-96 w-full">
+            <div className="lg:h-[22.6vw] h-[290px] w-full pt-10">
                <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={chartData}>
-                        <XAxis dataKey="month" />
-                        <YAxis />
+                        <XAxis dataKey="month" tick={{ fontSize: 10 }}/>
+                        <YAxis tick={{ fontSize: 10 }} />
                        <Tooltip />
                        <Legend />
                        <Bar dataKey="consumption" fill={consumptionColor} name="Consumption (kWh)" />
--- a/package-lock.json
+++ b/package-lock.json
@ -25,8 +25,10 @@
                "cookie": "^1.0.2",
                "eslint": "8.32.0",
                "eslint-config-next": "13.1.2",
+                "html2canvas": "^1.4.1",
                "i18next": "^22.4.10",
                "jsonwebtoken": "^9.0.2",
+                "jspdf": "^3.0.1",
                "next": "14.0.3",
                "ni18n": "^1.0.5",
                "react": "18.2.0",
@ -185,12 +187,10 @@
            }
        },
        "node_modules/@babel/runtime": {
-            "version": "7.20.7",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-            "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
-            "dependencies": {
-                "regenerator-runtime": "^0.13.11"
-            },
+            "version": "7.27.4",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.4.tgz",
+            "integrity": "sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA==",
+            "license": "MIT",
            "engines": {
                "node": ">=6.9.0"
            }
@ -928,6 +928,13 @@
            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
            "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
        },
+        "node_modules/@types/raf": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+            "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+            "license": "MIT",
+            "optional": true
+        },
        "node_modules/@types/react": {
            "version": "18.0.27",
            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
@ -963,6 +970,13 @@
            "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
            "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
        },
+        "node_modules/@types/trusted-types": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+            "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+            "license": "MIT",
+            "optional": true
+        },
        "node_modules/@types/use-sync-external-store": {
            "version": "0.0.3",
            "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
@ -1293,6 +1307,18 @@
            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
            "license": "MIT"
        },
+        "node_modules/atob": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+            "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+            "license": "(MIT OR Apache-2.0)",
+            "bin": {
+                "atob": "bin/atob.js"
+            },
+            "engines": {
+                "node": ">= 4.5.0"
+            }
+        },
        "node_modules/autoprefixer": {
            "version": "10.4.17",
            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
@ -1387,6 +1413,15 @@
            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
        },
+        "node_modules/base64-arraybuffer": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+            "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6.0"
+            }
+        },
        "node_modules/bcrypt": {
            "version": "5.1.1",
            "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-5.1.1.tgz",
@ -1461,6 +1496,18 @@
                "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
            }
        },
+        "node_modules/btoa": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+            "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+            "license": "(MIT OR Apache-2.0)",
+            "bin": {
+                "btoa": "bin/btoa.js"
+            },
+            "engines": {
+                "node": ">= 0.4.0"
+            }
+        },
        "node_modules/buffer-equal-constant-time": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
@ -1538,6 +1585,26 @@
                }
            ]
        },
+        "node_modules/canvg": {
+            "version": "3.0.11",
+            "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+            "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@types/raf": "^3.4.0",
+                "core-js": "^3.8.3",
+                "raf": "^3.4.1",
+                "regenerator-runtime": "^0.13.7",
+                "rgbcolor": "^1.0.1",
+                "stackblur-canvas": "^2.0.0",
+                "svg-pathdata": "^6.0.3"
+            },
+            "engines": {
+                "node": ">=10.0.0"
+            }
+        },
        "node_modules/chalk": {
            "version": "4.1.2",
            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -1707,6 +1774,18 @@
                "node": ">=18"
            }
        },
+        "node_modules/core-js": {
+            "version": "3.42.0",
+            "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.42.0.tgz",
+            "integrity": "sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/core-js"
+            }
+        },
        "node_modules/cosmiconfig": {
            "version": "7.1.0",
            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@ -1743,6 +1822,15 @@
                "node": ">= 8"
            }
        },
+        "node_modules/css-line-break": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+            "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+            "license": "MIT",
+            "dependencies": {
+                "utrie": "^1.0.2"
+            }
+        },
        "node_modules/cssesc": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -2029,6 +2117,16 @@
                "csstype": "^3.0.2"
            }
        },
+        "node_modules/dompurify": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+            "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+            "license": "(MPL-2.0 OR Apache-2.0)",
+            "optional": true,
+            "optionalDependencies": {
+                "@types/trusted-types": "^2.0.7"
+            }
+        },
        "node_modules/dunder-proto": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@ -2740,6 +2838,12 @@
                "reusify": "^1.0.4"
            }
        },
+        "node_modules/fflate": {
+            "version": "0.8.2",
+            "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+            "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+            "license": "MIT"
+        },
        "node_modules/file-entry-cache": {
            "version": "6.0.1",
            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@ -3250,6 +3354,19 @@
                "void-elements": "3.1.0"
            }
        },
+        "node_modules/html2canvas": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+            "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+            "license": "MIT",
+            "dependencies": {
+                "css-line-break": "^2.1.0",
+                "text-segmentation": "^1.0.3"
+            },
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
        "node_modules/https-proxy-agent": {
            "version": "5.0.1",
            "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@ -3794,6 +3911,24 @@
                "node": ">=10"
            }
        },
+        "node_modules/jspdf": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz",
+            "integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.26.7",
+                "atob": "^2.1.2",
+                "btoa": "^1.2.1",
+                "fflate": "^0.8.1"
+            },
+            "optionalDependencies": {
+                "canvg": "^3.0.11",
+                "core-js": "^3.6.0",
+                "dompurify": "^3.2.4",
+                "html2canvas": "^1.0.0-rc.5"
+            }
+        },
        "node_modules/jsx-ast-utils": {
            "version": "3.3.3",
            "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@ -4565,6 +4700,13 @@
            "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
            "integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g=="
        },
+        "node_modules/performance-now": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+            "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+            "license": "MIT",
+            "optional": true
+        },
        "node_modules/picocolors": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@ -4797,6 +4939,16 @@
                }
            ]
        },
+        "node_modules/raf": {
+            "version": "3.4.1",
+            "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+            "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "performance-now": "^2.1.0"
+            }
+        },
        "node_modules/react": {
            "version": "18.2.0",
            "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@ -5093,7 +5245,9 @@
        "node_modules/regenerator-runtime": {
            "version": "0.13.11",
            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-            "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+            "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+            "license": "MIT",
+            "optional": true
        },
        "node_modules/regexp.prototype.flags": {
            "version": "1.4.3",
@ -5160,6 +5314,16 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/rgbcolor": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+            "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+            "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8.15"
+            }
+        },
        "node_modules/rimraf": {
            "version": "3.0.2",
            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@ -5316,6 +5480,16 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/stackblur-canvas": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+            "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=0.1.14"
+            }
+        },
        "node_modules/stop-iteration-iterator": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@ -5540,6 +5714,16 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
+        "node_modules/svg-pathdata": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+            "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=12.0.0"
+            }
+        },
        "node_modules/synckit": {
            "version": "0.8.4",
            "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz",
@ -5667,6 +5851,15 @@
                "node": ">=10"
            }
        },
+        "node_modules/text-segmentation": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+            "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+            "license": "MIT",
+            "dependencies": {
+                "utrie": "^1.0.2"
+            }
+        },
        "node_modules/text-table": {
            "version": "0.2.0",
            "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@ -5915,6 +6108,15 @@
            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
        },
+        "node_modules/utrie": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+            "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+            "license": "MIT",
+            "dependencies": {
+                "base64-arraybuffer": "^1.0.2"
+            }
+        },
        "node_modules/victory-vendor": {
            "version": "36.9.2",
            "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
@ -6199,12 +6401,9 @@
            }
        },
        "@babel/runtime": {
-            "version": "7.20.7",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-            "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
-            "requires": {
-                "regenerator-runtime": "^0.13.11"
-            }
+            "version": "7.27.4",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.4.tgz",
+            "integrity": "sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA=="
        },
        "@babel/types": {
            "version": "7.20.7",
@ -6722,6 +6921,12 @@
            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
            "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
        },
+        "@types/raf": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+            "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+            "optional": true
+        },
        "@types/react": {
            "version": "18.0.27",
            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
@ -6757,6 +6962,12 @@
            "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
            "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
        },
+        "@types/trusted-types": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+            "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+            "optional": true
+        },
        "@types/use-sync-external-store": {
            "version": "0.0.3",
            "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
@ -6986,6 +7197,11 @@
            "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
        },
+        "atob": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+            "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+        },
        "autoprefixer": {
            "version": "10.4.17",
            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
@ -7043,6 +7259,11 @@
            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
        },
+        "base64-arraybuffer": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+            "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+        },
        "bcrypt": {
            "version": "5.1.1",
            "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-5.1.1.tgz",
@ -7087,6 +7308,11 @@
                "update-browserslist-db": "^1.0.13"
            }
        },
+        "btoa": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+            "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+        },
        "buffer-equal-constant-time": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
@ -7134,6 +7360,22 @@
            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
            "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA=="
        },
+        "canvg": {
+            "version": "3.0.11",
+            "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+            "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+            "optional": true,
+            "requires": {
+                "@babel/runtime": "^7.12.5",
+                "@types/raf": "^3.4.0",
+                "core-js": "^3.8.3",
+                "raf": "^3.4.1",
+                "regenerator-runtime": "^0.13.7",
+                "rgbcolor": "^1.0.1",
+                "stackblur-canvas": "^2.0.0",
+                "svg-pathdata": "^6.0.3"
+            }
+        },
        "chalk": {
            "version": "4.1.2",
            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -7254,6 +7496,12 @@
            "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
            "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="
        },
+        "core-js": {
+            "version": "3.42.0",
+            "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.42.0.tgz",
+            "integrity": "sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==",
+            "optional": true
+        },
        "cosmiconfig": {
            "version": "7.1.0",
            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@ -7284,6 +7532,14 @@
                "which": "^2.0.1"
            }
        },
+        "css-line-break": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+            "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+            "requires": {
+                "utrie": "^1.0.2"
+            }
+        },
        "cssesc": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -7485,6 +7741,15 @@
                "csstype": "^3.0.2"
            }
        },
+        "dompurify": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+            "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+            "optional": true,
+            "requires": {
+                "@types/trusted-types": "^2.0.7"
+            }
+        },
        "dunder-proto": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@ -8026,6 +8291,11 @@
                "reusify": "^1.0.4"
            }
        },
+        "fflate": {
+            "version": "0.8.2",
+            "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+            "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
+        },
        "file-entry-cache": {
            "version": "6.0.1",
            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@ -8371,6 +8641,15 @@
                "void-elements": "3.1.0"
            }
        },
+        "html2canvas": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+            "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+            "requires": {
+                "css-line-break": "^2.1.0",
+                "text-segmentation": "^1.0.3"
+            }
+        },
        "https-proxy-agent": {
            "version": "5.0.1",
            "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@ -8737,6 +9016,21 @@
                }
            }
        },
+        "jspdf": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz",
+            "integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==",
+            "requires": {
+                "@babel/runtime": "^7.26.7",
+                "atob": "^2.1.2",
+                "btoa": "^1.2.1",
+                "canvg": "^3.0.11",
+                "core-js": "^3.6.0",
+                "dompurify": "^3.2.4",
+                "fflate": "^0.8.1",
+                "html2canvas": "^1.0.0-rc.5"
+            }
+        },
        "jsx-ast-utils": {
            "version": "3.3.3",
            "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@ -9274,6 +9568,12 @@
            "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
            "integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g=="
        },
+        "performance-now": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+            "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+            "optional": true
+        },
        "picocolors": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@ -9412,6 +9712,15 @@
            "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
            "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
        },
+        "raf": {
+            "version": "3.4.1",
+            "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+            "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+            "optional": true,
+            "requires": {
+                "performance-now": "^2.1.0"
+            }
+        },
        "react": {
            "version": "18.2.0",
            "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@ -9611,7 +9920,8 @@
        "regenerator-runtime": {
            "version": "0.13.11",
            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-            "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+            "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+            "optional": true
        },
        "regexp.prototype.flags": {
            "version": "1.4.3",
@ -9653,6 +9963,12 @@
            "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
            "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
        },
+        "rgbcolor": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+            "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+            "optional": true
+        },
        "rimraf": {
            "version": "3.0.2",
            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@ -9748,6 +10064,12 @@
            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
        },
+        "stackblur-canvas": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+            "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+            "optional": true
+        },
        "stop-iteration-iterator": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@ -9907,6 +10229,12 @@
            "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
            "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
        },
+        "svg-pathdata": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+            "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+            "optional": true
+        },
        "synckit": {
            "version": "0.8.4",
            "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz",
@ -9992,6 +10320,14 @@
                "yallist": "^4.0.0"
            }
        },
+        "text-segmentation": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+            "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+            "requires": {
+                "utrie": "^1.0.2"
+            }
+        },
        "text-table": {
            "version": "0.2.0",
            "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@ -10181,6 +10517,14 @@
            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
        },
+        "utrie": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+            "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+            "requires": {
+                "base64-arraybuffer": "^1.0.2"
+            }
+        },
        "victory-vendor": {
            "version": "36.9.2",
            "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
--- a/package.json
+++ b/package.json
@ -26,8 +26,10 @@
        "cookie": "^1.0.2",
        "eslint": "8.32.0",
        "eslint-config-next": "13.1.2",
+        "html2canvas": "^1.4.1",
        "i18next": "^22.4.10",
        "jsonwebtoken": "^9.0.2",
+        "jspdf": "^3.0.1",
        "next": "14.0.3",
        "ni18n": "^1.0.5",
        "react": "18.2.0",