Update usage bar.

Author: rangoku

packages/dashboard/src/app/(layout)/components/UsageProgressBar.tsx

@@ -1,32 +1,41 @@
 import { Progress } from "@/components/ui/progress"
 import { useEffect, useState } from "react";
 import { createClient } from "@/utils/supabase/client";
-
-const MAX_REQUESTS_PER_MONTH = 1000
+import { PLANS } from '@/utils/constants';
+import { Badge } from '@/components/ui/badge';
 
 export function UsageProgressBar() {
     const [usages, setUsages] = useState<number>(0)
+    const [percentage, setPercentage] = useState<number>(0)
+    const [maxRequestsPerMonth, setMaxRequestsPerMonth] = useState<number>(0)
+    const [isPro, setIsPro] = useState<boolean>(false)
     const supabase = createClient()
 
-
     useEffect(() => {
         const fetchData = async () => {
             const { data } = await supabase.from('usages').select().maybeSingle()
             setUsages(data?.calls_count ?? 0)
+
+            const user = await supabase.auth.getUser()
+            const { data: proSubscriptionExists } = await supabase.rpc('check_subscription', { p_user_id: user.data.user?.id })
+
+            setIsPro(proSubscriptionExists)
+            setMaxRequestsPerMonth(proSubscriptionExists ? PLANS.PRO.REQUESTS_PER_MONTH : PLANS.BASIC.REQUESTS_PER_MONTH)
+            setPercentage(Math.min((usages / maxRequestsPerMonth) * 100, 100))
         }
         fetchData()
-    }, [supabase]) // Added supabase to the dependency array
-    const percentage = Math.min((usages / MAX_REQUESTS_PER_MONTH) * 100, 100)
+    }, [])
 
     return (
         <div className="px-4 space-y-2">
             <div className="flex justify-between text-sm">
                 <span>Requests this month</span>
                 <span>
-                    {usages} / {MAX_REQUESTS_PER_MONTH}
+                    {usages} / {maxRequestsPerMonth}
                 </span>
             </div>
             <Progress value={percentage} className="w-full" />
+            {isPro && <Badge>Pro</Badge>}
         </div>
     )
 }

packages/dashboard/src/utils/constants.ts

@@ -1,4 +1,13 @@
 
 export const DAY_MS = 24 * 60 * 60 * 1000;
 
-export const EXTERNAL_ENDPOINTS_SOURCES = ['openapi', 'postman'];
+export const EXTERNAL_ENDPOINTS_SOURCES = ['openapi', 'postman'];
+
+export const PLANS = {
+    BASIC: {
+        REQUESTS_PER_MONTH: 100
+    },
+    PRO: {
+        REQUESTS_PER_MONTH: 10000
+    }
+} as const;