fix(work-orders): align MUI v9 props for dialog and layout

This commit is contained in:
Arthur Bassi 2026-07-17 14:48:46 -03:00
parent e26f21474e
commit 73859262af
13 changed files with 40 additions and 37 deletions

View file

@ -223,7 +223,6 @@ export function CompDocDialog({
<Dialog
open={open}
onClose={handleClose}
disableEscapeKeyDown={isUploading}
maxWidth={false}
slotProps={{
...dialogBlurBackdropSlotProps,

View file

@ -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 || "—"}`

View file

@ -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>

View file

@ -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}`}

View file

@ -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>

View file

@ -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}

View file

@ -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>

View file

@ -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>

View file

@ -47,7 +47,6 @@ export function MediaUploadModal({ row, open, onOpenChange }: MediaUploadModalPr
<Dialog
open={open}
onClose={handleClose}
disableEscapeKeyDown={pending}
maxWidth={false}
slotProps={{
...dialogBlurBackdropSlotProps,

View file

@ -113,7 +113,6 @@ export function NewWoWizard({ open, onOpenChange, users }: NewWoWizardProps) {
<Dialog
open={open}
onClose={handleClose}
disableEscapeKeyDown={isCreating}
maxWidth={false}
slotProps={{
...dialogBlurBackdropSlotProps,

View file

@ -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>

View file

@ -208,7 +208,6 @@ export default function WorkOrdersListPage() {
<Dialog
open={Boolean(confirmCancel)}
onClose={cancelDialogClose}
disableEscapeKeyDown={isPatchPending}
slotProps={dialogBlurBackdropSlotProps}
>
<DialogTitle>Cancel work order?</DialogTitle>

View file

@ -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");
}
});
});