Design not-found, error pages, added logout functionality

app/dashboard/Logout.tsx

@@ -0,0 +1,19 @@
+import { LogOutIcon } from 'lucide-react';
+import React from 'react';
+
+import { Button } from '@/components/ui/button';
+
+import { logout } from './signout.action';
+
+const Logout = () => {
+  return (
+    <form action={logout} className="flex h-full">
+      <Button variant="ghost" className="w-full justify-start self-end">
+        <LogOutIcon className="mr-2 size-4" />
+        Logout
+      </Button>
+    </form>
+  );
+};
+
+export default Logout;

app/dashboard/SideNav.tsx

@@ -16,6 +16,8 @@ import {
 } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 
+import Logout from './Logout';
+
 type NavItem = {
   title: string;
   icon: LucideIcon;
@@ -66,7 +68,7 @@ export function Nav() {
         data-collapsed={isCollapsed}
         className="group flex h-[calc(100vh-4rem)] flex-col gap-4 border-r py-2 data-[collapsed=true]:py-2 md:w-48"
       >
-        <nav className="grid gap-2 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
+        <nav className="flex h-full flex-col gap-2 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
           {links.map((link) =>
             isCollapsed ? (
               <Tooltip key={`nav-${link.title}`} delayDuration={0}>
@@ -109,6 +111,7 @@ export function Nav() {
               </Link>
             ),
           )}
+          <Logout />
         </nav>
       </div>
     </TooltipProvider>

app/dashboard/layout.tsx

@@ -10,7 +10,7 @@ export default function Layout({
   return (
     <main>
       <header className="h-16 border-b">
-        <span className="my-4 inline-flex items-center gap-2 px-2 text-3xl font-medium">
+        <span className="my-4 inline-flex items-center gap-2 px-2 text-2xl font-medium">
           <CalendarClock className="size-8" />
           FixIt
         </span>

app/dashboard/not-found.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import Image from 'next/image';
+
+export default function NotFound() {
+  return (
+    <main className="prose mx-auto mt-10 flex min-h-screen w-full flex-col items-center">
+      <h1>Kiya Dhoond Ra hai ??</h1>
+      <Image
+        src="/not-found.gif"
+        width={500}
+        height={500}
+        alt="server_error"
+        className="aspect-video"
+        unoptimized
+      />
+    </main>
+  );
+}

app/dashboard/page.tsx

@@ -1,7 +1,25 @@
+import Image from 'next/image';
 import React from 'react';
 
 const DashboardRoute = async () => {
-  return <div>DashboardRoute</div>;
+  return (
+    <div className="mt-10 flex w-full flex-col items-center">
+      <Image
+        src="/coming-soon.svg"
+        width={500}
+        height={500}
+        alt="coming_soon"
+        className="aspect-video"
+      />
+      <h1 className="mt-8 text-5xl font-semibold text-gray-800">
+        Under Development
+      </h1>
+      <p className="mt-4 max-w-md text-center text-gray-600">
+        We&apos;re working hard to bring you new features and improvements. Stay
+        tuned for updates, and thank you for your patience!
+      </p>
+    </div>
+  );
 };
 
 export default DashboardRoute;

app/dashboard/signout.action.ts

@@ -0,0 +1,7 @@
+'use server';
+
+import { signOut } from '@/auth';
+
+export const logout = async () => {
+  await signOut({ redirectTo: '/' });
+};

app/error.tsx

@@ -1,7 +1,10 @@
 'use client';
 
+import Image from 'next/image';
 import { useEffect } from 'react';
 
+import { Button } from '@/components/ui/button';
+
 export default function Error({
   error,
   reset,
@@ -15,17 +18,23 @@ export default function Error({
   }, [error]);
 
   return (
-    <div>
+    <main className="prose mx-auto flex min-h-screen w-full flex-col items-center justify-center text-center">
+      <Image
+        src="/server-error.svg"
+        width={500}
+        height={500}
+        alt="server_error"
+        className="size-80"
+      />
       <h2>Something went wrong!</h2>
-      <button
-        type="button"
-        onClick={
-          // Attempt to recover by trying to re-render the segment
-          () => reset()
-        }
-      >
+      <p className="text-lg">
+        We encountered an unexpected error. Please try refreshing the page or
+        come back later. If the problem persists, contact support for
+        assistance.
+      </p>
+      <Button variant="destructive" onClick={() => reset()} className="mt-6">
         Try again
-      </button>
-    </div>
+      </Button>
+    </main>
   );
 }

app/sign-in/page.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { signIn } from '@/auth';
 import { Button } from '@/components/ui/button';
 
-const SignInPage = () => {
+const SignInPage = async () => {
   return (
     <div className="mx-auto flex min-h-screen w-full flex-col items-center justify-between gap-10 bg-gray-50 px-10 pt-10 lg:flex-row">
       <div className="flex flex-col items-center justify-center space-y-6 lg:w-1/2">

auth.ts

@@ -14,5 +14,12 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
     authorized: async ({ auth: session }) => {
       return !!session;
     },
+    jwt({ token, user }) {
+      const clone = { ...token };
+      if (user) {
+        clone.id = user.id;
+      }
+      return clone;
+    },
   },
 });

middleware.ts

@@ -8,9 +8,14 @@ export default auth((req) => {
     return NextResponse.redirect(newUrl);
   }
 
+  if (req.auth && ['/sign-in', '/'].includes(req.nextUrl.pathname)) {
+    const newUrl = new URL('/dashboard', req.nextUrl.origin);
+    return NextResponse.redirect(newUrl);
+  }
+
   return NextResponse.next();
 });
 
 export const config = {
-  matcher: ['/dashboard/(.*)'],
+  matcher: '/((?!api|static|.*\\..*|_next).*)',
 };