From dcc6ddcecfe81f5b2dc772697f6a8ae28d7d8f5b Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 3 Feb 2024 14:37:19 -0800
Subject: [PATCH] (feat) - ui view spend/budget for your user

---
 .../src/components/view_user_spend.tsx        | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/components/view_user_spend.tsx

diff --git a/ui/litellm-dashboard/src/components/view_user_spend.tsx b/ui/litellm-dashboard/src/components/view_user_spend.tsx
new file mode 100644
index 0000000000..70431c9ae0
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_user_spend.tsx
@@ -0,0 +1,54 @@
+"use client";
+import React, { useEffect } from "react";
+import { keyDeleteCall } from "./networking";
+import { StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
+import { DonutChart } from "@tremor/react";
+import {
+  Badge,
+  Card,
+  Table,
+  Metric,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  Text,
+  Title,
+  Icon,
+} from "@tremor/react";
+
+
+// Define the props type
+interface UserSpendData {
+    spend: number; // Adjust the type accordingly based on your data
+    max_budget?: number | null; // Optional property with a default of null
+    // Add other properties if needed
+  }
+interface ViewUserSpendProps {
+    userID: string | null;
+    userSpendData: UserSpendData | null; // Use the UserSpendData interface here
+}
+const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userSpendData }) => {
+    console.log("User SpendData:", userSpendData);
+    const spend = userSpendData?.spend;
+    const maxBudget = userSpendData?.max_budget || null;
+    const displayMaxBudget = maxBudget !== null ? `$${maxBudget} limit` : "No limit";
+    const displayText = `$${spend} / ${displayMaxBudget}`;
+
+    return (
+        <>
+      <Card className="mx-auto mb-4">
+        <Metric>
+          ${spend}
+        </Metric>
+        <Title>
+            / {displayMaxBudget}
+        </Title>
+      </Card>
+    </>
+    )
+}
+
+export default ViewUserSpend;
+