Cài đặt tính năng thay đổi tên và mô tả tour

backend/dist/src/main.js

@@ -159,12 +159,15 @@ let TourController = class TourController {
         this.prisma = prisma;
     }
     async createTour(body, req) {
-        const { title, startDate, endDate } = body;
+        const { title, startDate, endDate, adultCount, childCount, childDiscount } = body;
         return this.prisma.tour.create({
             data: {
                 title,
                 startDate: startDate ? new Date(startDate) : null,
                 endDate: endDate ? new Date(endDate) : null,
+                adultCount: adultCount || 1,
+                childCount: childCount || 0,
+                childDiscount: childDiscount || 0,
                 createdById: req.user.id,
                 participants: {
                     create: {
@@ -327,8 +330,12 @@ let TourController = class TourController {
             where: { id },
             data: {
                 title: body.title,
+                description: body.description,
                 startDate: body.startDate ? new Date(body.startDate) : undefined,
                 endDate: body.endDate ? new Date(body.endDate) : undefined,
+                adultCount: body.adultCount !== undefined ? Number(body.adultCount) : undefined,
+                childCount: body.childCount !== undefined ? Number(body.childCount) : undefined,
+                childDiscount: body.childDiscount !== undefined ? Number(body.childDiscount) : undefined,
             },
         });
     }

backend/prisma/migrations/20260615131137_/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "Tour" ADD COLUMN     "adultCount" INTEGER NOT NULL DEFAULT 1,
+ADD COLUMN     "childCount" INTEGER NOT NULL DEFAULT 0,
+ADD COLUMN     "childDiscount" INTEGER NOT NULL DEFAULT 30;

backend/prisma/migrations/20260615141911_/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Tour" ADD COLUMN     "description" TEXT;

backend/prisma/schema.prisma

@@ -78,11 +78,16 @@ model User {
 model Tour {
   id          String       @id @default(uuid())
   title       String
+  description String?
   startDate   DateTime?
   endDate     DateTime?
   createdAt   DateTime     @default(now())
   totalCost   Decimal      @default(0) @db.Decimal(15, 2)
   
+  adultCount    Int        @default(1)
+  childCount    Int        @default(0)
+  childDiscount Int        @default(30)
+  
   createdById String
   creator     User         @relation("TourCreator", fields: [createdById], references: [id])
   

backend/src/main.ts

@@ -108,12 +108,15 @@ class TourController {
   @UseGuards(JwtAuthGuard)
   @Post()
   async createTour(@Body() body: any, @Req() req: any) {
-    const { title, startDate, endDate } = body;
+    const { title, startDate, endDate, adultCount, childCount, childDiscount } = body;
     return this.prisma.tour.create({
       data: {
         title,
         startDate: startDate ? new Date(startDate) : null,
         endDate: endDate ? new Date(endDate) : null,
+        adultCount: adultCount || 1,
+        childCount: childCount || 0,
+        childDiscount: childDiscount || 0,
         createdById: req.user.id,
         participants: {
           create: {
@@ -321,8 +324,12 @@ class TourController {
       where: { id },
       data: {
         title: body.title,
+        description: body.description,
         startDate: body.startDate ? new Date(body.startDate) : undefined,
         endDate: body.endDate ? new Date(body.endDate) : undefined,
+        adultCount: body.adultCount !== undefined ? Number(body.adultCount) : undefined,
+        childCount: body.childCount !== undefined ? Number(body.childCount) : undefined,
+        childDiscount: body.childDiscount !== undefined ? Number(body.childDiscount) : undefined,
       },
     });
   }

frontend/src/components/CreateTourModal.tsx

@@ -1,11 +1,14 @@
 import React, { useState } from 'react';
-import { Trash2 } from 'lucide-react';
+import { Trash2, Users } from 'lucide-react';
 import { useTourStore } from '@/store/useTourStore';
 
 export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolean, onClose: () => void, onSuccess: (tour: any) => void }) => {
   const [title, setTitle] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
+  const [adultCount, setAdultCount] = useState(2);
+  const [childCount, setChildCount] = useState(1);
+  const [childDiscount, setChildDiscount] = useState(30);
   const [isLoading, setIsLoading] = useState(false);
   const createTour = useTourStore((state) => state.createTour);
 
@@ -52,7 +55,15 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
     setError('');
     try {
       const memberIds = members.map((m) => m.id);
-      const tour = await createTour({ title, startDate, endDate, memberIds });
+      const tour = await createTour({ 
+        title, 
+        startDate, 
+        endDate, 
+        memberIds,
+        adultCount,
+        childCount,
+        childDiscount
+      });
       onSuccess(tour);
       onClose();
     } catch (e: any) {
@@ -104,6 +115,31 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
             </div>
           </div>
 
+          <div className="bg-blue-50/50 p-4 rounded-2xl border border-blue-100 space-y-3">
+            <div className="flex items-center gap-2 text-blue-600 mb-1">
+              <Users className="w-4 h-4" />
+              <span className="text-xs font-black uppercase tracking-wider">Cơ cấu đoàn & Định mức chi phí</span>
+            </div>
+            <div className="grid grid-cols-3 gap-3">
+              <div>
+                <label className="block text-[10px] font-bold text-gray-500 uppercase mb-1">Người lớn</label>
+                <input type="number" className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                  value={adultCount} onChange={e => setAdultCount(Number(e.target.value))} />
+              </div>
+              <div>
+                <label className="block text-[10px] font-bold text-gray-500 uppercase mb-1">Trẻ em</label>
+                <input type="number" className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                  value={childCount} onChange={e => setChildCount(Number(e.target.value))} />
+              </div>
+              <div>
+                <label className="block text-[10px] font-bold text-gray-500 uppercase mb-1">Giảm trẻ em %</label>
+                <input type="number" className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                  value={childDiscount} onChange={e => setChildDiscount(Number(e.target.value))} />
+              </div>
+            </div>
+            <p className="text-[10px] text-blue-400 italic font-medium">* Dùng để tính toán đơn giá bình quân trong báo cáo chi phí.</p>
+          </div>
+
           <div>
             <label className="block text-sm font-bold text-gray-700 mb-2">Thành viên tham gia</label>
             <div className="flex flex-wrap gap-3">

frontend/src/pages/TourDetailPage.tsx

@@ -162,6 +162,13 @@ const MapContextMenu = ({ onAction }: { onAction: (action: string, latlng: L.Lat
 };
 
 export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
+  // Tách biệt các state và actions để tối ưu performance - Chuyển lên đầu để tránh lỗi initialization
+  const currentTour = useTourStore(state => state.currentTour);
+  const legs = useTourStore(state => state.legs);
+  const publicTours = useTourStore(state => state.publicTours);
+  const userRole = useTourStore(state => state.userRole);
+  const mapCenter = useTourStore(state => state.mapCenter);
+
   const [activeTab, setActiveTab] = useState<'plan' | 'expense' | 'photo' | 'settings'>('plan');
   const [viewMode, setViewMode] = useState<'map' | 'timeline'>('timeline');
   const [isAddLocationOpen, setIsAddLocationOpen] = useState(false);
@@ -171,21 +178,19 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
   const [selectedMember, setSelectedMember] = useState<any>(null);
   const [isMemberDetailOpen, setIsMemberDetailOpen] = useState(false);
   const [joinRequests, setJoinRequests] = useState<any[]>([]);
+  // State cho input số lượng người tham gia
+  const [adultCountInput, setAdultCountInput] = useState(currentTour?.adultCount ?? 0);
+  const [childCountInput, setChildCountInput] = useState(currentTour?.childCount ?? 0);
+  const [childDiscountInput, setChildDiscountInput] = useState(currentTour?.childDiscount ?? 0);
   const [joinRequestActionId, setJoinRequestActionId] = useState<string | null>(null);
   const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
 
-  // Tách biệt các state và actions để tối ưu performance
-  const currentTour = useTourStore(state => state.currentTour);
-  const legs = useTourStore(state => state.legs);
-  const publicTours = useTourStore(state => state.publicTours);
-  const userRole = useTourStore(state => state.userRole);
-  const mapCenter = useTourStore(state => state.mapCenter);
-  
   const fetchTour = useTourStore(state => state.fetchTour);
   const fetchPublicTours = useTourStore(state => state.fetchPublicTours);
   const setMapCenter = useTourStore(state => state.setMapCenter);
   const updateTourStartPoint = useTourStore(state => state.updateTourStartPoint);
   const updateTourEndPoint = useTourStore(state => state.updateTourEndPoint);
+  const updateTourDetails = useTourStore(state => state.updateTourDetails); // Thêm action này
   const initializeLegs = useTourStore(state => state.initializeLegs);
   const addLocation = useTourStore(state => state.addLocation);
   const removeMember = useTourStore(state => state.removeMember);
@@ -334,6 +339,21 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
     }
   };
 
+  // Hàm xử lý cập nhật số lượng người tham gia
+  const handleUpdateParticipantCounts = async () => {
+    if (!currentTour) return;
+    try {
+      await updateTourDetails(currentTour.id, {
+        adultCount: adultCountInput,
+        childCount: childCountInput,
+        childDiscount: childDiscountInput,
+      });
+      notificationModal.openModal('Thành công', 'Đã cập nhật số lượng người tham gia.', 'success');
+      fetchTour(currentTour.id); // Re-fetch tour để cập nhật lại các tính toán liên quan
+    } catch (error: any) {
+      notificationModal.openModal('Lỗi', error.message || 'Không thể cập nhật số lượng người tham gia.', 'error');
+    }
+  };
   // Xác định Điểm xuất phát và Điểm kết thúc hiển thị dưới widget tài chính
   const startPoint = legs[0]?.locations[0];
   const lastLeg = legs[legs.length - 1];
@@ -349,6 +369,23 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
 
   const hasFinanceAccess = ['OWNER', 'MANAGER', 'MEMBER'].includes(userRole || '');
 
+  // Logic tính toán ngày hiển thị: Ưu tiên ngày của Tour, sau đó đến ngày của các Chặng
+  const tourDateDisplay = useMemo(() => {
+    if (currentTour?.startDate && currentTour?.endDate) {
+      return `${new Date(currentTour.startDate).toLocaleDateString('vi-VN')} - ${new Date(currentTour.endDate).toLocaleDateString('vi-VN')}`;
+    }
+    const firstLeg = legs[0];
+    const lastLeg = legs[legs.length - 1];
+    const start = firstLeg?.startDate;
+    const end = lastLeg?.endDate || lastLeg?.startDate;
+    if (start && end) {
+      return `${new Date(start).toLocaleDateString('vi-VN')} - ${new Date(end).toLocaleDateString('vi-VN')}`;
+    } else if (start) {
+      return `Từ ${new Date(start).toLocaleDateString('vi-VN')}`;
+    }
+    return "Chưa xác định ngày";
+  }, [currentTour, legs]);
+
   const travelQuotes = [
     "Đừng nghe họ nói, hãy tự mình đi xem.",
     "Thế giới là một cuốn sách, và ai không đi du lịch thì chỉ mới đọc được một trang.",
@@ -360,7 +397,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
 
   const tourInfo = {
     title: currentTour?.title || "Hành trình khám phá TP.HCM",
-    date: currentTour?.startDate ? `${new Date(currentTour.startDate).toLocaleDateString('vi-VN')} - ${new Date(currentTour.endDate).toLocaleDateString('vi-VN')}` : "Chưa xác định ngày",
+    date: tourDateDisplay,
     membersCount: currentTour?.participants?.length || 0,
     budget: currentTour?.totalCost ? `${Number(currentTour.totalCost).toLocaleString()} VND` : "0 VND",
     coverImage: currentTour?.photos?.[0]?.imageUrl || "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
@@ -522,12 +559,15 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
 
       {/* Financial Quick-View Widget or Quote */}
       <div className="max-w-2xl mx-auto -mt-10 px-4 relative z-10">
-        <div className={`rounded-3xl p-6 shadow-2xl transition-all duration-500 ${hasFinanceAccess ? 'bg-indigo-600 text-white shadow-indigo-200' : 'bg-white text-gray-600 border border-gray-100'}`}>
+        <div 
+          onClick={() => hasFinanceAccess && setActiveTab('expense')}
+          className={`rounded-3xl p-6 shadow-2xl transition-all duration-500 ${hasFinanceAccess ? 'bg-indigo-600 text-white shadow-indigo-200 cursor-pointer hover:scale-[1.02] active:scale-95' : 'bg-white text-gray-600 border border-gray-100'}`}
+        >
           <div className="flex justify-between items-center">
             {hasFinanceAccess ? (
               <>
                 <div>
-                  <p className="text-indigo-100 text-xs font-black uppercase tracking-widest mb-1">Tổng chi tiêu hiện tại</p>
+                  <p className="text-indigo-100 text-[10px] font-black uppercase tracking-widest mb-1">Tổng chi tiêu hiện tại (Nhấn để xem chi tiết)</p>
                   <h3 className="text-3xl font-black">{tourInfo.budget}</h3>
                 </div>
                 <div className="p-4 bg-white/10 rounded-2xl backdrop-blur-md"><Wallet className="w-8 h-8" /></div>
@@ -778,6 +818,58 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                   )}
                 </div>
               </div>
+
+              {canEdit && ( // Chỉ OWNER và MANAGER mới có thể chỉnh sửa phần này
+                <div className="p-6 bg-white rounded-3xl border border-gray-100 shadow-sm animate-in zoom-in-95">
+                  <div className="flex items-center gap-3 mb-4">
+                    <Users className="w-6 h-6 text-purple-500" />
+                    <h3 className="text-lg font-bold text-gray-900">Quản lý số lượng người tham gia</h3>
+                  </div>
+                  <div className="space-y-4">
+                    <div>
+                      <label htmlFor="adultCount" className="block text-sm font-medium text-gray-700 mb-1">Số lượng người lớn</label>
+                      <input
+                        type="number"
+                        id="adultCount"
+                        value={adultCountInput}
+                        onChange={(e) => setAdultCountInput(Number(e.target.value))}
+                        min="0"
+                        className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-blue-500 focus:border-blue-500"
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="childCount" className="block text-sm font-medium text-gray-700 mb-1">Số lượng trẻ em</label>
+                      <input
+                        type="number"
+                        id="childCount"
+                        value={childCountInput}
+                        onChange={(e) => setChildCountInput(Number(e.target.value))}
+                        min="0"
+                        className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-blue-500 focus:border-blue-500"
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="childDiscount" className="block text-sm font-medium text-gray-700 mb-1">Giảm giá trẻ em (%)</label>
+                      <input
+                        type="number"
+                        id="childDiscount"
+                        value={childDiscountInput}
+                        onChange={(e) => setChildDiscountInput(Number(e.target.value))}
+                        min="0"
+                        max="100"
+                        className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-blue-500 focus:border-blue-500"
+                      />
+                    </div>
+                    <button
+                      onClick={handleUpdateParticipantCounts}
+                      className="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl transition-all shadow-md"
+                    >
+                      Lưu thay đổi
+                    </button>
+                  </div>
+                </div>
+              )}
+
               <div className="p-8 text-center bg-gray-50 rounded-3xl border border-dashed border-gray-200">
                 <Settings className="w-10 h-10 text-gray-300 mx-auto mb-3" />
                 <p className="text-gray-500 font-medium">Tính năng cài đặt khác đang được cập nhật...</p>

frontend/src/store/useTourStore.ts

@@ -10,6 +10,7 @@ interface TourState {
   setTour: (tour: any) => void;
   updateLegs: (legs: any[]) => void;
   createTour: (tourData: any) => Promise<any>;
+  updateTourDetails: (tourId: string, data: any) => Promise<void>;
   updateTour: (id: string, data: any) => Promise<void>;
   deleteTour: (id: string) => Promise<void>;
   addLeg: (tourId: string, data: any) => Promise<void>;
@@ -106,6 +107,23 @@ export const useTourStore = create<TourState>((set, get) => ({
     await get().fetchPublicTours();
     return tour;
   },
+  updateTourDetails: async (tourId: string, data: any) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const token = localStorage.getItem('token');
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}`, {
+      method: 'PATCH',
+      headers: { 
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      },
+      body: JSON.stringify(data),
+    });
+    
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(errorData.message || errorData.error || 'Lỗi khi cập nhật thông tin tour');
+    }
+  },
   updateTour: async (id: string, data: any) => {
     const API_BASE = `http://${window.location.hostname}:3001`;
     const response = await fetch(`${API_BASE}/api/v1/tours/${id}`, {

package-lock.json

@@ -11,6 +11,10 @@
         "backend",
         "frontend"
       ],
+      "dependencies": {
+        "jspdf": "^4.2.1",
+        "jspdf-autotable": "^5.0.8"
+      },
       "devDependencies": {
         "concurrently": "^8.2.2"
       }
@@ -373,7 +377,6 @@
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
       "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -1857,6 +1860,12 @@
         "undici-types": ">=7.24.0 <7.24.7"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
     "node_modules/@types/pg": {
       "version": "8.20.0",
       "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.20.0.tgz",
@@ -1876,6 +1885,13 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "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.3.31",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
@@ -1887,6 +1903,13 @@
         "csstype": "^3.2.2"
       }
     },
+    "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/@vitejs/plugin-react": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.2.tgz",
@@ -2309,6 +2332,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "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",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2555,6 +2588,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "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",
@@ -2829,6 +2882,18 @@
         "node": ">=6.6.0"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cors": {
       "version": "2.8.6",
       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
@@ -2895,6 +2960,16 @@
         "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",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -2988,6 +3063,16 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.10.tgz",
+      "integrity": "sha512-0xzNv0e7oYC6yyuOGZIABPM4qtg3QxLFniDNPP4ZP90wR8Yq3zgwpRbrNiT4N3IKqDbbYFEJLV+JWEs19aZ//w==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
@@ -3305,6 +3390,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
     "node_modules/fast-safe-stringify": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
@@ -3346,6 +3442,12 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
     "node_modules/file-type": {
       "version": "21.3.4",
       "resolved": "https://registry.npmjs.org/file-type/-/file-type-21.3.4.tgz",
@@ -3659,6 +3761,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -3738,6 +3854,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -3932,6 +4054,32 @@
         "npm": ">=6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz",
+      "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.3.1",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf-autotable": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.8.tgz",
+      "integrity": "sha512-Hy05N86yBO7CXBrnSLOge7i1ZYpKH2DjQ94iybaP7vBhSInjvRBgDc99ngKzSbSO8Jc98ZCally8I6n0tj2RJQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jspdf": "^2 || ^3 || ^4"
+      }
+    },
     "node_modules/jwa": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
@@ -4743,6 +4891,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4872,6 +5026,13 @@
       "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
       "integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
     },
+    "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/pg": {
       "version": "8.21.0",
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.21.0.tgz",
@@ -5104,6 +5265,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -5216,6 +5387,13 @@
       "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
       "license": "Apache-2.0"
     },
+    "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==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -5267,6 +5445,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "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/rolldown": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
@@ -5654,6 +5842,16 @@
         "node": ">= 10.x"
       }
     },
+    "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/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -5750,6 +5948,16 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "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/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
@@ -5906,6 +6114,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "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",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -6197,6 +6415,16 @@
         "node": ">= 0.4.0"
       }
     },
+    "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",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",

package.json

@@ -18,5 +18,9 @@
   },
   "devDependencies": {
     "concurrently": "^8.2.2"
+  },
+  "dependencies": {
+    "jspdf": "^4.2.1",
+    "jspdf-autotable": "^5.0.8"
   }
 }