From c8be5e9fdcf1e08b5f77586191a5c23964d505d5 Mon Sep 17 00:00:00 2001 From: Thashlene <133075850+SelenatorXo@users.noreply.github.com> Date: Sat, 26 Oct 2024 22:25:33 +0200 Subject: [PATCH] Update SavedItineraries.js --- .../components/dashboard/SavedItineraries.js | 1004 +++-------------- 1 file changed, 180 insertions(+), 824 deletions(-) diff --git a/ai-trip-creator/src/components/dashboard/SavedItineraries.js b/ai-trip-creator/src/components/dashboard/SavedItineraries.js index a3df3e1..b15aba2 100644 --- a/ai-trip-creator/src/components/dashboard/SavedItineraries.js +++ b/ai-trip-creator/src/components/dashboard/SavedItineraries.js @@ -1,816 +1,3 @@ -// // // import React, { useState, useEffect } from "react"; -// // // import { -// // // Box, -// // // Typography, -// // // Card, -// // // CardContent, -// // // Container, -// // // Paper, -// // // Grid, -// // // Drawer, -// // // useTheme, -// // // useMediaQuery, -// // // CircularProgress, -// // // IconButton, -// // // } from "@mui/material"; -// // // import { Delete as DeleteIcon } from "@mui/icons-material"; -// // // import Sidebar from "./sidebar"; -// // // import { getAuth, onAuthStateChanged } from "firebase/auth"; -// // // import { collection, getDocs, query, where, doc, deleteDoc, collectionGroup } from "firebase/firestore"; -// // // import { db } from "../../firebase/firebase-config"; - -// // // const SavedItineraries = () => { -// // // const theme = useTheme(); -// // // const isSmUp = useMediaQuery(theme.breakpoints.up("sm")); -// // // const [userId, setUserId] = useState(null); -// // // const [itineraries, setItineraries] = useState([]); -// // // const [loading, setLoading] = useState(true); -// // // const [error, setError] = useState(""); - -// // // useEffect(() => { -// // // const auth = getAuth(); -// // // onAuthStateChanged(auth, async (user) => { -// // // if (user) { -// // // setUserId(user.uid); -// // // await fetchSavedItineraries(user.uid); -// // // } else { -// // // setLoading(false); -// // // setError("No user authenticated"); -// // // } -// // // }); -// // // }, []); - -// // // // Fetch itineraries from Firestore for the authenticated user -// // // const fetchSavedItineraries = async (uid) => { -// // // try { -// // // const itinerariesRef = collection(db, "ItineraryCollection"); -// // // const q = query(itinerariesRef, where("user_id", "==", uid)); -// // // const querySnapshot = await getDocs(q); - -// // // const fetchedItineraries = await Promise.all( -// // // querySnapshot.docs.map(async (doc) => { -// // // const itineraryData = doc.data(); - -// // // // Fetch the days sub-collection for each itinerary -// // // const daysRef = collection(doc.ref, "days"); -// // // const daysSnapshot = await getDocs(daysRef); -// // // const days = daysSnapshot.docs.map((dayDoc) => ({ -// // // id: dayDoc.id, -// // // ...dayDoc.data(), -// // // })); - -// // // return { -// // // id: doc.id, -// // // ...itineraryData, -// // // days, // Attach the fetched days -// // // }; -// // // }) -// // // ); - -// // // setItineraries(fetchedItineraries); // Set fetched itineraries -// // // } catch (error) { -// // // console.error("Error fetching itineraries: ", error); -// // // setError("Failed to load itineraries"); -// // // } finally { -// // // setLoading(false); -// // // } -// // // }; - -// // // // Delete itinerary from Firestore -// // // const deleteItinerary = async (itineraryId) => { -// // // try { -// // // const itineraryRef = doc(db, "ItineraryCollection", itineraryId); - -// // // // Fetch the 'days' sub-collection and delete each day -// // // const daysRef = collection(itineraryRef, "days"); -// // // const daysSnapshot = await getDocs(daysRef); -// // // const deletePromises = daysSnapshot.docs.map((dayDoc) => -// // // deleteDoc(dayDoc.ref) -// // // ); - -// // // // Wait for all the day documents to be deleted -// // // await Promise.all(deletePromises); - -// // // // Finally, delete the main itinerary document -// // // await deleteDoc(itineraryRef); - -// // // // Update state after deletion -// // // setItineraries((prevItineraries) => -// // // prevItineraries.filter((itinerary) => itinerary.id !== itineraryId) -// // // ); -// // // } catch (error) { -// // // console.error("Error deleting itinerary: ", error); -// // // setError("Failed to delete itinerary"); -// // // } -// // // }; - -// // // return ( -// // // -// // // {/* Sidebar */} -// // // -// // // -// // // - -// // // {/* Main Content */} -// // // -// // // -// // //

