Adding Dashboard UI

package.json

@@ -12,6 +12,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.21.1",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-separator": "^1.1.0",

src/app/api/auth/[...nextauth]/route.ts

@@ -13,6 +13,7 @@ declare module "next-auth" {
       id: string;
       name?: string | null;
       email?: string | null;
+      image?: string | null;
     };
   }
   interface JWT {

src/app/api/auth/sent-email-reset/route.ts

@@ -27,7 +27,9 @@ export async function POST(request: Request) {
       .sign(new TextEncoder().encode(process.env.JWT_SECRET));
 
     try {
-      const resetLink = `http://localhost:3000/reset_password?token=${token}`;
+      const environment = process.env.ENVIRONMENT || "LOCAL"; // Default to LOCAL if not specified
+      const baseUrl = process.env[environment];
+      const resetLink = `${baseUrl}/reset_password?token=${token}`;
 
       const transporter = nodemailer.createTransport({
         service: "gmail",

src/app/dashboard/page.tsx

@@ -1,21 +1,61 @@
 import { getServerSession } from "next-auth/next";
 import { redirect } from "next/navigation";
-import SignOutButton from "@/app//dashboard/Sign-out/index";
+import Image from "next/image";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import SignOutButton from "@/app/dashboard/Sign-out/index";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
 export default async function Dashboard() {
   const session = await getServerSession(authOptions);
 
+  const ImageLink = `https://as1.ftcdn.net/v2/jpg/03/39/45/96/1000_F_339459697_XAFacNQmwnvJRqe1Fe9VOptPWMUxlZP8.jpg`;
+
+  console.log(session);
+  const Images = session?.user?.image;
   if (!session) {
     redirect("/sign-in");
   }
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
-        <h2 className="text-2xl font-bold mb-6">Dashboard</h2>
-        <p className="text-sm">Welcome, {session?.user?.email}</p>
-        <SignOutButton />
-      </div>
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold">Dashboard</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center space-x-4">
+            <Avatar className="w-16 h-16">
+              <AvatarImage
+                src={Images || ImageLink}
+                alt={session.user?.name || "User"}
+              />
+              <AvatarFallback>{session.user?.name?.[0] || "U"}</AvatarFallback>
+            </Avatar>
+            <div>
+              <h3 className="text-lg font-semibold">
+                {session.user?.name || "User"}
+              </h3>
+              <p className="text-sm text-gray-500">{session.user?.email}</p>
+            </div>
+          </div>
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <h4 className="font-medium mb-2">Session Info</h4>
+            <pre className="text-xs overflow-auto">
+              {JSON.stringify(session, null, 2)}
+            </pre>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <SignOutButton />
+        </CardFooter>
+      </Card>
     </div>
   );
 }

src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }