Start working on the profile refactoring.

src/components/wrappers/dashboard/common/logged-in/logged-in-button.tsx

@@ -1,34 +1,42 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { SidebarMenuButton } from "@/components/ui/sidebar";
 import { ChevronUp } from "lucide-react";
+
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
 import { currentUser } from "@/lib/auth/current-user";
+import { SidebarMenuButton } from "@/components/ui/sidebar";
+import { getAccounts, getSession, getSessions } from "@/lib/auth/auth";
 import {LoggedInDropdown} from "@/components/wrappers/dashboard/common/logged-in/logged-in-dropdown";
 
 export const LoggedInButton = async () => {
     const user = await currentUser();
+    const sessions = await getSessions();
+    const currentSession = await getSession();
+    const accounts = await getAccounts();
 
     if (!user) return null;
 
     return (
-        <LoggedInDropdown
-            user={{
-                ...user,
-                image: user.image ?? null,
-                role: user.role ?? null,
-                banned: user.banned ?? null,
-                banReason: user.banReason ?? null,
-                banExpires: user.banExpires ?? null,
-                deletedAt: user.deletedAt ? new Date(user.deletedAt) : null,
-            }}
-        >
-            <SidebarMenuButton>
-                <Avatar className="size-6">
-                    <AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
-                    {user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
-                </Avatar>
-                <span className="first-letter:capitalize">{user.name}</span>
-                <ChevronUp className="ml-auto" />
-            </SidebarMenuButton>
-        </LoggedInDropdown>
+        <>
+            <LoggedInDropdown
+                // @ts-ignore
+                user={user}
+                // @ts-ignore
+                sessions={sessions}
+                // @ts-ignore
+                currentSession={currentSession.session}
+                // @ts-ignore
+                accounts={accounts}
+            >
+                <SidebarMenuButton>
+
+                    <Avatar className="size-6">
+                        <AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
+                        {user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
+                    </Avatar>
+
+                    <span className="first-letter:capitalize">{user.name}</span>
+                    <ChevronUp className="ml-auto" />
+                </SidebarMenuButton>
+            </LoggedInDropdown>
+        </>
     );
 };

src/components/wrappers/dashboard/common/logged-in/logged-in-dropdown.tsx

@@ -1,63 +1,63 @@
 "use client";
 
-import { PropsWithChildren } from "react";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { redirect } from "next/navigation";
-import { CircleUser, LogOut, ShieldHalf } from "lucide-react";
-import { signOut } from "@/lib/auth/auth-client";
+import {PropsWithChildren, ReactNode, useState} from "react";
 import { useRouter } from "next/navigation";
-import { User } from "@/db/schema/02_user";
+import { CircleUser, LogOut } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { signOut } from "@/lib/auth/auth-client";
+import {ProfileModal} from "@/components/wrappers/dashboard/common/profile/profile-modal";
+import {Account, Session, User} from "@/db/schema/02_user";
 
 export type LoggedInDropdownProps = PropsWithChildren<{
     user: User;
+    sessions: Session[];
+    currentSession: Session;
+    accounts: Account[];
+    children: ReactNode;
 }>;
 
-export const LoggedInDropdown = (props: LoggedInDropdownProps) => {
+export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, children }: LoggedInDropdownProps) => {
     const router = useRouter();
+    const [isModalOpen, setIsModalOpen] = useState(false);
 
     return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>{props.children}</DropdownMenuTrigger>
-            <DropdownMenuContent side="top" className="min-w-[var(--radix-popper-anchor-width)]">
-                <DropdownMenuItem
-                    onClick={() => {
-                        redirect("/dashboard/profile");
-                    }}
-                >
-                    <div className="flex justify-start items-center gap-2">
-                        <CircleUser size={16} />
-                        <span>Account</span>
-                    </div>
-                </DropdownMenuItem>
-                {/*{(props.user.role === "superadmin" || props.user.role === "admin") && (*/}
-                {/*    <DropdownMenuItem*/}
-                {/*        onClick={() => {*/}
-                {/*            redirect("/dashboard/admin");*/}
-                {/*        }}*/}
-                {/*    >*/}
-                {/*        <div className="flex justify-start items-center gap-2">*/}
-                {/*            <ShieldHalf size={16} />*/}
-                {/*            <span>Administration Panel</span>*/}
-                {/*        </div>*/}
-                {/*    </DropdownMenuItem>*/}
-                {/*)}*/}
-                <DropdownMenuItem
-                    onClick={async () => {
-                        await signOut({
-                            fetchOptions: {
-                                onSuccess: () => {
-                                    router.push("/login");
+        <>
+            <ProfileModal
+                user={user}
+                sessions={sessions}
+                currentSession={currentSession}
+                accounts={accounts}
+                open={isModalOpen}
+                onOpenChange={setIsModalOpen}
+            />
+
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+                <DropdownMenuContent side="top" className="min-w-[var(--radix-popper-anchor-width)]">
+                    <DropdownMenuItem onClick={() => setIsModalOpen(!isModalOpen)}>
+                        <div className="flex justify-start items-center gap-2">
+                            <CircleUser size={16} />
+                            <span>Account</span>
+                        </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        onClick={async () => {
+                            await signOut({
+                                fetchOptions: {
+                                    onSuccess: () => {
+                                        router.push("/login");
+                                    },
                                 },
-                            },
-                        });
-                    }}
-                >
-                    <div className="flex justify-start items-center gap-2">
-                        <LogOut size={16} />
-                        <span>Log out</span>
-                    </div>
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
+                            });
+                        }}
+                    >
+                        <div className="flex justify-start items-center gap-2">
+                            <LogOut size={16} className="text-red-500" />
+                            <span className="text-red-500">Logout</span>
+                        </div>
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </>
     );
 };

src/components/wrappers/dashboard/common/profile/profile-modal.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { Account, Session, User } from "@/db/schema/02_user";
+import { ProfileSidebar } from "./profile-sidebar";
+import {ProfileProviders} from "@/components/wrappers/dashboard/profile/profile-providers";
+import {ProfileAccount} from "@/components/wrappers/dashboard/profile/profile-account";
+import {ProfileAppearance} from "@/components/wrappers/dashboard/profile/profile-apperance";
+import {ProfileSecurity} from "@/components/wrappers/dashboard/profile/profile-security";
+import {ProfileGeneral} from "@/components/wrappers/dashboard/profile/profile-general";
+
+type ProfileModalProps = {
+    open: boolean;
+    user: User;
+    sessions: Session[];
+    currentSession: Session;
+    accounts: Account[];
+    onOpenChange: (open: boolean) => void;
+};
+
+export const ProfileModal = ({ user, sessions, currentSession, accounts, open, onOpenChange }: ProfileModalProps) => {
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="w-[95vw] h-[90vh] max-w-md lg:max-w-[1000px] lg:h-[800px] p-0 overflow-hidden flex flex-col outline-none gap-0 rounded-xl bg-background">
+                <DialogHeader className="sr-only">
+                    <DialogTitle>Settings</DialogTitle>
+                    <DialogDescription>Manage your account settings</DialogDescription>
+                </DialogHeader>
+                <Tabs defaultValue="profile" orientation="vertical" className="flex flex-col lg:flex-row h-full w-full">
+                    <ProfileSidebar user={user} />
+
+                    <div className="flex-1 overflow-y-auto bg-background h-full scroll-smooth">
+                        <TabsContent value="profile" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileGeneral user={user} />
+                        </TabsContent>
+
+                        <TabsContent value="security" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileSecurity
+                                user={user}
+                                sessions={sessions}
+                                currentSession={currentSession}
+                                credentialAccount={accounts.find((acc) => acc.providerId === "credential")!}
+                            />
+                        </TabsContent>
+
+                        <TabsContent value="providers" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileProviders accounts={accounts} />
+                        </TabsContent>
+
+                        <TabsContent value="account" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileAccount user={user} />
+                        </TabsContent>
+
+                        <TabsContent value="appearance" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileAppearance />
+                        </TabsContent>
+                    </div>
+                </Tabs>
+            </DialogContent>
+        </Dialog>
+    );
+};