Saved Itineraries

- -// // // {loading ? ( -// // // -// // // -// // // -// // // ) : error ? ( -// // // {error} -// // // ) : itineraries.length === 0 ? ( -// // // You don't have any saved itineraries yet. -// // // ) : ( -// // // -// // // {itineraries.map((itinerary) => ( -// // // -// // // -// // // -// // // -// // // -// // // -// // // {itinerary.itineraryName} -// // // -// // // deleteItinerary(itinerary.id)} -// // // color="error" -// // // > -// // // -// // // -// // // - -// // // -// // // Destination: {itinerary.destination} -// // // - -// // // {/* Budget Check: If it's an array, display as a range */} -// // // -// // // Budget:{" "} -// // // {Array.isArray(itinerary.budget) -// // // ? `${itinerary.budget[0]} - ${itinerary.budget[1]} ZAR` -// // // : `${itinerary.budget} ZAR`} -// // // - -// // // -// // // Number of Days: {itinerary.numDays} -// // // - -// // // -// // // Day-by-Day Details: -// // // {/* Display each day */} -// // // {itinerary.days && itinerary.days.length > 0 ? ( -// // // itinerary.days.map((day, index) => ( -// // //
-// // // -// // // Day {day.dayNumber} -// // // - -// // // {/* Flights */} -// // // {day.flights && day.flights.length > 0 && ( -// // // <> -// // // -// // // Flights: -// // // -// // // {day.flights.map((flight, flightIndex) => ( -// // //
  • -// // // {flight.flightNumber} - Departs:{" "} -// // // {flight.departure}, Arrives:{" "} -// // // {flight.arrival} -// // //
    • -// // // ))} -// // // -// // // )} - -// // // {/* Accommodations */} -// // // {day.accommodation && -// // // day.accommodation.length > 0 && ( -// // // <> -// // // -// // // Accommodation: -// // // -// // // {day.accommodation.map( -// // // (acc, accIndex) => ( -// // //
  • -// // // {acc.name} - Check-in:{" "} -// // // {acc.checkin || "N/A"}, Checkout:{" "} -// // // {acc.checkout || "N/A"} -// // //
    • -// // // ) -// // // )} -// // // -// // // )} - -// // // {/* Activities */} -// // // {day.activities && -// // // day.activities.length > 0 && ( -// // // <> -// // // -// // // Activities: -// // // -// // // {day.activities.map( -// // // (activity, actIndex) => ( -// // //
  • -// // // {activity.name} at {activity.time} -// // //
    • -// // // ) -// // // )} -// // // -// // // )} -// // //
    -// // // )) -// // // ) : ( -// // // No days available -// // // )} -// // //     -// // //     -// // //     -// // //     -// // //     -// // // ))} -// // //     -// // // )} -// // //     -// // //     -// // //     -// // // ); -// // // }; - -// // // export default SavedItineraries; - -// // import React, { useState, useEffect } from "react" -// // import { -// // Box, -// // Typography, -// // Card, -// // CardContent, -// // Container, -// // Grid, -// // Drawer, -// // useTheme, -// // useMediaQuery, -// // CircularProgress, -// // IconButton, -// // Chip, -// // Divider, -// // List, -// // ListItem, -// // ListItemText, -// // ListItemIcon, -// // Accordion, -// // AccordionSummary, -// // AccordionDetails, -// // } from "@mui/material" -// // import { -// // Delete as DeleteIcon, -// // ExpandMore as ExpandMoreIcon, -// // Flight as FlightIcon, -// // Hotel as HotelIcon, -// // EventNote as EventNoteIcon, -// // AttachMoney as AttachMoneyIcon, -// // LocationOn as LocationOnIcon, -// // Today as TodayIcon, -// // } from "@mui/icons-material" -// // import Sidebar from "./sidebar" -// // import { getAuth, onAuthStateChanged } from "firebase/auth" -// // import { collection, getDocs, query, where, doc, deleteDoc } from "firebase/firestore" -// // import { db } from "../../firebase/firebase-config" - -// // export default function Component() { -// // const theme = useTheme() -// // const isSmUp = useMediaQuery(theme.breakpoints.up("sm")) -// // const [userId, setUserId] = useState(null) -// // const [itineraries, setItineraries] = useState([]) -// // const [loading, setLoading] = useState(true) -// // const [error, setError] = useState("") - -// // useEffect(() => { -// // const auth = getAuth() -// // onAuthStateChanged(auth, async (user) => { -// // if (user) { -// // setUserId(user.uid) -// // await fetchSavedItineraries(user.uid) -// // } else { -// // setLoading(false) -// // setError("No user authenticated") -// // } -// // }) -// // }, []) - -// // const fetchSavedItineraries = async (uid) => { -// // try { -// // const itinerariesRef = collection(db, "ItineraryCollection") -// // const q = query(itinerariesRef, where("user_id", "==", uid)) -// // const querySnapshot = await getDocs(q) - -// // const fetchedItineraries = await Promise.all( -// // querySnapshot.docs.map(async (doc) => { -// // const itineraryData = doc.data() -// // const daysRef = collection(doc.ref, "days") -// // const daysSnapshot = await getDocs(daysRef) -// // const days = daysSnapshot.docs.map((dayDoc) => ({ -// // id: dayDoc.id, -// // ...dayDoc.data(), -// // })) - -// // return { -// // id: doc.id, -// // ...itineraryData, -// // days, -// // } -// // }) -// // ) - -// // setItineraries(fetchedItineraries) -// // } catch (error) { -// // console.error("Error fetching itineraries: ", error) -// // setError("Failed to load itineraries") -// // } finally { -// // setLoading(false) -// // } -// // } - -// // const deleteItinerary = async (itineraryId) => { -// // try { -// // const itineraryRef = doc(db, "ItineraryCollection", itineraryId) -// // const daysRef = collection(itineraryRef, "days") -// // const daysSnapshot = await getDocs(daysRef) -// // const deletePromises = daysSnapshot.docs.map((dayDoc) => -// // deleteDoc(dayDoc.ref) -// // ) -// // await Promise.all(deletePromises) -// // await deleteDoc(itineraryRef) -// // setItineraries((prevItineraries) => -// // prevItineraries.filter((itinerary) => itinerary.id !== itineraryId) -// // ) -// // } catch (error) { -// // console.error("Error deleting itinerary: ", error) -// // setError("Failed to delete itinerary") -// // } -// // } - -// // return ( -// // -// // -// // -// // - -// // -// // -// // -// // Saved Itineraries -// // - -// // {loading ? ( -// // -// // -// // -// // ) : error ? ( -// // {error} -// // ) : itineraries.length === 0 ? ( -// // You don't have any saved itineraries yet. -// // ) : ( -// // -// // {itineraries.map((itinerary) => ( -// // -// // -// // -// // -// // -// // {itinerary.itineraryName} -// // -// // deleteItinerary(itinerary.id)} -// // color="error" -// // size="small" -// // className="transition-colors duration-200 ease-in-out hover:bg-red-100" -// // > -// // -// // -// // - -// // -// // -// // } -// // label={itinerary.destination} -// // className="w-full bg-blue-50 text-blue-700 border border-blue-200" -// // /> -// // -// // -// // } -// // label={`Budget: ${Array.isArray(itinerary.budget) ? `${itinerary.budget[0]} - ${itinerary.budget[1]}` : itinerary.budget} ZAR`} -// // className="w-full bg-green-50 text-green-700 border border-green-200" -// // /> -// // -// // -// // } -// // label={`${itinerary.numDays} Days`} -// // className="w-full bg-purple-50 text-purple-700 border border-purple-200" -// // /> -// // -// // - -// // - -// // {itinerary.days && itinerary.days.length > 0 ? ( -// // itinerary.days.map((day, index) => ( -// // -// // } -// // className="bg-gray-50 hover:bg-gray-100 transition-colors duration-200 ease-in-out" -// // > -// // Day {day.dayNumber} -// // -// // -// // -// // {day.flights && day.flights.length > 0 && ( -// // -// // -// // -// // -// // ( -// // -// // {flight.flightNumber} - Departs: {flight.departure}, Arrives: {flight.arrival} -// // -// // ))} -// // /> -// // -// // )} - -// // {day.accommodation && day.accommodation.length > 0 && ( -// // -// // -// // -// // -// // ( -// // -// // {acc.name} - Check-in: {acc.checkin || "N/A"}, Checkout: {acc.checkout || "N/A"} -// // -// // ))} -// // /> -// // -// // )} - -// // {day.activities && day.activities.length > 0 && ( -// // -// // -// // -// // -// // ( -// // -// // {activity.name} at {activity.time} -// // -// // ))} -// // /> -// // -// // )} -// // -// // -// // -// // )) -// // ) : ( -// // No days available -// // )} -// // -// // -// // -// // ))} -// // -// // )} -// // -// // -// // -// // ) -// // } -// import React, { useState, useEffect } from "react" -// import { -// Box, -// Typography, -// Card, -// CardContent, -// Container, -// Grid, -// Drawer, -// useTheme, -// useMediaQuery, -// CircularProgress, -// IconButton, -// Chip, -// List, -// ListItem, -// ListItemText, -// ListItemIcon, -// Avatar, -// } from "@mui/material" -// import { -// Delete as DeleteIcon, -// Flight as FlightIcon, -// Hotel as HotelIcon, -// EventNote as EventNoteIcon, -// AttachMoney as AttachMoneyIcon, -// LocationOn as LocationOnIcon, -// Today as TodayIcon, -// Explore as ExploreIcon, -// } from "@mui/icons-material" -// import { motion, AnimatePresence } from "framer-motion" -// import Sidebar from "./sidebar" -// import { getAuth, onAuthStateChanged } from "firebase/auth" -// import { collection, getDocs, query, where, doc, deleteDoc } from "firebase/firestore" -// import { db } from "../../firebase/firebase-config" - -// export default function Component() { -// const theme = useTheme() -// const isSmUp = useMediaQuery(theme.breakpoints.up("sm")) -// const [userId, setUserId] = useState(null) -// const [itineraries, setItineraries] = useState([]) -// const [loading, setLoading] = useState(true) -// const [error, setError] = useState("") - -// useEffect(() => { -// const auth = getAuth() -// onAuthStateChanged(auth, async (user) => { -// if (user) { -// setUserId(user.uid) -// await fetchSavedItineraries(user.uid) -// } else { -// setLoading(false) -// setError("No user authenticated") -// } -// }) -// }, []) - -// const fetchSavedItineraries = async (uid) => { -// try { -// const itinerariesRef = collection(db, "ItineraryCollection") -// const q = query(itinerariesRef, where("user_id", "==", uid)) -// const querySnapshot = await getDocs(q) - -// const fetchedItineraries = await Promise.all( -// querySnapshot.docs.map(async (doc) => { -// const itineraryData = doc.data() -// const daysRef = collection(doc.ref, "days") -// const daysSnapshot = await getDocs(daysRef) -// const days = daysSnapshot.docs.map((dayDoc) => ({ -// id: dayDoc.id, -// ...dayDoc.data(), -// })) - -// return { -// id: doc.id, -// ...itineraryData, -// days, -// } -// }) -// ) - -// setItineraries(fetchedItineraries) -// } catch (error) { -// console.error("Error fetching itineraries: ", error) -// setError("Failed to load itineraries") -// } finally { -// setLoading(false) -// } -// } - -// const deleteItinerary = async (itineraryId) => { -// try { -// const itineraryRef = doc(db, "ItineraryCollection", itineraryId) -// const daysRef = collection(itineraryRef, "days") -// const daysSnapshot = await getDocs(daysRef) -// const deletePromises = daysSnapshot.docs.map((dayDoc) => -// deleteDoc(dayDoc.ref) -// ) -// await Promise.all(deletePromises) -// await deleteDoc(itineraryRef) -// setItineraries((prevItineraries) => -// prevItineraries.filter((itinerary) => itinerary.id !== itineraryId) -// ) -// } catch (error) { -// console.error("Error deleting itinerary: ", error) -// setError("Failed to delete itinerary") -// } -// } - -// return ( -// -// -// -// - -// -// -// -// -// Your Adventures Await -// -// - -// {loading ? ( -// -// -// -// ) : error ? ( -// {error} -// ) : itineraries.length === 0 ? ( -// You don't have any saved itineraries yet. Start planning your next adventure! -// ) : ( -// -// -// {itineraries.map((itinerary) => ( -// -// -// -// -// -// -// {itinerary.itineraryName} -// -// deleteItinerary(itinerary.id)} -// size="small" -// className="bg-red-500 bg-opacity-50 hover:bg-opacity-75 transition-all duration-300" -// > -// -// -// - -// -// -// } -// label={itinerary.destination} -// className="w-full bg-blue-500 bg-opacity-50 text-white border border-blue-300 border-opacity-50 shadow-md" -// /> -// -// -// } -// label={`Budget: ${Array.isArray(itinerary.budget) ? `${itinerary.budget[0]} - ${itinerary.budget[1]}` : itinerary.budget} ZAR`} -// className="w-full bg-green-500 bg-opacity-50 text-white border border-green-300 border-opacity-50 shadow-md" -// /> -// -// -// } -// label={`${itinerary.numDays} Days`} -// className="w-full bg-yellow-500 bg-opacity-50 text-white border border-yellow-300 border-opacity-50 shadow-md" -// /> -// -// - -// {itinerary.days && itinerary.days.length > 0 ? ( -// itinerary.days.map((day, index) => ( -// -// -// -// -// -// -// -// Day {day.dayNumber} -// -// -// {day.flights && day.flights.length > 0 && ( -// -// -// -// -// Flights} -// secondary={ -// -// {day.flights.map((flight, flightIndex) => ( -// -// {flight.flightNumber} - Departs: {flight.departure}, Arrives: {flight.arrival} -// -// ))} -// -// } -// /> -// -// )} - -// {day.accommodation && day.accommodation.length > 0 && ( -// -// -// -// -// Accommodation} -// secondary={ -// -// {day.accommodation.map((acc, accIndex) => ( -// -// {acc.name} - Check-in: {acc.checkin || "N/A"}, Checkout: {acc.checkout || "N/A"} -// -// ))} -// -// } -// /> -// -// )} - -// {day.activities && day.activities.length > 0 && ( -// -// -// -// -// Activities} -// secondary={ -// -// {day.activities.map((activity, actIndex) => ( -// -// {activity.name} at {activity.time} -// -// ))} -// -// } -// /> -// -// )} -// -// -// -// -// )) -// ) : ( -// No days available -// )} -// -// -// -// -// ))} -// -// -// )} -// -// -// -// ) -// } - import React, { useState, useEffect } from "react" import { Box, @@ -829,9 +16,11 @@ import { ListItemText, ListItemIcon, Avatar, + Button, } from "@mui/material" import { Delete as DeleteIcon, + Download as DownloadIcon, Flight as FlightIcon, Hotel as HotelIcon, EventNote as EventNoteIcon, @@ -841,7 +30,7 @@ import { Explore as ExploreIcon, } from "@mui/icons-material" import { motion, AnimatePresence } from "framer-motion" -import Sidebar from "./sidebar" +import Sidebar from "./sidebar" import { getAuth, onAuthStateChanged } from "firebase/auth" import { collection, getDocs, query, where, doc, deleteDoc } from "firebase/firestore" import { db } from "../../firebase/firebase-config" @@ -849,6 +38,8 @@ import { styled } from "@mui/system" import { keyframes } from "@emotion/react" import Lottie from "react-lottie" // import travelAnimation from "./travelAnimation.mp4" +import jsPDF from "jspdf"; +import "jspdf-autotable"; const gradientAnimation = keyframes` 0% { @@ -891,7 +82,7 @@ const ColorfulChip = styled(Box)(({ color }) => ({ margin: "4px", })) -export default function Component() { +const SavedItineraries = () => { const theme = useTheme() const isSmUp = useMediaQuery(theme.breakpoints.up("sm")) const [userId, setUserId] = useState(null) @@ -973,9 +164,163 @@ export default function Component() { } } + const primaryColor = "#3498db" + const secondaryColor = "#2c3e50" + const accentColor = "#e74c3c" + + const addBackground = (doc) => { + doc.setFillColor(245, 245, 245) + doc.rect(0, 0, doc.internal.pageSize.width, doc.internal.pageSize.height, 'F') + + // Add a decorative shape + doc.setFillColor(primaryColor) + doc.circle(doc.internal.pageSize.width - 20, 20, 10, 'F') + } + + const addHeader = (doc, title) => { + doc.setFont("helvetica", "bold") + doc.setFontSize(24) + doc.setTextColor(secondaryColor) + doc.text(title, 20, 30) + + doc.setDrawColor(primaryColor) + doc.setLineWidth(0.5) + doc.line(20, 35, doc.internal.pageSize.width - 20, 35) + } + + const addFooter = (doc) => { + const pageCount = doc.internal.getNumberOfPages() + doc.setFont("helvetica", "normal") + doc.setFontSize(10) + doc.setTextColor(100) + for (let i = 1; i <= pageCount; i++) { + doc.setPage(i) + doc.text(`Page ${i} of ${pageCount}`, doc.internal.pageSize.width / 2, doc.internal.pageSize.height - 10, { align: "center" }) + } + } + + const addSectionHeading = (doc, text, yPosition) => { + doc.setFont("helvetica", "bold") + doc.setFontSize(16) + doc.setTextColor(primaryColor) + doc.text(text, 20, yPosition) + + // Add an icon (you can replace this with actual icons) + doc.setFont("helvetica", "normal") + doc.setFontSize(14) + doc.text("•", 15, yPosition) + } + + // const addContentBlock = (doc, label, content, yPosition) => { + // doc.setFont("helvetica", "bold") + // doc.setFontSize(12) + // doc.setTextColor(secondaryColor) + // doc.text(`${label}:`, 25, yPosition) + + // doc.setFont("helvetica", "normal") + // doc.setTextColor(0) + // doc.text(content, 25 + doc.getTextWidth(`${label}: `), yPosition) + // } + + const addContentBlock = (doc, label, content, yPosition) => { + const labelWidth = doc.getTextWidth(`${label}:`) + const contentStartX = 20 + labelWidth + 5 // Add some space between label and content + doc.setFontSize(12) + doc.setTextColor(0, 0, 0) + + // Draw the label and content separately to control spacing + doc.text(`${label}:`, 20, yPosition) + doc.text(content, contentStartX, yPosition) // Content starts after the label + } + + + // Generate a professional PDF for itinerary + const generatePDF = (itinerary) => { + const doc = new jsPDF() + + // Add background and header to first page + addBackground(doc) + addHeader(doc, itinerary.itineraryName) + + let y = 50 + + // Add General Information + addSectionHeading(doc, "General Information", y) + y += 10 + addContentBlock(doc, "Destination", itinerary.destination, y) + y += 8 + addContentBlock(doc, "Budget", `${itinerary.budget} ZAR`, y) + y += 8 + addContentBlock(doc, "Number of Days", itinerary.numDays.toString(), y) + y += 20 + + // Loop through each day and add details + itinerary.days.forEach((day, dayIndex) => { + // Add day heading + addSectionHeading(doc, `Day ${day.dayNumber}`, y) + y += 10 + + // Create a table for the day's details + const tableBody = [] + + // Add flight details + if (day.flights && day.flights.length > 0) { + day.flights.forEach((flight, flightIndex) => { + tableBody.push([`Flight ${flightIndex + 1}`, `${flight.flightNumber} - Departs: ${flight.departure}, Arrives: ${flight.arrival}`]) + }) + } + + // Add accommodation details + if (day.accommodation && day.accommodation.length > 0) { + day.accommodation.forEach((acc, accIndex) => { + tableBody.push([`Accommodation ${accIndex + 1}`, `${acc.name} - Check-in: ${acc.checkin || "N/A"}, Checkout: ${acc.checkout || "N/A"}`]) + }) + } + + // Add activity details + if (day.activities && day.activities.length > 0) { + day.activities.forEach((activity, actIndex) => { + tableBody.push([`Activity ${actIndex + 1}`, `${activity.name} at ${activity.time}`]) + }) + } + + // Add the table + doc.autoTable({ + startY: y, + head: [['Type', 'Details']], + body: tableBody, + theme: 'striped', + headStyles: { fillColor: [primaryColor], textColor: [255] }, + bodyStyles: { fillColor: [255], textColor: [0] }, + alternateRowStyles: { fillColor: [240, 240, 240] }, + margin: { left: 25 }, + columnStyles: { + 0: { cellWidth: 40 }, + 1: { cellWidth: 'auto' } + } + }) + + y = doc.lastAutoTable.finalY + 15 + + // Add a new page if close to the bottom + if (y > 270) { + doc.addPage() + addBackground(doc) + y = 20 // Reset y position for the new page + } + }) + + // Add footer + addFooter(doc) + + // Save the PDF + doc.save(`${itinerary.itineraryName}.pdf`) + } + + return ( - + - + -

    Saved Itineraries

    +

    Saved Itineraries

    {/* - Your Magical Adventures - */} - + Your Magical Adventures + */} + {loading ? ( @@ -1062,8 +407,8 @@ export default function Component() { - - + + Day {day.dayNumber} @@ -1135,6 +480,15 @@ export default function Component() { ) : ( No days available )} + @@ -1147,4 +501,6 @@ export default function Component() {     ) -} \ No newline at end of file +} + +export default SavedItineraries;