feat(ui): unified tab-switch animation - enter-only fade in TabPanel

One 0.2s enter-only fade (opacity + 6px rise) in the kit TabPanel covers
every tab switch (M3 clean-fade pattern; CSS animation so the global
reduced-motion kill switch applies). Orders and Invoices view switchers
now render through TabPanel (also fixes their dangling aria-controls).
Removed the inconsistent bespoke framer entrances inside tab content
(CompanySettings cascade, ReceivedInvoices card). Filter-style status
tabs (Projects/Offers/Invoices) deliberately keep the refetch dim only.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/admin/pages/CompanySettings.tsx

@@ -8,7 +8,6 @@ import {
   type CompanySettingsData,
 } from "../lib/queries/settings";
 import { bankAccountsOptions, type BankAccount } from "../lib/queries/common";
-import { motion } from "framer-motion";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
@@ -633,11 +632,6 @@ export default function CompanySettings({
   return (
     <Box>
       {!embedded && (
-        <motion.div
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.25 }}
-        >
         <Box
           sx={{
             display: "flex",
@@ -650,11 +644,7 @@ export default function CompanySettings({
         >
           <Box>
             <Typography variant="h4">Nastavení firmy</Typography>
-              <Typography
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
-                variant="body2"
-                color="text.secondary"
-                sx={{ mt: 0.5 }}
-              >
               Firemní údaje a bankovní účty
             </Typography>
           </Box>
@@ -662,7 +652,6 @@ export default function CompanySettings({
             {saving ? "Ukládání..." : "Uložit nastavení"}
           </Button>
         </Box>
-        </motion.div>
       )}
 
       <Box
@@ -674,11 +663,6 @@ export default function CompanySettings({
       >
         {/* Company Info */}
         {(canEditCompany || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.06 }}
-          >
           <Card>
             <Typography variant="h6" sx={{ mb: 2 }}>
               Firemní údaje
@@ -834,10 +818,7 @@ export default function CompanySettings({
                   <Box sx={{ mt: 0.5 }}>
                     <CheckboxField
                       label={
-                          <Typography
+                        <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
-                            variant="body2"
-                            sx={{ fontSize: "0.8rem" }}
-                          >
                           Zobrazit název v PDF
                         </Typography>
                       }
@@ -876,16 +857,10 @@ export default function CompanySettings({
               </Button>
             </Box>
           </Card>
-          </motion.div>
         )}
 
         {/* Bank Accounts */}
         {(canManageBanking || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.08 }}
-          >
           <Card>
             <Typography variant="h6" sx={{ mb: 2 }}>
               Bankovní účty
@@ -921,9 +896,7 @@ export default function CompanySettings({
                     color="text.secondary"
                     sx={{ mb: 1.5 }}
                   >
-                      {editingBank !== null
+                    {editingBank !== null ? "Upravit účet" : "Přidat nový účet"}
-                        ? "Upravit účet"
-                        : "Přidat nový účet"}
                   </Typography>
                   <Box
                     sx={{
@@ -1046,16 +1019,10 @@ export default function CompanySettings({
               </>
             )}
           </Card>
-          </motion.div>
         )}
 
         {/* PDF Field Order */}
         {(canEditCompany || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.08 }}
-          >
           <Card>
             <Typography variant="h6" sx={{ mb: 2 }}>
               Pořadí polí dodavatele v PDF
@@ -1119,16 +1086,10 @@ export default function CompanySettings({
               ))}
             </Box>
           </Card>
-          </motion.div>
         )}
 
         {/* Document Numbering */}
         {(canEditCompany || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.1 }}
-          >
           <Card>
             <Typography variant="h6" sx={{ mb: 2 }}>
               Číslování dokladů
@@ -1143,11 +1104,11 @@ export default function CompanySettings({
                 mb: 2,
               }}
             >
-                <strong>Dostupné zástupné znaky:</strong>{" "}
+              <strong>Dostupné zástupné znaky:</strong> <code>{"{YYYY}"}</code>{" "}
-                <code>{"{YYYY}"}</code> rok, <code>{"{YY}"}</code> rok (2
+              rok, <code>{"{YY}"}</code> rok (2 číslice),{" "}
-                číslice), <code>{"{PREFIX}"}</code> prefix (nabídky / sklad),{" "}
+              <code>{"{PREFIX}"}</code> prefix (nabídky / sklad),{" "}
-                <code>{"{CODE}"}</code> typový kód, <code>{"{NNN}"}</code>{" "}
+              <code>{"{CODE}"}</code> typový kód, <code>{"{NNN}"}</code> pořadí
-                pořadí (3 číslice), <code>{"{NNNN}"}</code> pořadí (4 číslice),{" "}
+              (3 číslice), <code>{"{NNNN}"}</code> pořadí (4 číslice),{" "}
               <code>{"{NNNNN}"}</code> pořadí (5 číslic)
             </Box>
             {[
@@ -1310,16 +1271,10 @@ export default function CompanySettings({
               );
             })}
           </Card>
-          </motion.div>
         )}
 
         {/* Currency & VAT */}
         {(canEditCompany || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.12 }}
-          >
           <Card>
             <Typography variant="h6" sx={{ mb: 2 }}>
               Měna a DPH
@@ -1383,16 +1338,10 @@ export default function CompanySettings({
               </Field>
             </Box>
           </Card>
-          </motion.div>
         )}
 
         {/* Logo */}
         {(canEditCompany || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.14 }}
-          >
           <Card>
             <Typography variant="h6" sx={{ mb: 2 }}>
               Logo
@@ -1506,25 +1455,13 @@ export default function CompanySettings({
               </Box>
             </Box>
           </Card>
-          </motion.div>
         )}
       </Box>
 
       {embedded && canEditCompany && (
-        <motion.div
+        <Button onClick={handleSave} fullWidth sx={{ mt: 2 }} disabled={saving}>
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.25, delay: 0.2 }}
-        >
-          <Button
-            onClick={handleSave}
-            fullWidth
-            sx={{ mt: 2 }}
-            disabled={saving}
-          >
           {saving ? "Ukládání..." : "Uložit nastavení firmy"}
         </Button>
-        </motion.div>
       )}
 
       <ConfirmDialog

src/admin/pages/Invoices.tsx

@@ -40,6 +40,7 @@ import {
   LoadingState,
   FilterBar,
   Tabs,
+  TabPanel,
   PageHeader,
   PageEnter,
   type DataColumn,
@@ -706,7 +707,7 @@ export default function Invoices() {
         </Box>
       </Box>
 
-      {activeTab === "received" ? (
+      <TabPanel value="received" current={activeTab} sx={{ pt: 0 }}>
         <Suspense fallback={<LoadingState />}>
           <ReceivedInvoices
             statsMonth={statsMonth}
@@ -715,7 +716,8 @@ export default function Invoices() {
             setUploadOpen={setReceivedUploadOpen}
           />
         </Suspense>
-      ) : (
+      </TabPanel>
+      <TabPanel value="issued" current={activeTab} sx={{ pt: 0 }}>
         <>
           {renderKpi()}
 
@@ -808,7 +810,7 @@ export default function Invoices() {
             loading={deleting}
           />
         </>
-      )}
+      </TabPanel>
     </PageEnter>
   );
 }

src/admin/pages/Orders.tsx

@@ -5,7 +5,14 @@ import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import { Button, Tabs, PageHeader, PageEnter, LoadingState } from "../ui";
+import {
+  Button,
+  Tabs,
+  TabPanel,
+  PageHeader,
+  PageEnter,
+  LoadingState,
+} from "../ui";
 import OrdersReceived from "./ReceivedOrders";
 
 const IssuedOrders = lazy(() => import("./IssuedOrders"));
@@ -170,18 +177,19 @@ export default function Orders() {
         </Box>
       </Box>
 
-      {activeTab === "vydane" ? (
+      <TabPanel value="vydane" current={activeTab} sx={{ pt: 0 }}>
         <Suspense fallback={<LoadingState />}>
           <IssuedOrders month={statsMonth} year={statsYear} />
         </Suspense>
-      ) : (
+      </TabPanel>
+      <TabPanel value="prijate" current={activeTab} sx={{ pt: 0 }}>
         <OrdersReceived
           month={statsMonth}
           year={statsYear}
           createOpen={createOpen}
           setCreateOpen={setCreateOpen}
         />
-      )}
+      </TabPanel>
     </PageEnter>
   );
 }

src/admin/pages/ReceivedInvoices.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef } from "react";
 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";
@@ -810,11 +809,6 @@ export default function ReceivedInvoices({
     <>
       {renderKpi()}
 
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25, delay: 0.08 }}
-      >
       <Card>
         <FilterBar>
           <Box sx={{ flex: "1 1 320px" }}>
@@ -876,7 +870,6 @@ export default function ReceivedInvoices({
           </Box>
         )}
       </Card>
-      </motion.div>
 
       {/* Upload Modal */}
       <Modal

src/admin/ui/Tabs.tsx

@@ -2,6 +2,8 @@ import type { ReactNode } from "react";
 import MuiTabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
+import { keyframes } from "@mui/system";
+import type { SxProps, Theme } from "@mui/material/styles";
 
 export interface TabDef {
   value: string;
@@ -47,15 +49,26 @@ export function Tabs({
   );
 }
 
+// The ONE tab-switch animation, app-wide: enter-only fade of the incoming
+// panel (M3 "clean fade" — old content drops instantly, no exit/slide; tabs
+// are too high-frequency for anything longer). Kept as a CSS animation so the
+// global prefers-reduced-motion kill switch in GlobalStyles neutralizes it.
+const panelEnter = keyframes({
+  from: { opacity: 0, transform: "translateY(6px)" },
+  to: { opacity: 1, transform: "none" },
+});
+
 /** Renders children only when its value matches the current tab. */
 export function TabPanel({
   value,
   current,
   children,
+  sx,
 }: {
   value: string;
   current: string;
   children: ReactNode;
+  sx?: SxProps<Theme>;
 }) {
   if (value !== current) return null;
   return (
@@ -63,7 +76,13 @@ export function TabPanel({
       role="tabpanel"
       id={panelId(value)}
       aria-labelledby={tabId(value)}
-      sx={{ pt: 2.5 }}
+      sx={[
+        {
+          pt: 2.5,
+          animation: `${panelEnter} 0.2s cubic-bezier(0.16, 1, 0.3, 1)`,
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       {children}
     </Box>