feat: improved 404 page design across all apps#4438
feat: improved 404 page design across all apps#4438karthik-dev56 wants to merge 1 commit intobeckn:mainfrom
Conversation
- Added modern, user-friendly 404 pages for all applications - Includes custom SVG illustration with friendly design - Added 'Go Back' and 'Go to Homepage' action buttons - Included helpful quick navigation links - Fully responsive and mobile-friendly design - Fixed TypeScript compilation errors
WalkthroughAdds custom 404 error page components across seven Next.js applications (dhp, dsep, dsnp, industry_4.0, odr, osm, retail). Each implements a Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (13)
apps/odr/pages/404.tsx (2)
1-3: Usenext/linkfor internal navigation + consider fallback whenrouter.back()is ineffective
<a href>forces full reloads and can bypass Next routing/basePath; alsorouter.back()may do nothing if the user landed directly on the 404 (no history). Consider:import React from 'react' import { useRouter } from 'next/router' +import Link from 'next/link' const Custom404 = () => { const router = useRouter() + const handleGoBack = () => { + if (typeof window !== 'undefined' && window.history.length > 1) router.back() + else router.push('/') + } return ( @@ - <button - onClick={() => router.back()} + <button + type="button" + onClick={handleGoBack} className="px-6 py-3 bg-white text-indigo-600 border-2 border-indigo-600 rounded-lg font-semibold hover:bg-indigo-50 transition-colors duration-200" > Go Back </button> - <a - href="/" + <Link + href="/" className="px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition-colors duration-200 inline-block" > Go to Homepage - </a> + </Link> @@ - <a href="/" className="text-indigo-600 hover:text-indigo-800 hover:underline"> + <Link href="/" className="text-indigo-600 hover:text-indigo-800 hover:underline"> Home - </a> - <a href="/search" className="text-indigo-600 hover:text-indigo-800 hover:underline"> + </Link> + <Link href="/search" className="text-indigo-600 hover:text-indigo-800 hover:underline"> Search - </a> + </Link>Also applies to: 84-116
14-19: Mark the SVG as decorative (a11y) to avoid screen reader noiseSince the SVG is decorative, consider:
<svg className="w-full h-48 mx-auto" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" + aria-hidden="true" + focusable="false" >apps/industry_4.0/pages/404.tsx (2)
1-3: Prefernext/linkfor internal links + addrouter.back()fallbackSame recommendation as other apps: use
Linkfor internal navigation and consider a fallback torouter.push('/')whenback()can’t navigate (direct-entry 404). (See diff pattern in apps/odr/pages/404.tsx.)Also applies to: 84-116
14-19: Decorative SVG should bearia-hiddenAdd
aria-hidden="true"andfocusable="false"to the<svg>to reduce assistive-tech noise.apps/dsnp/pages/404.tsx (2)
1-3: Swap<a href>tonext/link(client routing) + back fallbackInternal navigation should generally use
Linkto avoid full reloads and handle basePath; also consider a “back” fallback to/when there’s no history entry.Also applies to: 84-116
14-19: SVG a11y: set decorative semanticsAdd
aria-hidden="true"(or add<title>/<desc>+role="img"if you want it announced).apps/retail/pages/404.tsx (1)
14-19: Decorative SVG: addaria-hiddenMark the illustration as decorative (
aria-hidden="true",focusable="false").apps/osm/pages/404.tsx (2)
1-3: Usenext/link+ add a safer “Go Back” handlerRecommend
Linkfor internal routes and aback()fallback to/when there’s no history entry (direct 404).Also applies to: 84-116
14-19: SVG a11y: mark as decorativeAdd
aria-hidden="true"+focusable="false"to the<svg>.apps/dsep/pages/404.tsx (2)
1-3: Prefernext/linkand avoid full page reloads for internal linksSwitch internal
<a href>toLink(home/helpful links) to keep SPA navigation behavior and basePath handling.Also applies to: 84-116
86-91: Addtype="button"on the “Go Back” buttonPrevents unintended submit behavior if this component ever gets rendered inside a
<form>.apps/dhp/pages/404.tsx (2)
14-19: SVG a11y: mark as decorativeAdd
aria-hidden="true"+focusable="false"on the<svg>(or provide accessible title/desc if it’s meant to be announced).
84-128: UseLinkfrom next/link for internal navigation instead of<a href>tags.The routes
/myAppointmentsand/cartare valid and correctly cased. However, for consistency with other pages in the dhp app and Next.js best practices, import and useLinkfor all internal navigation links rather than<a href>elements. This applies to the links pointing to "/", "/search", "/myAppointments", and "/cart".
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/dhp/pages/404.tsx(1 hunks)apps/dsep/pages/404.tsx(1 hunks)apps/dsnp/pages/404.tsx(1 hunks)apps/industry_4.0/pages/404.tsx(1 hunks)apps/odr/pages/404.tsx(1 hunks)apps/osm/pages/404.tsx(1 hunks)apps/retail/pages/404.tsx(1 hunks)
| {/* Action Buttons */} | ||
| <div className="flex flex-col sm:flex-row gap-4 justify-center"> | ||
| <button | ||
| onClick={() => router.back()} | ||
| className="px-6 py-3 bg-white text-indigo-600 border-2 border-indigo-600 rounded-lg font-semibold hover:bg-indigo-50 transition-colors duration-200" | ||
| > | ||
| Go Back | ||
| </button> | ||
| <a | ||
| href="/" | ||
| className="px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition-colors duration-200 inline-block" | ||
| > | ||
| Go to Homepage | ||
| </a> | ||
| </div> | ||
|
|
||
| {/* Helpful Links */} | ||
| <div className="mt-12"> | ||
| <p className="text-sm text-gray-500 mb-3">Need help? Try these:</p> | ||
| <div className="flex flex-wrap justify-center gap-4 text-sm"> | ||
| <a | ||
| href="/" | ||
| className="text-indigo-600 hover:text-indigo-800 hover:underline" | ||
| > | ||
| Home | ||
| </a> | ||
| <a | ||
| href="/search" | ||
| className="text-indigo-600 hover:text-indigo-800 hover:underline" | ||
| > | ||
| Search | ||
| </a> | ||
| <a | ||
| href="/orderHistory" | ||
| className="text-indigo-600 hover:text-indigo-800 hover:underline" | ||
| > | ||
| Order History | ||
| </a> | ||
| <a | ||
| href="/cart" | ||
| className="text-indigo-600 hover:text-indigo-800 hover:underline" | ||
| > | ||
| Cart | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, find the pages directory structure in the retail app
find apps/retail/pages -type f -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" | head -50Repository: beckn/beckn-ui-workspace
Length of output: 754
🏁 Script executed:
cat -n apps/retail/pages/404.tsx | head -100Repository: beckn/beckn-ui-workspace
Length of output: 3801
🏁 Script executed:
cat -n apps/retail/pages/404.tsx | tail -30Repository: beckn/beckn-ui-workspace
Length of output: 1032
Use next/link for internal navigation instead of raw <a> tags
The routes /, /search, /orderHistory, and /cart are correct (they match the existing page files). However, for Next.js best practices, replace all <a href> tags pointing to internal routes with next/link. Import Link from next/link and update the navigation links in both the action buttons section and the helpful links section.
🤖 Prompt for AI Agents
In apps/retail/pages/404.tsx around lines 84 to 128, internal navigation is
using raw <a href> anchors; import Link from 'next/link' and replace those
anchors with Next.js Link components for client-side routing (wrap the existing
button and link elements in <Link href="..."> or make the Link the element and
keep the className on the child), updating the action button that goes to "/"
and all helpful links ("/", "/search", "/orderHistory", "/cart") to use Link so
Next handles navigation; ensure you add the Link import at the top of the file
and preserve existing className and accessibility attributes when replacing the
anchors.
|
I have started my first contribution with this please look at out and Mobile view also clearly responsive screenshot i have taken its looking like that but it is also full responsive |
1 participant
-mobile view:
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.