Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 3x 3x 3x 1x 2x 2x | import { getUserMeLoader } from "@/data/services/user";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
import { LogoutButton } from "@/components/custom/logout-button";
import CookieConsentControls from "@/components/cookie/CookieConsentApiControls";
export default async function DashboardRoute() {
const response = await getUserMeLoader();
const user = response.ok ? response.data : null;
if (!user) {
return (
<div className="flex items-center justify-center min-h-screen text-red-500 text-lg">
Error fetching user data.
</div>
);
}
console.log("User Data:", user); // Debugging
return (
<div className="mt-12 flex min-h-screen bg-muted">
{/* Sidebar (Hidden on Mobile) */}
<aside className="w-64 bg-white dark:bg-gray-900 border-r border-gray-300 dark:border-gray-700 p-6 hidden md:block">
<h2 className="text-xl font-semibold text-gray-800 dark:text-gray-100">Dashboard</h2>
<div className="mt-6 space-y-4">
<button className="w-full py-2 text-center bg-gray-200 dark:bg-gray-700 rounded-md">Profile</button>
<button className="w-full py-2 text-center bg-gray-200 dark:bg-gray-700 rounded-md">Settings</button>
<LogoutButton />
</div>
</aside>
{/* Main Content */}
<main className="flex-1 p-6 space-y-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Welcome, {user.firstname}!</h1>
{/* User Profile Card */}
<Card className="max-w-2xl">
<CardHeader className="flex items-center space-x-4">
{/* User Avatar */}
<Avatar className="w-16 h-16">
<AvatarImage src={user.image || ""} alt={user.firstname} />
<AvatarFallback className="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
{user.firstname.charAt(0)}
{user.lastname.charAt(0)}
</AvatarFallback>
</Avatar>
{/* User Info */}
<div>
<CardTitle className="text-lg">{user.firstname} {user.lastname}</CardTitle>
<p className="text-sm text-gray-600 dark:text-gray-400">@{user.username}</p>
</div>
</CardHeader>
<CardContent>
{/* Badges for status*/}
<Badge variant={user.confirmed ? "default" : "destructive"}>
{user.confirmed ? "Verified" : "Unverified"}
</Badge>
{/* Fixed Badge Variant for Blocked User */}
<Badge variant={user.blocked ? "destructive" : "outline"}>
{user.blocked ? "Blocked" : "Active"}
</Badge>
{/* User Details Table */}
<Table>
<TableBody>
<TableRow>
<TableCell className="font-semibold">Email</TableCell>
<TableCell>{user.email}</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-semibold">User ID</TableCell>
<TableCell>{user.id}</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-semibold">Document ID</TableCell>
<TableCell>{user.documentId}</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-semibold">Provider</TableCell>
<TableCell>{user.provider}</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-semibold">Created At</TableCell>
<TableCell>{new Date(user.createdAt).toLocaleString()}</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-semibold">Updated At</TableCell>
<TableCell>{new Date(user.updatedAt).toLocaleString()}</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
{/* Cookie Consent Section */}
<Card className="max-w-2xl">
<CardHeader>
<CardTitle className="text-lg">Cookie Preferences</CardTitle>
</CardHeader>
<CardContent>
<CookieConsentControls />
</CardContent>
</Card>
</main>
</div>
);
}
|