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
-        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" }}>
-              <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
-                    }
-                  />
-                )
-              }
+      <Card>
+        <FilterBar>
+          <Box sx={{ flex: "1 1 320px" }}>
+            <TextField
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Hledat podle dodavatele nebo čísla faktury..."
+              fullWidth
             />
-          )}
-          {(listTotalsQuery.data?.length ?? 0) > 0 && (
+          </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
+                  }
+                />
+              )
+            }
+          />
+        )}
+        {(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={{
-                display: "flex",
-                justifyContent: "flex-end",
-                mt: 1.5,
-                px: 1,
-                gap: 1,
-                color: "text.secondary",
-                fontSize: "0.9rem",
-              }}
+              component="span"
+              sx={{ fontWeight: 700, color: "text.primary" }}
             >
-              <span>Celkem:</span>
-              <Box
-                component="span"
-                sx={{ fontWeight: 700, color: "text.primary" }}
-              >
-                {formatMultiCurrency(listTotalsQuery.data ?? [])}
-              </Box>
+              {formatMultiCurrency(listTotalsQuery.data ?? [])}
             </Box>
-          )}
-        </Card>
-      </motion.div>
+          </Box>
+        )}
+      </Card>
 
       {/* Upload Modal */}
       <Modal