From 73859262afbed79e7c177f0ccf56065fc56fbd96 Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.winiarski.ranger@outlook.com>
Date: Fri, 17 Jul 2026 14:48:46 -0300
Subject: [PATCH] fix(work-orders): align MUI v9 props for dialog and layout

---
 .../_components/comp-doc/comp-doc-dialog.tsx  |  1 -
 .../_components/detail/audit-timeline.tsx     |  7 ++++-
 .../detail/work-order-detail-sections.tsx     | 12 ++++-----
 .../_components/dispatch-create-modal.tsx     | 26 ++++++++++++++-----
 .../dispatch-checklist-section.tsx            |  2 +-
 .../dispatch/dispatch-detail/index.tsx        |  9 +------
 .../uplift-decision-dialog.tsx                |  6 +----
 .../loading/detail-page-skeleton.tsx          |  2 +-
 .../_components/media/media-upload-modal.tsx  |  1 -
 .../_components/wizard/new-wo-wizard.tsx      |  1 -
 .../_components/work-order-form.tsx           |  4 +--
 src/app/(protected)/workorders/index.tsx      |  1 -
 .../api/api-formdata-content-type.test.ts     |  5 ++--
 13 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx
index 291ba462..459a27e9 100644
--- a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx
@@ -223,7 +223,6 @@ export function CompDocDialog({
     <Dialog
       open={open}
       onClose={handleClose}
-      disableEscapeKeyDown={isUploading}
       maxWidth={false}
       slotProps={{
         ...dialogBlurBackdropSlotProps,
diff --git a/src/app/(protected)/workorders/_components/detail/audit-timeline.tsx b/src/app/(protected)/workorders/_components/detail/audit-timeline.tsx
index f7a3f10d..95aefc63 100644
--- a/src/app/(protected)/workorders/_components/detail/audit-timeline.tsx
+++ b/src/app/(protected)/workorders/_components/detail/audit-timeline.tsx
@@ -48,7 +48,12 @@ export function AuditTimeline({
             )}
           </Typography>
           {entry.action && entry.fieldName ? (
-            <Typography variant="caption" color="text.secondary" display="block" className="mt-1">
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              sx={{ display: "block" }}
+              className="mt-1"
+            >
               {entry.fieldName}
               {entry.oldValue || entry.newValue
                 ? `: ${entry.oldValue || "—"} → ${entry.newValue || "—"}`
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx b/src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx
index 2ca5217c..0d1b533f 100644
--- a/src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx
+++ b/src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx
@@ -81,7 +81,7 @@ export function WorkOrderDetailsSection({
           <DetailField label="Priority" value={wo.priority || "—"} />
           <DetailField label="Location" value={wo.location || "—"} />
           <Box>
-            <Typography variant="caption" color="text.secondary" display="block">
+            <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
               Assigned To
             </Typography>
             <WorkOrderAssigneeMenu
@@ -98,7 +98,7 @@ export function WorkOrderDetailsSection({
 
       <Accordion>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography fontWeight={600}>Classification</Typography>
+          <Typography sx={{ fontWeight: 600 }}>Classification</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <DetailFieldGrid>
@@ -111,7 +111,7 @@ export function WorkOrderDetailsSection({
 
       <Accordion>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography fontWeight={600}>Schedule</Typography>
+          <Typography sx={{ fontWeight: 600 }}>Schedule</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
@@ -128,7 +128,7 @@ export function WorkOrderDetailsSection({
 
       <Accordion>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography fontWeight={600}>Financial</Typography>
+          <Typography sx={{ fontWeight: 600 }}>Financial</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
@@ -144,7 +144,7 @@ export function WorkOrderDetailsSection({
 
       <Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography fontWeight={600}>Dispatches ({wo.dispatches.length})</Typography>
+          <Typography sx={{ fontWeight: 600 }}>Dispatches ({wo.dispatches.length})</Typography>
         </AccordionSummary>
         <AccordionDetails>
           {wo.dispatches.length ? (
@@ -202,7 +202,7 @@ export function WorkOrderDetailsSection({
 
       <Accordion>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography fontWeight={600}>Description</Typography>
+          <Typography sx={{ fontWeight: 600 }}>Description</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>{wo.description || "No description provided."}</Typography>
diff --git a/src/app/(protected)/workorders/_components/dispatch-create-modal.tsx b/src/app/(protected)/workorders/_components/dispatch-create-modal.tsx
index cad420b9..95480505 100644
--- a/src/app/(protected)/workorders/_components/dispatch-create-modal.tsx
+++ b/src/app/(protected)/workorders/_components/dispatch-create-modal.tsx
@@ -110,7 +110,7 @@ export function DispatchCreateModal({ workOrder, onClose }: DispatchCreateModalP
   };
 
   return (
-    <Dialog open onClose={handleClose} disableEscapeKeyDown={isPending} maxWidth="md" fullWidth>
+    <Dialog open onClose={handleClose} maxWidth="md" fullWidth>
       <DialogTitle className="flex items-center justify-between pr-2">
         Dispatch{" "}
         {selectedWOs.length > 1
@@ -126,7 +126,7 @@ export function DispatchCreateModal({ workOrder, onClose }: DispatchCreateModalP
           <Typography variant="subtitle2" className="mb-2">
             Work Orders ({selectedWOs.length})
           </Typography>
-          <Stack direction="row" flexWrap="wrap" gap={1}>
+          <Stack direction="row" sx={{ flexWrap: "wrap", gap: 1 }}>
             {selectedWOs.map((wo) => (
               <Chip
                 key={String(wo.id)}
@@ -212,17 +212,29 @@ export function DispatchCreateModal({ workOrder, onClose }: DispatchCreateModalP
                       {vendor.companyName}
                     </Typography>
                     {vendor.contactName && (
-                      <Typography variant="caption" color="text.secondary" display="block">
+                      <Typography
+                        variant="caption"
+                        color="text.secondary"
+                        sx={{ display: "block" }}
+                      >
                         {vendor.contactName}
                       </Typography>
                     )}
                     {vendor.tradeSpecialties && (
-                      <Typography variant="caption" color="text.secondary" display="block">
+                      <Typography
+                        variant="caption"
+                        color="text.secondary"
+                        sx={{ display: "block" }}
+                      >
                         {vendor.tradeSpecialties}
                       </Typography>
                     )}
                     {vendor.address && (
-                      <Typography variant="caption" color="text.secondary" display="block">
+                      <Typography
+                        variant="caption"
+                        color="text.secondary"
+                        sx={{ display: "block" }}
+                      >
                         {vendor.address}
                       </Typography>
                     )}
@@ -244,7 +256,7 @@ export function DispatchCreateModal({ workOrder, onClose }: DispatchCreateModalP
             type="number"
             value={nteAmount}
             onChange={(event) => setNteAmount(event.target.value)}
-            inputProps={{ step: "0.01", min: 0 }}
+            slotProps={{ htmlInput: { step: "0.01", min: 0 } }}
             fullWidth
           />
           <TextField
@@ -278,7 +290,7 @@ export function DispatchCreateModal({ workOrder, onClose }: DispatchCreateModalP
         )}
 
         {customItems.length > 0 && (
-          <Stack direction="row" flexWrap="wrap" gap={1}>
+          <Stack direction="row" sx={{ flexWrap: "wrap", gap: 1 }}>
             {customItems.map((item, index) => (
               <Chip
                 key={`${item}-${index}`}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-checklist-section.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-checklist-section.tsx
index 6957394d..2a394287 100644
--- a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-checklist-section.tsx
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-checklist-section.tsx
@@ -71,7 +71,7 @@ export function DispatchChecklistSection({
           disabled={isAdding}
           fullWidth
           className="mt-2"
-          inputProps={{ "aria-busy": isAdding || undefined }}
+          slotProps={{ htmlInput: { "aria-busy": isAdding || undefined } }}
         />
       )}
     </Box>
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/index.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/index.tsx
index 4de67010..0f4c0838 100644
--- a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/index.tsx
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/index.tsx
@@ -43,14 +43,7 @@ export function DispatchDetailModal({
 
   return (
     <>
-      <Dialog
-        open
-        onClose={handleClose}
-        disableEscapeKeyDown={controller.isMutating}
-        maxWidth="md"
-        fullWidth
-        scroll="paper"
-      >
+      <Dialog open onClose={handleClose} maxWidth="md" fullWidth scroll="paper">
         <DialogTitle>
           <DispatchDetailHeader
             dispatch={dispatch}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/uplift-decision-dialog.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/uplift-decision-dialog.tsx
index 39482814..e3c89564 100644
--- a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/uplift-decision-dialog.tsx
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/uplift-decision-dialog.tsx
@@ -42,11 +42,7 @@ export function UpliftDecisionDialog({
   };
 
   return (
-    <Dialog
-      open={open}
-      onClose={guardDialogClose(isPending, handleClose)}
-      disableEscapeKeyDown={isPending}
-    >
+    <Dialog open={open} onClose={guardDialogClose(isPending, handleClose)}>
       <DialogTitle>
         {type === "approve" ? `Approve uplift to $${requestedNTE.toFixed(2)}?` : "Deny Uplift"}
       </DialogTitle>
diff --git a/src/app/(protected)/workorders/_components/loading/detail-page-skeleton.tsx b/src/app/(protected)/workorders/_components/loading/detail-page-skeleton.tsx
index a5c0671e..c9dbd36e 100644
--- a/src/app/(protected)/workorders/_components/loading/detail-page-skeleton.tsx
+++ b/src/app/(protected)/workorders/_components/loading/detail-page-skeleton.tsx
@@ -39,7 +39,7 @@ export function DetailPageSkeleton({ variant = "view" }: DetailPageSkeletonProps
               </Stack>
             </Box>
           ))}
-          <Stack direction="row" spacing={2} justifyContent="flex-end" className="mt-4">
+          <Stack direction="row" spacing={2} sx={{ justifyContent: "flex-end" }} className="mt-4">
             <Skeleton variant="rounded" width={96} height={36} animation="wave" />
             <Skeleton variant="rounded" width={96} height={36} animation="wave" />
           </Stack>
diff --git a/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx b/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx
index f374de91..d56b4e30 100644
--- a/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx
+++ b/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx
@@ -47,7 +47,6 @@ export function MediaUploadModal({ row, open, onOpenChange }: MediaUploadModalPr
     <Dialog
       open={open}
       onClose={handleClose}
-      disableEscapeKeyDown={pending}
       maxWidth={false}
       slotProps={{
         ...dialogBlurBackdropSlotProps,
diff --git a/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx b/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
index d6d17b8d..5832a732 100644
--- a/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
+++ b/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
@@ -113,7 +113,6 @@ export function NewWoWizard({ open, onOpenChange, users }: NewWoWizardProps) {
     <Dialog
       open={open}
       onClose={handleClose}
-      disableEscapeKeyDown={isCreating}
       maxWidth={false}
       slotProps={{
         ...dialogBlurBackdropSlotProps,
diff --git a/src/app/(protected)/workorders/_components/work-order-form.tsx b/src/app/(protected)/workorders/_components/work-order-form.tsx
index 1ced7ef1..a0988577 100644
--- a/src/app/(protected)/workorders/_components/work-order-form.tsx
+++ b/src/app/(protected)/workorders/_components/work-order-form.tsx
@@ -323,7 +323,7 @@ export default function WorkOrderFormPage() {
                   {...register("vendorNTE")}
                   label="Vendor NTE"
                   type="number"
-                  inputProps={{ step: "0.01", min: 0 }}
+                  slotProps={{ htmlInput: { step: "0.01", min: 0 } }}
                   fullWidth
                 />
                 <TextField {...register("po")} label="Customer PO" fullWidth />
@@ -348,7 +348,7 @@ export default function WorkOrderFormPage() {
               />
             </Box>
 
-            <Stack direction="row" spacing={2} justifyContent="flex-end">
+            <Stack direction="row" spacing={2} sx={{ justifyContent: "flex-end" }}>
               <Button variant="outline" onClick={handleCancel} disabled={isSaving}>
                 Cancel
               </Button>
diff --git a/src/app/(protected)/workorders/index.tsx b/src/app/(protected)/workorders/index.tsx
index 9b3d358e..412ec331 100644
--- a/src/app/(protected)/workorders/index.tsx
+++ b/src/app/(protected)/workorders/index.tsx
@@ -208,7 +208,6 @@ export default function WorkOrdersListPage() {
       <Dialog
         open={Boolean(confirmCancel)}
         onClose={cancelDialogClose}
-        disableEscapeKeyDown={isPatchPending}
         slotProps={dialogBlurBackdropSlotProps}
       >
         <DialogTitle>Cancel work order?</DialogTitle>
diff --git a/src/test/api/api-formdata-content-type.test.ts b/src/test/api/api-formdata-content-type.test.ts
index 2db34987..4596309f 100644
--- a/src/test/api/api-formdata-content-type.test.ts
+++ b/src/test/api/api-formdata-content-type.test.ts
@@ -51,8 +51,9 @@ describe("api.post FormData Content-Type", () => {
     // Browser sets multipart/form-data; boundary=... when Content-Type was stripped.
     // In jsdom/fetch mock the runtime may leave it null or set multipart — both are OK
     // as long as it is not forced JSON.
-    if (capturedContentType) {
-      expect(capturedContentType.toLowerCase()).toContain("multipart/form-data");
+    const contentType: string | null = capturedContentType;
+    if (contentType !== null) {
+      expect(contentType.toLowerCase()).toContain("multipart/form-data");
     }
   });
 });