feat: enhance Dashboard component with user information display

- Added user information retrieval using getCurrentUser and displayed details in a new Card component.
- Implemented loading state for user data to improve user experience.
- Refactored imports to include necessary UI components for better organization.

Author: milisp

tauri-app/src/pages/Dashboard.tsx

@@ -1,7 +1,19 @@
 import { Button } from "@/components/ui/button";
-import { signOut } from "@/services/auth";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { getCurrentUser, signOut } from "@/services/auth";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
+type userInfo = {
+  email: string,
+  fullname: string,
+  id: string,
+  tier: string,
+  trialActive: boolean,
+  trialEndsAt?: Date,
+  username: string
+}
+
 export default function Dashboard() {
   const navigate = useNavigate();
   const handleLogout = async () => {
@@ -12,9 +24,45 @@ export default function Dashboard() {
       console.error("Logout failed:", err);
     }
   };
+  const [user, setUser] = useState<userInfo>()
+
+  useEffect(() => {
+    async function getUser() {
+      const userData = await getCurrentUser();
+      console.debug(userData);
+      setUser({
+        ...userData,
+        trialEndsAt: userData.trialEndsAt ? new Date(userData.trialEndsAt) : undefined,
+      });
+    }
+    getUser()
+  }, [getCurrentUser])
 
   return (
     <div className="p-4 space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>User Information</CardTitle>
+          <CardDescription>Details about your account.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {user ? (
+            <div className="space-y-2">
+              <p><strong>Email:</strong> {user.email}</p>
+              <p><strong>Full Name:</strong> {user.fullname}</p>
+              <p><strong>Username:</strong> {user.username}</p>
+              <p><strong>Tier:</strong> {user.tier}</p>
+              <p><strong>Trial Active:</strong> {user.trialActive ? "Yes" : "No"}</p>
+              {user.trialEndsAt && (
+                <p><strong>Trial Ends At:</strong> {user.trialEndsAt.toLocaleDateString()}</p>
+              )}
+            </div>
+          ) : (
+            <p>Loading user information...</p>
+          )}
+        </CardContent>
+      </Card>
+
       <Button
         onClick={handleLogout}
         className="w-full flex items-center justify-center gap-2 mt-6"