jobtrackingapp/job-tracker-ui/src/pages/RouteErrorPage.tsx

import React from "react";
import { Box, Button, Paper, Typography } from "@mui/material";
import { useNavigate, useRouteError } from "react-router-dom";
import { useI18n } from "../i18n/I18nProvider";

export default function RouteErrorPage() {
  const navigate = useNavigate();
  const error = useRouteError() as any;
  const { t } = useI18n();

  const details = typeof error?.statusText === "string" && error.statusText.trim()
    ? error.statusText
    : typeof error?.message === "string" && error.message.trim()
      ? error.message
      : null;

  return (
    <Box sx={{ minHeight: "100vh", display: "grid", placeItems: "center", p: 3 }}>
      <Paper sx={{ p: { xs: 3, md: 5 }, borderRadius: 4, width: "100%", maxWidth: 640 }}>
        <Box sx={{ display: "grid", gap: 1.5 }}>
          <Typography variant="overline" sx={{ color: "text.secondary", letterSpacing: 1.6 }}>
            {error?.status || 500}
          </Typography>
          <Typography variant="h4" sx={{ fontWeight: 800 }}>
            {t("appErrorTitle")}
          </Typography>
          <Typography sx={{ color: "text.secondary" }}>
            {t("appErrorBody")}
          </Typography>
          {details ? <Typography sx={{ color: "text.secondary" }}>{details}</Typography> : null}
          <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>
    </Box>
  );
}