NotFoundView.jsx 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. "use client";
  2. import React from "react";
  3. import Link from "next/link";
  4. import { useAuth } from "@/components/auth/authContext";
  5. import { branchPath, homePath } from "@/lib/frontend/routes";
  6. import { Button } from "@/components/ui/button";
  7. import {
  8. Card,
  9. CardHeader,
  10. CardTitle,
  11. CardDescription,
  12. CardContent,
  13. CardFooter,
  14. } from "@/components/ui/card";
  15. /**
  16. * NotFoundView (RHL-021)
  17. *
  18. * Used by (protected)/not-found.jsx.
  19. * Keeps UX consistent for invalid route params and unknown pages in the protected area.
  20. */
  21. export default function NotFoundView() {
  22. const { status, user } = useAuth();
  23. const isAuthed = status === "authenticated" && user;
  24. const ownBranchHref =
  25. isAuthed && user.role === "branch" && user.branchId
  26. ? branchPath(user.branchId)
  27. : null;
  28. return (
  29. <Card>
  30. <CardHeader>
  31. <CardTitle>Not found</CardTitle>
  32. <CardDescription>
  33. The page or resource you requested does not exist.
  34. </CardDescription>
  35. </CardHeader>
  36. <CardContent className="space-y-2">
  37. <p className="text-sm text-muted-foreground">
  38. This can happen when route parameters are invalid (e.g.
  39. year/month/day) or the URL is mistyped.
  40. </p>
  41. </CardContent>
  42. <CardFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end">
  43. <Button variant="outline" asChild>
  44. <Link href={homePath()}>Home</Link>
  45. </Button>
  46. {ownBranchHref ? (
  47. <Button asChild>
  48. <Link href={ownBranchHref}>Go to my branch</Link>
  49. </Button>
  50. ) : null}
  51. </CardFooter>
  52. </Card>
  53. );
  54. }