From 89351683f1deb19c4229fd093a9ace101116a36d Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Thu, 2 Jan 2025 17:37:38 +0200
Subject: [PATCH 1/2] kicked off work on changing pdf generation

---
 .../booking/generate-booking-pdf.tsx          | 229 +++++++++++++--
 ...bookingId.generate-pdf.$fileName[.pdf].tsx | 261 ------------------
 .../api+/bookings.$bookingId.generate-pdf.tsx |  70 +++++
 3 files changed, 269 insertions(+), 291 deletions(-)
 delete mode 100644 app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
 create mode 100644 app/routes/api+/bookings.$bookingId.generate-pdf.tsx

diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index 3da3d262c..c9d491a14 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -1,10 +1,16 @@
-import { useState } from "react";
-import type { Asset, Booking } from "@prisma/client";
+import { useEffect, useRef, useState } from "react";
+import type {
+  Asset,
+  Booking,
+  Organization,
+  TeamMember,
+  User,
+} from "@prisma/client";
+import { useReactToPrint } from "react-to-print";
 import { Button } from "~/components/shared/button";
 
-import { tw } from "~/utils/tw";
+import { SERVER_URL } from "~/utils/env";
 import { Dialog, DialogPortal } from "../layout/dialog";
-import { Spinner } from "../shared/spinner";
 
 export const GenerateBookingPdf = ({
   booking,
@@ -17,14 +23,10 @@ export const GenerateBookingPdf = ({
   };
   timeStamp: number;
 }) => {
-  const [iframeLoaded, setIframeLoaded] = useState(false);
   const totalAssets = booking.assets.length;
   const url = `/bookings/${booking.id.toString()}/generate-pdf/booking-checklist-${new Date()
     .toISOString()
     .slice(0, 10)}.pdf?timeStamp=${timeStamp}`;
-  const handleIframeLoad = () => {
-    setIframeLoaded(true);
-  };
 
   const handleMobileView = () => {
     window.location.href = url;
@@ -66,28 +68,10 @@ export const GenerateBookingPdf = ({
         >
           <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}
-                    src={url}
-                    title="Booking PDF"
-                    allowFullScreen={true}
-                  />
-                </div>
-              )}
+              <BookingPDFPreview
+                isDialogOpen={isDialogOpen}
+                bookingId={booking.id}
+              />
             </div>
             <div className="flex justify-end gap-3 py-4">
               <Button variant="secondary" onClick={handleCloseDialog}>
@@ -112,3 +96,188 @@ export const GenerateBookingPdf = ({
     </>
   );
 };
+
+interface PdfDbResult {
+  booking: Booking & {
+    custodianUser?: User;
+    custodianTeamMember?: TeamMember;
+  };
+  organization: Organization;
+  assets: Array<
+    Asset & {
+      kit?: { name: string } | null;
+      category?: { name: string } | null;
+      location?: { name: string } | null;
+    }
+  >;
+  assetIdToQrCodeMap: Map<string, string>;
+  from?: string;
+  to?: string;
+}
+
+const BookingPDFPreview = ({
+  bookingId,
+  isDialogOpen,
+}: {
+  bookingId: string;
+  isDialogOpen: boolean;
+}) => {
+  const [pdfMeta, setPdfMeta] = useState<PdfDbResult | null>(null);
+  const [isFetchingBookings, setIsFetchingBookings] = useState(true);
+  const componentRef = useRef<HTMLDivElement>(null);
+  const handlePrint = useReactToPrint({
+    content: () => componentRef.current,
+    documentTitle: `booking-${pdfMeta?.booking.id}`,
+  });
+  useEffect(() => {
+    if (isDialogOpen) {
+      fetch(`/api/bookings/${bookingId}/generate-pdf`)
+        .then((response) => response.json())
+        .then((data) => {
+          setPdfMeta(data.pdfMeta);
+        })
+        .finally(() => {
+          setIsFetchingBookings(false);
+        });
+    }
+  }, [bookingId, isDialogOpen]);
+
+  if (!pdfMeta) {
+    return null;
+  }
+  const { booking, organization, assets, assetIdToQrCodeMap } = pdfMeta;
+
+  const custodianName = booking.custodianUser
+    ? `${booking.custodianUser.firstName} ${booking.custodianUser.lastName} <${booking.custodianUser.email}>`
+    : booking.custodianTeamMember?.name;
+
+  return (
+    <>
+      <button onClick={handlePrint}>Download PDF</button>
+      <div
+        className="mx-auto box-border w-full max-w-[210mm] border p-4 font-inter"
+        ref={componentRef}
+      >
+        <div className="mb-5">
+          <h3 className="m-0 p-0 text-gray-600">{organization?.name}</h3>
+          <h1 className="mt-0.5 text-xl font-medium">
+            Booking checklist for {booking?.name}
+          </h1>
+        </div>
+
+        <section className="mb-5 mt-2.5 border border-gray-300">
+          <div className="flex border-b border-gray-300 p-2">
+            <span className="min-w-[150px] text-sm font-medium">Booking</span>
+            <span className="grow text-gray-600">{booking?.name}</span>
+          </div>
+          <div className="flex border-b border-gray-300 p-2">
+            <span className="min-w-[150px] text-sm font-medium">Custodian</span>
+            <span className="grow text-gray-600">{custodianName}</span>
+          </div>
+          <div className="flex border-b border-gray-300 p-2">
+            <span className="min-w-[150px] text-sm font-medium">
+              Booking period
+            </span>
+            <span className="grow text-gray-600">
+              {pdfMeta?.from && pdfMeta?.to
+                ? `${pdfMeta.from} - ${pdfMeta.to}`
+                : ""}
+            </span>
+          </div>
+          <div className="flex p-2">
+            <span className="min-w-[150px] text-sm font-medium">
+              Description
+            </span>
+            <span className="grow whitespace-pre-wrap text-gray-600">
+              {booking?.description}
+            </span>
+          </div>
+        </section>
+
+        <table className="w-full border-collapse rounded border border-gray-300">
+          <thead>
+            <tr>
+              <th className="border-b border-gray-300 p-2.5 text-left text-xs font-medium"></th>
+              <th className="w-[30%] border-b border-gray-300 p-2.5 text-left text-xs font-medium">
+                Name
+              </th>
+              <th className="border-b border-gray-300 p-2.5 text-left text-xs font-medium">
+                Kit
+              </th>
+              <th className="border-b border-gray-300 p-2.5 text-left text-xs font-medium">
+                Category
+              </th>
+              <th className="border-b border-gray-300 p-2.5 text-left text-xs font-medium">
+                Location
+              </th>
+              <th className="border-b border-gray-300 p-2.5 text-left text-xs font-medium">
+                Code
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {assets.map((asset, index) => (
+              <tr key={asset.id} className="align-top">
+                <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
+                  <div className="flex items-start justify-between">
+                    <span>{index + 1}</span>
+                    <img
+                      src={
+                        asset?.mainImage ||
+                        `${SERVER_URL}/static/images/asset-placeholder.jpg`
+                      }
+                      alt="Asset"
+                      className="size-14 object-cover"
+                    />
+                  </div>
+                </td>
+                <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
+                  {asset?.title}
+                </td>
+                <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
+                  {asset?.kit?.name}
+                </td>
+                <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
+                  {asset?.category?.name}
+                </td>
+                <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
+                  {asset?.location?.name}
+                </td>
+                {/* <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
+                <div className="flex items-center gap-3">
+                  <img
+                    src={assetIdToQrCodeMap.get(asset.id) || ""}
+                    alt="QR Code"
+                    className="size-14 object-cover"
+                  />
+                  <input type="checkbox" className="block size-5 border-none" />
+                </div>
+              </td> */}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};
+
+// Print-specific CSS
+const printStyles = `
+  @media print {
+    @page {
+      size: A4;
+      margin: 20mm;
+    }
+    
+    /* Hide everything except the PDF preview */
+    body > *:not(.pdf-preview) {
+      display: none !important;
+    }
+    
+    .pdf-preview {
+      width: 100% !important;
+      max-width: none !important;
+    }
+  }
+`;
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
deleted file mode 100644
index e22dbf8a3..000000000
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import React from "react";
-import { json } from "@remix-run/node";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import ReactDOMServer from "react-dom/server";
-import { z } from "zod";
-import type { PdfDbResult } from "~/modules/booking/pdf-helpers";
-import {
-  fetchAllPdfRelatedData,
-  generatePdfContent,
-  getBookingAssetsCustomHeader,
-} from "~/modules/booking/pdf-helpers";
-import { getDateTimeFormat } from "~/utils/client-hints";
-import { SERVER_URL } from "~/utils/env";
-import { makeShelfError } from "~/utils/error";
-import { error, getParams } from "~/utils/http.server";
-import {
-  PermissionAction,
-  PermissionEntity,
-} from "~/utils/permissions/permission.data";
-import { requirePermission } from "~/utils/roles.server";
-
-export const loader = async ({
-  context,
-  request,
-  params,
-}: LoaderFunctionArgs) => {
-  const { userId } = context.getSession();
-  const { bookingId } = getParams(
-    params,
-    z.object({
-      bookingId: z.string(),
-    }),
-    {
-      additionalData: { userId },
-    }
-  );
-
-  try {
-    const { organizationId, role } = await requirePermission({
-      userId: userId,
-      request,
-      entity: PermissionEntity.booking,
-      action: PermissionAction.read,
-    });
-
-    const pdfMeta: PdfDbResult = await fetchAllPdfRelatedData(
-      bookingId,
-      organizationId,
-      userId,
-      role
-    );
-    const { from, to } = pdfMeta.booking;
-    if (from && to) {
-      pdfMeta.from = getDateTimeFormat(request, {
-        dateStyle: "short",
-        timeStyle: "short",
-      }).format(new Date(from));
-
-      pdfMeta.to = getDateTimeFormat(request, {
-        dateStyle: "short",
-        timeStyle: "short",
-      }).format(new Date(to));
-    }
-    const htmlContent = ReactDOMServer.renderToString(
-      <BookingPDFPreview pdfMeta={pdfMeta} />
-    );
-    const pdfBuffer = await generatePdfContent(
-      htmlContent,
-      pdfMeta,
-      getBookingAssetsCustomHeader(pdfMeta)
-    );
-    return new Response(pdfBuffer, {
-      status: 200,
-      headers: {
-        "content-type": "application/pdf",
-        "Cache-Control": "no-store",
-      },
-    });
-  } catch (cause) {
-    const reason = makeShelfError(cause, { userId, bookingId });
-    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",
-    fontFamily: "Inter",
-  },
-  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",
-  },
-  infoRow: {
-    display: "flex",
-    padding: "8px",
-    borderBottom: "1px solid #bfbfbf",
-  },
-  infoLabel: {
-    fontWeight: "500",
-    minWidth: "150px",
-    fontSize: "14px",
-  },
-  infoValue: {
-    flexGrow: "1",
-    color: "rgba(0, 0, 0, 0.6)",
-  },
-  bookingTable: {
-    width: "100%",
-    border: "1px solid #bfbfbf",
-    borderRadius: "4px !important", // Added !important flag
-    borderCollapse: "collapse",
-  },
-  tableHeader: {
-    borderBottom: "1px solid #bfbfbf",
-    padding: "10px",
-    textAlign: "left",
-    fontSize: "10px",
-    fontWeight: "500",
-  },
-  tableRow: {
-    verticalAlign: "top",
-  },
-  tableCell: {
-    borderBottom: "1px solid #bfbfbf",
-    padding: "10px",
-    textAlign: "left",
-    fontSize: "14px",
-    color: "rgba(0, 0, 0, 0.6)",
-    wordWrap: "break-word",
-  },
-  qrcodeInfo: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: "0.75rem",
-  },
-  img: {
-    width: "55px",
-    height: "55px",
-    objectFit: "cover",
-  },
-  checkbox: {
-    display: "block",
-    height: "20px",
-    width: "20px",
-    border: "none",
-  },
-} as { [key: string]: React.CSSProperties };
-
-const BookingPDFPreview = ({ pdfMeta }: { pdfMeta: PdfDbResult }) => {
-  const { booking, organization, assets, assetIdToQrCodeMap } = pdfMeta;
-
-  const custodianName = booking.custodianUser
-    ? `${booking.custodianUser.firstName} ${booking.custodianUser.lastName} <${booking.custodianUser.email}>`
-    : `${booking.custodianTeamMember?.name}`;
-
-  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}>{custodianName}</span>
-        </div>
-        <div style={styles.infoRow}>
-          <span style={styles.infoLabel}>Booking period</span>
-          <span style={styles.infoValue}>
-            {pdfMeta?.from && pdfMeta?.to
-              ? `${pdfMeta.from} - ${pdfMeta.to}`
-              : ""}
-          </span>
-        </div>
-        <div style={{ ...styles.infoRow, borderBottom: "unset" }}>
-          <span style={styles.infoLabel}>Description</span>
-          <span style={{ ...styles.infoValue, whiteSpace: "pre-wrap" }}>
-            {booking?.description || ""}
-          </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}>Kit</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} style={styles.tableRow}>
-              <td style={styles.tableCell}>
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "flex-start",
-                    justifyContent: "space-between",
-                  }}
-                >
-                  <span>{index + 1}</span>
-                  <img
-                    src={
-                      asset?.mainImage ||
-                      `${SERVER_URL}/static/images/asset-placeholder.jpg`
-                    }
-                    alt="Asset"
-                    style={{ ...styles.img }}
-                  />
-                </div>
-              </td>
-              <td style={styles.tableCell}>{asset?.title || ""}</td>
-              <td style={styles.tableCell}>{asset?.kit?.name || ""}</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/routes/api+/bookings.$bookingId.generate-pdf.tsx b/app/routes/api+/bookings.$bookingId.generate-pdf.tsx
new file mode 100644
index 000000000..0c2e62a68
--- /dev/null
+++ b/app/routes/api+/bookings.$bookingId.generate-pdf.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import { json } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import ReactDOMServer from "react-dom/server";
+import { z } from "zod";
+import type { PdfDbResult } from "~/modules/booking/pdf-helpers";
+import {
+  fetchAllPdfRelatedData,
+  generatePdfContent,
+  getBookingAssetsCustomHeader,
+} from "~/modules/booking/pdf-helpers";
+import { getDateTimeFormat } from "~/utils/client-hints";
+import { SERVER_URL } from "~/utils/env";
+import { makeShelfError } from "~/utils/error";
+import { data, error, getParams } from "~/utils/http.server";
+import {
+  PermissionAction,
+  PermissionEntity,
+} from "~/utils/permissions/permission.data";
+import { requirePermission } from "~/utils/roles.server";
+
+export const loader = async ({
+  context,
+  request,
+  params,
+}: LoaderFunctionArgs) => {
+  const { userId } = context.getSession();
+  const { bookingId } = getParams(
+    params,
+    z.object({
+      bookingId: z.string(),
+    }),
+    {
+      additionalData: { userId },
+    }
+  );
+
+  try {
+    const { organizationId, role } = await requirePermission({
+      userId: userId,
+      request,
+      entity: PermissionEntity.booking,
+      action: PermissionAction.read,
+    });
+
+    const pdfMeta: PdfDbResult = await fetchAllPdfRelatedData(
+      bookingId,
+      organizationId,
+      userId,
+      role
+    );
+    const { from, to } = pdfMeta.booking;
+    if (from && to) {
+      pdfMeta.from = getDateTimeFormat(request, {
+        dateStyle: "short",
+        timeStyle: "short",
+      }).format(new Date(from));
+
+      pdfMeta.to = getDateTimeFormat(request, {
+        dateStyle: "short",
+        timeStyle: "short",
+      }).format(new Date(to));
+    }
+
+    return json(data({ pdfMeta }));
+  } catch (cause) {
+    const reason = makeShelfError(cause, { userId, bookingId });
+    throw json(error(reason), { status: reason.status });
+  }
+};

