feat: improve profile UI/UX and migrate to Mantine modals

src/routes/dashboard/apikey.tsx

@@ -94,7 +94,9 @@ function DashboardApikeyComponent() {
 			setCreating(true);
 			const response = await apiClient.api.apikey.post({
 				name: newKeyName,
-				expiresAt: newKeyExpiresAt ? dayjs(newKeyExpiresAt).toISOString() : undefined,
+				expiresAt: newKeyExpiresAt
+					? dayjs(newKeyExpiresAt).toISOString()
+					: undefined,
 			});
 
 			if (response.data) {

src/routes/dashboard/index.tsx

@@ -7,13 +7,13 @@ import {
 	Container,
 	Grid,
 	Group,
-	Modal,
 	Progress,
 	SimpleGrid,
 	Stack,
 	Text,
 	Title,
 } from "@mantine/core";
+import { modals } from "@mantine/modals";
 import {
 	IconClock,
 	IconDatabase,
@@ -21,7 +21,6 @@ import {
 	IconUserCheck,
 } from "@tabler/icons-react";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
 import { useSnapshot } from "valtio";
 import { authClient } from "@/utils/auth-client";
 import { authStore } from "../../store/auth";
@@ -33,7 +32,19 @@ export const Route = createFileRoute("/dashboard/")({
 function DashboardComponent() {
 	const snap = useSnapshot(authStore);
 	const navigate = useNavigate();
-	const [logoutModalOpen, setLogoutModalOpen] = useState(false);
+
+	const openLogoutModal = () =>
+		modals.openConfirmModal({
+			title: "Confirm Logout",
+			centered: true,
+			children: <Text size="sm">Are you sure you want to log out?</Text>,
+			labels: { confirm: "Logout", cancel: "Cancel" },
+			confirmProps: { color: "red" },
+			onConfirm: async () => {
+				await authClient.signOut();
+				navigate({ to: "/signin" });
+			},
+		});
 
 	// Mock data for dashboard stats
 	const statsData = [
@@ -84,11 +95,7 @@ function DashboardComponent() {
 							</Badge>
 						</div>
 					</Group>
-					<Button
-						variant="outline"
-						color="red"
-						onClick={() => setLogoutModalOpen(true)}
-					>
+					<Button variant="outline" color="red" onClick={openLogoutModal}>
 						Sign Out
 					</Button>
 				</Group>
@@ -197,28 +204,6 @@ function DashboardComponent() {
 					</Card>
 				</Grid.Col>
 			</Grid>
-			<Modal
-				opened={logoutModalOpen}
-				onClose={() => setLogoutModalOpen(false)}
-				title="Confirm Logout"
-				centered
-			>
-				<Text mb="md">Are you sure you want to log out?</Text>
-				<Group justify="flex-end">
-					<Button variant="outline" onClick={() => setLogoutModalOpen(false)}>
-						Cancel
-					</Button>
-					<Button
-						color="red"
-						onClick={() => {
-							authClient.signOut();
-							setLogoutModalOpen(false);
-						}}
-					>
-						Logout
-					</Button>
-				</Group>
-			</Modal>
 		</Container>
 	);
 }

src/routes/dashboard/route.tsx

@@ -1,20 +1,28 @@
 import {
 	ActionIcon,
 	AppShell,
+	Avatar,
+	Box,
 	Burger,
 	Group,
+	Menu,
 	NavLink,
 	rem,
 	ScrollArea,
+	Stack,
 	Text,
-	Title
+	Tooltip,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
+import { modals } from "@mantine/modals";
 import {
+	IconChevronRight,
 	IconHome,
 	IconKey,
+	IconLogout,
 	IconSettings,
-	IconUsers
+	IconUser,
+	IconUsers,
 } from "@tabler/icons-react";
 import {
 	createFileRoute,
@@ -22,6 +30,9 @@ import {
 	useLocation,
 	useNavigate,
 } from "@tanstack/react-router";
+import { useSnapshot } from "valtio";
+import { authStore } from "../../store/auth";
+import { authClient } from "@/utils/auth-client";
 
 export const Route = createFileRoute("/dashboard")({
 	component: DashboardLayout,
@@ -29,93 +40,279 @@ export const Route = createFileRoute("/dashboard")({
 
 function DashboardLayout() {
 	const location = useLocation();
+	const navigate = useNavigate();
+	const snap = useSnapshot(authStore);
 	const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
 	const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
-	const navigate = useNavigate();
 
 	const navItems = [
-		{ icon: IconHome, label: "Beranda", to: "/dashboard" },
-		{ icon: IconUsers, label: "Pengguna", to: "/dashboard/users" },
-		{ icon: IconKey, label: "API Key", to: "/dashboard/apikey" },
-		{ icon: IconSettings, label: "Pengaturan", to: "/dashboard/settings" },
+		{
+			icon: IconHome,
+			label: "Beranda",
+			to: "/dashboard",
+			description: "Ringkasan sistem & statistik",
+		},
+		{
+			icon: IconUsers,
+			label: "Pengguna",
+			to: "/dashboard/users",
+			description: "Kelola akun & hak akses",
+		},
+		{
+			icon: IconKey,
+			label: "API Key",
+			to: "/dashboard/apikey",
+			description: "Manajemen kunci akses API",
+		},
+		{
+			icon: IconSettings,
+			label: "Pengaturan",
+			to: "/dashboard/settings",
+			description: "Konfigurasi sistem",
+		},
 	];
 
+	const handleLogout = async () => {
+		modals.openConfirmModal({
+			title: "Konfirmasi Keluar",
+			centered: true,
+			children: (
+				<Text size="sm">
+					Apakah Anda yakin ingin keluar dari sistem? Sesi Anda akan berakhir.
+				</Text>
+			),
+			labels: { confirm: "Keluar", cancel: "Batal" },
+			confirmProps: { color: "red" },
+			onConfirm: async () => {
+				await authClient.signOut();
+				navigate({ to: "/signin" });
+			},
+		});
+	};
+
 	const isActive = (path: string) => {
 		const current = location.pathname;
-
-		if (path === "/dashboard") {
-			return current === "/dashboard";
-		}
-
-		return current === path || current.startsWith(`${path}/`);
+		if (path === "/dashboard")
+			return current === "/dashboard" || current === "/dashboard/";
+		return current.startsWith(path);
 	};
 
 	return (
 		<AppShell
+			header={{ height: 70 }}
 			navbar={{
-				width: 300,
+				width: 280,
 				breakpoint: "sm",
 				collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
 			}}
 			padding="md"
-			header={{ height: 60 }}
+			transitionDuration={500}
+			transitionTimingFunction="ease"
 		>
-			<AppShell.Header>
+			<AppShell.Header
+				bg="rgba(26, 26, 26, 0.8)"
+				style={{
+					backdropFilter: "blur(10px)",
+					borderBottom: "1px solid rgba(251, 240, 223, 0.1)",
+				}}
+			>
 				<Group h="100%" px="md" justify="space-between">
-					<Group>
+					<Group gap="xs">
 						<Burger
 							opened={mobileOpened}
 							onClick={toggleMobile}
 							hiddenFrom="sm"
 							size="sm"
+							color="#f3d5a3"
 						/>
 						<Burger
 							opened={desktopOpened}
 							onClick={toggleDesktop}
 							visibleFrom="sm"
 							size="sm"
+							color="#f3d5a3"
 						/>
-						<Title order={3}>Dashboard</Title>
+						<Box visibleFrom="xs" ml="xs">
+							<Text
+								fw={800}
+								size="xl"
+								c="#f3d5a3"
+								style={{ letterSpacing: "-0.5px" }}
+							>
+								ADMIN
+								<Text span c="#fbf0df">
+									PANEL
+								</Text>
+							</Text>
+						</Box>
 					</Group>
-					<Group>
-						<ActionIcon variant="subtle" size="lg">
-							<IconSettings
-								style={{ width: rem(20), height: rem(20) }}
-								stroke={1.5}
-							/>
-						</ActionIcon>
+
+					<Group gap="md">
+						<Menu
+							shadow="md"
+							width={200}
+							position="bottom-end"
+							transitionProps={{ transition: "pop-top-right" }}
+						>
+							<Menu.Target>
+								<Group
+									gap="xs"
+									style={{ cursor: "pointer" }}
+									p="xs"
+									hover-bg="rgba(255,255,255,0.05)"
+								>
+									<div
+										style={{ textAlign: "right" }}
+										className="visible-from-sm"
+									>
+										<Text size="sm" fw={600} c="#fbf0df">
+											{snap.user?.name}
+										</Text>
+										<Text size="xs" c="dimmed">
+											Administrator
+										</Text>
+									</div>
+									<Avatar
+										src={snap.user?.image}
+										radius="xl"
+										size="md"
+										style={{ border: "2px solid #f3d5a3" }}
+									>
+										{snap.user?.name?.charAt(0)}
+									</Avatar>
+								</Group>
+							</Menu.Target>
+
+							<Menu.Dropdown>
+								<Menu.Label>Akun</Menu.Label>
+								<Menu.Item
+									leftSection={
+										<IconUser style={{ width: rem(14), height: rem(14) }} />
+									}
+									onClick={() => navigate({ to: "/profile" })}
+								>
+									Profil Saya
+								</Menu.Item>
+								<Menu.Item
+									leftSection={
+										<IconSettings style={{ width: rem(14), height: rem(14) }} />
+									}
+									onClick={() => navigate({ to: "/dashboard/settings" })}
+								>
+									Pengaturan
+								</Menu.Item>
+
+								<Menu.Divider />
+
+								<Menu.Label>Bahaya</Menu.Label>
+								<Menu.Item
+									color="red"
+									leftSection={
+										<IconLogout style={{ width: rem(14), height: rem(14) }} />
+									}
+									onClick={handleLogout}
+								>
+									Keluar Sistem
+								</Menu.Item>
+							</Menu.Dropdown>
+						</Menu>
 					</Group>
 				</Group>
 			</AppShell.Header>
 
-			<AppShell.Navbar p="md">
-				<ScrollArea h="calc(100vh - 120px)">
-					<Group mb="lg">
-						<Text fw={500} size="lg">
-							Navigasi Utama
-						</Text>
-					</Group>
-					{navItems.map((item) => (
-						<NavLink
-							key={item.to}
-							onClick={() => {
-								navigate({ to: item.to });
-							}}
-							leftSection={
-								<item.icon
-									style={{ width: rem(18), height: rem(18) }}
-									stroke={1.5}
+			<AppShell.Navbar
+				p="md"
+				bg="rgba(20, 20, 20, 1)"
+				style={{ borderRight: "1px solid rgba(251, 240, 223, 0.1)" }}
+			>
+				<AppShell.Section grow component={ScrollArea} mx="-md" px="md">
+					<Stack gap="xs" mt="md">
+						{navItems.map((item) => (
+							<Tooltip
+								key={item.to}
+								label={item.description}
+								position="right"
+								disabled={!desktopOpened}
+								openDelay={500}
+							>
+								<NavLink
+									onClick={() => {
+										navigate({ to: item.to });
+										if (mobileOpened) toggleMobile();
+									}}
+									leftSection={
+										<item.icon
+											style={{ width: rem(20), height: rem(20) }}
+											stroke={1.5}
+										/>
+									}
+									label={
+										<Box>
+											<Text size="sm" fw={isActive(item.to) ? 700 : 500}>
+												{item.label}
+											</Text>
+										</Box>
+									}
+									rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
+									active={isActive(item.to)}
+									variant="filled"
+									color="orange"
+									styles={{
+										root: {
+											borderRadius: rem(8),
+											marginBottom: rem(4),
+											backgroundColor: isActive(item.to)
+												? "rgba(243, 213, 163, 0.1)"
+												: "transparent",
+											color: isActive(item.to) ? "#f3d5a3" : "#fbf0df",
+											"&:hover": {
+												backgroundColor: "rgba(243, 213, 163, 0.05)",
+											},
+										},
+										label: {
+											fontSize: rem(14),
+										},
+									}}
 								/>
-							}
-							label={item.label}
-							active={isActive(item.to)}
-						/>
-					))}
-				</ScrollArea>
+							</Tooltip>
+						))}
+					</Stack>
+				</AppShell.Section>
+
+				<AppShell.Section
+					style={{ borderTop: "1px solid rgba(251, 240, 223, 0.1)" }}
+					pt="md"
+				>
+					<NavLink
+						label="Pusat Bantuan"
+						leftSection={
+							<IconSettings
+								style={{ width: rem(18), height: rem(18) }}
+								stroke={1.5}
+							/>
+						}
+						styles={{ root: { borderRadius: rem(8) } }}
+					/>
+					<NavLink
+						label="Keluar"
+						onClick={handleLogout}
+						leftSection={
+							<IconLogout
+								style={{ width: rem(18), height: rem(18) }}
+								stroke={1.5}
+								color="red"
+							/>
+						}
+						c="red"
+						styles={{ root: { borderRadius: rem(8) } }}
+					/>
+				</AppShell.Section>
 			</AppShell.Navbar>
 
-			<AppShell.Main>
-				<Outlet />
+			<AppShell.Main bg="rgba(15, 15, 15, 1)">
+				<Box p="lg" style={{ minHeight: "calc(100vh - 100px)" }}>
+					<Outlet />
+				</Box>
 			</AppShell.Main>
 		</AppShell>
 	);

src/routes/profile.tsx

@@ -1,24 +1,31 @@
+import { protectedRouteMiddleware } from "@/middleware/authMiddleware";
+import { authClient } from "@/utils/auth-client";
 import {
 	ActionIcon,
 	Avatar,
 	Badge,
+	Box,
 	Button,
 	Card,
 	Code,
 	Container,
+	Divider,
+	Grid,
 	Group,
-	Modal,
-	SimpleGrid,
+	Paper,
 	Stack,
 	Text,
 	Title,
 	Tooltip,
+	rem,
 } from "@mantine/core";
+import { modals } from "@mantine/modals";
 import {
 	IconAt,
 	IconCheck,
 	IconCopy,
 	IconDashboard,
+	IconExternalLink,
 	IconId,
 	IconLogout,
 	IconShield,
@@ -27,291 +34,207 @@ import {
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import { useSnapshot } from "valtio";
-import { authClient } from "@/utils/auth-client";
 import { authStore } from "../store/auth";
 
 export const Route = createFileRoute("/profile")({
 	component: Profile,
+	beforeLoad: protectedRouteMiddleware,
+	onEnter({ context }) {
+		authStore.user = context?.user as any;
+		authStore.session = context?.session as any;
+	},
 });
 
 function Profile() {
 	const snap = useSnapshot(authStore);
 	const navigate = useNavigate();
-	const [opened, setOpened] = useState(false);
-	const [copied, setCopied] = useState(false);
+	const [copied, setCopied] = useState<string | null>(null);
 
 	async function logout() {
 		await authClient.signOut();
 		navigate({ to: "/signin" });
 	}
 
-	const copyToClipboard = (text: string) => {
+	const openLogoutModal = () =>
+		modals.openConfirmModal({
+			title: <Text fw={700}>Konfirmasi Keluar</Text>,
+			centered: true,
+			size: "sm",
+			children: (
+				<Text size="sm">
+					Apakah Anda yakin ingin keluar dari akun Anda? Anda harus masuk kembali untuk mengakses data Anda.
+				</Text>
+			),
+			labels: { confirm: "Keluar", cancel: "Batal" },
+			confirmProps: { color: "red", leftSection: <IconLogout size={16} /> },
+			onConfirm: logout,
+		});
+
+	const copyToClipboard = (text: string, key: string) => {
 		if (navigator.clipboard) {
 			navigator.clipboard.writeText(text);
-			setCopied(true);
-			setTimeout(() => setCopied(false), 2000);
+			setCopied(key);
+			setTimeout(() => setCopied(null), 2000);
 		}
 	};
 
-	return (
-		<Container size="lg" py="xl">
-			<Title order={1} mb="lg" ta="center">
-				User Profile
-			</Title>
-
-			{/* Profile Header Card */}
-			<Card
-				withBorder
-				p="xl"
-				radius="md"
-				mb="xl"
-				bg="rgba(251, 240, 223, 0.05)"
-				style={{ border: "1px solid rgba(251, 240, 223, 0.1)" }}
-			>
-				<Group justify="center" align="flex-start" gap="xl">
-					<Avatar
-						src={snap.user?.image}
-						size={120}
-						radius="xl"
-						style={{ border: "2px solid rgba(251, 240, 223, 0.3)" }}
-					>
-						{snap.user?.name?.charAt(0).toUpperCase()}
-					</Avatar>
-					<Stack gap="xs" justify="center">
-						<Text size="xl" fw={700} c="#fbf0df">
-							{snap.user?.name}
+	const InfoField = ({ icon: Icon, label, value, copyable = false, id = "" }: any) => (
+		<Paper withBorder p="md" radius="md" bg="rgba(251, 240, 223, 0.03)" style={{ border: "1px solid rgba(251, 240, 223, 0.1)" }}>
+			<Group wrap="nowrap" align="flex-start">
+				<Box mt={3}>
+					<Icon size={20} stroke={1.5} color="#f3d5a3" />
+				</Box>
+				<Box style={{ flex: 1 }}>
+					<Text size="xs" c="dimmed" tt="uppercase" fw={700} lts={0.5}>
+						{label}
+					</Text>
+					<Group gap="xs" mt={4} wrap="nowrap">
+						<Text fw={500} size="sm" c="#fbf0df" truncate="end" style={{ flex: 1 }}>
+							{value || "N/A"}
 						</Text>
-						<Group gap="sm">
-							<IconAt size={16} stroke={1.5} color="rgba(255, 255, 255, 0.6)" />
-							<Text c="dimmed">{snap.user?.email}</Text>
-						</Group>
-						<Group gap="sm">
-							<IconShield
-								size={16}
-								stroke={1.5}
-								color="rgba(255, 255, 255, 0.6)"
-							/>
-							<Badge
-								variant="light"
-								color={snap.user?.role === "admin" ? "green" : "blue"}
-							>
-								{snap.user?.role || "user"}
-							</Badge>
-						</Group>
-					</Stack>
-				</Group>
-			</Card>
-
-			<Title order={2} mb="md" ta="center">
-				Account Information
-			</Title>
-
-			<SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="md" mb="xl">
-				<Card withBorder p="lg" radius="md" bg="rgba(251, 240, 223, 0.05)">
-					<Group>
-						<IconId size={24} stroke={1.5} color="#f3d5a3" />
-						<div>
-							<Text size="sm" c="dimmed">
-								User ID
-							</Text>
-							<Group gap="xs" mt="xs">
-								<Text fw={500} truncate="end" miw={0} c="#fbf0df">
-									{snap.user?.id || "N/A"}
-								</Text>
-								<Tooltip
-									label={copied ? "Copied!" : "Copy to clipboard"}
-									position="top"
+						{copyable && value && (
+							<Tooltip label={copied === id ? "Copied!" : "Salin ke papan klip"} position="top" withArrow>
+								<ActionIcon
+									variant="subtle"
+									color={copied === id ? "green" : "gray"}
+									size="sm"
+									onClick={() => copyToClipboard(value, id)}
 								>
-									<ActionIcon
-										variant="subtle"
-										color="gray"
-										size="sm"
-										onClick={() =>
-											snap.user?.id && copyToClipboard(snap.user.id)
-										}
-									>
-										{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
-									</ActionIcon>
-								</Tooltip>
-							</Group>
-						</div>
+									{copied === id ? <IconCheck size={14} /> : <IconCopy size={14} />}
+								</ActionIcon>
+							</Tooltip>
+						)}
 					</Group>
-				</Card>
-				<Card withBorder p="lg" radius="md" bg="rgba(251, 240, 223, 0.05)">
-					<Group>
-						<IconAt size={24} stroke={1.5} color="#f3d5a3" />
-						<div>
-							<Text size="sm" c="dimmed">
-								Email
-							</Text>
-							<Group gap="xs" mt="xs">
-								<Text fw={500} truncate="end" miw={0} c="#fbf0df">
-									{snap.user?.email || "N/A"}
-								</Text>
-								<Tooltip
-									label={copied ? "Copied!" : "Copy to clipboard"}
-									position="top"
-								>
-									<ActionIcon
-										variant="subtle"
-										color="gray"
-										size="sm"
-										onClick={() =>
-											snap.user?.email && copyToClipboard(snap.user.email)
-										}
-									>
-										{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
-									</ActionIcon>
-								</Tooltip>
-							</Group>
-						</div>
-					</Group>
-				</Card>
-				<Card withBorder p="lg" radius="md" bg="rgba(251, 240, 223, 0.05)">
-					<Group>
-						<IconUser size={24} stroke={1.5} color="#f3d5a3" />
-						<div>
-							<Text size="sm" c="dimmed">
-								Name
-							</Text>
-							<Group gap="xs" mt="xs">
-								<Text fw={500} truncate="end" miw={0} c="#fbf0df">
-									{snap.user?.name || "N/A"}
-								</Text>
-								<Tooltip
-									label={copied ? "Copied!" : "Copy to clipboard"}
-									position="top"
-								>
-									<ActionIcon
-										variant="subtle"
-										color="gray"
-										size="sm"
-										onClick={() =>
-											snap.user?.name && copyToClipboard(snap.user.name)
-										}
-									>
-										{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
-									</ActionIcon>
-								</Tooltip>
-							</Group>
-						</div>
-					</Group>
-				</Card>
-				<Card withBorder p="lg" radius="md" bg="rgba(251, 240, 223, 0.05)">
-					<Group>
-						<IconShield size={24} stroke={1.5} color="#f3d5a3" />
-						<div>
-							<Text size="sm" c="dimmed">
-								Role
-							</Text>
-							<Text fw={500} mt="xs" c="#fbf0df">
-								{snap.user?.role || "user"}
-							</Text>
-						</div>
-					</Group>
-				</Card>
-			</SimpleGrid>
+				</Box>
+			</Group>
+		</Paper>
+	);
 
-			<Card
-				withBorder
-				p="lg"
-				radius="md"
-				bg="rgba(251, 240, 223, 0.05)"
-				mb="xl"
-			>
+	return (
+		<Container size="md" py={50}>
+			<Stack gap="xl">
+				{/* Header Section */}
 				<Group justify="space-between" align="center">
-					<Title order={3}>Session Information</Title>
+					<Box>
+						<Title order={1} c="#f3d5a3">Profil Saya</Title>
+						<Text c="dimmed" size="sm">Kelola informasi akun dan pengaturan keamanan Anda</Text>
+					</Box>
 					<Group>
 						{snap.user?.role === "admin" && (
 							<Button
-								leftSection={<IconDashboard size={16} />}
 								variant="light"
-								color="blue"
+								color="orange"
+								leftSection={<IconDashboard size={18} />}
 								onClick={() => navigate({ to: "/dashboard" })}
 							>
-								Dashboard
+								Admin Panel
 							</Button>
 						)}
 						<Button
-							leftSection={<IconLogout size={16} />}
 							variant="outline"
 							color="red"
-							onClick={() => setOpened(true)}
+							leftSection={<IconLogout size={18} />}
+							onClick={openLogoutModal}
 						>
-							Sign Out
+							Keluar
 						</Button>
 					</Group>
 				</Group>
-				<Group mt="md" justify="space-between">
-					<div>
-						<Text size="sm" c="dimmed" mb="xs">
-							Session Token
-						</Text>
-						<Group gap="xs">
-							<Code
-								block
-								style={{
-									fontSize: "0.8rem",
-									padding: "0.5rem 0.75rem",
-									backgroundColor: "rgba(26, 26, 26, 0.7)",
-									color: "#f3d5a3",
-								}}
-							>
-								{snap.session?.token
-									? `${snap.session.token.substring(0, 30)}...`
-									: "N/A"}
-							</Code>
-							<Tooltip
-								label={copied ? "Copied!" : "Copy to clipboard"}
-								position="top"
-							>
-								<ActionIcon
-									variant="light"
-									color="gray"
-									size="md"
-									onClick={() =>
-										snap.session?.token && copyToClipboard(snap.session.token)
-									}
-								>
-									{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
-								</ActionIcon>
-							</Tooltip>
-						</Group>
-					</div>
-				</Group>
-			</Card>
 
-			<Modal
-				opened={opened}
-				onClose={() => setOpened(false)}
-				title="Confirm Sign Out"
-				centered
-				size="sm"
-			>
-				<Text mb="md">
-					Are you sure you want to sign out? You will need to sign in again to
-					access your account.
-				</Text>
-				<Group justify="flex-end">
-					<Button
-						variant="subtle"
-						color="gray"
-						onClick={() => setOpened(false)}
-					>
-						Cancel
-					</Button>
-					<Button
-						leftSection={<IconLogout size={16} />}
-						color="red"
-						onClick={async () => {
-							await logout();
-							setOpened(false);
-						}}
-					>
-						Sign Out
-					</Button>
-				</Group>
-			</Modal>
+				<Divider color="rgba(251, 240, 223, 0.1)" />
+
+				{/* Profile Overview Card */}
+				<Card withBorder radius="lg" p={0} bg="rgba(26, 26, 26, 0.5)" style={{ overflow: "hidden" }}>
+					<Box h={120} bg="linear-gradient(45deg, #2c2c2c 0%, #1a1a1a 100%)" style={{ borderBottom: "1px solid rgba(251, 240, 223, 0.1)" }} />
+					<Box px="xl" pb="xl" style={{ marginTop: rem(-60) }}>
+						<Group align="flex-end" gap="xl" mb="md">
+							<Avatar
+								src={snap.user?.image}
+								size={120}
+								radius={120}
+								style={{ border: "4px solid #1a1a1a", boxShadow: "0 4px 10px rgba(0,0,0,0.3)" }}
+							>
+								{snap.user?.name?.charAt(0).toUpperCase()}
+							</Avatar>
+							<Stack gap={0} pb="md">
+								<Title order={2} c="#fbf0df">{snap.user?.name}</Title>
+								<Group gap="xs">
+									<Text c="dimmed" size="sm">{snap.user?.email}</Text>
+									<Text c="dimmed" size="xs">•</Text>
+									<Badge variant="dot" color={snap.user?.role === "admin" ? "orange" : "blue"} size="sm">
+										{snap.user?.role || "user"}
+									</Badge>
+								</Group>
+							</Stack>
+						</Group>
+					</Box>
+				</Card>
+
+				<Grid gutter="lg">
+					<Grid.Col span={{ base: 12, md: 7 }}>
+						<Stack gap="md">
+							<Title order={4} c="#f3d5a3">Informasi Identitas</Title>
+							<Grid gutter="sm">
+								<Grid.Col span={6}>
+									<InfoField icon={IconUser} label="Nama Lengkap" value={snap.user?.name} />
+								</Grid.Col>
+								<Grid.Col span={6}>
+									<InfoField icon={IconShield} label="Peran" value={snap.user?.role || "User"} />
+								</Grid.Col>
+								<Grid.Col span={12}>
+									<InfoField icon={IconAt} label="Alamat Email" value={snap.user?.email} copyable id="email" />
+								</Grid.Col>
+								<Grid.Col span={12}>
+									<InfoField icon={IconId} label="Unique User ID" value={snap.user?.id} copyable id="userid" />
+								</Grid.Col>
+							</Grid>
+						</Stack>
+					</Grid.Col>
+
+					<Grid.Col span={{ base: 12, md: 5 }}>
+						<Stack gap="md">
+							<Title order={4} c="#f3d5a3">Keamanan & Sesi</Title>
+							<Card withBorder radius="md" p="lg" bg="rgba(251, 240, 223, 0.03)" style={{ border: "1px solid rgba(251, 240, 223, 0.1)" }}>
+								<Stack gap="md">
+									<Box>
+										<Text size="xs" c="dimmed" tt="uppercase" fw={700} mb={8}>Sesi Saat Ini</Text>
+										<Group justify="space-between" align="center">
+											<Badge color="green" variant="light">Aktif Sekarang</Badge>
+											<Text size="xs" c="dimmed">ID: {snap.session?.id?.substring(0, 8)}...</Text>
+										</Group>
+									</Box>
+									
+									<Box>
+										<Text size="xs" c="dimmed" tt="uppercase" fw={700} mb={8}>Session Token</Text>
+										<Group gap="xs" wrap="nowrap">
+											<Code block style={{ 
+												backgroundColor: "rgba(0,0,0,0.3)", 
+												color: "#f3d5a3", 
+												border: "1px solid rgba(251, 240, 223, 0.1)",
+												fontSize: rem(11),
+												flex: 1
+											}}>
+												{snap.session?.token ? `${snap.session.token.substring(0, 32)}...` : "N/A"}
+											</Code>
+											<ActionIcon 
+												variant="light" 
+												color="gray" 
+												onClick={() => snap.session?.token && copyToClipboard(snap.session.token, "token")}
+											>
+												{copied === "token" ? <IconCheck size={16} /> : <IconCopy size={16} />}
+											</ActionIcon>
+										</Group>
+									</Box>
+
+									<Button variant="light" color="gray" fullWidth leftSection={<IconExternalLink size={16} />}>
+										Riwayat Sesi
+									</Button>
+								</Stack>
+							</Card>
+						</Stack>
+					</Grid.Col>
+				</Grid>
+			</Stack>
 		</Container>
 	);
 }