From 1607bac8ad1a543cb876c0311e483f71e5cd3a9d Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.bassi@luby.com.br>
Date: Tue, 8 Sep 2026 13:48:02 -0300
Subject: [PATCH] fix(work-orders): align Extra Docs and Photos copy with AAP

---
 .../detail/tabs/slide-over-extras-tab.tsx            | 12 ++++++++----
 .../_components/media/media-uploader-dropzone.tsx    |  5 ++---
 .../workorders/media-uploader-dropzone.test.tsx      |  7 +++++--
 .../workorders/slide-over-extras-aveta.test.tsx      | 10 +++++++++-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx
index d7bb285c..cf231f2a 100644
--- a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx
@@ -93,13 +93,16 @@ function ExtraDocRow({
       />
       <button
         type="button"
+        disabled={workOrderId == null}
         onClick={() => {
-          if (workOrderId == null) return;
+          if (workOrderId == null) {
+            return;
+          }
           void openExtraDocContent(workOrderId, file.id).catch(() => {
             toast.error("Unable to open this document.");
           });
         }}
-        className="min-w-0 flex-1 truncate text-left hover:underline"
+        className="min-w-0 flex-1 truncate text-left hover:underline disabled:cursor-not-allowed disabled:opacity-50"
         style={{ fontSize: 12, color: "var(--foreground)" }}
       >
         {file.name}
@@ -214,7 +217,7 @@ export function SlideOverExtrasTab({
               event.preventDefault();
               addFiles(event.dataTransfer.files);
             }}
-            className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-[var(--color-bg-muted)] disabled:opacity-60"
+            className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-(--color-bg-muted) disabled:opacity-60"
             style={{
               minHeight: 100,
               border: "1px dashed var(--color-border)",
@@ -229,7 +232,8 @@ export function SlideOverExtrasTab({
               {pending ? "Uploading…" : "Upload documents, photos or videos"}
             </span>
             <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
-              Accepted: JPG, PNG, MP4, MOV, PDF, DOC · Max {formatMediaSizeLimit()}
+              Accepted: JPG, PNG, MP4, MOV, PDF, DOC · Max {formatMediaSizeLimit().replace(" ", "")}{" "}
+              per file
             </span>
           </button>
           <input
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx
index e6b3aa19..5be7b1ef 100644
--- a/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx
@@ -27,7 +27,7 @@ export function MediaUploaderDropzone({
           e.preventDefault();
           onFilesSelected(e.dataTransfer.files);
         }}
-        className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-[var(--color-bg-muted)] disabled:opacity-60"
+        className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-(--color-bg-muted) disabled:opacity-60"
         style={{
           minHeight: 120,
           border: "1px dashed var(--color-border)",
@@ -39,8 +39,7 @@ export function MediaUploaderDropzone({
           {pending ? "Uploading…" : "Drag files here or click to browse"}
         </span>
         <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
-          Accepted: JPG, PNG, MP4, MOV · Max {formatMediaSizeLimit()} per file · categorize after
-          upload
+          Accepted: JPG, PNG, MP4, MOV · Max {formatMediaSizeLimit().replace(" ", "")} per file
         </span>
       </button>
       <input
diff --git a/src/test/app/(protected)/workorders/media-uploader-dropzone.test.tsx b/src/test/app/(protected)/workorders/media-uploader-dropzone.test.tsx
index 2a1ee978..35da0ef4 100644
--- a/src/test/app/(protected)/workorders/media-uploader-dropzone.test.tsx
+++ b/src/test/app/(protected)/workorders/media-uploader-dropzone.test.tsx
@@ -6,7 +6,7 @@ import { workOrderMediaAcceptAttribute } from "@/domain/work-orders/utils/work-o
 import { renderWithProviders } from "@/test/test-utils";
 
 describe("MediaUploaderDropzone", () => {
-  it("keeps Photos accept copy media-only at 50 MB", () => {
+  it("matches the AAP Photos accept copy and keeps it media-only", () => {
     renderWithProviders(
       <MediaUploaderDropzone
         inputRef={createRef<HTMLInputElement>()}
@@ -15,7 +15,10 @@ describe("MediaUploaderDropzone", () => {
       />,
     );
 
-    expect(screen.getByText(/Accepted: JPG, PNG, MP4, MOV · Max 50 MB/)).toBeInTheDocument();
+    expect(
+      screen.getByText("Accepted: JPG, PNG, MP4, MOV · Max 50MB per file"),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/categorize after upload/i)).not.toBeInTheDocument();
     expect(screen.queryByText(/PDF/)).not.toBeInTheDocument();
     expect(screen.queryByText(/DOC/)).not.toBeInTheDocument();
     const input = document.querySelector('input[type="file"]');
diff --git a/src/test/app/(protected)/workorders/slide-over-extras-aveta.test.tsx b/src/test/app/(protected)/workorders/slide-over-extras-aveta.test.tsx
index 05f0edd8..d3a6d09c 100644
--- a/src/test/app/(protected)/workorders/slide-over-extras-aveta.test.tsx
+++ b/src/test/app/(protected)/workorders/slide-over-extras-aveta.test.tsx
@@ -112,11 +112,19 @@ describe("SlideOverExtrasTab Aveta", () => {
     );
 
     expect(
-      screen.getByText("Accepted: JPG, PNG, MP4, MOV, PDF, DOC · Max 50 MB"),
+      screen.getByText("Accepted: JPG, PNG, MP4, MOV, PDF, DOC · Max 50MB per file"),
     ).toBeInTheDocument();
     const input = document.querySelector('input[type="file"]');
     expect(input?.getAttribute("accept")).toContain(".pdf");
     expect(input?.getAttribute("accept")).toContain(".doc");
     expect(input?.getAttribute("accept")).toContain(".docx");
   });
+
+  it("disables document opening until the work order id is available", () => {
+    renderWithProviders(
+      <SlideOverExtrasTab uploads={[photo]} isReadOnly onUpload={vi.fn()} onRemove={vi.fn()} />,
+    );
+
+    expect(screen.getByRole("button", { name: "safety-form.pdf" })).toBeDisabled();
+  });
 });