From 632f37cb1671d54a6776ea13c5a2d48e789b322a Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Tue, 28 May 2024 15:48:50 +0530
Subject: [PATCH 01/24] feat:Generating a PDF with booking overview #942

---
 app/components/booking/actions-dropdown.tsx   |   6 +-
 .../booking/generate-booking-pdf.tsx          | 125 +++
 app/modules/qr/service.server.ts              |  39 +
 ...bookingId.generate-pdf.$fileName[.pdf].tsx | 275 +++++++
 app/views/booking-assets-template.ejs         | 218 +++++
 package-lock.json                             | 776 +++++++++++++++++-
 package.json                                  |   3 +
 7 files changed, 1406 insertions(+), 36 deletions(-)
 create mode 100644 app/components/booking/generate-booking-pdf.tsx
 create mode 100644 app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
 create mode 100644 app/views/booking-assets-template.ejs

diff --git a/app/components/booking/actions-dropdown.tsx b/app/components/booking/actions-dropdown.tsx
index 541eaa3e5..281857ba2 100644
--- a/app/components/booking/actions-dropdown.tsx
+++ b/app/components/booking/actions-dropdown.tsx
@@ -1,4 +1,5 @@
-import { useLoaderData, useSubmit } from "@remix-run/react";
+import { useLoaderData, useSubmit, useLocation } from "@remix-run/react";
+import { Divider } from "@tremor/react";
 import { ChevronRight } from "~/components/icons/library";
 import {
   DropdownMenu,
@@ -12,6 +13,7 @@ import { useUserIsSelfService } from "~/hooks/user-user-is-self-service";
 import type { loader } from "~/routes/_layout+/bookings.$bookingId";
 import { tw } from "~/utils/tw";
 import { DeleteBooking } from "./delete-booking";
+import { GenerateBookingPdf } from "./generate-booking-pdf";
 import { Button } from "../shared/button";
 
 interface Props {
@@ -104,6 +106,8 @@ export const ActionsDropdown = ({ fullWidth }: Props) => {
           {(isSelfService && isDraft) || !isSelfService ? (
             <DeleteBooking booking={booking} />
           ) : null}
+          <Divider className="my-2" />
+          {<GenerateBookingPdf booking={booking} />}
         </DropdownMenuContent>
       </DropdownMenuPortal>
     </DropdownMenu>
diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
new file mode 100644
index 000000000..98b26ec87
--- /dev/null
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -0,0 +1,125 @@
+import { useEffect, useState } from "react";
+import { Button } from "~/components/shared/button";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "~/components/shared/modal";
+import { Spinner } from "../shared/spinner";
+
+export const GenerateBookingPdf = ({ booking }: { booking: any }) => {
+  const [url, setUrl] = useState("");
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    setIframeLoaded(false);
+    if (booking && booking?.assets?.length) {
+      const timestamp = new Date().getTime();
+      setUrl(
+        `/bookings/${booking.id}/generate-pdf/${
+          booking.name || "booking-assets"
+        }-${new Date().toISOString().slice(0, 10)}.pdf?timeStamp=${timestamp}`
+      );
+    } else {
+      setErrorMessage("No assets available to generate PDF.");
+    }
+  }, [booking, booking?.assets]);
+
+  useEffect(() => {
+    const isMobileDevice = /Mobi/.test(navigator.userAgent);
+    setIsMobile(isMobileDevice);
+  }, []);
+
+  const handleIframeLoad = () => {
+    setIframeLoaded(true);
+  };
+
+  const handleMobileView = () => {
+    window.location.href = url;
+  };
+
+  return (
+    <>
+      {!isMobile ? (
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button
+              variant="link"
+              className="justify-start rounded-sm px-2 py-1.5 text-sm font-medium text-gray-700 outline-none hover:bg-slate-100 hover:text-gray-700 disabled:pointer-events-none disabled:opacity-50"
+              width="full"
+              name="generate pdf"
+              disabled={!booking?.assets?.length}
+            >
+              Generate PDF...
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              {/* {icon changes} */}
+              {/* <div className="mx-auto md:m-0">
+            <span className="flex size-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
+              
+            </span>
+          </div> */}
+              <AlertDialogTitle>
+                Generate Booking Checklist PDF for {booking?.name}
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                {errorMessage ||
+                  "You can either preview the PDF or download it."}
+                {!iframeLoaded && (
+                  <div className="h-500 m-4 flex flex-1 flex-col items-center justify-center text-center">
+                    <Spinner />
+                    <p className="mt-2">Generating PDF...</p>
+                  </div>
+                )}
+                {booking?.assets?.length && (
+                  <div style={{ display: iframeLoaded ? "block" : "none" }}>
+                    <iframe
+                      id="pdfPreview"
+                      width="100%"
+                      height="500px"
+                      onLoad={handleIframeLoad}
+                      className="mt-4"
+                      src={url}
+                      title="Booking PDF"
+                      allowFullScreen={true}
+                    />
+                  </div>
+                )}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <div className="flex justify-center gap-2">
+                {/* <Button to={url} variant="secondary" role="link" download={true} reloadDocument={true} disabled={!iframeLoaded}>
+              Download PDF
+            </Button> */}
+                <AlertDialogCancel asChild>
+                  <Button variant="secondary">Cancel</Button>
+                </AlertDialogCancel>
+              </div>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      ) : (
+        <Button
+          variant="link"
+          className="justify-start rounded-sm px-2 py-1.5 text-sm font-medium text-gray-700 outline-none hover:bg-slate-100 hover:text-gray-700 disabled:pointer-events-none disabled:opacity-50"
+          width="full"
+          name="generate pdf"
+          disabled={!booking?.assets?.length}
+          onClick={handleMobileView}
+        >
+          Generate PDF...
+        </Button>
+      )}
+    </>
+  );
+};
diff --git a/app/modules/qr/service.server.ts b/app/modules/qr/service.server.ts
index e4cdb038f..fc7e57b9e 100644
--- a/app/modules/qr/service.server.ts
+++ b/app/modules/qr/service.server.ts
@@ -1,4 +1,5 @@
 import type {
+  Asset,
   Organization,
   PrintBatch,
   Prisma,
@@ -436,3 +437,41 @@ export async function claimQrCode({
     });
   }
 }
+
+export async function getQrCodeMaps({
+  assets,
+  userId,
+  organizationId,
+  size,
+}: {
+  assets: Asset[];
+  organizationId: string;
+  userId: string;
+  size: "small" | "medium" | "large" | "cable";
+}) {
+  try {
+    return await Promise.all(
+      assets?.map(async ({ id: assetId }) => {
+        try {
+          let qr = await getQrByAssetId({ assetId });
+
+          if (!qr) {
+            qr = await createQr({ assetId, userId, organizationId });
+          }
+
+          const { code } = await generateCode({
+            version: qr.version as TypeNumber,
+            errorCorrection: qr.errorCorrection as ErrorCorrectionLevel,
+            size,
+            qr,
+          });
+          return code.src ? [assetId, code] : null;
+        } catch (error) {
+          return null;
+        }
+      })
+    );
+  } catch (err) {
+    return null;
+  }
+}
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
new file mode 100644
index 000000000..085cfcf3a
--- /dev/null
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -0,0 +1,275 @@
+import fs from "fs/promises";
+import path from "path";
+import { OrganizationRoles } from "@prisma/client";
+import { json, redirect } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import * as ejs from "ejs";
+import puppeteer from "puppeteer";
+import { z } from "zod";
+import { db } from "~/database/db.server";
+import { getBooking } from "~/modules/booking/service.server";
+import { setSelectedOrganizationIdCookie } from "~/modules/organization/context.server";
+import { getQrCodeMaps } from "~/modules/qr/service.server";
+import {
+  setCookie,
+  updateCookieWithPerPage,
+  userPrefs,
+} from "~/utils/cookies.server";
+import { ShelfError, makeShelfError } from "~/utils/error";
+
+import { error, getCurrentSearchParams, getParams } from "~/utils/http.server";
+import { getParamsValues } from "~/utils/list";
+import {
+  PermissionAction,
+  PermissionEntity,
+} from "~/utils/permissions/permission.validator.server";
+import { requirePermission } from "~/utils/roles.server";
+
+interface Item {
+  name: string;
+  category: string;
+  location: string;
+  code: string;
+  mainImage: string;
+}
+
+interface Data {
+  booking: string;
+  name: string;
+  custodian: string;
+  bookingPeriod: string;
+  items: Item[];
+  orgName: string;
+}
+
+const getCustomHeader = (base64Image?: string, bookName?: string) => `
+      <style>
+          .header {
+              font-size: 10px;
+              text-align: right;
+              width: 100%;
+              padding: 0 20px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              box-sizing: border-box;
+              margin-bottom:30px;
+          }
+          .header img {
+              height: 40px;
+              width: 40px;
+              object-fit: cover
+          }
+          .header .text {
+              text-align: right;
+              color: rgba(0, 0, 0, 0.6);
+          }
+      </style>
+      <div class="header">
+          <img src="${base64Image}" alt="logo">
+          <span class="text">${
+            bookName || ""
+          } | 04/30/2024 | Page <span class="pageNumber"></span>/<span class="totalPages"></span></span>
+      </div>
+  `;
+
+export const loader = async ({
+  context,
+  request,
+  params,
+}: LoaderFunctionArgs) => {
+  const authSession = context.getSession();
+  const { userId } = authSession;
+  const { bookingId } = getParams(
+    params,
+    z.object({
+      bookingId: z.string(),
+    }),
+    {
+      additionalData: { userId },
+    }
+  );
+
+  try {
+    const { organizationId, role } = await requirePermission({
+      userId: authSession?.userId,
+      request,
+      entity: PermissionEntity.booking,
+      action: PermissionAction.read,
+    });
+
+    const searchParams = getCurrentSearchParams(request);
+    /**
+     * If the org id in the params is different than the current organization id,
+     * we need to redirect and set the organization id in the cookie
+     * This is useful when the user is viewing a booking from a different organization that they are part of after clicking link in email
+     */
+    const orgId = searchParams.get("orgId");
+    if (orgId && orgId !== organizationId) {
+      return redirect(`/bookings/${bookingId}`, {
+        headers: [setCookie(await setSelectedOrganizationIdCookie(orgId))],
+      });
+    }
+
+    const isSelfService = role === OrganizationRoles.SELF_SERVICE;
+    const booking = await getBooking({
+      id: bookingId,
+      organizationId: organizationId,
+    });
+
+    /** For self service users, we only allow them to read their own bookings */
+    if (isSelfService && booking.custodianUserId !== authSession.userId) {
+      throw new ShelfError({
+        cause: null,
+        message: "You are not authorized to view this booking",
+        status: 403,
+        label: "Booking",
+        shouldBeCaptured: false,
+      });
+    }
+
+    const [org, assets] = await Promise.all([
+      /** We create a teamMember entry to represent the org owner.
+       * Most important thing is passing the ID of the owner as the userId as we are currently only supporting
+       * assigning custody to users, not NRM.
+       */
+      db.organization.findUnique({
+        where: {
+          id: organizationId,
+        },
+        select: {
+          owner: true,
+          imageId: true,
+          name: true,
+          id: true,
+          image: true,
+        },
+      }),
+      /**
+       * We need to do this in a separate query because we need to filter the bookings within an asset based on the booking.from and booking.to
+       * That way we know if the asset is available or not because we can see if they are booked for the same period
+       */
+      db.asset.findMany({
+        where: {
+          id: {
+            in: booking?.assets.map((a) => a.id) || [],
+          },
+        },
+        include: {
+          category: true,
+          custody: true,
+          qrCodes: true,
+          location: true,
+          bookings: {
+            where: {
+              // id: { not: booking.id },
+              ...(booking.from && booking.to
+                ? {
+                    status: { in: ["RESERVED", "ONGOING", "OVERDUE"] },
+                    OR: [
+                      {
+                        from: { lte: booking.to },
+                        to: { gte: booking.from },
+                      },
+                      {
+                        from: { gte: booking.from },
+                        to: { lte: booking.to },
+                      },
+                    ],
+                  }
+                : {}),
+            },
+          },
+        },
+      }),
+    ]);
+
+    /** We replace the assets ids in the booking object with the assets fetched in the separate request.
+     * This is useful for more consistent data in the front-end */
+    booking.assets = assets
+
+    const { perPageParam } = getParamsValues(searchParams);
+    const cookie = await updateCookieWithPerPage(request, perPageParam);
+    const qrData = (await getQrCodeMaps({
+      assets,
+      userId,
+      organizationId,
+      size: "small",
+    })) as Array<any>;
+
+    const qrCodesMap = qrData?.reduce((obj, [key, value]) => {
+      if (key) {
+        obj[key] = value;
+      }
+      return obj;
+    }, {});
+
+    const cookieData = await userPrefs.serialize(cookie);
+    const data: Data = {
+      booking: `Booking Checklist for ${booking.name}`,
+      name: booking.name ?? "",
+      orgName: org?.name ?? "",
+      custodian: `${booking?.custodianUser?.firstName ?? ""} ${
+        booking?.custodianUser?.lastName ?? ""
+      } <${booking?.custodianUser?.email ?? ""}>`,
+      bookingPeriod:
+        booking?.from && booking?.to
+          ? `${new Date(booking.from).toLocaleString()} - ${new Date(
+              booking.to
+            ).toLocaleString()}`
+          : "",
+      items: assets?.map(
+        (asset) => ({
+          name: asset.title ?? "",
+          category: asset?.category?.name ?? "",
+          location: asset?.location ? asset?.location?.name ?? "" : "",
+          code: qrCodesMap?.[asset.id]?.src || "",
+          mainImage: asset?.mainImage || "",
+        })
+      ),
+    };
+
+    // Generate PDF using Puppeteer
+    const templatePath = path.resolve(
+      process.cwd(),
+      "./app/views/booking-assets-template.ejs"
+    );
+    const template = await fs.readFile(templatePath, "utf-8");
+    const htmlContent = ejs.render(template, data);
+
+    // Generate PDF using Puppeteer
+    const browser = await puppeteer.launch();
+    const newPage = await browser.newPage();
+    await newPage.setContent(htmlContent, { waitUntil: "networkidle0" });
+
+    const base64Image = org?.image?.blob
+      ? `data:image/png;base64,${org?.image?.blob.toString("base64")}`
+      : "";
+
+    // Generate the PDF with header and footer
+    const pdfBuffer = await newPage.pdf({
+      format: "A4",
+      displayHeaderFooter: true,
+      headerTemplate: getCustomHeader(base64Image, booking?.name),
+      margin: {
+        top: "80px",
+        bottom: "30px",
+        left: "20px",
+        right: "20px",
+      },
+    });
+
+    await browser.close();
+
+    return new Response(pdfBuffer, {
+      status: 200,
+      headers: {
+        "content-type": "application/pdf",
+        "set-cookie": cookieData,
+      },
+    });
+  } catch (cause) {
+    const reason = makeShelfError(cause, { userId, bookingId });
+    throw json(error(reason), { status: reason.status });
+  }
+};
diff --git a/app/views/booking-assets-template.ejs b/app/views/booking-assets-template.ejs
new file mode 100644
index 000000000..f9d699638
--- /dev/null
+++ b/app/views/booking-assets-template.ejs
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Booking Checklist for </title>
+    <style>
+        /* General styles */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 210mm;
+            /* A4 width */
+            /* padding: 20px; */
+            /* padding:10mm;
+            padding-top:unset;
+            padding-bottom:unset; */
+            margin: 0 auto;
+            box-sizing: border-box;
+        }
+
+        /* Header styles */
+        header {
+            display: flex;
+            align-items: center;
+            padding-bottom: 10px;
+            font-size: 10px;
+            color: rgba(0, 0, 0, 0.6);
+            justify-content: space-between;
+            margin-bottom: 20px;
+        }
+
+        .logo {
+            height: 30px;
+            width: 30px;
+            margin-right: 20px;
+        }
+
+        .header-text {
+            flex-grow: 1;
+            margin-bottom:20px;
+        }
+        .header-text h3{
+            padding:unset;
+            margin:unset;
+            color: rgba(0, 0, 0, 0.6)
+        }
+
+        .header-text h1 {
+            font-size: 20px;
+            margin: 0;
+            margin-top:2px;
+        }
+
+        .header-text .date {
+            font-size: 12px;
+            color: #888;
+        }
+
+        /* Booking info styles */
+        .booking-info {
+            margin-top: 10px;
+            margin-bottom: 20px;
+            border: 1px solid #bfbfbf;
+            border-bottom: unset;
+        }
+
+        .booking-info div {
+            padding: 8px;
+            border-bottom: 1px solid #bfbfbf;
+        }
+
+        .info-row {
+            display: flex;
+            margin-bottom: 5px;
+        }
+
+        .info-label {
+            font-weight: bold;
+            width: 150px;
+        }
+
+        .info-value {
+            flex-grow: 1;
+            color: rgba(0, 0, 0, 0.6)
+        }
+
+        /* Table styles */
+        .booking-table {
+            width: 100%;
+            border-collapse: collapse;
+            border: 1px solid #bfbfbf;
+            border-bottom: unset;
+        }
+
+        .booking-table th,
+        .booking-table td {
+            border: 1px solid #bfbfbf;
+            padding: 10px;
+            text-align: left;
+            font-size: 14px;
+            word-wrap: break-word;
+            /* Ensure text wraps within cells */
+        }
+
+        .booking-table td {
+            color: rgba(0, 0, 0, 0.6);
+        }
+
+        .booking-table th {
+            font-weight: bold;
+            border: unset
+        }
+
+        .booking-table th.name-column {
+            width: 30%;
+        }
+
+        .booking-table td img {
+            height: 55px;
+            object-fit: cover
+        }
+
+        .booking-table td input {
+            display: block;
+            margin: 0 auto;
+            height:20px;
+            width:20px;
+            border: none;
+        }
+        .booking-table .qrcodeInfo{
+            display:  flex;
+            flex-direction: row;
+            gap:4px;
+            align-items: center;
+        }
+        /* Responsive design */
+        @media (max-width: 600px) {
+            .info-row {
+                flex-direction: column;
+            }
+
+            .info-label {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div>
+        <div class="container">
+            <div class="header-text">
+                <h3><%= orgName %></h3></h3>
+                <h1>Booking checklist for <%= name %></h1>
+            </div>
+            <section class="booking-info">
+                <div class="info-row">
+                    <span class="info-label">Booking:</span>
+                    <span class="info-value"><%= name %></span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">Custodian:</span>
+                    <span class="info-value"><%= custodian %></span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">Booking period:</span>
+                    <span class="info-value"><%= bookingPeriod %></span>
+                </div>
+            </section>
+            <table class="booking-table">
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th class="name-column">Name</th>
+                        <th>Category</th>
+                        <th>Location</th>
+                        <th>Code</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <% items.forEach(function(item, index) { %>
+                    <tr>
+                        <td>
+                            <div
+                                style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
+                                <%= index + 1 %>
+                                <img 
+                                   src="<%= item.mainImage %>"
+                                    alt="Asset">
+                            </div>
+                        </td>
+                        <td><%= item.name %></td>
+                        <td><%= item.category %></td>
+                        <td><%= item.location %></td>
+                        <td>
+                            <div class="qrcodeInfo">
+                                <img 
+                                src="<%= item.code %>"
+                                alt="QR Code">
+                                <input type="checkbox"/>
+                            </div>
+                        </td>
+                    </tr>
+                    <% }) %>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 564a09f22..e140e88a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "date-fns": "^3.3.1",
         "detectrtc": "^1.4.1",
         "dom-to-image": "^2.6.0",
+        "ejs": "^3.1.10",
         "framer-motion": "^11.0.5",
         "hono": "^4.2.7",
         "iconv-lite": "^0.6.3",
@@ -58,6 +59,7 @@
         "pg-boss": "^9.0.3",
         "pino": "^8.19.0",
         "pino-pretty": "^10.3.1",
+        "puppeteer": "^22.10.0",
         "qrcode-generator": "^1.4.4",
         "react": "18.2.0",
         "react-day-picker": "^8.10.0",
@@ -94,6 +96,7 @@
         "@testing-library/react": "^14.2.1",
         "@testing-library/user-event": "^14.5.2",
         "@types/dom-to-image": "^2.6.7",
+        "@types/ejs": "^3.1.5",
         "@types/jsonwebtoken": "^9.0.5",
         "@types/luxon": "^3.4.2",
         "@types/nodemailer": "^6.4.14",
@@ -167,7 +170,6 @@
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
       "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.24.2",
         "picocolors": "^1.0.0"
@@ -511,7 +513,6 @@
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz",
       "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -543,7 +544,6 @@
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz",
       "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.5",
         "chalk": "^2.4.2",
@@ -558,7 +558,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -570,7 +569,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -584,7 +582,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -592,14 +589,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -608,7 +603,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -617,7 +611,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -2696,6 +2689,50 @@
         "@prisma/debug": "5.13.0"
       }
     },
