From ce3de2f9fb5526ecb86091ba2cf928e996cc787d Mon Sep 17 00:00:00 2001
From: DEls <DEls@local>
Date: Wed, 26 Aug 2026 23:22:33 +0200
Subject: [PATCH] fix(slip-preview): build PB URL from recordId (was parsing
 filename)

---
 src/components/slip-preview.tsx | 36 ++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/slip-preview.tsx b/src/components/slip-preview.tsx
index 49e769e..34ffb76 100644
--- a/src/components/slip-preview.tsx
+++ b/src/components/slip-preview.tsx
@@ -4,20 +4,28 @@ import { Download, FileImage } from "lucide-react";
 import { PB_BASE_URL } from "@/lib/pb";
 
 /**
- * Renders a delivery-note slip image or PDF download link.
+ * Renders a delivery-note slip image or inline PDF.
+ *
+ * `filename` is the bare filename PocketBase stores on the
+ * `delivery_notes.slip_image` field (e.g.
+ * "cam_scanner_2026_08_26_09_sbh10tzijy.16.pdf").
+ * `recordId` is the parent `delivery_notes` record id.
  *
- * `filename` is the PB file-store path PocketBase stores on the
- * `delivery_notes.slip_image` field — shaped `recordId/collectionId/stored`.
  * PB exposes the bytes at
- *   {PB_BASE_URL}/api/files/<collectionId>/<recordId>/<encoded stored path>
- * so we split + reassemble + URL-encode to fetch from the browser.
+ *   {PB_BASE_URL}/api/files/delivery_notes/<recordId>/<encoded filename>
+ * — same pattern as the server-side route
+ * src/app/api/delivery-notes/[id]/slip/route.ts.
  *
- * Shared between the PO detail view (existing) and the "Awaiting PO
- * assignment" modal (new). Keep the URL builder consistent with
- * api/delivery-notes/[id]/slip/route.ts which uses the same pattern
- * server-side.
+ * Shared between the PO detail view and the "Awaiting PO
+ * assignment" modal.
  */
-export function SlipPreview({ filename }: { filename: string }) {
+export function SlipPreview({
+  filename,
+  recordId,
+}: {
+  filename: string;
+  recordId: string;
+}) {
   if (!filename) {
     return (
       <div className="flex items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/30 p-6 text-sm text-muted-foreground">
@@ -26,11 +34,7 @@ export function SlipPreview({ filename }: { filename: string }) {
       </div>
     );
   }
-  const parts = filename.split("/");
-  const recordId = parts[0];
-  const collectionId = parts[1];
-  const stored = parts.slice(2).join("/");
-  const url = `${PB_BASE_URL}/api/files/${collectionId}/${recordId}/${encodeURIComponent(stored)}`;
+  const url = `${PB_BASE_URL}/api/files/delivery_notes/${recordId}/${encodeURIComponent(filename)}`;
   const isPdf = filename.toLowerCase().endsWith(".pdf");
   return (
     <div className="space-y-3">
@@ -39,7 +43,7 @@ export function SlipPreview({ filename }: { filename: string }) {
           <iframe
             src={url}
             title="Delivery slip"
-            className="h-[70vh] w-full rounded-md border border-border bg-white"
+            className="h-[400px] w-full rounded-md border border-border bg-white"
           />
           <p className="text-xs text-muted-foreground">
             <a