feat(mui): consistent staggered page entrance across all 43 route pages
Adopt the PageEnter wrapper as every page's outermost render element and remove the ad-hoc per-page entrance motion.div wrappers. Every page now enters the same way — all top-level sections rise+fade in, staggered — so nothing appears instantly and the motion is identical app-wide. Presentation-only: no data/logic/hooks/invalidate/permissions touched. Embedded sub-tabs (CompanySettings, ReceivedInvoices), Login (auth shell) and the dev UiKit are intentionally excluded. Gates: tsc -b --noEmit=0, build=0, vitest 152/152. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
@@ -1,7 +1,6 @@
|
||||
import { useState, useEffect, useRef, useCallback, useId } from "react";
|
||||
import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -28,6 +27,7 @@ import {
|
||||
DateField,
|
||||
Field,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
} from "../ui";
|
||||
|
||||
interface ReceiptForm {
|
||||
@@ -410,294 +410,266 @@ export default function WarehouseReceiptForm() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<IconButton
|
||||
component={RouterLink}
|
||||
to="/warehouse/receipts"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">
|
||||
{isEdit ? "Upravit příjmový doklad" : "Nový příjmový doklad"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={handleSaveDraft}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? "Ukládání..." : "Uložit jako návrh"}
|
||||
</Button>
|
||||
<Button onClick={handleSaveAndConfirm} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Uložit a potvrdit"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</motion.div>
|
||||
|
||||
{/* Header fields */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Field label="Dodavatel">
|
||||
<Select
|
||||
value={form.supplier_id === null ? "" : String(form.supplier_id)}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
supplier_id: val ? Number(val) : null,
|
||||
}))
|
||||
}
|
||||
options={supplierOptions}
|
||||
/>
|
||||
</Field>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<IconButton
|
||||
component={RouterLink}
|
||||
to="/warehouse/receipts"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
<Field label="Číslo dodacího listu">
|
||||
<TextField
|
||||
value={form.delivery_note_number}
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
delivery_note_number: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Např. DL-2024-001"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Datum dodacího listu">
|
||||
<DateField
|
||||
value={form.delivery_note_date}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
delivery_note_date: val,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={form.notes}
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({ ...prev, notes: e.target.value }))
|
||||
}
|
||||
placeholder="Volitelné poznámky"
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Lines */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">
|
||||
{isEdit ? "Upravit příjmový doklad" : "Nový příjmový doklad"}
|
||||
</Typography>
|
||||
{errors.items && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="error"
|
||||
sx={{ display: "block", mb: 1.5 }}
|
||||
>
|
||||
{errors.items}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{items.map((item, index) => (
|
||||
<Box
|
||||
key={item.key}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
md: "minmax(180px, 2fr) 110px 110px minmax(140px, 1.2fr) minmax(140px, 1.5fr) auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
itemName={item.item_name}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.quantity || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "quantity", parseDecimal(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.001,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Množství, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Množství"
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.unit_price || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(
|
||||
index,
|
||||
"unit_price",
|
||||
parseDecimal(e.target.value),
|
||||
)
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.01,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Cena za kus, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Cena/ks"
|
||||
/>
|
||||
<Select
|
||||
value={
|
||||
item.location_id === null ? "" : String(item.location_id)
|
||||
}
|
||||
onChange={(val) =>
|
||||
updateItem(index, "location_id", val ? Number(val) : null)
|
||||
}
|
||||
options={locationOptions}
|
||||
/>
|
||||
<TextField
|
||||
value={item.notes ?? ""}
|
||||
onChange={(e) => updateItem(index, "notes", e.target.value)}
|
||||
placeholder="Poznámka"
|
||||
/>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => removeItem(index)}
|
||||
title="Odebrat řádek"
|
||||
aria-label="Odebrat řádek"
|
||||
sx={{ justifySelf: { xs: "start", md: "center" } }}
|
||||
>
|
||||
{RemoveIcon}
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PlusIcon}
|
||||
onClick={addItem}
|
||||
sx={{ mt: 2 }}
|
||||
onClick={handleSaveDraft}
|
||||
disabled={saving}
|
||||
>
|
||||
Přidat položku
|
||||
{saving ? "Ukládání..." : "Uložit jako návrh"}
|
||||
</Button>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Button onClick={handleSaveAndConfirm} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Uložit a potvrdit"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Header fields */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Field label="Dodavatel">
|
||||
<Select
|
||||
value={form.supplier_id === null ? "" : String(form.supplier_id)}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
supplier_id: val ? Number(val) : null,
|
||||
}))
|
||||
}
|
||||
options={supplierOptions}
|
||||
/>
|
||||
</Field>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Číslo dodacího listu">
|
||||
<TextField
|
||||
value={form.delivery_note_number}
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
delivery_note_number: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Např. DL-2024-001"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Datum dodacího listu">
|
||||
<DateField
|
||||
value={form.delivery_note_date}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
delivery_note_date: val,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={form.notes}
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({ ...prev, notes: e.target.value }))
|
||||
}
|
||||
placeholder="Volitelné poznámky"
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
|
||||
{/* Lines */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
{errors.items && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="error"
|
||||
sx={{ display: "block", mb: 1.5 }}
|
||||
>
|
||||
{errors.items}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{items.map((item, index) => (
|
||||
<Box
|
||||
key={item.key}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
md: "minmax(180px, 2fr) 110px 110px minmax(140px, 1.2fr) minmax(140px, 1.5fr) auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
itemName={item.item_name}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.quantity || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "quantity", parseDecimal(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.001,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Množství, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Množství"
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.unit_price || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "unit_price", parseDecimal(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.01,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Cena za kus, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Cena/ks"
|
||||
/>
|
||||
<Select
|
||||
value={
|
||||
item.location_id === null ? "" : String(item.location_id)
|
||||
}
|
||||
onChange={(val) =>
|
||||
updateItem(index, "location_id", val ? Number(val) : null)
|
||||
}
|
||||
options={locationOptions}
|
||||
/>
|
||||
<TextField
|
||||
value={item.notes ?? ""}
|
||||
onChange={(e) => updateItem(index, "notes", e.target.value)}
|
||||
placeholder="Poznámka"
|
||||
/>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => removeItem(index)}
|
||||
title="Odebrat řádek"
|
||||
aria-label="Odebrat řádek"
|
||||
sx={{ justifySelf: { xs: "start", md: "center" } }}
|
||||
>
|
||||
{RemoveIcon}
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PlusIcon}
|
||||
onClick={addItem}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
Přidat položku
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
{/* File upload — only in edit mode for existing receipts */}
|
||||
{isEdit && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.1 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Přílohy
|
||||
</Typography>
|
||||
<Box
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onClick={() => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.multiple = true;
|
||||
input.onchange = () => {
|
||||
if (input.files && input.files.length > 0) {
|
||||
handleFileUpload(input.files);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 1,
|
||||
p: 4,
|
||||
border: "2px dashed",
|
||||
borderColor: "divider",
|
||||
borderRadius: 1,
|
||||
color: "text.secondary",
|
||||
cursor: "pointer",
|
||||
opacity: uploadingFiles ? 0.6 : 1,
|
||||
transition: "border-color .2s, background-color .2s",
|
||||
"&:hover": {
|
||||
borderColor: "primary.main",
|
||||
bgcolor: "action.hover",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{uploadingFiles ? (
|
||||
<>
|
||||
<CircularProgress size={28} />
|
||||
<Typography variant="body2">Nahrávání...</Typography>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{UploadIcon}
|
||||
<Typography variant="body2">
|
||||
Přetáhněte soubory sem nebo klikněte pro výběr
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Dodací listy, faktury a další dokumenty
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Přílohy
|
||||
</Typography>
|
||||
<Box
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onClick={() => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.multiple = true;
|
||||
input.onchange = () => {
|
||||
if (input.files && input.files.length > 0) {
|
||||
handleFileUpload(input.files);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 1,
|
||||
p: 4,
|
||||
border: "2px dashed",
|
||||
borderColor: "divider",
|
||||
borderRadius: 1,
|
||||
color: "text.secondary",
|
||||
cursor: "pointer",
|
||||
opacity: uploadingFiles ? 0.6 : 1,
|
||||
transition: "border-color .2s, background-color .2s",
|
||||
"&:hover": {
|
||||
borderColor: "primary.main",
|
||||
bgcolor: "action.hover",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{uploadingFiles ? (
|
||||
<>
|
||||
<CircularProgress size={28} />
|
||||
<Typography variant="body2">Nahrávání...</Typography>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{UploadIcon}
|
||||
<Typography variant="body2">
|
||||
Přetáhněte soubory sem nebo klikněte pro výběr
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Dodací listy, faktury a další dokumenty
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
)}
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user