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/TripsHistory.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { motion } from "framer-motion";
 import Box from "@mui/material/Box";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
@@ -15,6 +14,7 @@ import {
   MonthField,
   StatusChip,
   PageHeader,
+  PageEnter,
   FilterBar,
   EmptyState,
   LoadingState,
@@ -216,104 +216,80 @@ export default function TripsHistory() {
   ];
 
   return (
-    <Box>
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25 }}
-      >
-        <PageHeader title="Historie jízd" subtitle={getMonthName(month)} />
-      </motion.div>
+    <PageEnter>
+      <PageHeader title="Historie jízd" subtitle={getMonthName(month)} />
 
       {/* Filters */}
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25, delay: 0.06 }}
-      >
-        <FilterBar>
-          <Box sx={{ flex: "1 1 200px" }}>
-            <Field label="Měsíc">
-              <MonthField value={month} onChange={(val) => setMonth(val)} />
-            </Field>
-          </Box>
-          <Box sx={{ flex: "1 1 200px" }}>
-            <Field label="Vozidlo">
-              <Select
-                value={vehicleId}
-                onChange={(value) => setVehicleId(value)}
-                options={[
-                  { value: "", label: "Všechna vozidla" },
-                  ...vehicles.map((v) => ({
-                    value: String(v.id),
-                    label: `${v.spz} - ${v.name}`,
-                  })),
-                ]}
-              />
-            </Field>
-          </Box>
-        </FilterBar>
-      </motion.div>
-
-      <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: "1fr 1fr",
-              lg: "repeat(3, 1fr)",
-            },
-            gap: 2,
-            mt: 3,
-          }}
-        >
-          <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"
-          />
+      <FilterBar>
+        <Box sx={{ flex: "1 1 200px" }}>
+          <Field label="Měsíc">
+            <MonthField value={month} onChange={(val) => setMonth(val)} />
+          </Field>
         </Box>
-      </motion.div>
+        <Box sx={{ flex: "1 1 200px" }}>
+          <Field label="Vozidlo">
+            <Select
+              value={vehicleId}
+              onChange={(value) => setVehicleId(value)}
+              options={[
+                { value: "", label: "Všechna vozidla" },
+                ...vehicles.map((v) => ({
+                  value: String(v.id),
+                  label: `${v.spz} - ${v.name}`,
+                })),
+              ]}
+            />
+          </Field>
+        </Box>
+      </FilterBar>
+
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "1fr",
+            sm: "1fr 1fr",
+            lg: "repeat(3, 1fr)",
+          },
+          gap: 2,
+          mt: 3,
+        }}
+      >
+        <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>
-    </Box>
+      <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>
+    </PageEnter>
   );
 }