Compare commits

..

7 Commits

4 changed files with 667 additions and 34 deletions

View File

@@ -25,7 +25,10 @@
"uuid": "^9.0.0",
"express-rate-limit": "8.1.0",
"helmet": "8.1.0",
"express-validator": "7.3.0"
"express-validator": "7.3.0",
"exceljs": "4.4.0",
"pdfkit": "0.12.3",
"@types/pdfkit": "^0.12.3"
},
"devDependencies": {
"@types/bcryptjs": "^2.4.2",

View File

@@ -8,6 +8,8 @@ import {
} from '../models/ShiftPlan.js';
import { AuthRequest } from '../middleware/auth.js';
import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults.js';
import ExcelJS from 'exceljs';
import PDFDocument from 'pdfkit';
async function getPlanWithDetails(planId: string) {
const plan = await db.get<any>(`
@@ -592,6 +594,26 @@ async function getShiftPlanById(planId: string): Promise<any> {
`, [planId]);
}
// Load employees without role column + join with employee_roles
const employees = await db.all<any>(`
SELECT
e.id,
e.firstname,
e.lastname,
e.email,
e.employee_type,
e.contract_type,
e.can_work_alone,
e.is_trainee,
e.is_active as isActive,
GROUP_CONCAT(er.role) as roles
FROM employees e
LEFT JOIN employee_roles er ON e.id = er.employee_id
WHERE e.is_active = 1
GROUP BY e.id
ORDER BY e.firstname, e.lastname
`, []);
return {
...plan,
isTemplate: plan.is_template === 1,
@@ -629,6 +651,19 @@ async function getShiftPlanById(planId: string): Promise<any> {
requiredEmployees: shift.required_employees,
assignedEmployees: JSON.parse(shift.assigned_employees || '[]'),
timeSlotName: shift.time_slot_name
})),
// Include employees with proper role handling
employees: employees.map(emp => ({
id: emp.id,
firstname: emp.firstname,
lastname: emp.lastname,
email: emp.email,
employeeType: emp.employee_type,
contractType: emp.contract_type,
canWorkAlone: emp.can_work_alone === 1,
isTrainee: emp.is_trainee === 1,
isActive: emp.isActive === 1,
roles: emp.roles ? emp.roles.split(',') : [] // Convert comma-separated roles to array
}))
};
}
@@ -933,3 +968,594 @@ export const clearAssignments = async (req: Request, res: Response): Promise<voi
res.status(500).json({ error: 'Internal server error' });
}
};
// Helper interfaces for export
interface ExportDay {
id: number;
name: string;
}
interface ExportTimeSlot {
id: string;
name: string;
startTime: string;
endTime: string;
shiftsByDay: { [dayId: number]: any };
}
interface ExportTimetableData {
days: ExportDay[];
allTimeSlots: ExportTimeSlot[];
}
function getTimetableDataForExport(plan: any): ExportTimetableData {
const weekdays = [
{ id: 1, name: 'Montag' },
{ id: 2, name: 'Dienstag' },
{ id: 3, name: 'Mittwoch' },
{ id: 4, name: 'Donnerstag' },
{ id: 5, name: 'Freitag' },
{ id: 6, name: 'Samstag' },
{ id: 7, name: 'Sonntag' }
];
if (!plan.shifts || !plan.timeSlots) {
return { days: [], allTimeSlots: [] };
}
// Create a map for quick time slot lookups with proper typing
const timeSlotMap = new Map<string, any>();
plan.timeSlots.forEach((ts: any) => {
timeSlotMap.set(ts.id, ts);
});
// Group shifts by day
const shiftsByDay: { [dayId: number]: any[] } = plan.shifts.reduce((acc: any, shift: any) => {
if (!acc[shift.dayOfWeek]) {
acc[shift.dayOfWeek] = [];
}
const timeSlot = timeSlotMap.get(shift.timeSlotId);
const enhancedShift = {
...shift,
timeSlotName: timeSlot?.name,
startTime: timeSlot?.startTime,
endTime: timeSlot?.endTime
};
acc[shift.dayOfWeek].push(enhancedShift);
return acc;
}, {});
// Sort shifts within each day by start time
Object.keys(shiftsByDay).forEach(day => {
const dayNum = parseInt(day);
shiftsByDay[dayNum].sort((a: any, b: any) => {
const timeA = a.startTime || '';
const timeB = b.startTime || '';
return timeA.localeCompare(timeB);
});
});
// Get unique days that have shifts
const days: ExportDay[] = Array.from(new Set(plan.shifts.map((shift: any) => shift.dayOfWeek)))
.sort()
.map(dayId => {
return weekdays.find(day => day.id === dayId) || { id: dayId as number, name: `Tag ${dayId}` };
});
// Get all unique time slots (rows) by collecting from all shifts
const allTimeSlotsMap = new Map<string, ExportTimeSlot>();
days.forEach(day => {
shiftsByDay[day.id]?.forEach((shift: any) => {
const timeSlot = timeSlotMap.get(shift.timeSlotId);
if (timeSlot && !allTimeSlotsMap.has(timeSlot.id)) {
const exportTimeSlot: ExportTimeSlot = {
id: timeSlot.id,
name: timeSlot.name,
startTime: timeSlot.startTime,
endTime: timeSlot.endTime,
shiftsByDay: {}
};
allTimeSlotsMap.set(timeSlot.id, exportTimeSlot);
}
});
});
// Populate shifts for each time slot by day
days.forEach(day => {
shiftsByDay[day.id]?.forEach((shift: any) => {
const timeSlot = allTimeSlotsMap.get(shift.timeSlotId);
if (timeSlot) {
timeSlot.shiftsByDay[day.id] = shift;
}
});
});
// Convert to array and sort by start time
const allTimeSlots = Array.from(allTimeSlotsMap.values()).sort((a: ExportTimeSlot, b: ExportTimeSlot) => {
return (a.startTime || '').localeCompare(b.startTime || '');
});
return { days, allTimeSlots };
}
// Export shift plan to Excel
export const exportShiftPlanToExcel = async (req: Request, res: Response): Promise<void> => {
try {
const { id } = req.params;
console.log('📊 Starting Excel export for plan:', id);
const plan = await getShiftPlanById(id);
if (!plan) {
res.status(404).json({ error: 'Shift plan not found' });
return;
}
if (plan.status !== 'published') {
res.status(400).json({ error: 'Can only export published shift plans' });
return;
}
// Create workbook
const workbook = new ExcelJS.Workbook();
workbook.creator = 'Schichtplaner System';
workbook.created = new Date();
/* -------------------------------------------------------------------------- */
/* 🧾 1. Summary Sheet */
/* -------------------------------------------------------------------------- */
const summarySheet = workbook.addWorksheet('Planübersicht');
summarySheet.columns = [
{ header: 'Eigenschaft', key: 'property', width: 25 },
{ header: 'Wert', key: 'value', width: 35 }
];
summarySheet.addRows([
{ property: 'Plan Name', value: plan.name },
{ property: 'Beschreibung', value: plan.description || 'Keine' },
{ property: 'Zeitraum', value: `${plan.startDate} bis ${plan.endDate}` },
{ property: 'Status', value: plan.status },
{ property: 'Erstellt von', value: plan.created_by_name || 'Unbekannt' },
{ property: 'Erstellt am', value: new Date(plan.createdAt).toLocaleString('de-DE') },
{ property: 'Anzahl Schichten', value: plan.scheduledShifts?.length || 0 },
{ property: 'Anzahl Mitarbeiter', value: plan.employees?.length || 0 }
]);
// Style header
const header1 = summarySheet.getRow(1);
header1.font = { bold: true, color: { argb: 'FFFFFFFF' } };
header1.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF2C3E50' } };
summarySheet.columns.forEach(col => (col.alignment = { vertical: 'middle', wrapText: true }));
/* -------------------------------------------------------------------------- */
/* 📅 2. Timetable / Schichtplan Sheet */
/* -------------------------------------------------------------------------- */
const timetableSheet = workbook.addWorksheet('Schichtplan');
const timetableData = getTimetableDataForExport(plan);
const { days, allTimeSlots } = timetableData;
// Header
const headerRow = ['Schicht (Zeit)', ...days.map(d => d.name)];
const header = timetableSheet.addRow(headerRow);
header.eachCell(cell => {
cell.font = { bold: true, color: { argb: 'FFFFFFFF' } };
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF2C3E50' } };
cell.alignment = { horizontal: 'center', vertical: 'middle' };
cell.border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' }
};
});
// Content rows
for (const timeSlot of allTimeSlots) {
const rowData: any[] = [`${timeSlot.name}\n${timeSlot.startTime} - ${timeSlot.endTime}`];
for (const day of days) {
const shift = timeSlot.shiftsByDay[day.id];
if (!shift) {
rowData.push('Keine Schicht');
continue;
}
const scheduledShift = plan.scheduledShifts?.find(
(s: any) => getDayOfWeek(s.date) === day.id && s.timeSlotId === timeSlot.id
);
if (scheduledShift && scheduledShift.assignedEmployees?.length > 0) {
const employees = scheduledShift.assignedEmployees.map((empId: string) => {
const emp = plan.employees?.find((e: any) => e.id === empId);
if (!emp) return { text: 'Unbekannt', color: 'FF888888' };
if (emp.isTrainee)
return { text: `${emp.firstname} ${emp.lastname} (T)`, color: 'FFCDA8F0' };
if (emp.employee_type === 'manager')
return { text: `${emp.firstname} ${emp.lastname} (M)`, color: 'FFCC0000' };
return { text: `${emp.firstname} ${emp.lastname}`, color: 'FF642AB5' };
});
rowData.push(employees);
} else {
const shiftsForSlot =
plan.shifts?.filter(
(s: any) => s.dayOfWeek === day.id && s.timeSlotId === timeSlot.id
) || [];
const totalRequired = shiftsForSlot.reduce(
(sum: number, s: any) => sum + s.requiredEmployees,
0
);
rowData.push(totalRequired === 0 ? '-' : `0/${totalRequired}`);
}
}
const row = timetableSheet.addRow(rowData);
row.eachCell((cell, colNumber) => {
cell.border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' }
};
cell.alignment = { vertical: 'top', wrapText: true };
if (cell.value === 'Keine Schicht') {
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFEDEDED' } };
cell.font = { color: { argb: 'FF888888' }, italic: true };
}
if (Array.isArray(cell.value)) {
cell.value = {
richText: cell.value.map((e: any) => ({
text: e.text + '\n',
font: { color: { argb: e.color } }
}))
};
}
if (colNumber === 1) {
cell.alignment = { horizontal: 'left', vertical: 'middle', wrapText: true };
}
});
}
// Adjust layout
timetableSheet.eachRow((row, i) => (row.height = i === 1 ? 30 : 70));
timetableSheet.columns.forEach(col => {
let max = 12;
col.eachCell?.({ includeEmpty: true }, c => {
const len = typeof c.value === 'string' ? c.value.length : 10;
if (len > max) max = len;
});
col.width = Math.min(max + 5, 40);
});
// Add legend row at bottom
const legendRow = timetableSheet.addRow([
'Legende:',
'■ Manager',
'■ Trainee',
'■ Mitarbeiter',
'■ Keine Schicht'
]);
// Style each square with its respective color
legendRow.getCell(1).font = { bold: true };
legendRow.getCell(2).font = { color: { argb: 'FFCC0000' } }; // Red = Manager
legendRow.getCell(3).font = { color: { argb: 'FFCDA8F0' } }; // Purple = Trainee
legendRow.getCell(4).font = { color: { argb: 'FF642AB5' } }; // Blue = Mitarbeiter
legendRow.getCell(5).font = { color: { argb: 'FF888888' } }; // Gray = Keine Schicht
legendRow.eachCell(cell => {
cell.alignment = { vertical: 'middle', horizontal: 'left' };
cell.font = { ...cell.font, italic: true };
});
/* -------------------------------------------------------------------------- */
/* 👥 3. Employee Overview Sheet */
/* -------------------------------------------------------------------------- */
const employeeSheet = workbook.addWorksheet('Mitarbeiterübersicht');
employeeSheet.columns = [
{ header: 'Name', key: 'name', width: 25 },
{ header: 'E-Mail', key: 'email', width: 25 },
{ header: 'Rolle', key: 'role', width: 18 },
{ header: 'Mitarbeiter Typ', key: 'type', width: 15 },
{ header: 'Vertragstyp', key: 'contract', width: 18 },
{ header: 'Trainee', key: 'trainee', width: 10 }
];
plan.employees?.forEach((e: any) =>
employeeSheet.addRow({
name: `${e.firstname} ${e.lastname}`,
email: e.email,
role: e.roles?.join(', ') || 'Benutzer',
type: e.employee_type || 'Unbekannt',
contract: e.contractType || 'Nicht angegeben',
trainee: e.isTrainee ? 'Ja' : 'Nein'
})
);
const empHeader = employeeSheet.getRow(1);
empHeader.font = { bold: true, color: { argb: 'FFFFFFFF' } };
empHeader.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF34495E' } };
empHeader.alignment = { horizontal: 'center', vertical: 'middle' };
/* -------------------------------------------------------------------------- */
/* 📤 4. Send Response */
/* -------------------------------------------------------------------------- */
const fileName = `Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.xlsx`;
res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
await workbook.xlsx.write(res);
console.log('✅ Excel export completed for plan:', id);
} catch (error) {
console.error('❌ Error exporting to Excel:', error);
res.status(500).json({ error: 'Internal server error during Excel export' });
}
};
export const exportShiftPlanToPDF = async (req: Request, res: Response): Promise<void> => {
try {
const { id } = req.params;
console.log('📄 Starting PDF export for plan:', id);
// Check if plan exists
const plan = await getShiftPlanById(id);
if (!plan) {
res.status(404).json({ error: 'Shift plan not found' });
return;
}
if (plan.status !== 'published') {
res.status(400).json({ error: 'Can only export published shift plans' });
return;
}
// Create PDF document
const doc = new PDFDocument({ margin: 50 });
// Set response headers
res.setHeader('Content-Type', 'application/pdf');
res.setHeader('Content-Disposition', `attachment; filename="Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.pdf"`);
// Pipe PDF to response
doc.pipe(res);
// Add title
doc.fontSize(20).font('Helvetica-Bold').text(`Schichtplan: ${plan.name}`, 50, 50);
doc.fontSize(12).font('Helvetica').text(`Erstellt am: ${new Date().toLocaleDateString('de-DE')}`, 50, 80);
// Plan summary
let yPosition = 120;
doc.fontSize(14).font('Helvetica-Bold').text('Plan Informationen', 50, yPosition);
yPosition += 30;
doc.fontSize(10).font('Helvetica');
doc.text(`Plan Name: ${plan.name}`, 50, yPosition);
yPosition += 20;
if (plan.description) {
doc.text(`Beschreibung: ${plan.description}`, 50, yPosition);
yPosition += 20;
}
doc.text(`Zeitraum: ${plan.startDate} bis ${plan.endDate}`, 50, yPosition);
yPosition += 20;
doc.text(`Status: ${plan.status}`, 50, yPosition);
yPosition += 20;
doc.text(`Erstellt von: ${plan.created_by_name || 'Unbekannt'}`, 50, yPosition);
yPosition += 20;
doc.text(`Erstellt am: ${plan.createdAt}`, 50, yPosition);
yPosition += 20;
doc.text(`Anzahl Schichten: ${plan.scheduledShifts?.length || 0}`, 50, yPosition);
yPosition += 20;
doc.text(`Anzahl Mitarbeiter: ${plan.employees?.length || 0}`, 50, yPosition);
yPosition += 40;
// Get timetable data for PDF
const timetableData = getTimetableDataForExport(plan);
const { days, allTimeSlots } = timetableData;
// Add timetable section
doc.addPage();
doc.fontSize(16).font('Helvetica-Bold').text('Schichtplan Timetable', 50, 50);
let currentY = 80;
// Define column widths
const timeSlotColWidth = 100;
const dayColWidth = (500 - timeSlotColWidth) / days.length;
// Table headers
doc.fontSize(10).font('Helvetica-Bold');
// Time slot header
doc.rect(50, currentY, timeSlotColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
doc.fillColor('white').text('Schicht (Zeit)', 55, currentY + 5, { width: timeSlotColWidth - 10, align: 'left' });
// Day headers
days.forEach((day, index) => {
const xPos = 50 + timeSlotColWidth + (index * dayColWidth);
doc.rect(xPos, currentY, dayColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
doc.fillColor('white').text(day.name, xPos + 5, currentY + 5, { width: dayColWidth - 10, align: 'center' });
});
doc.fillColor('black');
currentY += 20;
// Time slot rows
allTimeSlots.forEach((timeSlot, rowIndex) => {
// Check if we need a new page
if (currentY > 650) {
doc.addPage();
currentY = 50;
// Redraw headers on new page
doc.fontSize(10).font('Helvetica-Bold');
doc.rect(50, currentY, timeSlotColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
doc.fillColor('white').text('Schicht (Zeit)', 55, currentY + 5, { width: timeSlotColWidth - 10, align: 'left' });
days.forEach((day, index) => {
const xPos = 50 + timeSlotColWidth + (index * dayColWidth);
doc.rect(xPos, currentY, dayColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
doc.fillColor('white').text(day.name, xPos + 5, currentY + 5, { width: dayColWidth - 10, align: 'center' });
});
doc.fillColor('black');
currentY += 20;
}
// Alternate row background
const rowBgColor = rowIndex % 2 === 0 ? '#f8f9fa' : 'white';
// Time slot cell
doc.rect(50, currentY, timeSlotColWidth, 40).fillAndStroke(rowBgColor, '#dee2e6');
doc.fontSize(9).font('Helvetica-Bold').text(timeSlot.name, 55, currentY + 5, { width: timeSlotColWidth - 10 });
doc.fontSize(8).font('Helvetica').text(`${timeSlot.startTime} - ${timeSlot.endTime}`, 55, currentY + 18, { width: timeSlotColWidth - 10 });
// Day cells
days.forEach((day, colIndex) => {
const xPos = 50 + timeSlotColWidth + (colIndex * dayColWidth);
const shift = timeSlot.shiftsByDay[day.id];
doc.rect(xPos, currentY, dayColWidth, 40).fillAndStroke(rowBgColor, '#dee2e6');
if (!shift) {
doc.fontSize(8).font('Helvetica-Oblique').fillColor('#ccc').text('Keine Schicht', xPos + 5, currentY + 15, {
width: dayColWidth - 10,
align: 'center'
});
} else {
// Get assignments for this time slot and day
const scheduledShift = plan.scheduledShifts?.find((scheduled: any) => {
const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
return scheduledDayOfWeek === day.id &&
scheduled.timeSlotId === timeSlot.id;
});
doc.fillColor('black').fontSize(8).font('Helvetica');
if (scheduledShift && scheduledShift.assignedEmployees.length > 0) {
let textY = currentY + 5;
scheduledShift.assignedEmployees.forEach((empId: string, empIndex: number) => {
if (textY < currentY + 35) { // Don't overflow cell
const employee = plan.employees?.find((emp: any) => emp.id === empId);
if (employee) {
let roleIndicator = '';
if (employee.isTrainee) {
roleIndicator = ' (T)';
doc.fillColor('#cda8f0'); // Trainee color
} else if (employee.employee_type === 'manager') {
roleIndicator = ' (M)';
doc.fillColor('#CC0000'); // Manager color
} else {
doc.fillColor('#642ab5'); // Regular personnel color
}
const name = `${employee.firstname} ${employee.lastname}${roleIndicator}`;
doc.text(name, xPos + 5, textY, { width: dayColWidth - 10, align: 'left' });
textY += 10;
}
}
});
doc.fillColor('black');
} else {
// Show required count like in React component
const shiftsForSlot = plan.shifts?.filter((s: any) =>
s.dayOfWeek === day.id &&
s.timeSlotId === timeSlot.id
) || [];
const totalRequired = shiftsForSlot.reduce((sum: number, s: any) => sum + s.requiredEmployees, 0);
const displayText = totalRequired === 0 ? '-' : `0/${totalRequired}`;
doc.fillColor('#666').fontSize(9).font('Helvetica-Oblique')
.text(displayText, xPos + 5, currentY + 15, { width: dayColWidth - 10, align: 'center' });
doc.fillColor('black');
}
}
});
currentY += 40;
});
// Add employee overview page
doc.addPage();
doc.fontSize(16).font('Helvetica-Bold').text('Mitarbeiterübersicht', 50, 50);
currentY = 80;
// Table headers
doc.fontSize(10).font('Helvetica-Bold');
doc.text('Name', 50, currentY);
doc.text('E-Mail', 200, currentY);
doc.text('Rolle', 350, currentY);
doc.text('Typ', 450, currentY);
currentY += 15;
// Horizontal line
doc.moveTo(50, currentY).lineTo(550, currentY).stroke();
currentY += 10;
doc.fontSize(9).font('Helvetica');
plan.employees?.forEach((employee: any) => {
if (currentY > 700) {
doc.addPage();
currentY = 50;
// Re-add headers
doc.fontSize(10).font('Helvetica-Bold');
doc.text('Name', 50, currentY);
doc.text('E-Mail', 200, currentY);
doc.text('Rolle', 350, currentY);
doc.text('Typ', 450, currentY);
currentY += 25;
}
doc.text(`${employee.firstname} ${employee.lastname}`, 50, currentY);
doc.text(employee.email, 200, currentY, { width: 140 });
doc.text(employee.roles?.join(', ') || 'Benutzer', 350, currentY, { width: 90 });
doc.text(employee.employeeType, 450, currentY);
currentY += 20;
});
// Add footer to each page
const pages = doc.bufferedPageRange();
for (let i = 0; i < pages.count; i++) {
doc.switchToPage(i);
doc.fontSize(8).font('Helvetica');
doc.text(
`Seite ${i + 1} von ${pages.count} • Erstellt am: ${new Date().toLocaleString('de-DE')} • Schichtplaner System`,
50,
800,
{ align: 'center', width: 500 }
);
}
// Finalize PDF
doc.end();
console.log('✅ PDF export completed for plan:', id);
} catch (error) {
console.error('❌ Error exporting to PDF:', error);
res.status(500).json({ error: 'Internal server error during PDF export' });
}
};
// Helper function to get day of week from date string
function getDayOfWeek(dateString: string): number {
const date = new Date(dateString);
return date.getDay() === 0 ? 7 : date.getDay();
}
// Helper function to get German day names
function getGermanDayName(dayIndex: number): string {
const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
return days[dayIndex];
}

View File

@@ -7,7 +7,9 @@ import {
updateShiftPlan,
deleteShiftPlan,
createFromPreset,
clearAssignments
clearAssignments,
exportShiftPlanToExcel,
exportShiftPlanToPDF
} from '../controllers/shiftPlanController.js';
import {
validateShiftPlan,
@@ -30,4 +32,7 @@ router.put('/:id', validateId, validateShiftPlanUpdate, handleValidationErrors,
router.delete('/:id', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), deleteShiftPlan);
router.post('/:id/clear-assignments', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), clearAssignments);
router.get('/:id/export/excel', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), exportShiftPlanToExcel);
router.get('/:id/export/pdf', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), exportShiftPlanToPDF);
export default router;

View File

@@ -30,7 +30,6 @@
"framer-motion": "12.23.24",
"file-saver": "2.0.5",
"@types/file-saver": "2.0.5"
},
"scripts": {
"dev": "vite dev",