Belegupload Layout lesbar anordnen
All checks were successful
CI / Build (push) Successful in 2m0s
CI / Deploy (push) Successful in 1m55s

This commit is contained in:
jan
2026-05-01 18:06:19 +02:00
parent 7d23214a2d
commit 3cb48eeb78

View File

@@ -8,6 +8,7 @@ import EditRoundedIcon from "@mui/icons-material/EditRounded";
import ExpandLessRoundedIcon from "@mui/icons-material/ExpandLessRounded"; import ExpandLessRoundedIcon from "@mui/icons-material/ExpandLessRounded";
import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded"; import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
import EuroRoundedIcon from "@mui/icons-material/EuroRounded"; import EuroRoundedIcon from "@mui/icons-material/EuroRounded";
import PhotoCameraRoundedIcon from "@mui/icons-material/PhotoCameraRounded";
import ReceiptLongRoundedIcon from "@mui/icons-material/ReceiptLongRounded"; import ReceiptLongRoundedIcon from "@mui/icons-material/ReceiptLongRounded";
import TaskAltRoundedIcon from "@mui/icons-material/TaskAltRounded"; import TaskAltRoundedIcon from "@mui/icons-material/TaskAltRounded";
import UploadFileRoundedIcon from "@mui/icons-material/UploadFileRounded"; import UploadFileRoundedIcon from "@mui/icons-material/UploadFileRounded";
@@ -863,7 +864,7 @@ export function BudgetColumn({
expense.approvalStatus === "APPROVED" && expense.approvalStatus === "APPROVED" &&
!expense.proofUrl && !expense.proofUrl &&
canUploadProof ? ( canUploadProof ? (
<Stack direction={{ xs: "column", sm: "row" }} gap={1} alignItems={{ sm: "center" }}> <Stack spacing={1} sx={{ width: "100%", maxWidth: 420 }}>
<TextField <TextField
label="Rechnungsdatum" label="Rechnungsdatum"
type="date" type="date"
@@ -877,48 +878,76 @@ export function BudgetColumn({
InputLabelProps={{ shrink: true }} InputLabelProps={{ shrink: true }}
size="small" size="small"
required required
fullWidth
/> />
<TextField <TextField
label="Beleg" label="Rechnungsdokument"
value={proofFileDrafts[expense.id]?.name ?? expense.proofUrl ?? ""} value={proofFileDrafts[expense.id]?.name ?? expense.proofUrl ?? ""}
InputProps={{ readOnly: true }} InputProps={{ readOnly: true }}
size="small" size="small"
fullWidth fullWidth
/> />
<Button component="label" size="small" variant="outlined" startIcon={<UploadFileRoundedIcon />} disabled={busy}> <Stack direction="row" spacing={1}>
Datei <Button
<input component="label"
hidden size="small"
type="file" variant="outlined"
accept="image/*,application/pdf" startIcon={<UploadFileRoundedIcon />}
onChange={(event) => disabled={busy}
setProofFileDrafts((current) => ({ fullWidth
...current, sx={{ minWidth: 0 }}
[expense.id]: event.target.files?.[0] ?? null >
})) Datei
} <input
/> hidden
</Button> type="file"
<Button component="label" size="small" variant="outlined" disabled={busy}> accept="image/*,application/pdf"
Kamera onChange={(event) =>
<input setProofFileDrafts((current) => ({
hidden ...current,
type="file" [expense.id]: event.target.files?.[0] ?? null
accept="image/*" }))
capture="environment" }
onChange={(event) => />
setProofFileDrafts((current) => ({ </Button>
...current, <Button
[expense.id]: event.target.files?.[0] ?? null component="label"
})) size="small"
} variant="outlined"
/> startIcon={<PhotoCameraRoundedIcon />}
</Button> disabled={busy}
fullWidth
sx={{ minWidth: 0 }}
>
Kamera
<input
hidden
type="file"
accept="image/*"
capture="environment"
onChange={(event) =>
setProofFileDrafts((current) => ({
...current,
[expense.id]: event.target.files?.[0] ?? null
}))
}
/>
</Button>
</Stack>
<Button <Button
size="small" size="medium"
variant="contained" variant="contained"
color="success" color="success"
disabled={busy} disabled={busy}
fullWidth
sx={{
minHeight: 44,
px: 1.5,
lineHeight: 1.25,
whiteSpace: "normal",
overflowWrap: "anywhere",
textAlign: "center"
}}
onClick={async () => { onClick={async () => {
const proofFile = proofFileDrafts[expense.id]; const proofFile = proofFileDrafts[expense.id];
const invoiceDate = invoiceDateDrafts[expense.id] ?? ""; const invoiceDate = invoiceDateDrafts[expense.id] ?? "";