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
@@ -6,7 +6,6 @@ import {
|
||||
Link as RouterLink,
|
||||
} from "react-router-dom";
|
||||
import { useQuery } 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";
|
||||
@@ -23,7 +22,15 @@ import {
|
||||
} from "../lib/queries/warehouse";
|
||||
import { projectListOptions, type Project } from "../lib/queries/projects";
|
||||
import { useApiMutation } from "../lib/queries/mutations";
|
||||
import { Button, Card, TextField, Select, Field, LoadingState } from "../ui";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
TextField,
|
||||
Select,
|
||||
Field,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
} from "../ui";
|
||||
|
||||
interface IssueForm {
|
||||
project_id: number | null;
|
||||
@@ -422,199 +429,181 @@ export default function WarehouseIssueForm() {
|
||||
];
|
||||
|
||||
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/issues"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">
|
||||
{isEdit ? "Upravit výdejku" : "Nová výdejka"}
|
||||
</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 sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<IconButton
|
||||
component={RouterLink}
|
||||
to="/warehouse/issues"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">
|
||||
{isEdit ? "Upravit výdejku" : "Nová výdejka"}
|
||||
</Typography>
|
||||
</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="Projekt" error={errors.project_id}>
|
||||
<Select
|
||||
value={form.project_id === null ? "" : String(form.project_id)}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
project_id: val === "" ? null : Number(val),
|
||||
}))
|
||||
}
|
||||
options={projectOptions}
|
||||
/>
|
||||
</Field>
|
||||
<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
|
||||
</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(160px, 1.6fr) minmax(160px, 1.6fr) 100px 100px minmax(130px, 1.1fr) minmax(120px, 1.2fr) auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
itemName={item.item_name}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<BatchSelect
|
||||
itemId={item.item_id}
|
||||
value={item.batch_id}
|
||||
onChange={(batchId, unitPrice) => {
|
||||
updateItem(index, "batch_id", batchId);
|
||||
updateItem(index, "unit_price", unitPrice);
|
||||
}}
|
||||
/>
|
||||
<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 || ""}
|
||||
disabled
|
||||
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 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>
|
||||
</Box>
|
||||
<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="Projekt" error={errors.project_id}>
|
||||
<Select
|
||||
value={form.project_id === null ? "" : String(form.project_id)}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
project_id: val === "" ? null : Number(val),
|
||||
}))
|
||||
}
|
||||
options={projectOptions}
|
||||
/>
|
||||
</Field>
|
||||
<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(160px, 1.6fr) minmax(160px, 1.6fr) 100px 100px minmax(130px, 1.1fr) minmax(120px, 1.2fr) auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
itemName={item.item_name}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<BatchSelect
|
||||
itemId={item.item_id}
|
||||
value={item.batch_id}
|
||||
onChange={(batchId, unitPrice) => {
|
||||
updateItem(index, "batch_id", batchId);
|
||||
updateItem(index, "unit_price", unitPrice);
|
||||
}}
|
||||
/>
|
||||
<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 || ""}
|
||||
disabled
|
||||
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>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user