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/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,73 +809,67 @@ export default function ReceivedInvoices({
     <>
       {renderKpi()}
 
-      <motion.div
+      <Card>
-        initial={{ opacity: 0, y: 12 }}
+        <FilterBar>
-        animate={{ opacity: 1, y: 0 }}
+          <Box sx={{ flex: "1 1 320px" }}>
-        transition={{ duration: 0.25, delay: 0.08 }}
+            <TextField
-      >
+              value={search}
-        <Card>
+              onChange={(e) => setSearch(e.target.value)}
-          <FilterBar>
+              placeholder="Hledat podle dodavatele nebo čísla faktury..."
-            <Box sx={{ flex: "1 1 320px" }}>
+              fullWidth
-              <TextField
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder="Hledat podle dodavatele nebo čísla faktury..."
-                fullWidth
-              />
-            </Box>
-          </FilterBar>
-
-          {showListSkeleton ? (
-            <LoadingState />
-          ) : (
-            <DataTable<ReceivedInvoice>
-              columns={columns}
-              rows={invoices}
-              rowKey={(inv) => inv.id}
-              rowSx={rowSx}
-              sortBy={sort}
-              sortDir={order}
-              onSort={handleSort}
-              empty={
-                search ? (
-                  <EmptyState title="Žádné faktury neodpovídají hledání." />
-                ) : (
-                  <EmptyState
-                    title="Žádné přijaté faktury v tomto měsíci."
-                    description={
-                      hasPermission("invoices.create")
-                        ? "Nahrajte faktury tlačítkem výše."
-                        : undefined
-                    }
-                  />
-                )
-              }
             />
-          )}
+          </Box>
-          {(listTotalsQuery.data?.length ?? 0) > 0 && (
+        </FilterBar>
+
+        {showListSkeleton ? (
+          <LoadingState />
+        ) : (
+          <DataTable<ReceivedInvoice>
+            columns={columns}
+            rows={invoices}
+            rowKey={(inv) => inv.id}
+            rowSx={rowSx}
+            sortBy={sort}
+            sortDir={order}
+            onSort={handleSort}
+            empty={
+              search ? (
+                <EmptyState title="Žádné faktury neodpovídají hledání." />
+              ) : (
+                <EmptyState
+                  title="Žádné přijaté faktury v tomto měsíci."
+                  description={
+                    hasPermission("invoices.create")
+                      ? "Nahrajte faktury tlačítkem výše."
+                      : undefined
+                  }
+                />
+              )
+            }
+          />
+        )}
+        {(listTotalsQuery.data?.length ?? 0) > 0 && (
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "flex-end",
+              mt: 1.5,
+              px: 1,
+              gap: 1,
+              color: "text.secondary",
+              fontSize: "0.9rem",
+            }}
+          >
+            <span>Celkem:</span>
             <Box
-              sx={{
+              component="span"
-                display: "flex",
+              sx={{ fontWeight: 700, color: "text.primary" }}
-                justifyContent: "flex-end",
-                mt: 1.5,
-                px: 1,
-                gap: 1,
-                color: "text.secondary",
-                fontSize: "0.9rem",
-              }}
             >
-              <span>Celkem:</span>
+              {formatMultiCurrency(listTotalsQuery.data ?? [])}
-              <Box
-                component="span"
-                sx={{ fontWeight: 700, color: "text.primary" }}
-              >
-                {formatMultiCurrency(listTotalsQuery.data ?? [])}
-              </Box>
             </Box>
-          )}
+          </Box>
-        </Card>
+        )}
-      </motion.div>
+      </Card>
 
       {/* 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>