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 <Dialog
open={open} open={open}
onClose={handleClose} onClose={handleClose}
disableEscapeKeyDown={isUploading}
maxWidth={false} maxWidth={false}
slotProps={{ slotProps={{
...dialogBlurBackdropSlotProps, ...dialogBlurBackdropSlotProps,

View file

@ -48,7 +48,12 @@ export function AuditTimeline({
)} )}
</Typography> </Typography>
{entry.action && entry.fieldName ? ( {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.fieldName}
{entry.oldValue || entry.newValue {entry.oldValue || entry.newValue
? `: ${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="Priority" value={wo.priority || "—"} />
<DetailField label="Location" value={wo.location || "—"} /> <DetailField label="Location" value={wo.location || "—"} />
<Box> <Box>
<Typography variant="caption" color="text.secondary" display="block"> <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
Assigned To Assigned To
</Typography> </Typography>
<WorkOrderAssigneeMenu <WorkOrderAssigneeMenu
@ -98,7 +98,7 @@ export function WorkOrderDetailsSection({
<Accordion> <Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}> <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography fontWeight={600}>Classification</Typography> <Typography sx={{ fontWeight: 600 }}>Classification</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<DetailFieldGrid> <DetailFieldGrid>
@ -111,7 +111,7 @@ export function WorkOrderDetailsSection({
<Accordion> <Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}> <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography fontWeight={600}>Schedule</Typography> <Typography sx={{ fontWeight: 600 }}>Schedule</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"> <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
@ -128,7 +128,7 @@ export function WorkOrderDetailsSection({
<Accordion> <Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}> <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography fontWeight={600}>Financial</Typography> <Typography sx={{ fontWeight: 600 }}>Financial</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Box className="grid grid-cols-1 gap-4 sm:grid-cols-3"> <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)}> <Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}> <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography fontWeight={600}>Dispatches ({wo.dispatches.length})</Typography> <Typography sx={{ fontWeight: 600 }}>Dispatches ({wo.dispatches.length})</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
{wo.dispatches.length ? ( {wo.dispatches.length ? (
@ -202,7 +202,7 @@ export function WorkOrderDetailsSection({
<Accordion> <Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}> <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography fontWeight={600}>Description</Typography> <Typography sx={{ fontWeight: 600 }}>Description</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Typography>{wo.description || "No description provided."}</Typography> <Typography>{wo.description || "No description provided."}</Typography>

View file

@ -110,7 +110,7 @@ export function DispatchCreateModal({ workOrder, onClose }: DispatchCreateModalP
}; };
return ( 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"> <DialogTitle className="flex items-center justify-between pr-2">
Dispatch{" "} Dispatch{" "}
{selectedWOs.length > 1 {selectedWOs.length > 1
@ -126,7 +126,7 @@ export function DispatchCreateModal({ workOrder, onClose }: DispatchCreateModalP
<Typography variant="subtitle2" className="mb-2"> <Typography variant="subtitle2" className="mb-2">
Work Orders ({selectedWOs.length}) Work Orders ({selectedWOs.length})
</Typography> </Typography>
<Stack direction="row" flexWrap="wrap" gap={1}> <Stack direction="row" sx={{ flexWrap: "wrap", gap: 1 }}>
{selectedWOs.map((wo) => ( {selectedWOs.map((wo) => (
<Chip <Chip
key={String(wo.id)} key={String(wo.id)}
@ -212,17 +212,29 @@ export function DispatchCreateModal({ workOrder, onClose }: DispatchCreateModalP
{vendor.companyName} {vendor.companyName}
</Typography> </Typography>
{vendor.contactName && ( {vendor.contactName && (
<Typography variant="caption" color="text.secondary" display="block"> <Typography
variant="caption"
color="text.secondary"
sx={{ display: "block" }}
>
{vendor.contactName} {vendor.contactName}
</Typography> </Typography>
)} )}
{vendor.tradeSpecialties && ( {vendor.tradeSpecialties && (
<Typography variant="caption" color="text.secondary" display="block"> <Typography
variant="caption"
color="text.secondary"
sx={{ display: "block" }}
>
{vendor.tradeSpecialties} {vendor.tradeSpecialties}
</Typography> </Typography>
)} )}
{vendor.address && ( {vendor.address && (
<Typography variant="caption" color="text.secondary" display="block"> <Typography
variant="caption"
color="text.secondary"
sx={{ display: "block" }}
>
{vendor.address} {vendor.address}
</Typography> </Typography>
)} )}
@ -244,7 +256,7 @@ export function DispatchCreateModal({ workOrder, onClose }: DispatchCreateModalP
type="number" type="number"
value={nteAmount} value={nteAmount}
onChange={(event) => setNteAmount(event.target.value)} onChange={(event) => setNteAmount(event.target.value)}
inputProps={{ step: "0.01", min: 0 }} slotProps={{ htmlInput: { step: "0.01", min: 0 } }}
fullWidth fullWidth
/> />
<TextField <TextField
@ -278,7 +290,7 @@ export function DispatchCreateModal({ workOrder, onClose }: DispatchCreateModalP
)} )}
{customItems.length > 0 && ( {customItems.length > 0 && (
<Stack direction="row" flexWrap="wrap" gap={1}> <Stack direction="row" sx={{ flexWrap: "wrap", gap: 1 }}>
{customItems.map((item, index) => ( {customItems.map((item, index) => (
<Chip <Chip
key={`${item}-${index}`} key={`${item}-${index}`}

View file

@ -71,7 +71,7 @@ export function DispatchChecklistSection({
disabled={isAdding} disabled={isAdding}
fullWidth fullWidth
className="mt-2" className="mt-2"
inputProps={{ "aria-busy": isAdding || undefined }} slotProps={{ htmlInput: { "aria-busy": isAdding || undefined } }}
/> />
)} )}
</Box> </Box>

View file

@ -43,14 +43,7 @@ export function DispatchDetailModal({
return ( return (
<> <>
<Dialog <Dialog open onClose={handleClose} maxWidth="md" fullWidth scroll="paper">
open
onClose={handleClose}
disableEscapeKeyDown={controller.isMutating}
maxWidth="md"
fullWidth
scroll="paper"
>
<DialogTitle> <DialogTitle>
<DispatchDetailHeader <DispatchDetailHeader
dispatch={dispatch} dispatch={dispatch}

View file

@ -42,11 +42,7 @@ export function UpliftDecisionDialog({
}; };
return ( return (
<Dialog <Dialog open={open} onClose={guardDialogClose(isPending, handleClose)}>
open={open}
onClose={guardDialogClose(isPending, handleClose)}
disableEscapeKeyDown={isPending}
>
<DialogTitle> <DialogTitle>
{type === "approve" ? `Approve uplift to $${requestedNTE.toFixed(2)}?` : "Deny Uplift"} {type === "approve" ? `Approve uplift to $${requestedNTE.toFixed(2)}?` : "Deny Uplift"}
</DialogTitle> </DialogTitle>

View file

@ -39,7 +39,7 @@ export function DetailPageSkeleton({ variant = "view" }: DetailPageSkeletonProps
</Stack> </Stack>
</Box> </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" />
<Skeleton variant="rounded" width={96} height={36} animation="wave" /> <Skeleton variant="rounded" width={96} height={36} animation="wave" />
</Stack> </Stack>

View file

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

View file

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

View file

@ -323,7 +323,7 @@ export default function WorkOrderFormPage() {
{...register("vendorNTE")} {...register("vendorNTE")}
label="Vendor NTE" label="Vendor NTE"
type="number" type="number"
inputProps={{ step: "0.01", min: 0 }} slotProps={{ htmlInput: { step: "0.01", min: 0 } }}
fullWidth fullWidth
/> />
<TextField {...register("po")} label="Customer PO" fullWidth /> <TextField {...register("po")} label="Customer PO" fullWidth />
@ -348,7 +348,7 @@ export default function WorkOrderFormPage() {
/> />
</Box> </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}> <Button variant="outline" onClick={handleCancel} disabled={isSaving}>
Cancel Cancel
</Button> </Button>

View file

@ -208,7 +208,6 @@ export default function WorkOrdersListPage() {
<Dialog <Dialog
open={Boolean(confirmCancel)} open={Boolean(confirmCancel)}
onClose={cancelDialogClose} onClose={cancelDialogClose}
disableEscapeKeyDown={isPatchPending}
slotProps={dialogBlurBackdropSlotProps} slotProps={dialogBlurBackdropSlotProps}
> >
<DialogTitle>Cancel work order?</DialogTitle> <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. // 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 // In jsdom/fetch mock the runtime may leave it null or set multipart — both are OK
// as long as it is not forced JSON. // as long as it is not forced JSON.
if (capturedContentType) { const contentType: string | null = capturedContentType;
expect(capturedContentType.toLowerCase()).toContain("multipart/form-data"); if (contentType !== null) {
expect(contentType.toLowerCase()).toContain("multipart/form-data");
} }
}); });
}); });