From b0291e6dddc67c105b25cc12ad6a3bc2583d9672 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Fri, 3 Jan 2025 18:16:44 +0200
Subject: [PATCH 2/2] updating UI and making pdf work with a fron-end
 implementation

---
 Dockerfile                                    |  13 -
 Dockerfile.image                              |   7 -
 .../booking/generate-booking-pdf.tsx          | 241 +++++++++---------
 app/modules/booking/pdf-helpers.ts            | 141 +---------
 app/modules/qr/service.server.ts              |  10 +-
 .../api+/bookings.$bookingId.generate-pdf.tsx |   9 +-
 package.json                                  |   1 -
 7 files changed, 123 insertions(+), 299 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index cdb991ecb..3246e317a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -33,19 +33,6 @@ RUN npm prune --omit=dev
 # Finally, build the production image with minimal footprint
 FROM base AS release
 
-# Install dependencies
-RUN apt-get update && apt-get install -y \
-    chromium \
-    fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
-    --no-install-recommends \
-    && rm -rf /var/lib/apt/lists/*
-
-# Set environment variables
-ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
-    PUPPETEER_SKIP_DOWNLOAD=true \
-    CHROME_EXECUTABLE_PATH="/usr/bin/chromium"
-
-
 COPY --from=build /src/node_modules /src/node_modules
 COPY --from=build /src/app/database /src/app/database
 COPY --from=build /src/build /src/build
diff --git a/Dockerfile.image b/Dockerfile.image
index 500eae09c..38809ea00 100644
--- a/Dockerfile.image
+++ b/Dockerfile.image
@@ -32,13 +32,6 @@ RUN npm prune --omit=dev
 # Finally, build the production image with minimal footprint
 FROM base AS release
 
-# Install packages needed for pupeteer
-RUN apt-get update -qq && \
-    apt-get install --no-install-recommends -y chromium chromium-sandbox && \
-    rm -rf /var/lib/apt/lists /var/cache/apt/archives
-
-ENV CHROME_EXECUTABLE_PATH="/usr/bin/chromium"
-
 COPY --from=build /src/node_modules /src/node_modules
 COPY --from=build /src/app/database /src/app/database
 COPY --from=build /src/build /src/build
diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index c9d491a14..5ae370720 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -1,16 +1,14 @@
+import type { RefObject } from "react";
 import { useEffect, useRef, useState } from "react";
-import type {
-  Asset,
-  Booking,
-  Organization,
-  TeamMember,
-  User,
-} from "@prisma/client";
+import type { Asset, Booking } from "@prisma/client";
 import { useReactToPrint } from "react-to-print";
 import { Button } from "~/components/shared/button";
 
+import type { PdfDbResult } from "~/modules/booking/pdf-helpers";
 import { SERVER_URL } from "~/utils/env";
 import { Dialog, DialogPortal } from "../layout/dialog";
+import { DateS } from "../shared/date";
+import { Spinner } from "../shared/spinner";
 
 export const GenerateBookingPdf = ({
   booking,
@@ -24,15 +22,28 @@ export const GenerateBookingPdf = ({
   timeStamp: number;
 }) => {
   const totalAssets = booking.assets.length;
-  const url = `/bookings/${booking.id.toString()}/generate-pdf/booking-checklist-${new Date()
-    .toISOString()
-    .slice(0, 10)}.pdf?timeStamp=${timeStamp}`;
+  const componentRef = useRef<HTMLDivElement>(null);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [pdfMeta, setPdfMeta] = useState<PdfDbResult | null>(null);
+  const [isFetchingBookings, setIsFetchingBookings] = useState(true);
 
-  const handleMobileView = () => {
-    window.location.href = url;
-  };
+  useEffect(() => {
+    if (isDialogOpen) {
+      fetch(`/api/bookings/${booking.id}/generate-pdf`)
+        .then((response) => response.json())
+        .then((data) => {
+          setPdfMeta(data.pdfMeta);
+        })
+        .finally(() => {
+          setIsFetchingBookings(false);
+        });
+    }
+  }, [booking, isDialogOpen]);
 
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const handlePrint = useReactToPrint({
+    content: () => componentRef.current,
+    documentTitle: `booking-${booking.name}-${timeStamp}`,
+  });
 
   const handleOpenDialog = () => {
     setIsDialogOpen(true);
@@ -60,18 +71,32 @@ export const GenerateBookingPdf = ({
           onClose={handleCloseDialog}
           className="h-[90vh] w-full py-0 md:h-[calc(100vh-4rem)]  md:w-[90%]"
           title={
-            <div>
+            <div className="mx-auto w-full max-w-[210mm] border p-4 text-center">
               <h3>Generate booking checklist for "{booking?.name}"</h3>
               <p>You can either preview or download the PDF.</p>
+              {!isFetchingBookings && (
+                <div className="mt-4">
+                  <Button onClick={handlePrint}>Download PDF</Button>
+                </div>
+              )}
             </div>
           }
         >
           <div className="flex h-full flex-col px-6">
             <div className="grow">
-              <BookingPDFPreview
-                isDialogOpen={isDialogOpen}
-                bookingId={booking.id}
-              />
+              {isFetchingBookings ? (
+                <div className="flex h-full flex-col items-center justify-center gap-2">
+                  <div>Generating PDF preview...</div>
+                  <div>
+                    <Spinner />
+                  </div>
+                </div>
+              ) : (
+                <BookingPDFPreview
+                  pdfMeta={pdfMeta}
+                  componentRef={componentRef}
+                />
+              )}
             </div>
             <div className="flex justify-end gap-3 py-4">
               <Button variant="secondary" onClick={handleCloseDialog}>
@@ -89,7 +114,7 @@ export const GenerateBookingPdf = ({
         width="full"
         name="generate pdf"
         disabled={!totalAssets}
-        onClick={handleMobileView}
+        // onClick={handleMobileView}
       >
         Generate overview PDF
       </Button>
@@ -97,72 +122,49 @@ export const GenerateBookingPdf = ({
   );
 };
 
-interface PdfDbResult {
-  booking: Booking & {
-    custodianUser?: User;
-    custodianTeamMember?: TeamMember;
-  };
-  organization: Organization;
-  assets: Array<
-    Asset & {
-      kit?: { name: string } | null;
-      category?: { name: string } | null;
-      location?: { name: string } | null;
-    }
-  >;
-  assetIdToQrCodeMap: Map<string, string>;
-  from?: string;
-  to?: string;
-}
-
 const BookingPDFPreview = ({
-  bookingId,
-  isDialogOpen,
+  componentRef,
+  pdfMeta,
 }: {
-  bookingId: string;
-  isDialogOpen: boolean;
+  componentRef: RefObject<HTMLDivElement>;
+  pdfMeta: PdfDbResult | null;
 }) => {
-  const [pdfMeta, setPdfMeta] = useState<PdfDbResult | null>(null);
-  const [isFetchingBookings, setIsFetchingBookings] = useState(true);
-  const componentRef = useRef<HTMLDivElement>(null);
-  const handlePrint = useReactToPrint({
-    content: () => componentRef.current,
-    documentTitle: `booking-${pdfMeta?.booking.id}`,
-  });
-  useEffect(() => {
-    if (isDialogOpen) {
-      fetch(`/api/bookings/${bookingId}/generate-pdf`)
-        .then((response) => response.json())
-        .then((data) => {
-          setPdfMeta(data.pdfMeta);
-        })
-        .finally(() => {
-          setIsFetchingBookings(false);
-        });
-    }
-  }, [bookingId, isDialogOpen]);
+  if (!pdfMeta) return null;
 
-  if (!pdfMeta) {
-    return null;
-  }
   const { booking, organization, assets, assetIdToQrCodeMap } = pdfMeta;
-
   const custodianName = booking.custodianUser
     ? `${booking.custodianUser.firstName} ${booking.custodianUser.lastName} <${booking.custodianUser.email}>`
     : booking.custodianTeamMember?.name;
 
   return (
-    <>
-      <button onClick={handlePrint}>Download PDF</button>
+    <div className="border bg-gray-200 py-4">
+      <style>
+        {`@media print {
+          @page {
+            margin: 10mm;  /* Adjust margin size as needed */
+            size: A4;
+          }
+          .pdf-wrapper {
+            margin: 0;
+            padding: 0;
+          }
+
+      }`}
+      </style>
       <div
-        className="mx-auto box-border w-full max-w-[210mm] border p-4 font-inter"
+        className="pdf-wrapper mx-auto w-[200mm] bg-white p-[10mm] font-inter"
         ref={componentRef}
       >
-        <div className="mb-5">
-          <h3 className="m-0 p-0 text-gray-600">{organization?.name}</h3>
-          <h1 className="mt-0.5 text-xl font-medium">
-            Booking checklist for {booking?.name}
-          </h1>
+        <div className="mb-5 flex justify-between">
+          <div>
+            <h3 className="m-0 p-0 text-gray-600">{organization?.name}</h3>
+            <h1 className="mt-0.5 text-xl font-medium">
+              Booking checklist for {booking?.name}
+            </h1>
+          </div>
+          <div className="text-gray-500">
+            {booking.name} | <DateS date={new Date()} />
+          </div>
         </div>
 
         <section className="mb-5 mt-2.5 border border-gray-300">
@@ -194,23 +196,28 @@ const BookingPDFPreview = ({
           </div>
         </section>
 
-        <table className="w-full border-collapse rounded border border-gray-300">
+        <table className="w-full border-collapse border border-gray-300">
           <thead>
             <tr>
-              <th className="border-b border-gray-300 p-2.5 text-left text-xs font-medium"></th>
-              <th className="w-[30%] border-b border-gray-300 p-2.5 text-left text-xs font-medium">
+              <th className="w-10 border-b border-r border-gray-300 p-2.5 text-left text-xs font-medium">
+                #
+              </th>
+              <th className="w-20 min-w-[76px] border-b border-r border-gray-300 p-2.5 text-left text-xs font-medium">
+                Image
+              </th>
+              <th className="w-[30%] border-b border-r border-gray-300 p-2.5 text-left text-xs font-medium">
                 Name
               </th>
-              <th className="border-b border-gray-300 p-2.5 text-left text-xs font-medium">
+              <th className="w-24 border-b border-r border-gray-300 p-2.5 text-left text-xs font-medium">
                 Kit
               </th>
-              <th className="border-b border-gray-300 p-2.5 text-left text-xs font-medium">
+              <th className="w-24 border-b border-r border-gray-300 p-2.5 text-left text-xs font-medium">
                 Category
               </th>
-              <th className="border-b border-gray-300 p-2.5 text-left text-xs font-medium">
+              <th className="w-24 border-b border-r border-gray-300 p-2.5 text-left text-xs font-medium">
                 Location
               </th>
-              <th className="border-b border-gray-300 p-2.5 text-left text-xs font-medium">
+              <th className="min-w-[120px] border-b border-r border-gray-300 p-2.5 text-left text-xs font-medium">
                 Code
               </th>
             </tr>
@@ -218,66 +225,46 @@ const BookingPDFPreview = ({
           <tbody>
             {assets.map((asset, index) => (
               <tr key={asset.id} className="align-top">
-                <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
-                  <div className="flex items-start justify-between">
-                    <span>{index + 1}</span>
-                    <img
-                      src={
-                        asset?.mainImage ||
-                        `${SERVER_URL}/static/images/asset-placeholder.jpg`
-                      }
-                      alt="Asset"
-                      className="size-14 object-cover"
-                    />
-                  </div>
+                <td className="border-b border-r border-gray-300 p-2.5 text-sm text-gray-600">
+                  {index + 1}
                 </td>
-                <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
+                <td className="border-b border-r border-gray-300 p-2.5 text-sm text-gray-600">
+                  <img
+                    src={
+                      asset?.mainImage ||
+                      `${SERVER_URL}/static/images/asset-placeholder.jpg`
+                    }
+                    alt="Asset"
+                    className="!size-14 object-cover"
+                  />
+                </td>
+                <td className="border-b border-r border-gray-300 p-2.5 text-sm text-gray-600">
                   {asset?.title}
                 </td>
-                <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
+                <td className="border-b border-r border-gray-300 p-2.5 text-sm text-gray-600">
                   {asset?.kit?.name}
                 </td>
-                <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
+                <td className="border-b border-r border-gray-300 p-2.5 text-sm text-gray-600">
                   {asset?.category?.name}
                 </td>
-                <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
+                <td className="border-b border-r border-gray-300 p-2.5 text-sm text-gray-600">
                   {asset?.location?.name}
                 </td>
-                {/* <td className="border-b border-gray-300 p-2.5 text-sm text-gray-600">
-                <div className="flex items-center gap-3">
-                  <img
-                    src={assetIdToQrCodeMap.get(asset.id) || ""}
-                    alt="QR Code"
-                    className="size-14 object-cover"
-                  />
-                  <input type="checkbox" className="block size-5 border-none" />
-                </div>
-              </td> */}
+                <td className="border-b border-r border-gray-300 p-2.5 text-sm text-gray-600">
+                  <div className="flex items-center gap-3">
+                    <img
+                      src={assetIdToQrCodeMap[asset.id] || ""}
+                      alt="QR Code"
+                      className="size-14 object-cover"
+                    />
+                    <input type="checkbox" className="block size-5 border" />
+                  </div>
+                </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
-    </>
+    </div>
   );
 };
-
-// Print-specific CSS
-const printStyles = `
-  @media print {
-    @page {
-      size: A4;
-      margin: 20mm;
-    }
-    
-    /* Hide everything except the PDF preview */
-    body > *:not(.pdf-preview) {
-      display: none !important;
-    }
-    
-    .pdf-preview {
-      width: 100% !important;
-      max-width: none !important;
-    }
-  }
-`;
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index 45d467ce3..bcc888ec0 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -9,9 +9,8 @@ import type {
   Kit,
 } from "@prisma/client";
 import { OrganizationRoles } from "@prisma/client";
-import puppeteer from "puppeteer";
 import { db } from "~/database/db.server";
-import { CHROME_EXECUTABLE_PATH, NODE_ENV, SERVER_URL } from "~/utils/env";
+import { SERVER_URL } from "~/utils/env";
 import { ShelfError } from "~/utils/error";
 import { getBooking } from "./service.server";
 import { getQrCodeMaps } from "../qr/service.server";
@@ -27,7 +26,7 @@ export interface PdfDbResult {
     kit: Kit | null;
   })[];
   organization: (Partial<Organization> & { image: Image | null }) | null;
-  assetIdToQrCodeMap: Map<string, string>;
+  assetIdToQrCodeMap: Record<string, string>;
   defaultOrgImg: string | null;
   from?: string;
   to?: string;
@@ -130,139 +129,3 @@ export async function fetchAllPdfRelatedData(
     });
   }
 }
-
-export const getBookingAssetsCustomHeader = ({
-  organization,
-  booking,
-  defaultOrgImg,
-}: PdfDbResult) => {
-  const orgImageBlob = organization?.image?.blob;
-  const base64Image = `data:image/png;base64,${
-    orgImageBlob?.toString("base64") || defaultOrgImg
-  }`;
-  return `
-        <style>
-            .header {
-                font-size: 10px;
-                width: 100%;
-                padding: 0 30px;
-                box-sizing: border-box;
-                font-family: Inter, sans-serif;
-            }
-            .header-main{
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-            }
-            .header-main img {
-              height: 40px;
-              width: 40px;
-              object-fit: cover;
-            }
-            .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;
-              gap:2px;
-            } 
-            .header-main .header-content {
-              color:  rgba(0, 0, 0, 0.6);
-            }
-        </style>
-        <div class="header">
-            <div class="header-main">
-            <img src="${base64Image}" alt="logo">
-            <div class="header-content">
-            <div class="text">${
-              booking.name
-            }</div><span> | ${new Date().toLocaleDateString()} | Page <span class="pageNumber"></span>/<span class="totalPages"></span></span>
-            </div>
-            </div>
-        </div>
-    `;
-};
-
-export async function generatePdfContent(
-  htmlContent: string,
-  pdfMeta: PdfDbResult,
-  headerTemplate?: string,
-  styles?: Record<string, string>
-) {
-  const browser = await puppeteer.launch({
-    executablePath:
-      NODE_ENV !== "development"
-        ? CHROME_EXECUTABLE_PATH || "/usr/bin/chromium"
-        : undefined,
-    args: [
-      "--no-sandbox",
-      "--disable-setuid-sandbox",
-      "--disable-gpu",
-      "--disable-software-rasterizer",
-    ],
-    // @ts-ignore
-    headless: "new",
-  });
-
-  try {
-    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(fullHtmlContent, {
-      waitUntil: "networkidle0",
-      timeout: 60000,
-    });
-
-    const pdfBuffer = await newPage.pdf({
-      format: "A4",
-      displayHeaderFooter: true,
-      headerTemplate: headerTemplate || "",
-      margin: {
-        top: "120px",
-        bottom: "30px",
-        left: "20px",
-        right: "20px",
-        ...(styles || {}),
-      },
-    });
-
-    return pdfBuffer;
-  } catch (cause) {
-    throw new ShelfError({
-      cause,
-      message: "Error generating PDF content",
-      status: 500,
-      label: "Booking",
-      additionalData: {
-        pdfMeta,
-      },
-    });
-  } finally {
-    // Ensures that the browser is closed, even in the case of an error(possible memory leak)
-    if (browser) {
-      await browser.close();
-    }
-  }
-}
diff --git a/app/modules/qr/service.server.ts b/app/modules/qr/service.server.ts
index 246d097e3..d438cf7dc 100644
--- a/app/modules/qr/service.server.ts
+++ b/app/modules/qr/service.server.ts
@@ -458,8 +458,8 @@ interface QRCodeMapParams {
 export async function getQrCodeMaps({
   assets,
   size,
-}: QRCodeMapParams): Promise<Map<string, string>> {
-  const finalMap = new Map<string, string>();
+}: QRCodeMapParams): Promise<Record<string, string>> {
+  const finalObject: Record<string, string> = {};
 
   try {
     const qrCodePromises = assets.map(async (asset) => {
@@ -473,8 +473,9 @@ export async function getQrCodeMaps({
               qr,
             })
           : null;
+
         if (qrCode?.code) {
-          finalMap.set(asset.id, qrCode?.code?.src || "");
+          finalObject[asset.id] = qrCode.code.src || "";
         }
       } catch (error) {
         // Handle the error if needed
@@ -488,7 +489,8 @@ export async function getQrCodeMaps({
     // eslint-disable-next-line no-console
     console.error("Error generating QR code maps:", err);
   }
-  return finalMap;
+
+  return finalObject;
 }
 
 /** Extracts qrCodes from data and checks their validity for import
diff --git a/app/routes/api+/bookings.$bookingId.generate-pdf.tsx b/app/routes/api+/bookings.$bookingId.generate-pdf.tsx
index 0c2e62a68..08c89d960 100644
--- a/app/routes/api+/bookings.$bookingId.generate-pdf.tsx
+++ b/app/routes/api+/bookings.$bookingId.generate-pdf.tsx
@@ -1,16 +1,9 @@
-import React from "react";
 import { json } from "@remix-run/node";
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import ReactDOMServer from "react-dom/server";
 import { z } from "zod";
 import type { PdfDbResult } from "~/modules/booking/pdf-helpers";
-import {
-  fetchAllPdfRelatedData,
-  generatePdfContent,
-  getBookingAssetsCustomHeader,
-} from "~/modules/booking/pdf-helpers";
+import { fetchAllPdfRelatedData } from "~/modules/booking/pdf-helpers";
 import { getDateTimeFormat } from "~/utils/client-hints";
-import { SERVER_URL } from "~/utils/env";
 import { makeShelfError } from "~/utils/error";
 import { data, error, getParams } from "~/utils/http.server";
 import {
diff --git a/package.json b/package.json
index 9d0559b88..72bd396a8 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,6 @@
     "pg-boss": "^9.0.3",
     "pino": "^8.19.0",
     "pino-pretty": "^10.3.1",
-    "puppeteer": "^23.0.2",
     "qrcode-generator": "^1.4.4",
     "react": "18.2.0",
     "react-day-picker": "^8.10.0",