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, useId, useRef } from "react";
|
||||
import { useNavigate, 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";
|
||||
@@ -14,7 +13,7 @@ import {
|
||||
type WarehouseLocation,
|
||||
} from "../lib/queries/warehouse";
|
||||
import { useApiMutation } from "../lib/queries/mutations";
|
||||
import { Button, Card, TextField, Select, Field } from "../ui";
|
||||
import { Button, Card, TextField, Select, Field, PageEnter } from "../ui";
|
||||
|
||||
interface InventoryItem {
|
||||
key: string;
|
||||
@@ -165,139 +164,121 @@ export default function WarehouseInventoryForm() {
|
||||
];
|
||||
|
||||
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/inventory"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">Nová inventura</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button onClick={handleSubmit} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Vytvořit inventuru"}
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<IconButton
|
||||
component={RouterLink}
|
||||
to="/warehouse/inventory"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">Nová inventura</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button onClick={handleSubmit} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Vytvořit inventuru"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Notes */}
|
||||
<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="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Volitelné poznámky k inventuře"
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Volitelné poznámky k inventuře"
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
|
||||
{/* 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>
|
||||
<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) minmax(140px, 1.5fr) 120px auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</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) minmax(140px, 1.5fr) 120px auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<Select
|
||||
value={
|
||||
item.location_id === null ? "" : String(item.location_id)
|
||||
}
|
||||
onChange={(val) =>
|
||||
updateItem(index, "location_id", val ? Number(val) : null)
|
||||
}
|
||||
options={locationOptions}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.actual_qty || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "actual_qty", Number(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.001,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Skutečné množství, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Skutečné množství"
|
||||
/>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => removeItem(index)}
|
||||
title="Odebrat řádek"
|
||||
aria-label="Odebrat řádek"
|
||||
sx={{ justifySelf: { xs: "start", md: "center" } }}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<Select
|
||||
value={
|
||||
item.location_id === null ? "" : String(item.location_id)
|
||||
}
|
||||
onChange={(val) =>
|
||||
updateItem(index, "location_id", val ? Number(val) : null)
|
||||
}
|
||||
options={locationOptions}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.actual_qty || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "actual_qty", Number(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.001,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Skutečné množství, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Skutečné množství"
|
||||
/>
|
||||
<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>
|
||||
</motion.div>
|
||||
</Box>
|
||||
{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