feat: add usage-insight on the desktop-sidebar

apps/dashboard/app/(app)/layout.tsx

@@ -20,6 +20,7 @@ export default async function Layout({ children }: LayoutProps) {
       apis: {
         where: (table, { isNull }) => isNull(table.deletedAtM),
       },
+      quotas: true,
     },
   });
 
@@ -32,7 +33,10 @@ export default async function Layout({ children }: LayoutProps) {
       <SidebarProvider>
         <div className="flex flex-1 overflow-hidden">
           {/* Desktop Sidebar */}
-          <AppSidebar workspace={workspace} className="bg-gray-1 border-grayA-4" />
+          <AppSidebar
+            workspace={{ ...workspace, quotas: workspace.quotas! }}
+            className="bg-gray-1 border-grayA-4"
+          />
 
           {/* Main content area */}
           <div className="flex-1 overflow-auto">

apps/dashboard/app/(app)/settings/billing/client.tsx

@@ -33,7 +33,7 @@ type Props = {
     name: string;
     priceId: string;
     dollar: number;
-    quota: {
+    quotas: {
       requestsPerMonth: number;
     };
   }>;
@@ -116,7 +116,7 @@ export const Client: React.FC<Props> = (props) => {
               >
                 <div className=" text-accent-12 font-medium w-4/12">{p.name}</div>
                 <div className="w-4/12 flex justify-end items-center gap-1">
-                  <span className="text-accent-12 ">{formatNumber(p.quota.requestsPerMonth)}</span>
+                  <span className="text-accent-12 ">{formatNumber(p.quotas.requestsPerMonth)}</span>
                   <span className="text-gray-11 ">requests</span>
                 </div>
                 <div className="flex items-center justify-between gap-4 w-4/12">
@@ -131,7 +131,7 @@ export const Client: React.FC<Props> = (props) => {
                       description={`Changing to ${
                         p.name
                       } updates your request quota to ${formatNumber(
-                        p.quota.requestsPerMonth,
+                        p.quotas.requestsPerMonth,
                       )} per month immediately.`}
                       onConfirm={async () =>
                         updateSubscription.mutateAsync({
@@ -151,7 +151,7 @@ export const Client: React.FC<Props> = (props) => {
                       description={`Changing to ${
                         p.name
                       } updates your request quota to ${formatNumber(
-                        p.quota.requestsPerMonth,
+                        p.quotas.requestsPerMonth,
                       )} per month immediately.`}
                       onConfirm={() => createSubscription.mutateAsync({ productId: p.id })}
                       fineprint={

apps/dashboard/app/(app)/settings/billing/components/usage.tsx

@@ -22,7 +22,11 @@ function clamp(min: number, value: number, max: number): number {
   return Math.min(max, Math.max(value, min));
 }
 
-const ProgressCircle: React.FC<{ value: number; max: number }> = ({ value, max }) => {
+export const ProgressCircle: React.FC<{
+  value: number;
+  max: number;
+  color?: string;
+}> = ({ value, max, color }) => {
   const safeValue = clamp(0, value, max);
   const radius = 12;
   const strokeWidth = 3;
@@ -65,6 +69,7 @@ const ProgressCircle: React.FC<{ value: number; max: number }> = ({ value, max }
               stroke=""
               strokeLinecap="round"
               className="stroke-accent-12 transform-gpu transition-all duration-300 ease-in-out"
+              style={{ stroke: color }}
             />
           ) : null}
         </svg>

apps/dashboard/app/(app)/settings/billing/page.tsx

@@ -20,7 +20,7 @@ export default async function BillingPage() {
   const workspace = await db.query.workspaces.findFirst({
     where: (table, { and, eq, isNull }) => and(eq(table.orgId, orgId), isNull(table.deletedAtM)),
     with: {
-      quota: true,
+      quotas: true,
     },
   });
 
@@ -137,7 +137,7 @@ export default async function BillingPage() {
               name: p.name,
               priceId: price.id,
               dollar: price.unit_amount! / 100,
-              quota: {
+              quotas: {
                 requestsPerMonth: Number.parseInt(p.metadata.quota_requests_per_month),
               },
             };
@@ -165,7 +165,7 @@ export default async function BillingPage() {
       products={products}
       usage={{
         current: usedVerifications + usedRatelimits,
-        max: workspace.quota?.requestsPerMonth ?? 150_000,
+        max: workspace.quotas?.requestsPerMonth ?? 150_000,
       }}
       subscription={
         subscription

apps/dashboard/app/(app)/settings/team/page.tsx

@@ -13,10 +13,10 @@ export default async function SettingTeamPage() {
   const orgId = await getOrgId();
   const ws = await db.query.workspaces.findFirst({
     where: (table, { and, eq, isNull }) => and(eq(table.orgId, orgId), isNull(table.deletedAtM)),
-    with: { quota: true },
+    with: { quotas: true },
   });
 
-  const team = ws?.quota?.team ?? false;
+  const team = ws?.quotas?.team ?? false;
 
   return (
     <div>