feat(ui): add custom 404 not-found error page component

app/(app)/[...slug]/page.tsx

@@ -0,0 +1,11 @@
+/**
+ * @file app/(app)/[...slug]/page.tsx
+ * @description Catch-all route handler for undefined paths within the (app) route group, triggering a Next.js 404 page.
+ */
+
+import { notFound } from "next/navigation";
+
+/** Catches any unmatched nested sub-routes inside the application layout and delegates to the Next.js notFound handler. */
+export default function CatchAllNotFound() {
+  notFound();
+}

app/(app)/not-found.tsx

@@ -0,0 +1,31 @@
+/**
+ * @file app/(app)/not-found.tsx
+ * @description Server component rendering a custom 404 page for missing or invalid routes within the app layout.
+ */
+
+import { AlertCircle } from "lucide-react";
+
+/** Renders the 404 Not Found fallback view containing an alert icon, message, and navigation link back to the summary page. */
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full w-full text-center my-auto">
+      <div className="max-w-md w-full space-y-6">
+        {/* Icon Badge */}
+        <div className="mx-auto w-16 h-16 rounded-2xl bg-destructive-bg border border-destructive-border flex items-center justify-center text-destructive shadow-sm">
+          <AlertCircle size={36} />
+        </div>
+
+        {/* Text Content */}
+        <div className="space-y-2">
+          <h1 className="text-2xl font-bold tracking-tight text-foreground">
+            Page not found
+          </h1>
+          <p className="text-sm text-foreground-muted leading-relaxed">
+            The page you are looking for doesn't exist or has been moved. Please
+            check the URL or head back to your summary.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}