src/components/wrappers/dashboard/common/profile/profile-sidebar.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React, { use } from "react";
+import { TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { UserIcon, Settings, Palette, ShieldHalf, Workflow } from "lucide-react";
+import { User } from "@/db/schema/02_user";
+
+interface ProfileSidebarProps {
+    user: User;
+}
+
+export function ProfileSidebar({ user }: ProfileSidebarProps) {
+
+    return (
+        <div className="w-full lg:w-[260px] flex-shrink-0 lg:border-r bg-muted/10 p-4 lg:p-6 flex flex-col gap-4 border-b lg:border-b-0">
+            <div className="flex items-center px-2 mb-2">
+                <span className="font-bold text-xl tracking-tight">Settings</span>
+            </div>
+
+            <TabsList className="flex flex-col h-auto w-full bg-transparent p-0 gap-1 justify-start items-stretch">
+                <SettingsTabTrigger value="profile" icon={<UserIcon className="w-4 h-4" />}>
+                    Profile
+                </SettingsTabTrigger>
+                <SettingsTabTrigger value="security" icon={<ShieldHalf className="w-4 h-4" />}>
+                    Security & Access
+                </SettingsTabTrigger>
+                <SettingsTabTrigger value="providers" icon={<Workflow className="w-4 h-4" />}>
+                    Connected Accounts
+                </SettingsTabTrigger>
+                <SettingsTabTrigger value="account" icon={<Settings className="w-4 h-4" />}>
+                    Account
+                </SettingsTabTrigger>
+                <SettingsTabTrigger value="appearance" icon={<Palette className="w-4 h-4" />}>
+                    Appearance
+                </SettingsTabTrigger>
+            </TabsList>
+        </div>
+    );
+}
+
+function SettingsTabTrigger({ value, icon, children }: { value: string; icon: React.ReactNode; children: React.ReactNode }) {
+    return (
+        <TabsTrigger
+            value={value}
+            className="w-full justify-start gap-3 px-3 py-2.5 rounded-md transition-all whitespace-nowrap flex-shrink-0 text-sm data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-sm data-[state=active]:font-medium hover:bg-muted/50 hover:text-foreground text-muted-foreground"
+        >
+            {icon}
+            {children}
+        </TabsTrigger>
+    );
+}

src/components/wrappers/dashboard/common/sidebar/app-sidebar.tsx

@@ -34,6 +34,7 @@ export function AppSidebar() {
             <SidebarMenu className="mb-2">
                 <SidebarMenuItem className="p-2">
                     <LoggedInButton/>
+
                 </SidebarMenuItem>
             </SidebarMenu>
             <SideBarFooterCredit/>