cesnimda
5219237613
No mockup exists for 404/500 pages, so these follow the visual language already established elsewhere this session: floating-shadow card, big bold status number (matching the dashboard stat tiles' bold-number treatment) instead of a small overline. JobTable's first-run empty state gets an icon chip matching the landing page's feature-card icon treatment (rounded square, tinted primary background) instead of plain text -- the filtered "no results" one-liner stays as-is, that's a different, correctly minimal case. Main table Paper wrapper gets the same floating-shadow treatment as every other card this session. ViewStateNotice (the shared loading/error component used across the app) reviewed and left untouched -- it's an MUI Alert used as an inline banner, which is the correct pattern; it was never a "fake card" to begin with.
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { Box, Button, Paper, Typography } from "@mui/material";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
|
|
export default function NotFoundPage() {
|
|
const navigate = useNavigate();
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<Paper
|
|
sx={{
|
|
p: { xs: 4, md: 6 },
|
|
borderRadius: 4,
|
|
border: "none",
|
|
boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)",
|
|
}}
|
|
>
|
|
<Box sx={{ display: "grid", gap: 1.5, maxWidth: 560 }}>
|
|
<Typography sx={{ fontWeight: 900, fontSize: { xs: 48, md: 64 }, lineHeight: 1, letterSpacing: "-0.02em", color: "primary.main" }}>
|
|
404
|
|
</Typography>
|
|
<Typography variant="h4" sx={{ fontWeight: 800 }}>
|
|
{t("notFoundTitle")}
|
|
</Typography>
|
|
<Typography sx={{ color: "text.secondary" }}>
|
|
{t("notFoundBody")}
|
|
</Typography>
|
|
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mt: 1 }}>
|
|
<Button variant="contained" onClick={() => navigate("/jobs")}>
|
|
{t("goHome")}
|
|
</Button>
|
|
<Button variant="outlined" onClick={() => navigate(-1)}>
|
|
{t("goBack")}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
}
|