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>

src/admin/pages/TripsAdmin.tsx

@@ -1,7 +1,6 @@
 import { useState, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Link as RouterLink } from "react-router-dom";
-import { motion } from "framer-motion";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
@@ -33,6 +32,7 @@ import {
   LoadingState,
   EmptyState,
   StatCard,
+  PageEnter,
   type DataColumn,
 } from "../ui";
 
@@ -529,171 +529,147 @@ export default function TripsAdmin() {
   ];
 
   return (
-    <Box>
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25 }}
+    <PageEnter>
+      <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,
-          }}
-        >
-          <Typography variant="h4">Správa knihy jízd</Typography>
-          <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
-            {trips.length > 0 && (
-              <Button
-                variant="outlined"
-                color="inherit"
-                startIcon={PrintIcon}
-                onClick={handlePrint}
-                title="Tisk knihy jízd"
-              >
-                Tisk
-              </Button>
-            )}
+        <Typography variant="h4">Správa knihy jízd</Typography>
+        <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
+          {trips.length > 0 && (
             <Button
-              component={RouterLink}
-              to="/vehicles"
               variant="outlined"
               color="inherit"
+              startIcon={PrintIcon}
+              onClick={handlePrint}
+              title="Tisk knihy jízd"
             >
-              Vozidla
+              Tisk
             </Button>
-          </Box>
+          )}
+          <Button
+            component={RouterLink}
+            to="/vehicles"
+            variant="outlined"
+            color="inherit"
+          >
+            Vozidla
+          </Button>
         </Box>
-      </motion.div>
+      </Box>
 
       {/* Filters */}
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25, delay: 0.06 }}
-      >
-        <FilterBar>
-          <Box sx={{ flex: "0 0 160px" }}>
-            <Field label="Měsíc">
-              <Select
-                value={filterMonth}
-                onChange={setFilterMonth}
-                options={Array.from({ length: 12 }, (_, i) => ({
-                  value: String(i + 1),
-                  label: new Date(2000, i).toLocaleString("cs-CZ", {
-                    month: "long",
-                  }),
-                }))}
-              />
-            </Field>
-          </Box>
-          <Box sx={{ flex: "0 0 120px" }}>
-            <Field label="Rok">
-              <Select
-                value={filterYear}
-                onChange={setFilterYear}
-                options={Array.from({ length: 5 }, (_, i) => {
-                  const y = new Date().getFullYear() - 2 + i;
-                  return { value: String(y), label: String(y) };
-                })}
-              />
-            </Field>
-          </Box>
-          <Box sx={{ flex: "1 1 200px" }}>
-            <Field label="Vozidlo">
-              <Select
-                value={filterVehicleId}
-                onChange={setFilterVehicleId}
-                options={[
-                  { value: "", label: "Všechna vozidla" },
-                  ...vehicles.map((v) => ({
-                    value: String(v.id),
-                    label: `${v.spz} - ${v.name}`,
-                  })),
-                ]}
-              />
-            </Field>
-          </Box>
-          <Box sx={{ flex: "1 1 200px" }}>
-            <Field label="Řidič">
-              <Select
-                value={filterUserId}
-                onChange={setFilterUserId}
-                options={[
-                  { value: "", label: "Všichni řidiči" },
-                  ...tripUsers.map((u) => ({
-                    value: String(u.id),
-                    label: u.name,
-                  })),
-                ]}
-              />
-            </Field>
-          </Box>
-        </FilterBar>
-      </motion.div>
+      <FilterBar>
+        <Box sx={{ flex: "0 0 160px" }}>
+          <Field label="Měsíc">
+            <Select
+              value={filterMonth}
+              onChange={setFilterMonth}
+              options={Array.from({ length: 12 }, (_, i) => ({
+                value: String(i + 1),
+                label: new Date(2000, i).toLocaleString("cs-CZ", {
+                  month: "long",
+                }),
+              }))}
+            />
+          </Field>
+        </Box>
+        <Box sx={{ flex: "0 0 120px" }}>
+          <Field label="Rok">
+            <Select
+              value={filterYear}
+              onChange={setFilterYear}
+              options={Array.from({ length: 5 }, (_, i) => {
+                const y = new Date().getFullYear() - 2 + i;
+                return { value: String(y), label: String(y) };
+              })}
+            />
+          </Field>
+        </Box>
+        <Box sx={{ flex: "1 1 200px" }}>
+          <Field label="Vozidlo">
+            <Select
+              value={filterVehicleId}
+              onChange={setFilterVehicleId}
+              options={[
+                { value: "", label: "Všechna vozidla" },
+                ...vehicles.map((v) => ({
+                  value: String(v.id),
+                  label: `${v.spz} - ${v.name}`,
+                })),
+              ]}
+            />
+          </Field>
+        </Box>
+        <Box sx={{ flex: "1 1 200px" }}>
+          <Field label="Řidič">
+            <Select
+              value={filterUserId}
+              onChange={setFilterUserId}
+              options={[
+                { value: "", label: "Všichni řidiči" },
+                ...tripUsers.map((u) => ({
+                  value: String(u.id),
+                  label: u.name,
+                })),
+              ]}
+            />
+          </Field>
+        </Box>
+      </FilterBar>
 
       {/* Stats Cards */}
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25, delay: 0.08 }}
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "1fr",
+            sm: "repeat(3, 1fr)",
+          },
+          gap: 2,
+        }}
       >
-        <Box
-          sx={{
-            display: "grid",
-            gridTemplateColumns: {
-              xs: "1fr",
-              sm: "repeat(3, 1fr)",
-            },
-            gap: 2,
-          }}
-        >
-          <StatCard
-            label="Počet jízd"
-            value={totals.count}
-            icon={TripsIcon}
-            color="info"
-          />
-          <StatCard
-            label="Celkem naježděno"
-            value={`${formatKm(totals.total)} km`}
-            icon={TotalIcon}
-            color="default"
-          />
-          <StatCard
-            label="Služební km"
-            value={`${formatKm(totals.business)} km`}
-            icon={BusinessIcon}
-            color="success"
-          />
-        </Box>
-      </motion.div>
+        <StatCard
+          label="Počet jízd"
+          value={totals.count}
+          icon={TripsIcon}
+          color="info"
+        />
+        <StatCard
+          label="Celkem naježděno"
+          value={`${formatKm(totals.total)} km`}
+          icon={TotalIcon}
+          color="default"
+        />
+        <StatCard
+          label="Služební km"
+          value={`${formatKm(totals.business)} km`}
+          icon={BusinessIcon}
+          color="success"
+        />
+      </Box>
 
       {/* Trips Table */}
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25, delay: 0.12 }}
-      >
-        <Card sx={{ mt: 3 }}>
-          {isPending ? (
-            <LoadingState />
-          ) : (
-            <DataTable<Trip>
-              columns={columns}
-              rows={trips}
-              rowKey={(trip) => trip.id}
-              empty={
-                <EmptyState title="Žádné záznamy jízd pro vybrané období." />
-              }
-            />
-          )}
-        </Card>
-      </motion.div>
+      <Card sx={{ mt: 3 }}>
+        {isPending ? (
+          <LoadingState />
+        ) : (
+          <DataTable<Trip>
+            columns={columns}
+            rows={trips}
+            rowKey={(trip) => trip.id}
+            empty={
+              <EmptyState title="Žádné záznamy jízd pro vybrané období." />
+            }
+          />
+        )}
+      </Card>
 
       {/* Edit Modal */}
       <Modal
@@ -962,6 +938,6 @@ export default function TripsAdmin() {
           </table>
         </div>
       )}
-    </Box>
+    </PageEnter>
   );
 }