+    "node_modules/@puppeteer/browsers": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.2.3.tgz",
+      "integrity": "sha512-bJ0UBsk0ESOs6RFcLXOt99a3yTDcOKlzfjad+rhFwdaG1Lu/Wzq58GHYCDTlZ9z6mldf4g+NTb+TXEfe0PpnsQ==",
+      "dependencies": {
+        "debug": "4.3.4",
+        "extract-zip": "2.0.1",
+        "progress": "2.0.3",
+        "proxy-agent": "6.4.0",
+        "semver": "7.6.0",
+        "tar-fs": "3.0.5",
+        "unbzip2-stream": "1.4.3",
+        "yargs": "17.7.2"
+      },
+      "bin": {
+        "browsers": "lib/cjs/main-cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@puppeteer/browsers/node_modules/tar-fs": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
+      "integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+      "dependencies": {
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      },
+      "optionalDependencies": {
+        "bare-fs": "^2.1.1",
+        "bare-path": "^2.1.0"
+      }
+    },
+    "node_modules/@puppeteer/browsers/node_modules/tar-stream": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+      "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
@@ -5087,6 +5124,11 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@tootallnate/quickjs-emscripten": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
+      "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA=="
+    },
     "node_modules/@tremor/react": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@tremor/react/-/react-3.16.2.tgz",
@@ -5260,6 +5302,12 @@
       "integrity": "sha512-me5VbCv+fcXozblWwG13krNBvuEOm6kA5xoa4RrjDJCNFOZSWR3/QLtOXimBHk1Fisq69Gx3JtOoXtg1N1tijg==",
       "dev": true
     },
+    "node_modules/@types/ejs": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.5.tgz",
+      "integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==",
+      "dev": true
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -5491,6 +5539,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.62.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -6175,8 +6232,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/aria-hidden": {
       "version": "1.2.4",
@@ -6405,6 +6461,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ast-types": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
+      "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -6420,6 +6487,11 @@
         "astring": "bin/astring"
       }
     },
+    "node_modules/async": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -6522,6 +6594,11 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/b4a": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.6.tgz",
+      "integrity": "sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg=="
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -6537,6 +6614,47 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/bare-events": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.2.tgz",
+      "integrity": "sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ==",
+      "optional": true
+    },
+    "node_modules/bare-fs": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.0.tgz",
+      "integrity": "sha512-TNFqa1B4N99pds2a5NYHR15o0ZpdNKbAeKTE/+G6ED/UeOavv8RY3dr/Fu99HW3zU3pXpo2kDNO8Sjsm2esfOw==",
+      "optional": true,
+      "dependencies": {
+        "bare-events": "^2.0.0",
+        "bare-path": "^2.0.0",
+        "bare-stream": "^1.0.0"
+      }
+    },
+    "node_modules/bare-os": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.3.0.tgz",
+      "integrity": "sha512-oPb8oMM1xZbhRQBngTgpcQ5gXw6kjOaRsSWsIeNyRxGed2w/ARyP7ScBYpWR1qfX2E5rS3gBw6OWcSQo+s+kUg==",
+      "optional": true
+    },
+    "node_modules/bare-path": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz",
+      "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==",
+      "optional": true,
+      "dependencies": {
+        "bare-os": "^2.1.0"
+      }
+    },
+    "node_modules/bare-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-1.0.0.tgz",
+      "integrity": "sha512-KhNUoDL40iP4gFaLSsoGE479t0jHijfYdIcxRn/XtezA2BaUD0NRf/JGRpsMq6dMNM+SrCrB0YSSo/5wBY4rOQ==",
+      "optional": true,
+      "dependencies": {
+        "streamx": "^2.16.1"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -6567,6 +6685,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/basic-ftp": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz",
+      "integrity": "sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -6728,7 +6854,6 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6748,6 +6873,14 @@
         "ieee754": "^1.1.13"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "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",
@@ -6855,7 +6988,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -6930,7 +7062,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -7050,6 +7181,27 @@
         "node": ">=10"
       }
     },
+    "node_modules/chromium-bidi": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.5.19.tgz",
+      "integrity": "sha512-UA6zL77b7RYCjJkZBsZ0wlvCTD+jTjllZ8f6wdO4buevXgTZYjV+XLB9CiEa2OuuTGGTLnI7eN9I60YxuALGQg==",
+      "dependencies": {
+        "mitt": "3.0.1",
+        "urlpattern-polyfill": "10.0.0",
+        "zod": "3.22.4"
+      },
+      "peerDependencies": {
+        "devtools-protocol": "*"
+      }
+    },
+    "node_modules/chromium-bidi/node_modules/zod": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -7276,8 +7428,7 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/confbox": {
       "version": "0.1.7",
@@ -7359,6 +7510,53 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
+    "node_modules/cosmiconfig/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/crisp-sdk-web": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/crisp-sdk-web/-/crisp-sdk-web-1.0.25.tgz",
@@ -7819,6 +8017,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/degenerator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
+      "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==",
+      "dependencies": {
+        "ast-types": "^0.13.4",
+        "escodegen": "^2.1.0",
+        "esprima": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/delay": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/delay/-/delay-5.0.0.tgz",
@@ -7882,6 +8093,11 @@
       "resolved": "https://registry.npmjs.org/detectrtc/-/detectrtc-1.4.1.tgz",
       "integrity": "sha512-lxvyNN6/dSnwoVj1VstVFHel7S0BTmkfv1+01IBEy42D20pue27eB/MfphUOQz78jJ7WcQJDo6ZybhgBlUDi0Q=="
     },
+    "node_modules/devtools-protocol": {
+      "version": "0.0.1286932",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1286932.tgz",
+      "integrity": "sha512-wu58HMQll9voDjR4NlPyoDEw1syfzaBNHymMMZ/QOXiHRNluOnDgu9hp1yHOKYoMlxCh4lSSiugLITe6Fvu1eA=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -8113,6 +8329,20 @@
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.751",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.751.tgz",
@@ -8164,6 +8394,14 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/err-code": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
@@ -8174,7 +8412,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -8446,6 +8683,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/escodegen/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/eslint": {
       "version": "8.57.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
@@ -9204,6 +9470,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
@@ -9232,7 +9510,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -9329,7 +9606,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9558,6 +9834,39 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/extract-zip/node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/fast-copy": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/fast-copy/-/fast-copy-3.0.2.tgz",
@@ -9577,6 +9886,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -9638,6 +9952,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
     "node_modules/fflate": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
@@ -9690,6 +10012,25 @@
         "node": ">= 12"
       }
     },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -10131,6 +10472,41 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/get-uri": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.3.tgz",
+      "integrity": "sha512-BzUrJBS9EcUb4cFol8r4W3v1cPsSyajLSthNkz5BxbpDcHN5tIrM10E2eNvfnvBn3DaT3DUgx0OpsBKkaOpanw==",
+      "dependencies": {
+        "basic-ftp": "^5.0.2",
+        "data-uri-to-buffer": "^6.0.2",
+        "debug": "^4.3.4",
+        "fs-extra": "^11.2.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/get-uri/node_modules/data-uri-to-buffer": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz",
+      "integrity": "sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/get-uri/node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -10271,8 +10647,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
@@ -10338,7 +10713,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -10540,6 +10914,29 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/http-proxy-agent/node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -10636,7 +11033,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -10789,6 +11185,18 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/ip-address": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
+      "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==",
+      "dependencies": {
+        "jsbn": "1.1.0",
+        "sprintf-js": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -10855,8 +11263,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-async-function": {
       "version": "2.0.0",
@@ -11443,6 +11850,43 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jake": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.1.tgz",
+      "integrity": "sha512-61btcOHNnLnsOdtLgA5efqQWjnSi/vow5HbI7HMdKKWqvrKR1bLK3BPlJn9gcSaP2ewuamUSMB5XEy76KUIS2w==",
+      "dependencies": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jake/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/jake/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/javascript-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
@@ -11544,7 +11988,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -11552,6 +11995,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
+      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="
+    },
     "node_modules/jsesc": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
@@ -11618,7 +12066,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
       "dependencies": {
         "universalify": "^2.0.0"
       },
@@ -13264,6 +13711,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -13489,6 +13941,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/netmask": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
+      "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -14148,6 +14608,59 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pac-proxy-agent": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.1.tgz",
+      "integrity": "sha512-ASV8yU4LLKBAjqIPMbrgtaKIvxQri/yh2OpI+S6hVa9JRkUI3Y3NPFbfngDtY7oFtSMD3w31Xns89mDa3Feo5A==",
+      "dependencies": {
+        "@tootallnate/quickjs-emscripten": "^0.23.0",
+        "agent-base": "^7.0.2",
+        "debug": "^4.3.4",
+        "get-uri": "^6.0.1",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.2",
+        "pac-resolver": "^7.0.0",
+        "socks-proxy-agent": "^8.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-proxy-agent/node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-proxy-agent/node_modules/https-proxy-agent": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
+      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-resolver": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.1.tgz",
+      "integrity": "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==",
+      "dependencies": {
+        "degenerator": "^5.0.0",
+        "netmask": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/pako": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
@@ -14158,7 +14671,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -14351,6 +14863,11 @@
         "through2": "^2.0.3"
       }
     },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg=="
+    },
     "node_modules/periscopic": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -15321,6 +15838,55 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-agent": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.4.0.tgz",
+      "integrity": "sha512-u0piLU+nCOHMgGjRbimiXmA9kM/L9EHh3zL81xCdp7m+Y2pHIsnmbdDoEDoAz5geaonNR6q6+yOPQs6n4T6sBQ==",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "^4.3.4",
+        "http-proxy-agent": "^7.0.1",
+        "https-proxy-agent": "^7.0.3",
+        "lru-cache": "^7.14.1",
+        "pac-proxy-agent": "^7.0.1",
+        "proxy-from-env": "^1.1.0",
+        "socks-proxy-agent": "^8.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/https-proxy-agent": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
+      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -15380,6 +15946,59 @@
         "node": ">=6"
       }
     },
+    "node_modules/puppeteer": {
+      "version": "22.10.0",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-22.10.0.tgz",
+      "integrity": "sha512-ZOkZd6a6t0BdKcWb0wAYHWQqCfdlN1PPnXOmg/XNrbo6gJhYWFX4qCNb6ahSn8TpAqBqLCoD4Q010F7GwOM7mA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@puppeteer/browsers": "2.2.3",
+        "cosmiconfig": "9.0.0",
+        "devtools-protocol": "0.0.1286932",
+        "puppeteer-core": "22.10.0"
+      },
+      "bin": {
+        "puppeteer": "lib/esm/puppeteer/node/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/puppeteer-core": {
+      "version": "22.10.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.10.0.tgz",
+      "integrity": "sha512-I54J4Vy4I07UHsgB1QSmuFoF7KNQjJWcvFBPhtY+ezMdBfwgGDr8dzYrJa11aPgP9kxIUHjhktcMmmfJkOAtTw==",
+      "dependencies": {
+        "@puppeteer/browsers": "2.2.3",
+        "chromium-bidi": "0.5.19",
+        "debug": "4.3.4",
+        "devtools-protocol": "0.0.1286932",
+        "ws": "8.17.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/ws": {
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/qrcode-generator": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
@@ -15418,6 +16037,11 @@
         }
       ]
     },
+    "node_modules/queue-tick": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
+    },
     "node_modules/quick-format-unescaped": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
@@ -16272,7 +16896,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -16862,6 +17485,52 @@
         "node": ">=8"
       }
     },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
+      "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==",
+      "dependencies": {
+        "ip-address": "^9.0.5",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.3.tgz",
+      "integrity": "sha512-VNegTZKhuGq5vSD6XNKlbqWhyt/40CgoEw8XxD6dhnm8Jq9IEa3nIa4HwnM8XOqU0CdB0BwWVXusqiFXfHB3+A==",
+      "dependencies": {
+        "agent-base": "^7.1.1",
+        "debug": "^4.3.4",
+        "socks": "^2.7.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/socks-proxy-agent/node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/sonic-boom": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-3.8.1.tgz",
@@ -17031,6 +17700,11 @@
         "node": ">= 10.x"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
+    },
     "node_modules/ssri": {
       "version": "10.0.5",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz",
@@ -17139,6 +17813,18 @@
       "resolved": "https://registry.npmjs.org/stream-slice/-/stream-slice-0.1.2.tgz",
       "integrity": "sha512-QzQxpoacatkreL6jsxnVb7X5R/pGw9OUv2qWTYWnmLpg4NdN31snPy/f3TdQE1ZUXaThRvj1Zw4/OGg0ZkaLMA=="
     },
+    "node_modules/streamx": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.16.1.tgz",
+      "integrity": "sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==",
+      "dependencies": {
+        "fast-fifo": "^1.1.0",
+        "queue-tick": "^1.0.1"
+      },
+      "optionalDependencies": {
+        "bare-events": "^2.2.0"
+      }
+    },
     "node_modules/strict-event-emitter": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz",
@@ -17470,7 +18156,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -17816,8 +18501,7 @@
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
-      "dev": true
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
     },
     "node_modules/through2": {
       "version": "2.0.5",
@@ -18627,6 +19311,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/unbzip2-stream": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
+      "dependencies": {
+        "buffer": "^5.2.1",
+        "through": "^2.3.8"
+      }
+    },
     "node_modules/undici": {
       "version": "5.28.4",
       "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
@@ -18822,7 +19515,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
       "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -18874,6 +19566,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/urlpattern-polyfill": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz",
+      "integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg=="
+    },
     "node_modules/use-callback-ref": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
@@ -20203,6 +20900,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index a91b04f3b..68cf75ba2 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "date-fns": "^3.3.1",
     "detectrtc": "^1.4.1",
     "dom-to-image": "^2.6.0",
+    "ejs": "^3.1.10",
     "framer-motion": "^11.0.5",
     "hono": "^4.2.7",
     "iconv-lite": "^0.6.3",
@@ -91,6 +92,7 @@
     "pg-boss": "^9.0.3",
     "pino": "^8.19.0",
     "pino-pretty": "^10.3.1",
+    "puppeteer": "^22.10.0",
     "qrcode-generator": "^1.4.4",
     "react": "18.2.0",
     "react-day-picker": "^8.10.0",
@@ -127,6 +129,7 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/dom-to-image": "^2.6.7",
+    "@types/ejs": "^3.1.5",
     "@types/jsonwebtoken": "^9.0.5",
     "@types/luxon": "^3.4.2",
     "@types/nodemailer": "^6.4.14",

From f76996cb0b721500d24bf4c4cf1a2428fb1e9be8 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Wed, 29 May 2024 11:18:39 +0530
Subject: [PATCH 02/24] chore:refactor the code

