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>
This commit is contained in:
BOHA
2026-06-12 18:04:32 +02:00
parent bf33d0a543
commit b9103c59f0
5 changed files with 878 additions and 919 deletions

View File

@@ -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>
);
}