404 Not Found Page

Overview

This page documents the application's shared 404 screen along with the set of feature-specific status screens used when the requested data cannot be found.

Because the customer-facing web app has no server-side route guards, these screens are the primary outcome whenever a token or hash is invalid, or an API responds that access is not permitted. Put another way: authorization happens at the API call, and these screens are how the result surfaces to the user.

Business Flow

1. Any page that discovers its data does not exist invokes Next.js's not-found mechanism. Examples: the OA landing page when no profile is found, an article page on a non-permission error, and the menu page when loading fails.

2. The /404 route renders the shared 404 screen — a blue-green gradient background with gently animated geometric shapes, plus a go-home button and a go-back button so users are never stuck.

3. Some features deliberately use a purpose-built status screen instead of the shared 404, because it communicates more precisely and preserves the feature's look and feel:

   Feature	Screen used
   Forms	The form-specific not-found screen, using Thai copy and the form's own theme
   Articles / content pages	An access-denied screen, used for permission failures
   Content link listing	An inline message stating the requested link was not found
   Bulletin board	A single consolidated status screen covering loading, empty, not found, expired session, view forbidden, and error
   Loyalty card	A sign-in-again screen

Key Screens & Components

• 404 route (src/app/404/page.tsx) — the entry point for the shared 404 screen.
• Shared 404 screen (src/components/layout-app/not-found-app.tsx) — the actual design work, including the go-home and go-back handlers.
• Feature-specific status screens:
  • Forms — src/components/form-builder/layout/not-found.tsx
  • Bulletin board — src/app/[hash]/bulletin/components/EmptyBoard.tsx
  • Loyalty card — src/app/[hash]/loyalty/components/SignInAgain.tsx
  • Content pages — src/components/content-viewer/AccessDenied.tsx

A notable design point: the bulletin board consolidates every case into a single component that takes a status kind as a parameter. Users get a message matched to their situation while the code stays centralized in one place.

Dependencies

• Next.js's not-found mechanism — the bridge between feature pages and the shared 404 screen.
• Tailwind CSS — powers the animation and gradient on the shared 404 screen.
• None of these screens call an API; they all render purely from state already received.