---
 .../booking/generate-booking-pdf.tsx          |  37 +--
 app/modules/booking/pdf-helpers.ts            | 195 ++++++++++++++
 app/modules/qr/service.server.ts              |  57 ++--
 ...bookingId.generate-pdf.$fileName[.pdf].tsx | 252 ++----------------
 4 files changed, 267 insertions(+), 274 deletions(-)
 create mode 100644 app/modules/booking/pdf-helpers.ts

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index 98b26ec87..caec1ee9f 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import type { Asset, Booking } from "@prisma/client";
 import { Button } from "~/components/shared/button";
 import {
   AlertDialog,
@@ -12,25 +13,34 @@ import {
 } from "~/components/shared/modal";
 import { Spinner } from "../shared/spinner";
 
-export const GenerateBookingPdf = ({ booking }: { booking: any }) => {
+export const GenerateBookingPdf = ({
+  booking,
+}: {
+  booking: {
+    id: Booking["id"];
+    name: Booking["name"];
+    assets: Partial<Asset>[];
+  };
+}) => {
   const [url, setUrl] = useState("");
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const [isMobile, setIsMobile] = useState(false);
+  const totalAssets = booking?.assets?.length;
 
   useEffect(() => {
     setIframeLoaded(false);
-    if (booking && booking?.assets?.length) {
+    if (booking && totalAssets) {
       const timestamp = new Date().getTime();
       setUrl(
-        `/bookings/${booking.id}/generate-pdf/${
-          booking.name || "booking-assets"
+        `/bookings/${booking.id?.toString()}/generate-pdf/${
+          booking?.name || "booking-assets"
         }-${new Date().toISOString().slice(0, 10)}.pdf?timeStamp=${timestamp}`
       );
     } else {
       setErrorMessage("No assets available to generate PDF.");
     }
-  }, [booking, booking?.assets]);
+  }, [booking, booking?.assets, totalAssets]);
 
   useEffect(() => {
     const isMobileDevice = /Mobi/.test(navigator.userAgent);
@@ -55,32 +65,26 @@ export const GenerateBookingPdf = ({ booking }: { booking: any }) => {
               className="justify-start rounded-sm px-2 py-1.5 text-sm font-medium text-gray-700 outline-none hover:bg-slate-100 hover:text-gray-700 disabled:pointer-events-none disabled:opacity-50"
               width="full"
               name="generate pdf"
-              disabled={!booking?.assets?.length}
+              disabled={!totalAssets}
             >
               Generate PDF...
             </Button>
           </AlertDialogTrigger>
           <AlertDialogContent>
             <AlertDialogHeader>
-              {/* {icon changes} */}
-              {/* <div className="mx-auto md:m-0">
-            <span className="flex size-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
-              
-            </span>
-          </div> */}
               <AlertDialogTitle>
                 Generate Booking Checklist PDF for {booking?.name}
               </AlertDialogTitle>
               <AlertDialogDescription>
                 {errorMessage ||
-                  "You can either preview the PDF or download it."}
+                  "You can either preview or download the PDF."}
                 {!iframeLoaded && (
                   <div className="h-500 m-4 flex flex-1 flex-col items-center justify-center text-center">
                     <Spinner />
                     <p className="mt-2">Generating PDF...</p>
                   </div>
                 )}
-                {booking?.assets?.length && (
+                {totalAssets && (
                   <div style={{ display: iframeLoaded ? "block" : "none" }}>
                     <iframe
                       id="pdfPreview"
@@ -98,9 +102,6 @@ export const GenerateBookingPdf = ({ booking }: { booking: any }) => {
             </AlertDialogHeader>
             <AlertDialogFooter>
               <div className="flex justify-center gap-2">
-                {/* <Button to={url} variant="secondary" role="link" download={true} reloadDocument={true} disabled={!iframeLoaded}>
-              Download PDF
-            </Button> */}
                 <AlertDialogCancel asChild>
                   <Button variant="secondary">Cancel</Button>
                 </AlertDialogCancel>
@@ -114,7 +115,7 @@ export const GenerateBookingPdf = ({ booking }: { booking: any }) => {
           className="justify-start rounded-sm px-2 py-1.5 text-sm font-medium text-gray-700 outline-none hover:bg-slate-100 hover:text-gray-700 disabled:pointer-events-none disabled:opacity-50"
           width="full"
           name="generate pdf"
-          disabled={!booking?.assets?.length}
+          disabled={!totalAssets}
           onClick={handleMobileView}
         >
           Generate PDF...
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
new file mode 100644
index 000000000..a3c68b16f
--- /dev/null
+++ b/app/modules/booking/pdf-helpers.ts
@@ -0,0 +1,195 @@
+import fs from "fs/promises";
+import path from "path";
+import type {
+  Asset,
+  Booking,
+  Location,
+  Category,
+  Image,
+  Organization,
+  Custody,
+  User,
+} from "@prisma/client";
+import { OrganizationRoles } from "@prisma/client";
+import puppeteer from "puppeteer";
+import { db } from "~/database/db.server";
+import { ShelfError } from "~/utils/error";
+import { getBooking } from "./service.server";
+import { getQrCodeMaps } from "../qr/service.server";
+
+export interface PdfDbResult {
+  booking: Booking & { custodianUser: User | null };
+  assets: (Asset & {
+    category: Category | null;
+    location: Location | null;
+    custody: Custody | null;
+  })[];
+  organization: (Partial<Organization> & { image: Image | null }) | null;
+  assetIdToQrCodeMap: Map<string, string>;
+}
+
+export async function fetchAllPdfRelatedData(
+  bookingId: string,
+  organizationId: string,
+  userId: string,
+  role: OrganizationRoles | undefined
+): Promise<PdfDbResult> {
+  const booking = await getBooking({ id: bookingId, organizationId });
+  if (!booking) {
+    throw new Error("Booking not found");
+  }
+  if (
+    role === OrganizationRoles.SELF_SERVICE &&
+    booking.custodianUserId !== userId
+  ) {
+    throw new ShelfError({
+      cause: null,
+      message: "You are not authorized to view this booking",
+      status: 403,
+      label: "Booking",
+      shouldBeCaptured: false,
+    });
+  }
+  const [assets, organization] = await Promise.all([
+    db.asset.findMany({
+      where: {
+        id: { in: booking?.assets.map((a) => a.id) || [] },
+      },
+      include: {
+        category: true,
+        custody: true,
+        qrCodes: true,
+        location: true,
+        bookings: {
+          where: {
+            ...(booking?.from && booking?.to
+              ? {
+                  status: { in: ["RESERVED", "ONGOING", "OVERDUE"] },
+                  OR: [
+                    { from: { lte: booking.to }, to: { gte: booking.from } },
+                    { from: { gte: booking.from }, to: { lte: booking.to } },
+                  ],
+                }
+              : {}),
+          },
+        },
+      },
+    }),
+    db.organization.findUnique({
+      where: { id: organizationId },
+      select: { imageId: true, name: true, id: true, image: true },
+    }),
+  ]);
+
+  const assetIdToQrCodeMap = await getQrCodeMaps({
+    assets,
+    userId,
+    organizationId,
+    size: "small",
+  });
+  return {
+    booking,
+    assets,
+    organization,
+    assetIdToQrCodeMap,
+  };
+}
+
+const getBookingAssetsCustomHeader = (
+  base64Image?: string,
+  bookName?: string) => `
+        <style>
+            .header {
+                font-size: 10px;
+                text-align: right;
+                width: 100%;
+                padding: 0 20px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                box-sizing: border-box;
+                margin-bottom:30px;
+            }
+            .header img {
+                height: 40px;
+                width: 40px;
+                object-fit: cover
+            }
+            .header .text {
+                text-align: right;
+                color: rgba(0, 0, 0, 0.6);
+            }
+        </style>
+        <div class="header">
+            <img src="${base64Image}" alt="logo">
+            <span class="text">${
+              bookName || ""
+            } | <span class="date"></span> | Page <span class="pageNumber"></span>/<span class="totalPages"></span></span>
+        </div>
+    `;
+
+export function getBookingPdfTemplateData({
+  booking,
+  assets,
+  organization,
+  assetIdToQrCodeMap,
+}: PdfDbResult) {
+  const orgImageBlob = organization?.image?.blob;
+  const base64Image = orgImageBlob
+    ? `data:image/png;base64,${orgImageBlob.toString("base64")}`
+    : "";
+  return {
+    booking: `Booking Checklist for ${booking.name}`,
+    name: booking.name ?? "",
+    orgName: organization?.name ?? "",
+    custodian: `${booking?.custodianUser?.firstName ?? ""} ${
+      booking?.custodianUser?.lastName ?? ""
+    } <${booking?.custodianUser?.email ?? ""}>`,
+    bookingPeriod:
+      booking?.from && booking?.to
+        ? `${new Date(booking.from).toLocaleString()} - ${new Date(
+            booking.to
+          ).toLocaleString()}`
+        : "",
+    items: assets?.map((asset) => ({
+      name: asset.title ?? "",
+      category: asset?.category?.name ?? "",
+      location: asset?.location ? asset?.location?.name ?? "" : "",
+      code: assetIdToQrCodeMap.get(asset.id) || "",
+      mainImage: asset?.mainImage || "",
+    })),
+    headerTemplate: getBookingAssetsCustomHeader(base64Image, booking.name),
+  };
+}
+
+export async function getTemplatePath(template: string): Promise<string> {
+  const templatePath = path.resolve(process.cwd(), template);
+  const result = await fs.readFile(templatePath, "utf-8");
+  return result;
+}
+
+export async function generatePdfContent(
+  htmlContent: string,
+  headerTemplate?: string,
+  styles?: Record<string, string>
+) {
+  const browser = await puppeteer.launch();
+  const newPage = await browser.newPage();
+  await newPage.setContent(htmlContent, { waitUntil: "networkidle0" });
+
+  const pdfBuffer = await newPage.pdf({
+    format: "A4",
+    displayHeaderFooter: true,
+    headerTemplate: headerTemplate || "",
+    margin: {
+      top: "80px",
+      bottom: "30px",
+      left: "20px",
+      right: "20px",
+      ...(styles || {}),
+    },
+  });
+
+  await browser.close();
+  return pdfBuffer;
+}
diff --git a/app/modules/qr/service.server.ts b/app/modules/qr/service.server.ts
index fc7e57b9e..ddb66a310 100644
--- a/app/modules/qr/service.server.ts
+++ b/app/modules/qr/service.server.ts
@@ -438,40 +438,41 @@ export async function claimQrCode({
   }
 }
 
-export async function getQrCodeMaps({
-  assets,
-  userId,
-  organizationId,
-  size,
-}: {
+interface QRCodeMapParams {
   assets: Asset[];
   organizationId: string;
   userId: string;
   size: "small" | "medium" | "large" | "cable";
-}) {
+}
+
+export async function getQrCodeMaps({
+  assets,
+  size,
+}: QRCodeMapParams): Promise<Map<string, string>> {
+  const finalMap = new Map<string, string>();
+
   try {
-    return await Promise.all(
-      assets?.map(async ({ id: assetId }) => {
-        try {
-          let qr = await getQrByAssetId({ assetId });
-
-          if (!qr) {
-            qr = await createQr({ assetId, userId, organizationId });
-          }
-
-          const { code } = await generateCode({
-            version: qr.version as TypeNumber,
-            errorCorrection: qr.errorCorrection as ErrorCorrectionLevel,
-            size,
-            qr,
-          });
-          return code.src ? [assetId, code] : null;
-        } catch (error) {
-          return null;
+    const qrCodePromises = assets.map(async (asset) => {
+      try {
+        let qr = await getQrByAssetId({ assetId: asset.id });
+        const qrCode = qr ? await generateCode({
+          version: qr.version as TypeNumber,
+          errorCorrection: qr.errorCorrection as ErrorCorrectionLevel,
+          size,
+          qr,
+        }): null;
+        if (qrCode?.code){
+          finalMap.set(asset.id, qrCode?.code?.src || "");
         }
-      })
-    );
+      } catch (error) {
+        // Handle the error if needed
+        console.error(`Error processing asset with id ${asset.id}:`, error);
+      }
+    });
+
+    await Promise.all(qrCodePromises);
   } catch (err) {
-    return null;
+    console.error("Error generating QR code maps:", err);
   }
+  return finalMap;
 }
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index 085cfcf3a..4a0b81b8e 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -1,85 +1,29 @@
-import fs from "fs/promises";
-import path from "path";
-import { OrganizationRoles } from "@prisma/client";
-import { json, redirect } from "@remix-run/node";
+import { json } from "@remix-run/node";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import * as ejs from "ejs";
-import puppeteer from "puppeteer";
 import { z } from "zod";
-import { db } from "~/database/db.server";
-import { getBooking } from "~/modules/booking/service.server";
-import { setSelectedOrganizationIdCookie } from "~/modules/organization/context.server";
-import { getQrCodeMaps } from "~/modules/qr/service.server";
+import type { PdfDbResult } from "~/modules/booking/pdf-helpers";
 import {
-  setCookie,
-  updateCookieWithPerPage,
-  userPrefs,
-} from "~/utils/cookies.server";
-import { ShelfError, makeShelfError } from "~/utils/error";
-
-import { error, getCurrentSearchParams, getParams } from "~/utils/http.server";
-import { getParamsValues } from "~/utils/list";
+  fetchAllPdfRelatedData,
+  generatePdfContent,
+  getBookingPdfTemplateData,
+  getTemplatePath,
+} from "~/modules/booking/pdf-helpers";
+import { makeShelfError } from "~/utils/error";
+
+import { error, getParams } from "~/utils/http.server";
 import {
   PermissionAction,
   PermissionEntity,
 } from "~/utils/permissions/permission.validator.server";
 import { requirePermission } from "~/utils/roles.server";
 
-interface Item {
-  name: string;
-  category: string;
-  location: string;
-  code: string;
-  mainImage: string;
-}
-
-interface Data {
-  booking: string;
-  name: string;
-  custodian: string;
-  bookingPeriod: string;
-  items: Item[];
-  orgName: string;
-}
-
-const getCustomHeader = (base64Image?: string, bookName?: string) => `
-      <style>
-          .header {
-              font-size: 10px;
-              text-align: right;
-              width: 100%;
-              padding: 0 20px;
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              box-sizing: border-box;
-              margin-bottom:30px;
-          }
-          .header img {
-              height: 40px;
-              width: 40px;
-              object-fit: cover
-          }
-          .header .text {
-              text-align: right;
-              color: rgba(0, 0, 0, 0.6);
-          }
-      </style>
-      <div class="header">
-          <img src="${base64Image}" alt="logo">
-          <span class="text">${
-            bookName || ""
-          } | 04/30/2024 | Page <span class="pageNumber"></span>/<span class="totalPages"></span></span>
-      </div>
-  `;
-
 export const loader = async ({
   context,
   request,
   params,
 }: LoaderFunctionArgs) => {
-  const authSession = context.getSession();
-  const { userId } = authSession;
+  const { userId } = context.getSession();
   const { bookingId } = getParams(
     params,
     z.object({
@@ -92,180 +36,32 @@ export const loader = async ({
 
   try {
     const { organizationId, role } = await requirePermission({
-      userId: authSession?.userId,
+      userId: userId,
       request,
       entity: PermissionEntity.booking,
       action: PermissionAction.read,
     });
 
-    const searchParams = getCurrentSearchParams(request);
-    /**
-     * If the org id in the params is different than the current organization id,
-     * we need to redirect and set the organization id in the cookie
-     * This is useful when the user is viewing a booking from a different organization that they are part of after clicking link in email
-     */
-    const orgId = searchParams.get("orgId");
-    if (orgId && orgId !== organizationId) {
-      return redirect(`/bookings/${bookingId}`, {
-        headers: [setCookie(await setSelectedOrganizationIdCookie(orgId))],
-      });
-    }
-
-    const isSelfService = role === OrganizationRoles.SELF_SERVICE;
-    const booking = await getBooking({
-      id: bookingId,
-      organizationId: organizationId,
-    });
-
-    /** For self service users, we only allow them to read their own bookings */
-    if (isSelfService && booking.custodianUserId !== authSession.userId) {
-      throw new ShelfError({
-        cause: null,
-        message: "You are not authorized to view this booking",
-        status: 403,
-        label: "Booking",
-        shouldBeCaptured: false,
-      });
-    }
-
-    const [org, assets] = await Promise.all([
-      /** We create a teamMember entry to represent the org owner.
-       * Most important thing is passing the ID of the owner as the userId as we are currently only supporting
-       * assigning custody to users, not NRM.
-       */
-      db.organization.findUnique({
-        where: {
-          id: organizationId,
-        },
-        select: {
-          owner: true,
-          imageId: true,
-          name: true,
-          id: true,
-          image: true,
-        },
-      }),
-      /**
-       * We need to do this in a separate query because we need to filter the bookings within an asset based on the booking.from and booking.to
-       * That way we know if the asset is available or not because we can see if they are booked for the same period
-       */
-      db.asset.findMany({
-        where: {
-          id: {
-            in: booking?.assets.map((a) => a.id) || [],
-          },
-        },
-        include: {
-          category: true,
-          custody: true,
-          qrCodes: true,
-          location: true,
-          bookings: {
-            where: {
-              // id: { not: booking.id },
-              ...(booking.from && booking.to
-                ? {
-                    status: { in: ["RESERVED", "ONGOING", "OVERDUE"] },
-                    OR: [
-                      {
-                        from: { lte: booking.to },
-                        to: { gte: booking.from },
-                      },
-                      {
-                        from: { gte: booking.from },
-                        to: { lte: booking.to },
-                      },
-                    ],
-                  }
-                : {}),
-            },
-          },
-        },
-      }),
-    ]);
-
-    /** We replace the assets ids in the booking object with the assets fetched in the separate request.
-     * This is useful for more consistent data in the front-end */
-    booking.assets = assets
-
-    const { perPageParam } = getParamsValues(searchParams);
-    const cookie = await updateCookieWithPerPage(request, perPageParam);
-    const qrData = (await getQrCodeMaps({
-      assets,
-      userId,
+    const pdfMeta: PdfDbResult = await fetchAllPdfRelatedData(
+      bookingId,
       organizationId,
-      size: "small",
-    })) as Array<any>;
-
-    const qrCodesMap = qrData?.reduce((obj, [key, value]) => {
-      if (key) {
-        obj[key] = value;
-      }
-      return obj;
-    }, {});
-
-    const cookieData = await userPrefs.serialize(cookie);
-    const data: Data = {
-      booking: `Booking Checklist for ${booking.name}`,
-      name: booking.name ?? "",
-      orgName: org?.name ?? "",
-      custodian: `${booking?.custodianUser?.firstName ?? ""} ${
-        booking?.custodianUser?.lastName ?? ""
-      } <${booking?.custodianUser?.email ?? ""}>`,
-      bookingPeriod:
-        booking?.from && booking?.to
-          ? `${new Date(booking.from).toLocaleString()} - ${new Date(
-              booking.to
-            ).toLocaleString()}`
-          : "",
-      items: assets?.map(
-        (asset) => ({
-          name: asset.title ?? "",
-          category: asset?.category?.name ?? "",
-          location: asset?.location ? asset?.location?.name ?? "" : "",
-          code: qrCodesMap?.[asset.id]?.src || "",
-          mainImage: asset?.mainImage || "",
-        })
-      ),
-    };
-
-    // Generate PDF using Puppeteer
-    const templatePath = path.resolve(
-      process.cwd(),
+      userId,
+      role
+    );
+    const template = await getTemplatePath(
       "./app/views/booking-assets-template.ejs"
     );
-    const template = await fs.readFile(templatePath, "utf-8");
-    const htmlContent = ejs.render(template, data);
-
-    // Generate PDF using Puppeteer
-    const browser = await puppeteer.launch();
-    const newPage = await browser.newPage();
-    await newPage.setContent(htmlContent, { waitUntil: "networkidle0" });
-
-    const base64Image = org?.image?.blob
-      ? `data:image/png;base64,${org?.image?.blob.toString("base64")}`
-      : "";
-
-    // Generate the PDF with header and footer
-    const pdfBuffer = await newPage.pdf({
-      format: "A4",
-      displayHeaderFooter: true,
-      headerTemplate: getCustomHeader(base64Image, booking?.name),
-      margin: {
-        top: "80px",
-        bottom: "30px",
-        left: "20px",
-        right: "20px",
-      },
-    });
-
-    await browser.close();
+    const templateData = getBookingPdfTemplateData(pdfMeta);
+    const htmlContent = ejs.render(template, templateData);
+    const pdfBuffer = await generatePdfContent(
+      htmlContent,
+      templateData.headerTemplate
+    );
 
     return new Response(pdfBuffer, {
       status: 200,
       headers: {
         "content-type": "application/pdf",
-        "set-cookie": cookieData,
       },
     });
   } catch (cause) {

From a0ed2c6e42944f74b88c131442505c834d3d31ec Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Wed, 29 May 2024 11:21:18 +0530
Subject: [PATCH 03/24] chore:format it

---
 app/components/booking/generate-booking-pdf.tsx |  3 +--
 app/modules/booking/pdf-helpers.ts              |  3 ++-
 app/modules/qr/service.server.ts                | 16 +++++++++-------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index caec1ee9f..292d7379e 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -76,8 +76,7 @@ export const GenerateBookingPdf = ({
                 Generate Booking Checklist PDF for {booking?.name}
               </AlertDialogTitle>
               <AlertDialogDescription>
-                {errorMessage ||
-                  "You can either preview or download the PDF."}
+                {errorMessage || "You can either preview or download the PDF."}
                 {!iframeLoaded && (
                   <div className="h-500 m-4 flex flex-1 flex-col items-center justify-center text-center">
                     <Spinner />
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index a3c68b16f..d2b423fab 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -97,7 +97,8 @@ export async function fetchAllPdfRelatedData(
 
 const getBookingAssetsCustomHeader = (
   base64Image?: string,
-  bookName?: string) => `
+  bookName?: string
+) => `
         <style>
             .header {
                 font-size: 10px;
diff --git a/app/modules/qr/service.server.ts b/app/modules/qr/service.server.ts
index ddb66a310..96d4713ee 100644
--- a/app/modules/qr/service.server.ts
+++ b/app/modules/qr/service.server.ts
@@ -455,13 +455,15 @@ export async function getQrCodeMaps({
     const qrCodePromises = assets.map(async (asset) => {
       try {
         let qr = await getQrByAssetId({ assetId: asset.id });
-        const qrCode = qr ? await generateCode({
-          version: qr.version as TypeNumber,
-          errorCorrection: qr.errorCorrection as ErrorCorrectionLevel,
-          size,
-          qr,
-        }): null;
-        if (qrCode?.code){
+        const qrCode = qr
+          ? await generateCode({
+              version: qr.version as TypeNumber,
+              errorCorrection: qr.errorCorrection as ErrorCorrectionLevel,
+              size,
+              qr,
+            })
+          : null;
+        if (qrCode?.code) {
           finalMap.set(asset.id, qrCode?.code?.src || "");
         }
       } catch (error) {

From fda0d060d2a1741a10c4555a2a1eb59976abef95 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Wed, 29 May 2024 19:55:03 +0530
Subject: [PATCH 04/24] refactor:remove the ejs library dependency

---
 app/modules/booking/pdf-helpers.ts            |  92 ++++----
 ...bookingId.generate-pdf.$fileName[.pdf].tsx | 178 +++++++++++++-
 app/views/booking-assets-template.ejs         | 218 ------------------
 package-lock.json                             |  89 +------
 package.json                                  |   2 -
 5 files changed, 224 insertions(+), 355 deletions(-)
 delete mode 100644 app/views/booking-assets-template.ejs

diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index d2b423fab..fd406c0c8 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -95,10 +95,15 @@ export async function fetchAllPdfRelatedData(
   };
 }
 
-const getBookingAssetsCustomHeader = (
-  base64Image?: string,
-  bookName?: string
-) => `
+export const getBookingAssetsCustomHeader = ({
+  organization,
+  booking,
+}: PdfDbResult) => {
+  const orgImageBlob = organization?.image?.blob;
+  const base64Image = orgImageBlob
+    ? `data:image/png;base64,${orgImageBlob.toString("base64")}`
+    : "";
+  return `
         <style>
             .header {
                 font-size: 10px;
@@ -124,50 +129,51 @@ const getBookingAssetsCustomHeader = (
         <div class="header">
             <img src="${base64Image}" alt="logo">
             <span class="text">${
-              bookName || ""
+              booking?.name || ""
             } | <span class="date"></span> | Page <span class="pageNumber"></span>/<span class="totalPages"></span></span>
         </div>
     `;
+};
 
-export function getBookingPdfTemplateData({
-  booking,
-  assets,
-  organization,
-  assetIdToQrCodeMap,
-}: PdfDbResult) {
-  const orgImageBlob = organization?.image?.blob;
-  const base64Image = orgImageBlob
-    ? `data:image/png;base64,${orgImageBlob.toString("base64")}`
-    : "";
-  return {
-    booking: `Booking Checklist for ${booking.name}`,
-    name: booking.name ?? "",
-    orgName: organization?.name ?? "",
-    custodian: `${booking?.custodianUser?.firstName ?? ""} ${
-      booking?.custodianUser?.lastName ?? ""
-    } <${booking?.custodianUser?.email ?? ""}>`,
-    bookingPeriod:
-      booking?.from && booking?.to
-        ? `${new Date(booking.from).toLocaleString()} - ${new Date(
-            booking.to
-          ).toLocaleString()}`
-        : "",
-    items: assets?.map((asset) => ({
-      name: asset.title ?? "",
-      category: asset?.category?.name ?? "",
-      location: asset?.location ? asset?.location?.name ?? "" : "",
-      code: assetIdToQrCodeMap.get(asset.id) || "",
-      mainImage: asset?.mainImage || "",
-    })),
-    headerTemplate: getBookingAssetsCustomHeader(base64Image, booking.name),
-  };
-}
+// export function getBookingPdfTemplateData({
+//   booking,
+//   assets,
+//   organization,
+//   assetIdToQrCodeMap,
+// }: PdfDbResult) {
+//   const orgImageBlob = organization?.image?.blob;
+//   const base64Image = orgImageBlob
+//     ? `data:image/png;base64,${orgImageBlob.toString("base64")}`
+//     : "";
+//   return {
+//     booking: `Booking Checklist for ${booking.name}`,
+//     name: booking.name ?? "",
+//     orgName: organization?.name ?? "",
+//     custodian: `${booking?.custodianUser?.firstName ?? ""} ${
+//       booking?.custodianUser?.lastName ?? ""
+//     } <${booking?.custodianUser?.email ?? ""}>`,
+//     bookingPeriod:
+//       booking?.from && booking?.to
+//         ? `${new Date(booking.from).toLocaleString()} - ${new Date(
+//             booking.to
+//           ).toLocaleString()}`
+//         : "",
+//     items: assets?.map((asset) => ({
+//       name: asset.title ?? "",
+//       category: asset?.category?.name ?? "",
+//       location: asset?.location ? asset?.location?.name ?? "" : "",
+//       code: assetIdToQrCodeMap.get(asset.id) || "",
+//       mainImage: asset?.mainImage || "",
+//     })),
+//     headerTemplate: getBookingAssetsCustomHeader(base64Image, booking.name),
+//   };
+// }
 
-export async function getTemplatePath(template: string): Promise<string> {
-  const templatePath = path.resolve(process.cwd(), template);
-  const result = await fs.readFile(templatePath, "utf-8");
-  return result;
-}
+// export async function getTemplatePath(template: string): Promise<string> {
+//   const templatePath = path.resolve(process.cwd(), template);
+//   const result = await fs.readFile(templatePath, "utf-8");
+//   return result;
+// }
 
 export async function generatePdfContent(
   htmlContent: string,
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index 4a0b81b8e..03ec69c28 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -1,13 +1,13 @@
+import React from "react";
 import { json } from "@remix-run/node";
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import * as ejs from "ejs";
+import ReactDOMServer from "react-dom/server";
 import { z } from "zod";
 import type { PdfDbResult } from "~/modules/booking/pdf-helpers";
 import {
   fetchAllPdfRelatedData,
   generatePdfContent,
-  getBookingPdfTemplateData,
-  getTemplatePath,
+  getBookingAssetsCustomHeader,
 } from "~/modules/booking/pdf-helpers";
 import { makeShelfError } from "~/utils/error";
 
@@ -48,14 +48,12 @@ export const loader = async ({
       userId,
       role
     );
-    const template = await getTemplatePath(
-      "./app/views/booking-assets-template.ejs"
+    const htmlContent = ReactDOMServer.renderToString(
+      <BookingPDFPreview pdfMeta={pdfMeta} />
     );
-    const templateData = getBookingPdfTemplateData(pdfMeta);
-    const htmlContent = ejs.render(template, templateData);
     const pdfBuffer = await generatePdfContent(
       htmlContent,
-      templateData.headerTemplate
+      getBookingAssetsCustomHeader(pdfMeta)
     );
 
     return new Response(pdfBuffer, {
@@ -69,3 +67,167 @@ export const loader = async ({
     throw json(error(reason), { status: reason.status });
   }
 };
+
+// Define the styles as a JavaScript object
+const styles = {
+  container: {
+    width: "100%",
+    maxWidth: "210mm", // A4 width
+    margin: "0 auto",
+    boxSizing: "border-box",
+  },
+  headerText: {
+    marginBottom: "20px",
+  },
+  headerH3: {
+    padding: "unset",
+    margin: "unset",
+    color: "rgba(0, 0, 0, 0.6)",
+  },
+  headerH1: {
+    fontSize: "20px",
+    margin: "0",
+    marginTop: "2px",
+  },
+  bookingInfo: {
+    marginTop: "10px",
+    marginBottom: "20px",
+    border: "1px solid #bfbfbf",
+    borderBottom: "unset",
+  },
+  infoRow: {
+    display: "flex",
+    marginBottom: "5px",
+    padding: "8px",
+    borderBottom: "1px solid #bfbfbf",
+  },
+  infoLabel: {
+    fontWeight: "bold",
+    width: "150px",
+  },
+  infoValue: {
+    flexGrow: "1",
+    color: "rgba(0, 0, 0, 0.6)",
+  },
+  bookingTable: {
+    width: "100%",
+    borderCollapse: "collapse",
+    border: "1px solid #bfbfbf",
+    borderBottom: "unset",
+  },
+  tableHeader: {
+    borderBottom: "1px solid #bfbfbf",
+    padding: "10px",
+    textAlign: "left",
+    fontSize: "14px",
+  },
+  tableCell: {
+    border: "1px solid #bfbfbf",
+    padding: "10px",
+    textAlign: "left",
+    fontSize: "14px",
+    color: "rgba(0, 0, 0, 0.6)",
+    wordWrap: "break-word",
+  },
+  qrcodeInfo: {
+    display: "flex",
+    flexDirection: "row",
+    gap: "4px",
+    alignItems: "center",
+  },
+  img: {
+    height: "55px",
+    objectFit: "cover",
+  },
+  checkbox: {
+    display: "block",
+    margin: "0 auto",
+    height: "20px",
+    width: "20px",
+    border: "none",
+  },
+} as { [key: string]: React.CSSProperties };
+
+const BookingPDFPreview = ({ pdfMeta }: { pdfMeta: PdfDbResult }) => {
+  const { booking, organization, assets, assetIdToQrCodeMap } = pdfMeta;
+  return (
+    <div style={styles.container}>
+      <div style={styles.headerText}>
+        <h3 style={styles.headerH3}>{organization?.name || ""}</h3>
+        <h1 style={styles.headerH1}>
+          Booking checklist for {booking?.name || ""}
+        </h1>
+      </div>
+      <section style={styles.bookingInfo}>
+        <div style={styles.infoRow}>
+          <span style={styles.infoLabel}>Booking:</span>
+          <span style={styles.infoValue}>{booking?.name || ""}</span>
+        </div>
+        <div style={styles.infoRow}>
+          <span style={styles.infoLabel}>Custodian:</span>
+          <span style={styles.infoValue}>{`${
+            booking?.custodianUser?.firstName ?? ""
+          } ${booking?.custodianUser?.lastName ?? ""} <${
+            booking?.custodianUser?.email ?? ""
+          }>`}</span>
+        </div>
+        <div style={styles.infoRow}>
+          <span style={styles.infoLabel}>Booking period:</span>
+          <span style={styles.infoValue}>
+            {booking?.from && booking?.to
+              ? `${new Date(booking.from).toLocaleString()} - ${new Date(
+                  booking.to
+                ).toLocaleString()}`
+              : ""}
+          </span>
+        </div>
+      </section>
+      <table style={styles.bookingTable}>
+        <thead>
+          <tr>
+            <th style={styles.tableHeader}></th>
+            <th style={{ ...styles.tableHeader, width: "30%" }}>Name</th>
+            <th style={styles.tableHeader}>Category</th>
+            <th style={styles.tableHeader}>Location</th>
+            <th style={styles.tableHeader}>Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          {assets.map((asset, index) => (
+            <tr key={index}>
+              <td style={styles.tableCell}>
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                  }}
+                >
+                  {index + 1}
+                  <img
+                    src={asset?.mainImage || ""}
+                    alt="Asset"
+                    style={styles.img}
+                  />
+                </div>
+              </td>
+              <td style={styles.tableCell}>{asset?.title}</td>
+              <td style={styles.tableCell}>{asset?.category?.name}</td>
+              <td style={styles.tableCell}>{asset?.location?.name}</td>
+              <td style={styles.tableCell}>
+                <div style={styles.qrcodeInfo}>
+                  <img
+                    src={assetIdToQrCodeMap.get(asset.id) || ""}
+                    alt="QR Code"
+                    style={styles.img}
+                  />
+                  <input type="checkbox" style={styles.checkbox} />
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
diff --git a/app/views/booking-assets-template.ejs b/app/views/booking-assets-template.ejs
deleted file mode 100644
index f9d699638..000000000
--- a/app/views/booking-assets-template.ejs
+++ /dev/null
@@ -1,218 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Booking Checklist for </title>
-    <style>
-        /* General styles */
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-        }
-
-        .container {
-            width: 100%;
-            max-width: 210mm;
-            /* A4 width */
-            /* padding: 20px; */
-            /* padding:10mm;
-            padding-top:unset;
-            padding-bottom:unset; */
-            margin: 0 auto;
-            box-sizing: border-box;
-        }
-
-        /* Header styles */
-        header {
-            display: flex;
-            align-items: center;
-            padding-bottom: 10px;
-            font-size: 10px;
-            color: rgba(0, 0, 0, 0.6);
-            justify-content: space-between;
-            margin-bottom: 20px;
-        }
-
-        .logo {
-            height: 30px;
-            width: 30px;
-            margin-right: 20px;
-        }
-
-        .header-text {
-            flex-grow: 1;
-            margin-bottom:20px;
-        }
-        .header-text h3{
-            padding:unset;
-            margin:unset;
-            color: rgba(0, 0, 0, 0.6)
-        }
-
-        .header-text h1 {
-            font-size: 20px;
-            margin: 0;
-            margin-top:2px;
-        }
-
-        .header-text .date {
-            font-size: 12px;
-            color: #888;
-        }
-
-        /* Booking info styles */
-        .booking-info {
-            margin-top: 10px;
-            margin-bottom: 20px;
-            border: 1px solid #bfbfbf;
-            border-bottom: unset;
-        }
-
-        .booking-info div {
-            padding: 8px;
-            border-bottom: 1px solid #bfbfbf;
-        }
-
-        .info-row {
-            display: flex;
-            margin-bottom: 5px;
-        }
-
-        .info-label {
-            font-weight: bold;
-            width: 150px;
-        }
-
-        .info-value {
-            flex-grow: 1;
-            color: rgba(0, 0, 0, 0.6)
-        }
-
-        /* Table styles */
-        .booking-table {
-            width: 100%;
-            border-collapse: collapse;
-            border: 1px solid #bfbfbf;
-            border-bottom: unset;
-        }
-
-        .booking-table th,
-        .booking-table td {
-            border: 1px solid #bfbfbf;
-            padding: 10px;
-            text-align: left;
-            font-size: 14px;
-            word-wrap: break-word;
-            /* Ensure text wraps within cells */
-        }
-
-        .booking-table td {
-            color: rgba(0, 0, 0, 0.6);
-        }
-
-        .booking-table th {
-            font-weight: bold;
-            border: unset
-        }
-
-        .booking-table th.name-column {
-            width: 30%;
-        }
-
-        .booking-table td img {
-            height: 55px;
-            object-fit: cover
-        }
-
-        .booking-table td input {
-            display: block;
-            margin: 0 auto;
-            height:20px;
-            width:20px;
-            border: none;
-        }
-        .booking-table .qrcodeInfo{
-            display:  flex;
-            flex-direction: row;
-            gap:4px;
-            align-items: center;
-        }
-        /* Responsive design */
-        @media (max-width: 600px) {
-            .info-row {
-                flex-direction: column;
-            }
-
-            .info-label {
-                width: 100%;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div>
-        <div class="container">
-            <div class="header-text">
-                <h3><%= orgName %></h3></h3>
-                <h1>Booking checklist for <%= name %></h1>
-            </div>
-            <section class="booking-info">
-                <div class="info-row">
-                    <span class="info-label">Booking:</span>
-                    <span class="info-value"><%= name %></span>
-                </div>
-                <div class="info-row">
-                    <span class="info-label">Custodian:</span>
-                    <span class="info-value"><%= custodian %></span>
-                </div>
-                <div class="info-row">
-                    <span class="info-label">Booking period:</span>
-                    <span class="info-value"><%= bookingPeriod %></span>
-                </div>
-            </section>
-            <table class="booking-table">
-                <thead>
-                    <tr>
-                        <th></th>
-                        <th class="name-column">Name</th>
-                        <th>Category</th>
-                        <th>Location</th>
-                        <th>Code</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <% items.forEach(function(item, index) { %>
-                    <tr>
-                        <td>
-                            <div
-                                style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
-                                <%= index + 1 %>
-                                <img 
-                                   src="<%= item.mainImage %>"
-                                    alt="Asset">
-                            </div>
-                        </td>
-                        <td><%= item.name %></td>
-                        <td><%= item.category %></td>
-                        <td><%= item.location %></td>
-                        <td>
-                            <div class="qrcodeInfo">
-                                <img 
-                                src="<%= item.code %>"
-                                alt="QR Code">
-                                <input type="checkbox"/>
-                            </div>
-                        </td>
-                    </tr>
-                    <% }) %>
-                </tbody>
-            </table>
-        </div>
-    </div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e140e88a6..89d19fd51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,6 @@
         "date-fns": "^3.3.1",
         "detectrtc": "^1.4.1",
         "dom-to-image": "^2.6.0",
-        "ejs": "^3.1.10",
         "framer-motion": "^11.0.5",
         "hono": "^4.2.7",
         "iconv-lite": "^0.6.3",
@@ -96,7 +95,6 @@
         "@testing-library/react": "^14.2.1",
         "@testing-library/user-event": "^14.5.2",
         "@types/dom-to-image": "^2.6.7",
-        "@types/ejs": "^3.1.5",
         "@types/jsonwebtoken": "^9.0.5",
         "@types/luxon": "^3.4.2",
         "@types/nodemailer": "^6.4.14",
@@ -5302,12 +5300,6 @@
       "integrity": "sha512-me5VbCv+fcXozblWwG13krNBvuEOm6kA5xoa4RrjDJCNFOZSWR3/QLtOXimBHk1Fisq69Gx3JtOoXtg1N1tijg==",
       "dev": true
     },
-    "node_modules/@types/ejs": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.5.tgz",
-      "integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==",
-      "dev": true
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -6487,11 +6479,6 @@
         "astring": "bin/astring"
       }
     },
-    "node_modules/async": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
-    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -7062,6 +7049,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -7428,7 +7416,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "node_modules/confbox": {
       "version": "0.1.7",
@@ -8329,20 +8318,6 @@
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
-    "node_modules/ejs": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
-      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
-      "dependencies": {
-        "jake": "^10.8.5"
-      },
-      "bin": {
-        "ejs": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.751",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.751.tgz",
@@ -10012,25 +9987,6 @@
         "node": ">= 12"
       }
     },
-    "node_modules/filelist": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
-      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
-      "dependencies": {
-        "minimatch": "^5.0.1"
-      }
-    },
-    "node_modules/filelist/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -10713,6 +10669,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -11850,43 +11807,6 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "node_modules/jake": {
-      "version": "10.9.1",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.1.tgz",
-      "integrity": "sha512-61btcOHNnLnsOdtLgA5efqQWjnSi/vow5HbI7HMdKKWqvrKR1bLK3BPlJn9gcSaP2ewuamUSMB5XEy76KUIS2w==",
-      "dependencies": {
-        "async": "^3.2.3",
-        "chalk": "^4.0.2",
-        "filelist": "^1.0.4",
-        "minimatch": "^3.1.2"
-      },
-      "bin": {
-        "jake": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jake/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/jake/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/javascript-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
@@ -18156,6 +18076,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
diff --git a/package.json b/package.json
index 68cf75ba2..ba188d40f 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,6 @@
     "date-fns": "^3.3.1",
     "detectrtc": "^1.4.1",
     "dom-to-image": "^2.6.0",
-    "ejs": "^3.1.10",
     "framer-motion": "^11.0.5",
     "hono": "^4.2.7",
     "iconv-lite": "^0.6.3",
@@ -129,7 +128,6 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/dom-to-image": "^2.6.7",
-    "@types/ejs": "^3.1.5",
     "@types/jsonwebtoken": "^9.0.5",
     "@types/luxon": "^3.4.2",
     "@types/nodemailer": "^6.4.14",

From 39ffdc279bc74abf216a3f8a4b4c37d22417c289 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Wed, 29 May 2024 21:05:04 +0300
Subject: [PATCH 05/24] front-end changes to make modal bigger and easier to
 view

---
 .../booking/generate-booking-pdf.tsx          | 60 ++++++++++---------
 .../components/continue-with-email-form.tsx   |  3 +-
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index 292d7379e..e069769cb 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -11,6 +11,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "~/components/shared/modal";
+import { tw } from "~/utils/tw";
 import { Spinner } from "../shared/spinner";
 
 export const GenerateBookingPdf = ({
@@ -70,41 +71,44 @@ export const GenerateBookingPdf = ({
               Generate PDF...
             </Button>
           </AlertDialogTrigger>
-          <AlertDialogContent>
+          <AlertDialogContent className="flex h-[90vh] w-[90vw] max-w-[90vw] flex-col">
             <AlertDialogHeader>
               <AlertDialogTitle>
-                Generate Booking Checklist PDF for {booking?.name}
+                Generate Booking Checklist PDF for "{booking?.name}"
               </AlertDialogTitle>
               <AlertDialogDescription>
                 {errorMessage || "You can either preview or download the PDF."}
-                {!iframeLoaded && (
-                  <div className="h-500 m-4 flex flex-1 flex-col items-center justify-center text-center">
-                    <Spinner />
-                    <p className="mt-2">Generating PDF...</p>
-                  </div>
-                )}
-                {totalAssets && (
-                  <div style={{ display: iframeLoaded ? "block" : "none" }}>
-                    <iframe
-                      id="pdfPreview"
-                      width="100%"
-                      height="500px"
-                      onLoad={handleIframeLoad}
-                      className="mt-4"
-                      src={url}
-                      title="Booking PDF"
-                      allowFullScreen={true}
-                    />
-                  </div>
-                )}
               </AlertDialogDescription>
             </AlertDialogHeader>
-            <AlertDialogFooter>
-              <div className="flex justify-center gap-2">
-                <AlertDialogCancel asChild>
-                  <Button variant="secondary">Cancel</Button>
-                </AlertDialogCancel>
-              </div>
+            <div className="grow">
+              {/** Show spinner if no iframe */}
+              {!iframeLoaded && (
+                <div className="m-4  flex h-full flex-1 flex-col items-center justify-center text-center">
+                  <Spinner />
+                  <p className="mt-2">Generating PDF...</p>
+                </div>
+              )}
+              {totalAssets && (
+                <div
+                  className={tw(iframeLoaded ? "block" : "hidden", "h-full")}
+                >
+                  <iframe
+                    id="pdfPreview"
+                    width="100%"
+                    height="100%"
+                    onLoad={handleIframeLoad}
+                    className="mt-4"
+                    src={url}
+                    title="Booking PDF"
+                    allowFullScreen={true}
+                  />
+                </div>
+              )}
+            </div>
+            <AlertDialogFooter className="mt-4">
+              <AlertDialogCancel asChild>
+                <Button variant="secondary">Cancel</Button>
+              </AlertDialogCancel>
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
diff --git a/app/modules/auth/components/continue-with-email-form.tsx b/app/modules/auth/components/continue-with-email-form.tsx
index 275f6d448..5b161e231 100644
--- a/app/modules/auth/components/continue-with-email-form.tsx
+++ b/app/modules/auth/components/continue-with-email-form.tsx
@@ -29,7 +29,8 @@ export function ContinueWithEmailForm({ mode }: { mode: "login" | "signup" }) {
   const zo = useZorm("NewQuestionWizardScreen", SendOtpSchema);
 
   const isLoading = state === "submitting" || state === "loading";
-  const buttontext = mode === "login"?"Continue with OTP":"Sign up with OTP";
+  const buttontext =
+    mode === "login" ? "Continue with OTP" : "Sign up with OTP";
   const buttonLabel = isLoading
     ? "Sending you a one time password..."
     : buttontext;

From fee69a0e09451a07b82f2a83fae97215590007a5 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Wed, 29 May 2024 21:16:29 +0300
Subject: [PATCH 06/24] further css improvements

---
 app/components/booking/actions-dropdown.tsx   |  4 +--
 .../booking/generate-booking-pdf.tsx          | 31 ++++++-------------
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/app/components/booking/actions-dropdown.tsx b/app/components/booking/actions-dropdown.tsx
index 281857ba2..880f92ab3 100644
--- a/app/components/booking/actions-dropdown.tsx
+++ b/app/components/booking/actions-dropdown.tsx
@@ -47,7 +47,7 @@ export const ActionsDropdown = ({ fullWidth }: Props) => {
       <DropdownMenuPortal>
         <DropdownMenuContent
           align="end"
-          className="order w-[180px] rounded-md bg-white p-1.5 text-right "
+          className="order w-[220px] rounded-md bg-white p-1.5 text-right "
         >
           {isOngoing || isReserved || isOverdue ? (
             <DropdownMenuItem asChild>
@@ -107,7 +107,7 @@ export const ActionsDropdown = ({ fullWidth }: Props) => {
             <DeleteBooking booking={booking} />
           ) : null}
           <Divider className="my-2" />
-          {<GenerateBookingPdf booking={booking} />}
+          <GenerateBookingPdf booking={booking} />
         </DropdownMenuContent>
       </DropdownMenuPortal>
     </DropdownMenu>
diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index e069769cb..0597ac443 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -23,25 +23,14 @@ export const GenerateBookingPdf = ({
     assets: Partial<Asset>[];
   };
 }) => {
-  const [url, setUrl] = useState("");
   const [iframeLoaded, setIframeLoaded] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
   const [isMobile, setIsMobile] = useState(false);
-  const totalAssets = booking?.assets?.length;
-
-  useEffect(() => {
-    setIframeLoaded(false);
-    if (booking && totalAssets) {
-      const timestamp = new Date().getTime();
-      setUrl(
-        `/bookings/${booking.id?.toString()}/generate-pdf/${
-          booking?.name || "booking-assets"
-        }-${new Date().toISOString().slice(0, 10)}.pdf?timeStamp=${timestamp}`
-      );
-    } else {
-      setErrorMessage("No assets available to generate PDF.");
-    }
-  }, [booking, booking?.assets, totalAssets]);
+  const totalAssets = booking.assets.length;
+  const url = `/bookings/${booking.id.toString()}/generate-pdf/${
+    booking.name
+  }-${new Date()
+    .toISOString()
+    .slice(0, 10)}.pdf?timeStamp=${new Date().getTime()}`;
 
   useEffect(() => {
     const isMobileDevice = /Mobi/.test(navigator.userAgent);
@@ -63,21 +52,21 @@ export const GenerateBookingPdf = ({
           <AlertDialogTrigger asChild>
             <Button
               variant="link"
-              className="justify-start rounded-sm px-2 py-1.5 text-sm font-medium text-gray-700 outline-none hover:bg-slate-100 hover:text-gray-700 disabled:pointer-events-none disabled:opacity-50"
+              className="justify-start rounded-sm px-2 py-1.5 text-left text-sm font-medium text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700"
               width="full"
               name="generate pdf"
               disabled={!totalAssets}
             >
-              Generate PDF...
+              Generate overview PDF
             </Button>
           </AlertDialogTrigger>
           <AlertDialogContent className="flex h-[90vh] w-[90vw] max-w-[90vw] flex-col">
             <AlertDialogHeader>
               <AlertDialogTitle>
-                Generate Booking Checklist PDF for "{booking?.name}"
+                Generate booking checklist for "{booking?.name}"
               </AlertDialogTitle>
               <AlertDialogDescription>
-                {errorMessage || "You can either preview or download the PDF."}
+                You can either preview or download the PDF.
               </AlertDialogDescription>
             </AlertDialogHeader>
             <div className="grow">

From a63da9c89d6d5307aa8f5ee35e7352f63892ab5c Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Wed, 29 May 2024 21:23:01 +0300
Subject: [PATCH 07/24] more front-end and UI fixes

---
 app/components/booking/actions-dropdown.tsx   |   2 +-
 .../booking/generate-booking-pdf.tsx          | 135 ++++++++----------
 2 files changed, 64 insertions(+), 73 deletions(-)

diff --git a/app/components/booking/actions-dropdown.tsx b/app/components/booking/actions-dropdown.tsx
index 880f92ab3..1c1de7171 100644
--- a/app/components/booking/actions-dropdown.tsx
+++ b/app/components/booking/actions-dropdown.tsx
@@ -1,4 +1,4 @@
-import { useLoaderData, useSubmit, useLocation } from "@remix-run/react";
+import { useLoaderData, useSubmit } from "@remix-run/react";
 import { Divider } from "@tremor/react";
 import { ChevronRight } from "~/components/icons/library";
 import {
diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index 0597ac443..60e70e4a0 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -24,7 +24,6 @@ export const GenerateBookingPdf = ({
   };
 }) => {
   const [iframeLoaded, setIframeLoaded] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
   const totalAssets = booking.assets.length;
   const url = `/bookings/${booking.id.toString()}/generate-pdf/${
     booking.name
@@ -32,11 +31,6 @@ export const GenerateBookingPdf = ({
     .toISOString()
     .slice(0, 10)}.pdf?timeStamp=${new Date().getTime()}`;
 
-  useEffect(() => {
-    const isMobileDevice = /Mobi/.test(navigator.userAgent);
-    setIsMobile(isMobileDevice);
-  }, []);
-
   const handleIframeLoad = () => {
     setIframeLoaded(true);
   };
@@ -47,72 +41,69 @@ export const GenerateBookingPdf = ({
 
   return (
     <>
-      {!isMobile ? (
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button
-              variant="link"
-              className="justify-start rounded-sm px-2 py-1.5 text-left text-sm font-medium text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700"
-              width="full"
-              name="generate pdf"
-              disabled={!totalAssets}
-            >
-              Generate overview PDF
-            </Button>
-          </AlertDialogTrigger>
-          <AlertDialogContent className="flex h-[90vh] w-[90vw] max-w-[90vw] flex-col">
-            <AlertDialogHeader>
-              <AlertDialogTitle>
-                Generate booking checklist for "{booking?.name}"
-              </AlertDialogTitle>
-              <AlertDialogDescription>
-                You can either preview or download the PDF.
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <div className="grow">
-              {/** Show spinner if no iframe */}
-              {!iframeLoaded && (
-                <div className="m-4  flex h-full flex-1 flex-col items-center justify-center text-center">
-                  <Spinner />
-                  <p className="mt-2">Generating PDF...</p>
-                </div>
-              )}
-              {totalAssets && (
-                <div
-                  className={tw(iframeLoaded ? "block" : "hidden", "h-full")}
-                >
-                  <iframe
-                    id="pdfPreview"
-                    width="100%"
-                    height="100%"
-                    onLoad={handleIframeLoad}
-                    className="mt-4"
-                    src={url}
-                    title="Booking PDF"
-                    allowFullScreen={true}
-                  />
-                </div>
-              )}
-            </div>
-            <AlertDialogFooter className="mt-4">
-              <AlertDialogCancel asChild>
-                <Button variant="secondary">Cancel</Button>
-              </AlertDialogCancel>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      ) : (
-        <Button
-          variant="link"
-          className="justify-start rounded-sm px-2 py-1.5 text-sm font-medium text-gray-700 outline-none hover:bg-slate-100 hover:text-gray-700 disabled:pointer-events-none disabled:opacity-50"
-          width="full"
-          name="generate pdf"
-          disabled={!totalAssets}
-          onClick={handleMobileView}
-        >
-          Generate PDF...
-        </Button>
-      )}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button
+            variant="link"
+            className="hidden justify-start rounded-sm px-2 py-1.5 text-left text-sm font-medium text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700 md:block"
+            width="full"
+            name="generate pdf"
+            disabled={!totalAssets}
+          >
+            Generate overview PDF
+          </Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent className=" hidden h-[90vh] w-[90vw] max-w-[90vw] md:flex md:flex-col">
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Generate booking checklist for "{booking?.name}"
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              You can either preview or download the PDF.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="grow">
+            {/** Show spinner if no iframe */}
+            {!iframeLoaded && (
+              <div className="m-4  flex h-full flex-1 flex-col items-center justify-center text-center">
+                <Spinner />
+                <p className="mt-2">Generating PDF...</p>
+              </div>
+            )}
+            {totalAssets && (
+              <div className={tw(iframeLoaded ? "block" : "hidden", "h-full")}>
+                <iframe
+                  id="pdfPreview"
+                  width="100%"
+                  height="100%"
+                  onLoad={handleIframeLoad}
+                  className="mt-4"
+                  src={url}
+                  title="Booking PDF"
+                  allowFullScreen={true}
+                />
+              </div>
+            )}
+          </div>
+          <AlertDialogFooter className="mt-4">
+            <AlertDialogCancel asChild>
+              <Button variant="secondary">Cancel</Button>
+            </AlertDialogCancel>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Only for mobile */}
+      <Button
+        variant="link"
+        className="block justify-start rounded-sm px-2 py-1.5 text-left text-sm font-medium text-gray-700 outline-none hover:bg-slate-100 hover:text-gray-700 disabled:pointer-events-none disabled:opacity-50 md:hidden"
+        width="full"
+        name="generate pdf"
+        disabled={!totalAssets}
+        onClick={handleMobileView}
+      >
+        Generate overview PDF
+      </Button>
     </>
   );
 };

From 2a1c87a32a9ec61248be070aa8a97763d430c613 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Wed, 29 May 2024 21:38:40 +0300
Subject: [PATCH 08/24] remaining adjustments

---
 .../booking/generate-booking-pdf.tsx          |  2 +-
 app/modules/booking/pdf-helpers.ts            | 47 +------------------
 ...bookingId.generate-pdf.$fileName[.pdf].tsx |  6 ++-
 3 files changed, 8 insertions(+), 47 deletions(-)

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index 60e70e4a0..e5dad2cf2 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import type { Asset, Booking } from "@prisma/client";
 import { Button } from "~/components/shared/button";
 import {
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index fd406c0c8..6afade606 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -1,5 +1,3 @@
-import fs from "fs/promises";
-import path from "path";
 import type {
   Asset,
   Booking,
@@ -35,9 +33,7 @@ export async function fetchAllPdfRelatedData(
   role: OrganizationRoles | undefined
 ): Promise<PdfDbResult> {
   const booking = await getBooking({ id: bookingId, organizationId });
-  if (!booking) {
-    throw new Error("Booking not found");
-  }
+
   if (
     role === OrganizationRoles.SELF_SERVICE &&
     booking.custodianUserId !== userId
@@ -50,6 +46,7 @@ export async function fetchAllPdfRelatedData(
       shouldBeCaptured: false,
     });
   }
+
   const [assets, organization] = await Promise.all([
     db.asset.findMany({
       where: {
@@ -135,46 +132,6 @@ export const getBookingAssetsCustomHeader = ({
     `;
 };
 
-// export function getBookingPdfTemplateData({
-//   booking,
-//   assets,
-//   organization,
-//   assetIdToQrCodeMap,
-// }: PdfDbResult) {
-//   const orgImageBlob = organization?.image?.blob;
-//   const base64Image = orgImageBlob
-//     ? `data:image/png;base64,${orgImageBlob.toString("base64")}`
-//     : "";
-//   return {
-//     booking: `Booking Checklist for ${booking.name}`,
-//     name: booking.name ?? "",
-//     orgName: organization?.name ?? "",
-//     custodian: `${booking?.custodianUser?.firstName ?? ""} ${
-//       booking?.custodianUser?.lastName ?? ""
-//     } <${booking?.custodianUser?.email ?? ""}>`,
-//     bookingPeriod:
-//       booking?.from && booking?.to
-//         ? `${new Date(booking.from).toLocaleString()} - ${new Date(
-//             booking.to
-//           ).toLocaleString()}`
-//         : "",
-//     items: assets?.map((asset) => ({
-//       name: asset.title ?? "",
-//       category: asset?.category?.name ?? "",
-//       location: asset?.location ? asset?.location?.name ?? "" : "",
-//       code: assetIdToQrCodeMap.get(asset.id) || "",
-//       mainImage: asset?.mainImage || "",
-//     })),
-//     headerTemplate: getBookingAssetsCustomHeader(base64Image, booking.name),
-//   };
-// }
-
-// export async function getTemplatePath(template: string): Promise<string> {
-//   const templatePath = path.resolve(process.cwd(), template);
-//   const result = await fs.readFile(templatePath, "utf-8");
-//   return result;
-// }
-
 export async function generatePdfContent(
   htmlContent: string,
   headerTemplate?: string,
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index 03ec69c28..b3f65b9b5 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -9,6 +9,7 @@ import {
   generatePdfContent,
   getBookingAssetsCustomHeader,
 } from "~/modules/booking/pdf-helpers";
+import { SERVER_URL } from "~/utils/env";
 import { makeShelfError } from "~/utils/error";
 
 import { error, getParams } from "~/utils/http.server";
@@ -205,7 +206,10 @@ const BookingPDFPreview = ({ pdfMeta }: { pdfMeta: PdfDbResult }) => {
                 >
                   {index + 1}
                   <img
-                    src={asset?.mainImage || ""}
+                    src={
+                      asset?.mainImage ||
+                      `${SERVER_URL}/static/images/asset-placeholder.jpg`
+                    }
                     alt="Asset"
                     style={styles.img}
                   />

From 5da910700aadd2671b45bfdc8a068a75c6d4f440 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Thu, 30 May 2024 12:55:42 +0530
Subject: [PATCH 09/24] fix:add executable path for puppeteer

---
 .env.example                       | 3 ++-
 app/modules/booking/pdf-helpers.ts | 5 ++++-
 app/utils/env.ts                   | 8 ++++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/.env.example b/.env.example
index 49ffc81fc..e65ee279d 100644
--- a/.env.example
+++ b/.env.example
@@ -43,4 +43,5 @@ GEOCODE_API_KEY="geocode-api-key"
 # Used for Sentry error logging
 SENTRY_ORG="sentry-org"
 SENTRY_PROJECT="sentry-project"
-SENTRY_DSN="sentry-dsn"
\ No newline at end of file
+SENTRY_DSN="sentry-dsn"
+CHROME_EXECUTABLE_PATH="/usr/bin/google-chrome-stable"
\ No newline at end of file
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index 6afade606..6cb78a06a 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -11,6 +11,7 @@ import type {
 import { OrganizationRoles } from "@prisma/client";
 import puppeteer from "puppeteer";
 import { db } from "~/database/db.server";
+import { CHROME_EXECUTABLE_PATH } from "~/utils/env";
 import { ShelfError } from "~/utils/error";
 import { getBooking } from "./service.server";
 import { getQrCodeMaps } from "../qr/service.server";
@@ -137,7 +138,9 @@ export async function generatePdfContent(
   headerTemplate?: string,
   styles?: Record<string, string>
 ) {
-  const browser = await puppeteer.launch();
+  const browser = await puppeteer.launch({
+    executablePath: CHROME_EXECUTABLE_PATH || "/usr/bin/google-chrome-stable",
+  });
   const newPage = await browser.newPage();
   await newPage.setContent(htmlContent, { waitUntil: "networkidle0" });
 
diff --git a/app/utils/env.ts b/app/utils/env.ts
index bc9c15a49..6a53eaeab 100644
--- a/app/utils/env.ts
+++ b/app/utils/env.ts
@@ -13,6 +13,7 @@ declare global {
       CRISP_WEBSITE_ID: string;
       ENABLE_PREMIUM_FEATURES: string;
       MAINTENANCE_MODE: string;
+      CHROME_EXECUTABLE_PATH: string;
     };
   }
 }
@@ -45,6 +46,7 @@ declare global {
       ADMIN_EMAIL: string;
       ADMIN_PASSWORD: string;
       ADMIN_USERNAME: string;
+      CHROME_EXECUTABLE_PATH: string;
     }
   }
 }
@@ -180,6 +182,11 @@ export const SEND_ONBOARDING_EMAIL =
     isRequired: false,
   }) === "true" || false;
 
+export const CHROME_EXECUTABLE_PATH = getEnv("CHROME_EXECUTABLE_PATH", {
+  isSecret: false,
+  isRequired: true,
+});
+
 export function getBrowserEnv() {
   return {
     NODE_ENV,
@@ -190,5 +197,6 @@ export function getBrowserEnv() {
     MICROSOFT_CLARITY_ID,
     ENABLE_PREMIUM_FEATURES,
     MAINTENANCE_MODE,
+    CHROME_EXECUTABLE_PATH,
   };
 }

From 49e5c68352b9bd9e198b04ca89862166a2453698 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Fri, 31 May 2024 02:03:57 +0530
Subject: [PATCH 10/24] fix:pupetter envorniment issue resolved

---
 Dockerfile                                    | 50 +++++++++++++++++--
 Dockerfile.image                              | 45 ++++++++++++++++-
 app/modules/booking/pdf-helpers.ts            |  4 ++
 ...bookingId.generate-pdf.$fileName[.pdf].tsx |  1 +
 4 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 034d2de98..cbbb538f2 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,15 +3,58 @@ FROM node:20-bookworm-slim AS base
 
 # Set for base and all layer that inherit from it
 ENV PORT="8080"
-ENV NODE_ENV="production"
+ENV NODE_ENV="devlopment"
 ARG DEBIAN_FRONTEND="noninteractive"
 WORKDIR /src
 
-# Install openssl for Prisma
+# Install openssl for Prisma,
+#     apt-get install -y openssl && \
+#     rm -rf /var/lib/apt/lists/*
+# Install dependencies for Puppeteer and Google Chrome
 RUN apt-get update && \
-    apt-get install -y openssl && \
+    apt-get install -y \
+    ca-certificates \
+    fonts-liberation \
+    libappindicator3-1 \
+    libasound2 \
+    libatk-bridge2.0-0 \
+    libatk1.0-0 \
+    libcups2 \
+    libdbus-1-3 \
+    libdrm2 \
+    libgbm1 \
+    libgtk-3-0 \
+    libnspr4 \
+    libnss3 \
+    libx11-xcb1 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxrandr2 \
+    wget \
+    xdg-utils \
+    libgbm-dev \
+    gconf-service \
+    libxss1 \
+    libxtst6 \
+    lsb-release \
+    unzip \
+    xvfb \
+    openssl || { cat /var/log/apt/*log; exit 1; } && \
     rm -rf /var/lib/apt/lists/*
 
+
+# Add Google Chrome repository and install Chrome
+RUN apt-get update \
+    && apt-get install -y wget gnupg \
+    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | gpg --dearmor -o /usr/share/keyrings/googlechrome-linux-keyring.gpg \
+    && sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrome-linux-keyring.gpg] https://dl-ssl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get update \
+    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-khmeros fonts-kacst fonts-freefont-ttf libxss1 dbus dbus-x11 \
+      --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/*
+    
+ENV CHROME_EXECUTABLE_PATH="/usr/bin/google-chrome-stable"
+   
 # Install all node_modules, including dev dependencies
 FROM base AS deps
 
@@ -37,6 +80,7 @@ COPY --from=build /src/app/database /src/app/database
 COPY --from=build /src/build /src/build
 COPY --from=build /src/package.json /src/package.json
 COPY --from=build /src/start.sh /src/start.sh
+
 RUN chmod +x /src/start.sh
 
 ENTRYPOINT [ "/src/start.sh" ]
diff --git a/Dockerfile.image b/Dockerfile.image
index 38809ea00..0be9b49d7 100644
--- a/Dockerfile.image
+++ b/Dockerfile.image
@@ -8,10 +8,53 @@ ARG DEBIAN_FRONTEND="noninteractive"
 WORKDIR /src
 
 # Install openssl for Prisma
+# Install openssl for Prisma,
+#     apt-get install -y openssl && \
+#     rm -rf /var/lib/apt/lists/*
+# Install dependencies for Puppeteer and Google Chrome
 RUN apt-get update && \
-    apt-get install -y openssl && \
+    apt-get install -y \
+    ca-certificates \
+    fonts-liberation \
+    libappindicator3-1 \
+    libasound2 \
+    libatk-bridge2.0-0 \
+    libatk1.0-0 \
+    libcups2 \
+    libdbus-1-3 \
+    libdrm2 \
+    libgbm1 \
+    libgtk-3-0 \
+    libnspr4 \
+    libnss3 \
+    libx11-xcb1 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxrandr2 \
+    wget \
+    xdg-utils \
+    libgbm-dev \
+    gconf-service \
+    libxss1 \
+    libxtst6 \
+    lsb-release \
+    unzip \
+    xvfb \
+    openssl || { cat /var/log/apt/*log; exit 1; } && \
     rm -rf /var/lib/apt/lists/*
 
+
+# Add Google Chrome repository and install Chrome
+RUN apt-get update \
+    && apt-get install -y wget gnupg \
+    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | gpg --dearmor -o /usr/share/keyrings/googlechrome-linux-keyring.gpg \
+    && sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrome-linux-keyring.gpg] https://dl-ssl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get update \
+    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-khmeros fonts-kacst fonts-freefont-ttf libxss1 dbus dbus-x11 \
+      --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/*
+
+ENV CHROME_EXECUTABLE_PATH="/usr/bin/google-chrome-stable"
 # Install all node_modules, including dev dependencies
 FROM base AS deps
 
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index 6cb78a06a..c87f55171 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -140,6 +140,10 @@ export async function generatePdfContent(
 ) {
   const browser = await puppeteer.launch({
     executablePath: CHROME_EXECUTABLE_PATH || "/usr/bin/google-chrome-stable",
+    args: [
+      '--no-sandbox',
+      '--disable-setuid-sandbox'
+  ]
   });
   const newPage = await browser.newPage();
   await newPage.setContent(htmlContent, { waitUntil: "networkidle0" });
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index b3f65b9b5..f5832aa54 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -61,6 +61,7 @@ export const loader = async ({
       status: 200,
       headers: {
         "content-type": "application/pdf",
+        'Cache-Control': 'no-store',
       },
     });
   } catch (cause) {

From 66b84deb58e123072184d3a4b6b37e31c103b041 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Fri, 31 May 2024 02:07:51 +0530
Subject: [PATCH 11/24] chore:format the code

---
 app/modules/booking/pdf-helpers.ts                           | 5 +----
 .../bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx     | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index c87f55171..6a681ca34 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -140,10 +140,7 @@ export async function generatePdfContent(
 ) {
   const browser = await puppeteer.launch({
     executablePath: CHROME_EXECUTABLE_PATH || "/usr/bin/google-chrome-stable",
-    args: [
-      '--no-sandbox',
-      '--disable-setuid-sandbox'
-  ]
+    args: ["--no-sandbox", "--disable-setuid-sandbox"],
   });
   const newPage = await browser.newPage();
   await newPage.setContent(htmlContent, { waitUntil: "networkidle0" });
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index f5832aa54..095b96e90 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -61,7 +61,7 @@ export const loader = async ({
       status: 200,
       headers: {
         "content-type": "application/pdf",
-        'Cache-Control': 'no-store',
+        "Cache-Control": "no-store",
       },
     });
   } catch (cause) {

From b0087445e5704d786a0be368d4a87affa157e8b7 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Fri, 31 May 2024 02:14:43 +0530
Subject: [PATCH 12/24] chore:revert the node-env value

---
 Dockerfile | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index cbbb538f2..5a587c884 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,7 +3,7 @@ FROM node:20-bookworm-slim AS base
 
 # Set for base and all layer that inherit from it
 ENV PORT="8080"
-ENV NODE_ENV="devlopment"
+ENV NODE_ENV="production"
 ARG DEBIAN_FRONTEND="noninteractive"
 WORKDIR /src
 
@@ -52,7 +52,7 @@ RUN apt-get update \
     && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-khmeros fonts-kacst fonts-freefont-ttf libxss1 dbus dbus-x11 \
       --no-install-recommends \
     && rm -rf /var/lib/apt/lists/*
-    
+
 ENV CHROME_EXECUTABLE_PATH="/usr/bin/google-chrome-stable"
    
 # Install all node_modules, including dev dependencies

From 37c3b1e49e736e842de1b2436207087dbe6232b0 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Fri, 31 May 2024 15:35:51 +0530
Subject: [PATCH 13/24] chore:make the env chrome executable path variable
 optional

---
 app/utils/env.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/utils/env.ts b/app/utils/env.ts
index 6a53eaeab..4aacb8ab0 100644
--- a/app/utils/env.ts
+++ b/app/utils/env.ts
@@ -184,7 +184,7 @@ export const SEND_ONBOARDING_EMAIL =
 
 export const CHROME_EXECUTABLE_PATH = getEnv("CHROME_EXECUTABLE_PATH", {
   isSecret: false,
-  isRequired: true,
+  isRequired: false,
 });
 
 export function getBrowserEnv() {

From 5d86b4e1d7dbbcdb8489d79ec4fefac318c2d94a Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Fri, 31 May 2024 21:22:54 +0530
Subject: [PATCH 14/24] refactor:added font inter and handled the default image
 for organisation

---
 app/components/booking/actions-dropdown.tsx   |  2 +-
 .../booking/generate-booking-pdf.tsx          |  5 +-
 app/modules/booking/pdf-helpers.ts            | 53 ++++++++++++++++---
 ...bookingId.generate-pdf.$fileName[.pdf].tsx |  3 +-
 4 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/app/components/booking/actions-dropdown.tsx b/app/components/booking/actions-dropdown.tsx
index 1c1de7171..554d20227 100644
--- a/app/components/booking/actions-dropdown.tsx
+++ b/app/components/booking/actions-dropdown.tsx
@@ -107,7 +107,7 @@ export const ActionsDropdown = ({ fullWidth }: Props) => {
             <DeleteBooking booking={booking} />
           ) : null}
           <Divider className="my-2" />
-          <GenerateBookingPdf booking={booking} />
+          <GenerateBookingPdf booking={booking} timeStamp={new Date().getTime()}/>
         </DropdownMenuContent>
       </DropdownMenuPortal>
     </DropdownMenu>
diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index e5dad2cf2..c15a52c62 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -16,12 +16,14 @@ import { Spinner } from "../shared/spinner";
 
 export const GenerateBookingPdf = ({
   booking,
+  timeStamp
 }: {
   booking: {
     id: Booking["id"];
     name: Booking["name"];
     assets: Partial<Asset>[];
   };
+  timeStamp: number;
 }) => {
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const totalAssets = booking.assets.length;
@@ -29,8 +31,7 @@ export const GenerateBookingPdf = ({
     booking.name
   }-${new Date()
     .toISOString()
-    .slice(0, 10)}.pdf?timeStamp=${new Date().getTime()}`;
-
+    .slice(0, 10)}.pdf?timeStamp=${timeStamp}`;    
   const handleIframeLoad = () => {
     setIframeLoaded(true);
   };
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index 6a681ca34..52cfd4971 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -11,7 +11,7 @@ import type {
 import { OrganizationRoles } from "@prisma/client";
 import puppeteer from "puppeteer";
 import { db } from "~/database/db.server";
-import { CHROME_EXECUTABLE_PATH } from "~/utils/env";
+import { CHROME_EXECUTABLE_PATH, SERVER_URL } from "~/utils/env";
 import { ShelfError } from "~/utils/error";
 import { getBooking } from "./service.server";
 import { getQrCodeMaps } from "../qr/service.server";
@@ -25,6 +25,26 @@ export interface PdfDbResult {
   })[];
   organization: (Partial<Organization> & { image: Image | null }) | null;
   assetIdToQrCodeMap: Map<string, string>;
+  defaultOrgImg: string | null;
+}
+
+async function getImageAsBase64(url: string) {
+  try {
+    // Fetch the image data
+    const response = await fetch(url);
+
+    const arrayBuffer = await response.arrayBuffer();
+
+    // Convert the image data to a Base64-encoded string
+    const base64Image = Buffer.from(arrayBuffer).toString("base64");
+
+    return base64Image;
+
+    // Convert the image data to a Base64-encoded string
+  } catch (error) {
+    console.error("Error fetching image:", error);
+    return null;
+  }
 }
 
 export async function fetchAllPdfRelatedData(
@@ -48,7 +68,7 @@ export async function fetchAllPdfRelatedData(
     });
   }
 
-  const [assets, organization] = await Promise.all([
+  const [assets, organization, defaultOrgImg] = await Promise.all([
     db.asset.findMany({
       where: {
         id: { in: booking?.assets.map((a) => a.id) || [] },
@@ -77,6 +97,7 @@ export async function fetchAllPdfRelatedData(
       where: { id: organizationId },
       select: { imageId: true, name: true, id: true, image: true },
     }),
+    getImageAsBase64(`${SERVER_URL}/static/images/asset-placeholder.jpg`),
   ]);
 
   const assetIdToQrCodeMap = await getQrCodeMaps({
@@ -90,17 +111,19 @@ export async function fetchAllPdfRelatedData(
     assets,
     organization,
     assetIdToQrCodeMap,
+    defaultOrgImg,
   };
 }
 
 export const getBookingAssetsCustomHeader = ({
   organization,
   booking,
+  defaultOrgImg,
 }: PdfDbResult) => {
   const orgImageBlob = organization?.image?.blob;
-  const base64Image = orgImageBlob
-    ? `data:image/png;base64,${orgImageBlob.toString("base64")}`
-    : "";
+  const base64Image = `data:image/png;base64,${
+    orgImageBlob?.toString("base64") || defaultOrgImg
+  }`;
   return `
         <style>
             .header {
@@ -112,7 +135,8 @@ export const getBookingAssetsCustomHeader = ({
                 justify-content: space-between;
                 align-items: center;
                 box-sizing: border-box;
-                margin-bottom:30px;
+                margin-bottom:30px;,
+                font-family: Inter, sans-serif;
             }
             .header img {
                 height: 40px;
@@ -142,8 +166,23 @@ export async function generatePdfContent(
     executablePath: CHROME_EXECUTABLE_PATH || "/usr/bin/google-chrome-stable",
     args: ["--no-sandbox", "--disable-setuid-sandbox"],
   });
+  const fullHtmlContent = `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
+      </head>
+    <body class="bg-white">
+      ${htmlContent}
+    </body>
+    </html>
+  `;
   const newPage = await browser.newPage();
-  await newPage.setContent(htmlContent, { waitUntil: "networkidle0" });
+  await newPage.setContent(fullHtmlContent, { waitUntil: "networkidle0" });
 
   const pdfBuffer = await newPage.pdf({
     format: "A4",
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index 095b96e90..573ba115c 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -77,7 +77,8 @@ const styles = {
     maxWidth: "210mm", // A4 width
     margin: "0 auto",
     boxSizing: "border-box",
-  },
+    fontFamily: "Inter"
+    },
   headerText: {
     marginBottom: "20px",
   },

From 1a00b0dd583cb6e0229b509b8fb861fdeba0522b Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Fri, 31 May 2024 20:08:39 +0300
Subject: [PATCH 15/24] making CHROME_EXECUTABLE_PATH not required on
 development env.

---
 .env.example                       |   2 +-
 app/modules/booking/pdf-helpers.ts |   8 +-
 package-lock.json                  | 114 ++++++++++-------------------
 3 files changed, 47 insertions(+), 77 deletions(-)

diff --git a/.env.example b/.env.example
index e65ee279d..442fc5c5a 100644
--- a/.env.example
+++ b/.env.example
@@ -44,4 +44,4 @@ GEOCODE_API_KEY="geocode-api-key"
 SENTRY_ORG="sentry-org"
 SENTRY_PROJECT="sentry-project"
 SENTRY_DSN="sentry-dsn"
-CHROME_EXECUTABLE_PATH="/usr/bin/google-chrome-stable"
\ No newline at end of file
+# CHROME_EXECUTABLE_PATH="/usr/bin/google-chrome-stable"
\ No newline at end of file
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index 52cfd4971..aa7803aec 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -11,7 +11,7 @@ import type {
 import { OrganizationRoles } from "@prisma/client";
 import puppeteer from "puppeteer";
 import { db } from "~/database/db.server";
-import { CHROME_EXECUTABLE_PATH, SERVER_URL } from "~/utils/env";
+import { CHROME_EXECUTABLE_PATH, NODE_ENV, SERVER_URL } from "~/utils/env";
 import { ShelfError } from "~/utils/error";
 import { getBooking } from "./service.server";
 import { getQrCodeMaps } from "../qr/service.server";
@@ -42,6 +42,7 @@ async function getImageAsBase64(url: string) {
 
     // Convert the image data to a Base64-encoded string
   } catch (error) {
+    // eslint-disable-next-line no-console
     console.error("Error fetching image:", error);
     return null;
   }
@@ -163,7 +164,10 @@ export async function generatePdfContent(
   styles?: Record<string, string>
 ) {
   const browser = await puppeteer.launch({
-    executablePath: CHROME_EXECUTABLE_PATH || "/usr/bin/google-chrome-stable",
+    executablePath:
+      NODE_ENV !== "development"
+        ? CHROME_EXECUTABLE_PATH || "/usr/bin/google-chrome-stable"
+        : undefined,
     args: ["--no-sandbox", "--disable-setuid-sandbox"],
   });
   const fullHtmlContent = `
diff --git a/package-lock.json b/package-lock.json
index d8c23927c..7f05bfc9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -146,7 +146,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -2251,7 +2250,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -2265,7 +2263,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2274,7 +2271,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2282,14 +2278,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -2492,7 +2486,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -2505,7 +2498,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -2514,7 +2506,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -2657,13 +2648,13 @@
       "version": "5.13.0",
       "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.13.0.tgz",
       "integrity": "sha512-699iqlEvzyCj9ETrXhs8o8wQc/eVW+FigSsHpiskSFydhjVuwTJEfj/nIYqTaWFYuxiWQRfm3r01meuW97SZaQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@prisma/engines": {
       "version": "5.13.0",
       "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.13.0.tgz",
       "integrity": "sha512-hIFLm4H1boj6CBZx55P4xKby9jgDTeDG0Jj3iXtwaaHmlD5JmiDkZhh8+DYWkTGchu+rRF36AVROLnk0oaqhHw==",
-      "dev": true,
+      "devOptional": true,
       "hasInstallScript": true,
       "dependencies": {
         "@prisma/debug": "5.13.0",
@@ -2676,13 +2667,13 @@
       "version": "5.13.0-23.b9a39a7ee606c28e3455d0fd60e78c3ba82b1a2b",
       "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.13.0-23.b9a39a7ee606c28e3455d0fd60e78c3ba82b1a2b.tgz",
       "integrity": "sha512-AyUuhahTINGn8auyqYdmxsN+qn0mw3eg+uhkp8zwknXYIqoT3bChG4RqNY/nfDkPvzWAPBa9mrDyBeOnWSgO6A==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@prisma/fetch-engine": {
       "version": "5.13.0",
       "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.13.0.tgz",
       "integrity": "sha512-Yh4W+t6YKyqgcSEB3odBXt7QyVSm0OQlBSldQF2SNXtmOgMX8D7PF/fvH6E6qBCpjB/yeJLy/FfwfFijoHI6sA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@prisma/debug": "5.13.0",
         "@prisma/engines-version": "5.13.0-23.b9a39a7ee606c28e3455d0fd60e78c3ba82b1a2b",
@@ -2693,7 +2684,7 @@
       "version": "5.13.0",
       "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.13.0.tgz",
       "integrity": "sha512-B/WrQwYTzwr7qCLifQzYOmQhZcFmIFhR81xC45gweInSUn2hTEbfKUPd2keAog+y5WI5xLAFNJ3wkXplvSVkSw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@prisma/debug": "5.13.0"
       }
@@ -4990,6 +4981,26 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz",
+      "integrity": "sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz",
@@ -5464,13 +5475,13 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
       "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -5480,7 +5491,7 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -6199,8 +6210,7 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
@@ -6217,8 +6227,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -6982,7 +6991,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -7634,7 +7642,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -8091,8 +8098,7 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/diff": {
       "version": "5.2.0",
@@ -8127,8 +8133,7 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -9873,7 +9878,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -9914,7 +9918,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -11319,7 +11322,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -11823,7 +11825,6 @@
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
       "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -12162,7 +12163,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
       "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -12173,8 +12173,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/load-json-file": {
       "version": "4.0.0",
@@ -12749,7 +12748,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -13378,7 +13376,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -13829,7 +13826,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -13840,7 +13836,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -14256,7 +14251,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -14708,8 +14702,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.10.2",
@@ -14920,8 +14913,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -15148,7 +15140,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -15220,7 +15211,6 @@
       "version": "8.4.38",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
       "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -15260,7 +15250,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -15277,7 +15266,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -15296,7 +15284,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -15409,7 +15396,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
       "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.11"
       },
@@ -15428,7 +15414,6 @@
       "version": "6.0.16",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
       "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -15453,8 +15438,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/postgres-array": {
       "version": "2.0.0",
@@ -15671,7 +15655,7 @@
       "version": "5.13.0",
       "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.13.0.tgz",
       "integrity": "sha512-kGtcJaElNRAdAGsCNykFSZ7dBKpL14Cbs+VaQ8cECxQlRPDjBlMHNFYeYt0SKovAVy2Y65JXQwB3A5+zIQwnTg==",
-      "dev": true,
+      "devOptional": true,
       "hasInstallScript": true,
       "dependencies": {
         "@prisma/engines": "5.13.0"
@@ -15971,7 +15955,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -16372,7 +16355,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -16381,7 +16363,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16832,7 +16813,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -16905,7 +16885,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -17016,7 +16995,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -17538,7 +17516,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -18075,7 +18052,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -18097,7 +18073,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -18126,7 +18101,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -18185,7 +18159,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
       "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -18230,7 +18203,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -18242,7 +18214,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -18251,7 +18222,6 @@
       "version": "6.0.16",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
       "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -18439,7 +18409,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -18448,7 +18417,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -18611,8 +18579,7 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tsconfck": {
       "version": "3.0.3",
@@ -19213,7 +19180,7 @@
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -20817,7 +20784,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
       "integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
-      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },

From 93e80629055337aa42d85cfeb59da1ff6b491e1f Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Fri, 31 May 2024 20:09:31 +0300
Subject: [PATCH 16/24] making CHROME_EXECUTABLE_PATH not required on
 development env.

---
 app/components/booking/actions-dropdown.tsx                 | 5 ++++-
 app/components/booking/generate-booking-pdf.tsx             | 6 ++----
 app/modules/qr/service.server.ts                            | 2 ++
 .../bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx    | 4 ++--
 app/routes/_layout+/settings.general.tsx                    | 4 ++--
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/components/booking/actions-dropdown.tsx b/app/components/booking/actions-dropdown.tsx
index 554d20227..41c8ea303 100644
--- a/app/components/booking/actions-dropdown.tsx
+++ b/app/components/booking/actions-dropdown.tsx
@@ -107,7 +107,10 @@ export const ActionsDropdown = ({ fullWidth }: Props) => {
             <DeleteBooking booking={booking} />
           ) : null}
           <Divider className="my-2" />
-          <GenerateBookingPdf booking={booking} timeStamp={new Date().getTime()}/>
+          <GenerateBookingPdf
+            booking={booking}
+            timeStamp={new Date().getTime()}
+          />
         </DropdownMenuContent>
       </DropdownMenuPortal>
     </DropdownMenu>
diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index c15a52c62..391361edc 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -16,7 +16,7 @@ import { Spinner } from "../shared/spinner";
 
 export const GenerateBookingPdf = ({
   booking,
-  timeStamp
+  timeStamp,
 }: {
   booking: {
     id: Booking["id"];
@@ -29,9 +29,7 @@ export const GenerateBookingPdf = ({
   const totalAssets = booking.assets.length;
   const url = `/bookings/${booking.id.toString()}/generate-pdf/${
     booking.name
-  }-${new Date()
-    .toISOString()
-    .slice(0, 10)}.pdf?timeStamp=${timeStamp}`;    
+  }-${new Date().toISOString().slice(0, 10)}.pdf?timeStamp=${timeStamp}`;
   const handleIframeLoad = () => {
     setIframeLoaded(true);
   };
diff --git a/app/modules/qr/service.server.ts b/app/modules/qr/service.server.ts
index 96d4713ee..46776a6b8 100644
--- a/app/modules/qr/service.server.ts
+++ b/app/modules/qr/service.server.ts
@@ -468,12 +468,14 @@ export async function getQrCodeMaps({
         }
       } catch (error) {
         // Handle the error if needed
+        // eslint-disable-next-line no-console
         console.error(`Error processing asset with id ${asset.id}:`, error);
       }
     });
 
     await Promise.all(qrCodePromises);
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error("Error generating QR code maps:", err);
   }
   return finalMap;
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index 573ba115c..2ea640546 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -77,8 +77,8 @@ const styles = {
     maxWidth: "210mm", // A4 width
     margin: "0 auto",
     boxSizing: "border-box",
-    fontFamily: "Inter"
-    },
+    fontFamily: "Inter",
+  },
   headerText: {
     marginBottom: "20px",
   },
diff --git a/app/routes/_layout+/settings.general.tsx b/app/routes/_layout+/settings.general.tsx
index 0a2cc1314..4d5ee7913 100644
--- a/app/routes/_layout+/settings.general.tsx
+++ b/app/routes/_layout+/settings.general.tsx
@@ -138,7 +138,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
           currentOrganization.organization.owner.tier.tierLimit
         ),
         user,
-        curriences: Object.keys(Currency)
+        curriences: Object.keys(Currency),
       })
     );
   } catch (cause) {
@@ -208,7 +208,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
 }
 
 export default function GeneralPage() {
-  const { currentOrganization, user, canExportAssets, curriences} =
+  const { currentOrganization, user, canExportAssets, curriences } =
     useLoaderData<typeof loader>();
   const navigation = useNavigation();
   const zo = useZorm("NewQuestionWizardScreen", EditWorkspaceFormSchema);

From 4a4f05f6d625bdf0b0e82bb932b5ed45db054a9c Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Fri, 31 May 2024 20:13:16 +0300
Subject: [PATCH 17/24] cleanup

---
 Dockerfile       | 5 +----
 Dockerfile.image | 7 ++-----
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 5a587c884..a29b257aa 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,10 +7,7 @@ ENV NODE_ENV="production"
 ARG DEBIAN_FRONTEND="noninteractive"
 WORKDIR /src
 
-# Install openssl for Prisma,
-#     apt-get install -y openssl && \
-#     rm -rf /var/lib/apt/lists/*
-# Install dependencies for Puppeteer and Google Chrome
+# Install dependencies for Puppeteer and Google Chrome & Prisma
 RUN apt-get update && \
     apt-get install -y \
     ca-certificates \
diff --git a/Dockerfile.image b/Dockerfile.image
index 0be9b49d7..f25dfa1ce 100644
--- a/Dockerfile.image
+++ b/Dockerfile.image
@@ -7,11 +7,8 @@ ENV NODE_ENV="production"
 ARG DEBIAN_FRONTEND="noninteractive"
 WORKDIR /src
 
-# Install openssl for Prisma
-# Install openssl for Prisma,
-#     apt-get install -y openssl && \
-#     rm -rf /var/lib/apt/lists/*
-# Install dependencies for Puppeteer and Google Chrome
+
+# Install dependencies for Puppeteer and Google Chrome & Prisma
 RUN apt-get update && \
     apt-get install -y \
     ca-certificates \

From a1a87b902dd9dd400db1790844f2a76515771f37 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Mon, 3 Jun 2024 23:58:24 +0530
Subject: [PATCH 18/24] refactor: handled the review changes

---
 .../booking/generate-booking-pdf.tsx          | 20 +++++--
 app/modules/booking/pdf-helpers.ts            | 54 +++++++++++++------
 ...bookingId.generate-pdf.$fileName[.pdf].tsx | 27 ++++++----
 3 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index 391361edc..3e1b6b148 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -12,6 +12,7 @@ import {
   AlertDialogTrigger,
 } from "~/components/shared/modal";
 import { tw } from "~/utils/tw";
+import { DownloadIcon } from "../icons/library";
 import { Spinner } from "../shared/spinner";
 
 export const GenerateBookingPdf = ({
@@ -27,9 +28,9 @@ export const GenerateBookingPdf = ({
 }) => {
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const totalAssets = booking.assets.length;
-  const url = `/bookings/${booking.id.toString()}/generate-pdf/${
-    booking.name
-  }-${new Date().toISOString().slice(0, 10)}.pdf?timeStamp=${timeStamp}`;
+  const url = `/bookings/${booking.id.toString()}/generate-pdf/booking-checklist-${new Date()
+    .toISOString()
+    .slice(0, 10)}.pdf?timeStamp=${timeStamp}`;
   const handleIframeLoad = () => {
     setIframeLoaded(true);
   };
@@ -88,6 +89,19 @@ export const GenerateBookingPdf = ({
             <AlertDialogCancel asChild>
               <Button variant="secondary">Cancel</Button>
             </AlertDialogCancel>
+            <Button
+              to={url}
+              variant="secondary"
+              role="link"
+              download={true}
+              reloadDocument={true}
+              disabled={!iframeLoaded}
+            >
+              <div className="flex items-center gap-4">
+                <DownloadIcon />
+                <div>Download</div>
+              </div>
+            </Button>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index aa7803aec..9a4527f63 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -129,31 +129,53 @@ export const getBookingAssetsCustomHeader = ({
         <style>
             .header {
                 font-size: 10px;
-                text-align: right;
                 width: 100%;
-                padding: 0 20px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
+                padding: 0 30px;
                 box-sizing: border-box;
-                margin-bottom:30px;,
                 font-family: Inter, sans-serif;
             }
-            .header img {
-                height: 40px;
-                width: 40px;
-                object-fit: cover
+            .header-main{
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding-bottom:20px;
+              border-bottom: 2px solid #bfbfbf;
             }
-            .header .text {
-                text-align: right;
-                color: rgba(0, 0, 0, 0.6);
+            .header-main img {
+              height: 40px;
+              width: 40px;
+              object-fit: cover;
+              border-width: 1px;
+              border-radius: 4px;
+              padding: 1px;
+              border: 1px solid #bfbfbf;
+            }
+            .text {
+              max-width: 400px; /* Adjust this value as needed */
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              color: rgba(0, 0, 0, 0.6);
+            }
+            .header-content {
+              display: flex;
+              align-items: center;
+              padding-left: 20px;
+              overflow: hidden;
+            } 
+            .header-main .header-content {
+            color:  rgba(0, 0, 0, 0.6);
             }
         </style>
         <div class="header">
+            <div class="header-main">
             <img src="${base64Image}" alt="logo">
-            <span class="text">${
+            <div class="header-content">
+            <div class="text">${
               booking?.name || ""
-            } | <span class="date"></span> | Page <span class="pageNumber"></span>/<span class="totalPages"></span></span>
+            }</div><span> | ${new Date().toLocaleDateString()} | Page <span class="pageNumber"></span>/<span class="totalPages"></span></span>
+            </div>
+            </div>
         </div>
     `;
 };
@@ -193,7 +215,7 @@ export async function generatePdfContent(
     displayHeaderFooter: true,
     headerTemplate: headerTemplate || "",
     margin: {
-      top: "80px",
+      top: "120px",
       bottom: "30px",
       left: "20px",
       right: "20px",
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index 2ea640546..d19e61ce5 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -56,7 +56,6 @@ export const loader = async ({
       htmlContent,
       getBookingAssetsCustomHeader(pdfMeta)
     );
-
     return new Response(pdfBuffer, {
       status: 200,
       headers: {
@@ -106,7 +105,7 @@ const styles = {
   },
   infoLabel: {
     fontWeight: "bold",
-    width: "150px",
+    minWidth: "150px",
   },
   infoValue: {
     flexGrow: "1",
@@ -124,27 +123,37 @@ const styles = {
     textAlign: "left",
     fontSize: "14px",
   },
+  tableRow: {
+    verticalAlign: "top",
+  },
   tableCell: {
-    border: "1px solid #bfbfbf",
+    borderBottom: "1px solid #bfbfbf",
     padding: "10px",
     textAlign: "left",
     fontSize: "14px",
     color: "rgba(0, 0, 0, 0.6)",
     wordWrap: "break-word",
+    // maxWidth: "300px", /* Adjust this value as needed *
   },
   qrcodeInfo: {
     display: "flex",
     flexDirection: "row",
-    gap: "4px",
     alignItems: "center",
+    gap: "0.75rem",
   },
   img: {
+    width: "55px",
     height: "55px",
     objectFit: "cover",
   },
+  assetImg: {
+    borderWidth: "1px",
+    borderRadius: "4px",
+    padding: "1px",
+    border: "1px solid #bfbfbf",
+  },
   checkbox: {
     display: "block",
-    margin: "0 auto",
     height: "20px",
     width: "20px",
     border: "none",
@@ -197,23 +206,23 @@ const BookingPDFPreview = ({ pdfMeta }: { pdfMeta: PdfDbResult }) => {
         </thead>
         <tbody>
           {assets.map((asset, index) => (
-            <tr key={index}>
+            <tr key={index} style={styles.tableRow}>
               <td style={styles.tableCell}>
                 <div
                   style={{
                     display: "flex",
+                    alignItems: "flex-start",
                     justifyContent: "space-between",
-                    alignItems: "center",
                   }}
                 >
-                  {index + 1}
+                  <span>{index + 1}</span>
                   <img
                     src={
                       asset?.mainImage ||
                       `${SERVER_URL}/static/images/asset-placeholder.jpg`
                     }
                     alt="Asset"
-                    style={styles.img}
+                    style={{ ...styles.img, ...styles.assetImg }}
                   />
                 </div>
               </td>

From 30e1bd51fd8177e8bb3be38b064e9a29b68af9d6 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Tue, 4 Jun 2024 00:41:59 +0530
Subject: [PATCH 19/24] refactor:using predefined component  icon prop for
 dowload icon

---
 app/components/booking/generate-booking-pdf.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index 3e1b6b148..53fbc440f 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -96,11 +96,9 @@ export const GenerateBookingPdf = ({
               download={true}
               reloadDocument={true}
               disabled={!iframeLoaded}
+              icon="download"
             >
-              <div className="flex items-center gap-4">
-                <DownloadIcon />
-                <div>Download</div>
-              </div>
+              Download
             </Button>
           </AlertDialogFooter>
         </AlertDialogContent>

From fd45f2fbdb1fbcbc535c1e50a135a5640b24488f Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Tue, 4 Jun 2024 00:48:34 +0530
Subject: [PATCH 20/24] chore:cleanup

---
 app/components/booking/generate-booking-pdf.tsx                 | 1 -
 .../bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx        | 2 --
 2 files changed, 3 deletions(-)

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index 53fbc440f..f1b98eb6f 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -12,7 +12,6 @@ import {
   AlertDialogTrigger,
 } from "~/components/shared/modal";
 import { tw } from "~/utils/tw";
-import { DownloadIcon } from "../icons/library";
 import { Spinner } from "../shared/spinner";
 
 export const GenerateBookingPdf = ({
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index d19e61ce5..86e55ab9a 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -11,7 +11,6 @@ import {
 } from "~/modules/booking/pdf-helpers";
 import { SERVER_URL } from "~/utils/env";
 import { makeShelfError } from "~/utils/error";
-
 import { error, getParams } from "~/utils/http.server";
 import {
   PermissionAction,
@@ -133,7 +132,6 @@ const styles = {
     fontSize: "14px",
     color: "rgba(0, 0, 0, 0.6)",
     wordWrap: "break-word",
-    // maxWidth: "300px", /* Adjust this value as needed *
   },
   qrcodeInfo: {
     display: "flex",

From 5efe4e497992b20e2296dc0831ca7654c74f15b2 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Tue, 4 Jun 2024 15:56:46 +0530
Subject: [PATCH 21/24] chore:handle minor css changes

---
 app/modules/booking/pdf-helpers.ts            |  5 +----
 ...bookingId.generate-pdf.$fileName[.pdf].tsx | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index 9a4527f63..d6b50bebe 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -145,10 +145,6 @@ export const getBookingAssetsCustomHeader = ({
               height: 40px;
               width: 40px;
               object-fit: cover;
-              border-width: 1px;
-              border-radius: 4px;
-              padding: 1px;
-              border: 1px solid #bfbfbf;
             }
             .text {
               max-width: 400px; /* Adjust this value as needed */
@@ -162,6 +158,7 @@ export const getBookingAssetsCustomHeader = ({
               align-items: center;
               padding-left: 20px;
               overflow: hidden;
+              gap:2px;
             } 
             .header-main .header-content {
             color:  rgba(0, 0, 0, 0.6);
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index 86e55ab9a..756dfb5ca 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -94,17 +94,17 @@ const styles = {
     marginTop: "10px",
     marginBottom: "20px",
     border: "1px solid #bfbfbf",
-    borderBottom: "unset",
+    borderRadius: "4px",
   },
   infoRow: {
     display: "flex",
-    marginBottom: "5px",
     padding: "8px",
     borderBottom: "1px solid #bfbfbf",
   },
   infoLabel: {
-    fontWeight: "bold",
+    fontWeight: "medium",
     minWidth: "150px",
+    fontSize: "14px",
   },
   infoValue: {
     flexGrow: "1",
@@ -112,15 +112,16 @@ const styles = {
   },
   bookingTable: {
     width: "100%",
-    borderCollapse: "collapse",
     border: "1px solid #bfbfbf",
-    borderBottom: "unset",
+    borderRadius: "4px !important", // Added !important flag
+    borderCollapse: "collapse",
   },
   tableHeader: {
     borderBottom: "1px solid #bfbfbf",
     padding: "10px",
     textAlign: "left",
     fontSize: "14px",
+    fontWeight: "normal",
   },
   tableRow: {
     verticalAlign: "top",
@@ -170,19 +171,19 @@ const BookingPDFPreview = ({ pdfMeta }: { pdfMeta: PdfDbResult }) => {
       </div>
       <section style={styles.bookingInfo}>
         <div style={styles.infoRow}>
-          <span style={styles.infoLabel}>Booking:</span>
+          <span style={styles.infoLabel}>Booking</span>
           <span style={styles.infoValue}>{booking?.name || ""}</span>
         </div>
         <div style={styles.infoRow}>
-          <span style={styles.infoLabel}>Custodian:</span>
+          <span style={styles.infoLabel}>Custodian</span>
           <span style={styles.infoValue}>{`${
             booking?.custodianUser?.firstName ?? ""
           } ${booking?.custodianUser?.lastName ?? ""} <${
             booking?.custodianUser?.email ?? ""
           }>`}</span>
         </div>
-        <div style={styles.infoRow}>
-          <span style={styles.infoLabel}>Booking period:</span>
+        <div style={{ ...styles.infoRow, borderBottom: "unset" }}>
+          <span style={styles.infoLabel}>Booking period</span>
           <span style={styles.infoValue}>
             {booking?.from && booking?.to
               ? `${new Date(booking.from).toLocaleString()} - ${new Date(

From 05b210acd05e0b1e8d58d2863ea664f09c999e2f Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <rajeshjonnalagadda48@gmail.com>
Date: Tue, 4 Jun 2024 17:08:54 +0530
Subject: [PATCH 22/24] fix: fixed the downalod issue. pick the already
 geenrated data fro ifram and creating a blob url to download the file

---
 .../booking/generate-booking-pdf.tsx          | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index f1b98eb6f..c468b681c 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import type { Asset, Booking } from "@prisma/client";
 import { Button } from "~/components/shared/button";
 import {
@@ -26,6 +26,7 @@ export const GenerateBookingPdf = ({
   timeStamp: number;
 }) => {
   const [iframeLoaded, setIframeLoaded] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null); // Add ref for the iframe
   const totalAssets = booking.assets.length;
   const url = `/bookings/${booking.id.toString()}/generate-pdf/booking-checklist-${new Date()
     .toISOString()
@@ -38,6 +39,27 @@ export const GenerateBookingPdf = ({
     window.location.href = url;
   };
 
+  const handleDownload = (e: React.MouseEvent<HTMLButtonElement>) => {
+    try {
+      e.preventDefault();
+      const iframe = iframeRef.current;
+      if (iframe && iframe?.contentDocument) {
+        const pdfData = iframe?.contentDocument?.body?.innerHTML; // Adjust if necessary to access PDF data
+        const blob = new Blob([pdfData], { type: "application/pdf" });
+        const downloadUrl = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = downloadUrl;
+        a.download = `booking-checklist-${new Date()
+          .toISOString()
+          .slice(0, 10)}.pdf`;
+        a.click();
+        URL.revokeObjectURL(downloadUrl);
+      }
+    } catch (err) {
+      //do nothing for now.
+    }
+  };
+
   return (
     <>
       <AlertDialog>
@@ -73,6 +95,7 @@ export const GenerateBookingPdf = ({
               <div className={tw(iframeLoaded ? "block" : "hidden", "h-full")}>
                 <iframe
                   id="pdfPreview"
+                  ref={iframeRef}
                   width="100%"
                   height="100%"
                   onLoad={handleIframeLoad}
@@ -91,11 +114,9 @@ export const GenerateBookingPdf = ({
             <Button
               to={url}
               variant="secondary"
-              role="link"
-              download={true}
-              reloadDocument={true}
               disabled={!iframeLoaded}
               icon="download"
+              onClick={handleDownload}
             >
               Download
             </Button>

From 36676cbc6d164cefaf91223a558ce04f4d313611 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Tue, 4 Jun 2024 14:59:31 +0300
Subject: [PATCH 23/24] fixed merge conflicts

---
 .../booking/generate-booking-pdf.tsx          | 145 +++++++++---------
 app/components/layout/dialog.tsx              |   4 +
 app/modules/booking/pdf-helpers.ts            |   6 +-
 ...bookingId.generate-pdf.$fileName[.pdf].tsx |  14 +-
 4 files changed, 85 insertions(+), 84 deletions(-)

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index c468b681c..f75adf48f 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -1,17 +1,8 @@
 import { useRef, useState } from "react";
 import type { Asset, Booking } from "@prisma/client";
 import { Button } from "~/components/shared/button";
-import {
-  AlertDialog,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "~/components/shared/modal";
 import { tw } from "~/utils/tw";
+import { Dialog, DialogPortal } from "../layout/dialog";
 import { Spinner } from "../shared/spinner";
 
 export const GenerateBookingPdf = ({
@@ -60,69 +51,83 @@ export const GenerateBookingPdf = ({
     }
   };
 
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const handleOpenDialog = () => {
+    setIsDialogOpen(true);
+  };
+
+  const handleCloseDialog = () => {
+    setIsDialogOpen(false);
+  };
+
   return (
     <>
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button
-            variant="link"
-            className="hidden justify-start rounded-sm px-2 py-1.5 text-left text-sm font-medium text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700 md:block"
-            width="full"
-            name="generate pdf"
-            disabled={!totalAssets}
-          >
-            Generate overview PDF
-          </Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent className=" hidden h-[90vh] w-[90vw] max-w-[90vw] md:flex md:flex-col">
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              Generate booking checklist for "{booking?.name}"
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              You can either preview or download the PDF.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <div className="grow">
-            {/** Show spinner if no iframe */}
-            {!iframeLoaded && (
-              <div className="m-4  flex h-full flex-1 flex-col items-center justify-center text-center">
-                <Spinner />
-                <p className="mt-2">Generating PDF...</p>
-              </div>
-            )}
-            {totalAssets && (
-              <div className={tw(iframeLoaded ? "block" : "hidden", "h-full")}>
-                <iframe
-                  id="pdfPreview"
-                  ref={iframeRef}
-                  width="100%"
-                  height="100%"
-                  onLoad={handleIframeLoad}
-                  className="mt-4"
-                  src={url}
-                  title="Booking PDF"
-                  allowFullScreen={true}
-                />
-              </div>
-            )}
+      <Button
+        variant="link"
+        className="hidden justify-start rounded-sm px-2 py-1.5 text-left text-sm font-medium text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700 md:block"
+        width="full"
+        name="generate pdf"
+        onClick={handleOpenDialog}
+        disabled={!totalAssets}
+      >
+        Generate overview PDF
+      </Button>
+      <DialogPortal>
+        <Dialog
+          open={isDialogOpen}
+          onClose={handleCloseDialog}
+          className="h-[90vh] w-full py-0 md:h-[calc(100vh-4rem)]  md:w-[90%]"
+          title={
+            <div>
+              <h3>Generate booking checklist for "{booking?.name}"</h3>
+              <p>You can either preview or download the PDF.</p>
+            </div>
+          }
+        >
+          <div className="flex h-full flex-col px-6">
+            <div className="grow">
+              {/** Show spinner if no iframe */}
+              {!iframeLoaded && (
+                <div className="m-4  flex h-full flex-1 flex-col items-center justify-center text-center">
+                  <Spinner />
+                  <p className="mt-2">Generating PDF...</p>
+                </div>
+              )}
+              {totalAssets && (
+                <div
+                  className={tw(iframeLoaded ? "block" : "hidden", "h-full")}
+                >
+                  <iframe
+                    id="pdfPreview"
+                    width="100%"
+                    height="100%"
+                    onLoad={handleIframeLoad}
+                    ref={iframeRef}
+                    src={url}
+                    title="Booking PDF"
+                    allowFullScreen={true}
+                  />
+                </div>
+              )}
+            </div>
+            <div className="flex justify-end gap-3 py-4">
+              <Button variant="secondary" onClick={handleCloseDialog}>
+                Cancel
+              </Button>
+              <Button
+                variant="secondary"
+                role="link"
+                disabled={!iframeLoaded}
+                icon="download"
+                onClick={handleDownload}
+              >
+                Download
+              </Button>
+            </div>
           </div>
-          <AlertDialogFooter className="mt-4">
-            <AlertDialogCancel asChild>
-              <Button variant="secondary">Cancel</Button>
-            </AlertDialogCancel>
-            <Button
-              to={url}
-              variant="secondary"
-              disabled={!iframeLoaded}
-              icon="download"
-              onClick={handleDownload}
-            >
-              Download
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+        </Dialog>
+      </DialogPortal>
 
       {/* Only for mobile */}
       <Button
diff --git a/app/components/layout/dialog.tsx b/app/components/layout/dialog.tsx
index 5668a6f0f..d74d08354 100644
--- a/app/components/layout/dialog.tsx
+++ b/app/components/layout/dialog.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import ReactDOM from "react-dom";
 import { tw } from "~/utils/tw";
 import { XIcon } from "../icons/library";
 import { Button } from "../shared/button";
@@ -42,3 +43,6 @@ export const Dialog = ({
       </dialog>
     </div>
   ) : null;
+
+export const DialogPortal = ({ children }: { children: React.ReactNode }) =>
+  ReactDOM.createPortal(children, document.body);
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index d6b50bebe..277422e5e 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -138,8 +138,6 @@ export const getBookingAssetsCustomHeader = ({
               display: flex;
               justify-content: space-between;
               align-items: center;
-              padding-bottom:20px;
-              border-bottom: 2px solid #bfbfbf;
             }
             .header-main img {
               height: 40px;
@@ -161,7 +159,7 @@ export const getBookingAssetsCustomHeader = ({
               gap:2px;
             } 
             .header-main .header-content {
-            color:  rgba(0, 0, 0, 0.6);
+              color:  rgba(0, 0, 0, 0.6);
             }
         </style>
         <div class="header">
@@ -169,7 +167,7 @@ export const getBookingAssetsCustomHeader = ({
             <img src="${base64Image}" alt="logo">
             <div class="header-content">
             <div class="text">${
-              booking?.name || ""
+              booking.name
             }</div><span> | ${new Date().toLocaleDateString()} | Page <span class="pageNumber"></span>/<span class="totalPages"></span></span>
             </div>
             </div>
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index 756dfb5ca..b53a00ac7 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -102,7 +102,7 @@ const styles = {
     borderBottom: "1px solid #bfbfbf",
   },
   infoLabel: {
-    fontWeight: "medium",
+    fontWeight: "500",
     minWidth: "150px",
     fontSize: "14px",
   },
@@ -120,8 +120,8 @@ const styles = {
     borderBottom: "1px solid #bfbfbf",
     padding: "10px",
     textAlign: "left",
-    fontSize: "14px",
-    fontWeight: "normal",
+    fontSize: "10px",
+    fontWeight: "500",
   },
   tableRow: {
     verticalAlign: "top",
@@ -145,12 +145,6 @@ const styles = {
     height: "55px",
     objectFit: "cover",
   },
-  assetImg: {
-    borderWidth: "1px",
-    borderRadius: "4px",
-    padding: "1px",
-    border: "1px solid #bfbfbf",
-  },
   checkbox: {
     display: "block",
     height: "20px",
@@ -221,7 +215,7 @@ const BookingPDFPreview = ({ pdfMeta }: { pdfMeta: PdfDbResult }) => {
                       `${SERVER_URL}/static/images/asset-placeholder.jpg`
                     }
                     alt="Asset"
-                    style={{ ...styles.img, ...styles.assetImg }}
+                    style={{ ...styles.img }}
                   />
                 </div>
               </td>

From ee9875183fc3a45480b2276295213eda5fcab4f5 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Tue, 4 Jun 2024 15:36:27 +0300
Subject: [PATCH 24/24] removing download button + other minor adjustments

---
 .../booking/generate-booking-pdf.tsx          | 35 ++-----------------
 ...bookingId.generate-pdf.$fileName[.pdf].tsx |  1 -
 2 files changed, 2 insertions(+), 34 deletions(-)

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index f75adf48f..0cb847c4f 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -1,6 +1,7 @@
-import { useRef, useState } from "react";
+import { useState } from "react";
 import type { Asset, Booking } from "@prisma/client";
 import { Button } from "~/components/shared/button";
+
 import { tw } from "~/utils/tw";
 import { Dialog, DialogPortal } from "../layout/dialog";
 import { Spinner } from "../shared/spinner";
@@ -17,7 +18,6 @@ export const GenerateBookingPdf = ({
   timeStamp: number;
 }) => {
   const [iframeLoaded, setIframeLoaded] = useState(false);
-  const iframeRef = useRef<HTMLIFrameElement>(null); // Add ref for the iframe
   const totalAssets = booking.assets.length;
   const url = `/bookings/${booking.id.toString()}/generate-pdf/booking-checklist-${new Date()
     .toISOString()
@@ -30,27 +30,6 @@ export const GenerateBookingPdf = ({
     window.location.href = url;
   };
 
-  const handleDownload = (e: React.MouseEvent<HTMLButtonElement>) => {
-    try {
-      e.preventDefault();
-      const iframe = iframeRef.current;
-      if (iframe && iframe?.contentDocument) {
-        const pdfData = iframe?.contentDocument?.body?.innerHTML; // Adjust if necessary to access PDF data
-        const blob = new Blob([pdfData], { type: "application/pdf" });
-        const downloadUrl = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = downloadUrl;
-        a.download = `booking-checklist-${new Date()
-          .toISOString()
-          .slice(0, 10)}.pdf`;
-        a.click();
-        URL.revokeObjectURL(downloadUrl);
-      }
-    } catch (err) {
-      //do nothing for now.
-    }
-  };
-
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
   const handleOpenDialog = () => {
@@ -103,7 +82,6 @@ export const GenerateBookingPdf = ({
                     width="100%"
                     height="100%"
                     onLoad={handleIframeLoad}
-                    ref={iframeRef}
                     src={url}
                     title="Booking PDF"
                     allowFullScreen={true}
@@ -115,15 +93,6 @@ export const GenerateBookingPdf = ({
               <Button variant="secondary" onClick={handleCloseDialog}>
                 Cancel
               </Button>
-              <Button
-                variant="secondary"
-                role="link"
-                disabled={!iframeLoaded}
-                icon="download"
-                onClick={handleDownload}
-              >
-                Download
-              </Button>
             </div>
           </div>
         </Dialog>
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index b53a00ac7..89c9d1042 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -94,7 +94,6 @@ const styles = {
     marginTop: "10px",
     marginBottom: "20px",
     border: "1px solid #bfbfbf",
-    borderRadius: "4px",
   },
   infoRow: {
     display: "flex",