Working on the dropdown logged in dashboard.

app/(customer)/dashboard/layout.tsx

@@ -1,5 +1,5 @@
 import {SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
-import {AppSidebar} from "@/components/wrappers/SideBar/app-sidebar";
+import {AppSidebar} from "@/components/wrappers/Dashboard/SideBar/app-sidebar";
 import {currentUser} from "@/auth/current-user";
 import {redirect} from "next/navigation";
 

src/components/wrappers/Auth/Login/LoginForm/LoginForm.tsx

@@ -11,10 +11,11 @@ import {toast} from "sonner";
 import {useMutation} from "@tanstack/react-query";
 import {TooltipProvider} from "@/components/ui/tooltip";
 import Link from "next/link";
-import {PasswordInput} from "@/components/wrappers/PaswordInput/password-input";
+import {PasswordInput} from "@/components/wrappers/Auth/PaswordInput/password-input";
 import {LoginSchema, LoginType} from "@/components/wrappers/Auth/Login/LoginForm/login-form-schema";
 import {signInAction} from "@/features/auth/auth.action";
 import {SocialAuthButton} from "@/components/wrappers/Auth/Login/SocialAuth/SocialAuthButtons/SocialAuthButton";
+import Image from 'next/image';
 
 export type loginFormProps = {
     defaultValues?: LoginType;
@@ -27,7 +28,7 @@ export const LoginForm = (props: loginFormProps) => {
     const mutation = useMutation({
         mutationFn: async (values: LoginType) => {
             const result = await signInAction("credentials", values)
-            if(result?.error){
+            if (result?.error) {
                 toast.error(result.error)
             }
         }
@@ -38,6 +39,10 @@ export const LoginForm = (props: loginFormProps) => {
             <Card>
                 <CardHeader>
                     <div className="grid gap-2 text-center mb-2">
+                        {/*<div className="justify-center text-center flex">*/}
+                        {/*    <Image src="/logo.png" alt="Logo Portabase" width={100}*/}
+                        {/*           height={50}/>*/}
+                        {/*</div>*/}
                         <h1 className="text-3xl font-bold">Login</h1>
                         <p className="text-balance text-muted-foreground">
                             Enter your informations bellow to login

src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx

@@ -14,7 +14,7 @@ import {TooltipProvider, TooltipTrigger, Tooltip, TooltipContent} from "@/compon
 import {RegisterSchema, RegisterType} from "@/components/wrappers/Auth/Register/RegisterForm/register-form.schema";
 import {registerUserAction} from "@/components/wrappers/Auth/Register/RegisterForm/register-form.action";
 import {Info} from "lucide-react";
-import {PasswordInput} from "@/components/wrappers/PaswordInput/password-input";
+import {PasswordInput} from "@/components/wrappers/Auth/PaswordInput/password-input";
 
 export type registerFormProps = {
     defaultValues?: RegisterType;

src/components/wrappers/Auth/Register/RegisterForm/register-form.action.ts

@@ -13,6 +13,7 @@ export const registerUserAction = action
         if (!user && parsedInput.password === parsedInput.confirmPassword) {
             const new_user = await prisma.user.create({
                 data: {
+                    name: parsedInput.name,
                     email: parsedInput.email,
                     password: await hashPassword(parsedInput.password),
                 },

src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx

@@ -0,0 +1,29 @@
+import {Button} from "@/components/ui/button"
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
+import {currentUser} from "@/auth/current-user";
+import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
+import {SidebarMenuButton} from "@/components/ui/sidebar";
+import {ChevronUp} from "lucide-react";
+
+export const LoggedInButton = async () => {
+
+    const user = await currentUser()
+    // if (!user) {
+    //     return <SignInButton/>
+    // }
+
+    return (
+        <LoggedInDropdown>
+            <SidebarMenuButton>
+                <Avatar className="size-6">
+                    <AvatarFallback>{user.name?.[0]}</AvatarFallback>
+                    {user.image ? (
+                        <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`}/>
+                    ) : null}
+                </Avatar>
+                <span>{user.name}</span>
+                <ChevronUp className="ml-auto"/>
+            </SidebarMenuButton>
+        </LoggedInDropdown>
+    )
+}

src/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import {PropsWithChildren} from "react";
+import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
+import {signOutAction} from "@/features/auth/auth.action";
+import {Home, LogOut, Square, User, Gauge, User2, ChevronUp} from "lucide-react";
+import Link from "next/link";
+import {useTranslations} from "use-intl";
+import {SidebarMenuButton} from "@/components/ui/sidebar";
+import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar";
+
+export type LoggedInDropdownProps = PropsWithChildren<{}>
+
+export const LoggedInDropdown = (props: LoggedInDropdownProps) => {
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                {props.children}
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+                side="top"
+                className="w-[--radix-popper-anchor-width]"
+            >
+                <DropdownMenuItem>
+                    <span>Account</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                    <span>Billing</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => {
+                    signOutAction()
+                }}>
+                    <span>Sign out</span>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+)
+}

src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx

@@ -1,21 +1,26 @@
-"use client"
 
 import {
     Sidebar,
     SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
     SidebarGroupLabel,
-    SidebarHeader, SidebarInset,
+    SidebarHeader,
     SidebarMenu,
     SidebarMenuButton,
-    SidebarMenuItem, SidebarTrigger
+    SidebarMenuItem,
 } from "@/components/ui/sidebar"
 import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
 import {Calendar, ChevronDown, ChevronUp, Home, Inbox, Search, Settings, User2} from "lucide-react";
 import Link from "next/link";
 import {signOutAction} from "@/features/auth/auth.action";
+import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar";
+import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
+import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
 
 export function AppSidebar() {
 
+
+
+
     const BASE_URL = "/dashboard";
 
     // Menu items.
@@ -93,30 +98,34 @@ export function AppSidebar() {
             <SidebarFooter>
                 <SidebarMenu>
                     <SidebarMenuItem>
-                        <DropdownMenu>
+                        {/*<DropdownMenu>*/}
-                            <DropdownMenuTrigger asChild>
+                        {/*    <DropdownMenuTrigger asChild>*/}
-                                <SidebarMenuButton>
+                        {/*        <SidebarMenuButton>*/}
-                                    <User2 /> Username
+                        {/*            <UserAvatar/>*/}
-                                    <ChevronUp className="ml-auto" />
+                        {/*            <User2 /> Username*/}
-                                </SidebarMenuButton>
+                        {/*            <ChevronUp className="ml-auto" />*/}
-                            </DropdownMenuTrigger>
+                        {/*        </SidebarMenuButton>*/}
-                            <DropdownMenuContent
+                        {/*    </DropdownMenuTrigger>*/}
-                                side="top"
+                        {/*    <DropdownMenuContent*/}
-                                className="w-[--radix-popper-anchor-width]"
+                        {/*        side="top"*/}
-                            >
+                        {/*        className="w-[--radix-popper-anchor-width]"*/}
-                                <DropdownMenuItem>
+                        {/*    >*/}
-                                    <span>Account</span>
+                        {/*        <DropdownMenuItem>*/}
-                                </DropdownMenuItem>
+                        {/*            <span>Account</span>*/}
-                                <DropdownMenuItem>
+                        {/*        </DropdownMenuItem>*/}
-                                    <span>Billing</span>
+                        {/*        <DropdownMenuItem>*/}
-                                </DropdownMenuItem>
+                        {/*            <span>Billing</span>*/}
-                                <DropdownMenuItem onClick={() => {
+                        {/*        </DropdownMenuItem>*/}
-                                    signOutAction()
+                        {/*        /!*<DropdownMenuItem onClick={() => {*!/*/}
-                                }}>
+                        {/*        /!*    signOutAction()*!/*/}
-                                    <span>Sign out</span>
+                        {/*        /!*}}>*!/*/}
-                                </DropdownMenuItem>
+                        {/*        /!*    <span>Sign out</span>*!/*/}
-                            </DropdownMenuContent>
+                        {/*        /!*</DropdownMenuItem>*!/*/}
-                        </DropdownMenu>
+                        {/*    </DropdownMenuContent>*/}
+                        {/*</DropdownMenu>*/}
+
+
+                        <LoggedInButton/>
                     </SidebarMenuItem>
                 </SidebarMenu>
             </SidebarFooter>

src/components/wrappers/Dashboard/UserAvatar/UserAvatar.tsx

@@ -0,0 +1,21 @@
+import {currentUser, requiredCurrentUser} from "@/auth/current-user";
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
+
+export type UserAvatarProps = {}
+
+export const UserAvatar = async () => {
+
+    const user = await currentUser()
+
+
+    return (
+        <div>
+            <Avatar className="size-6">
+                <AvatarFallback>{user.name?.[0]}</AvatarFallback>
+                {user.image ? (
+                    <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`}/>
+                ) : null}
+            </Avatar>
+        </div>
+    )
+}