Merge branch 'main' into feat/profile-page

frontend/components/ui/userButton.tsx

@@ -11,27 +11,85 @@ import { MAX_FREE_GENERATION } from "@/lib/constant"
 import { User } from "@/lib/types"
 import { useClerk } from "@clerk/nextjs"
 import {
+    Crown,
   LayoutDashboard,
   LogOut,
   Sparkles,
   User as UserIcon,
 } from "lucide-react"
 import Link from "next/link"
+
 import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
 import Avatar from "./avatar"
+import { Button } from "./button"
+import { TIERS } from "@/lib/tiers"
 
-export default function UserButton({ userData }: { userData: User }) {
-  if (!userData) return null
+// TODO: Remove this once we have a proper tier system
+const TIER_INFO = {
+  FREE: {
+    color: "text-gray-500",
+    icon: Sparkles,
+    limit: TIERS.FREE.generations,
+  },
+  PRO: {
+    color: "text-blue-500",
+    icon: Crown,
+    limit: TIERS.PRO.generations,
+  },
+  ENTERPRISE: {
+    color: "text-purple-500",
+    icon: Crown,
+    limit: TIERS.ENTERPRISE.generations,
+  },
+} as const
 
+export default function UserButton({ userData: initialUserData }: { userData: User }) {
+  const [userData, setUserData] = useState<User>(initialUserData)
+  const [isOpen, setIsOpen] = useState(false)
   const { signOut } = useClerk()
   const router = useRouter()
 
+  const fetchUserData = async () => {
+    try {
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${userData.id}`,
+        {
+          headers: {
+            Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+          },
+          cache: 'no-store'
+        }
+      )
+      if (res.ok) {
+        const updatedUserData = await res.json()
+        setUserData(updatedUserData)
+      }
+    } catch (error) {
+      console.error("Failed to fetch user data:", error)
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchUserData()
+    }
+  }, [isOpen])
+
+  const tierInfo = TIER_INFO[userData.tier as keyof typeof TIER_INFO] || TIER_INFO.FREE
+  const TierIcon = tierInfo.icon
+  const usagePercentage = Math.floor((userData.generations || 0) * 100 / tierInfo.limit)
+
+  const handleUpgrade = async () => {
+    router.push('/upgrade')
+  }
+
   return (
-    <DropdownMenu>
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger>
         <Avatar name={userData.name} avatarUrl={userData.avatarUrl} />
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-48" align="end">
+      <DropdownMenuContent className="w-64" align="end">
         <div className="py-1.5 px-2 w-full">
           <div className="font-medium">{userData.name}</div>
           <div className="text-sm w-full overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
@@ -40,20 +98,8 @@ export default function UserButton({ userData }: { userData: User }) {
         </div>
 
         <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <Sparkles className="size-4 mr-2 text-indigo-500" />
-          <div className="w-full flex flex-col items-start text-sm">
-            <span className="text-sm">{`AI Usage: ${userData.generations}/${MAX_FREE_GENERATION}`}</span>
-            <div className="rounded-full w-full mt-1 h-1.5 overflow-hidden bg-secondary border border-muted-foreground">
-              <div
-                className="h-full bg-indigo-500 rounded-full"
-                style={{
-                  width: `${(userData.generations * 100) / 1000}%`,
-                }}
-              />
-            </div>
-          </div>
-        </DropdownMenuItem>
+
+
         <DropdownMenuItem className="cursor-pointer" asChild>
           <Link href={"/dashboard"}>
             <LayoutDashboard className="mr-2 size-4" />
@@ -68,6 +114,52 @@ export default function UserButton({ userData }: { userData: User }) {
             <DropdownMenuSeparator />
           </Link>
         </DropdownMenuItem>
+
+
+        <div className="py-1.5 px-2 w-full">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-1.5">
+              <TierIcon className={`h-4 w-4 ${tierInfo.color}`} />
+              <span className="text-sm font-medium">{userData.tier || "FREE"} Plan</span>
+            </div>
+            {/* {(userData.tier === "FREE" || userData.tier === "PRO") && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 text-xs border-b hover:border-b-foreground"
+                onClick={handleUpgrade}
+              >
+                Upgrade
+              </Button>
+            )} */}
+          </div>
+        </div>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Sparkles className="size-4 mr-2 text-indigo-500" />
+                 <div className="w-full">
+          <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
+            <span>AI Usage</span>
+            <span>{userData.generations}/{tierInfo.limit}</span>
+          </div>
+
+          <div className="rounded-full w-full h-2 overflow-hidden bg-secondary">
+            <div
+              className={`h-full rounded-full transition-all duration-300 ${
+                usagePercentage > 90 ? 'bg-red-500' : 
+                usagePercentage > 75 ? 'bg-yellow-500' : 
+                tierInfo.color.replace('text-', 'bg-')
+              }`}
+              style={{
+                width: `${Math.min(usagePercentage, 100)}%`,
+              }}
+            />
+          </div>
+        </div>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+
         {/* <DropdownMenuItem className="cursor-pointer">
           <Pencil className="mr-2 size-4" />
           <span>Edit Profile</span>
@@ -83,3 +175,4 @@ export default function UserButton({ userData }: { userData: User }) {
     </DropdownMenu>
   )
 }
+