From 0cde73ffb7a671b3ec5df7f738e9c352cea2e059 Mon Sep 17 00:00:00 2001
From: tanjiro <56165694+NANDINI-star@users.noreply.github.com>
Date: Thu, 22 May 2025 12:41:54 +0900
Subject: [PATCH] Spend rounded to 4 for Organizations and Users page (#11023)

* spend rounded to 4

* fixed for organization and users table
---
 .../src/components/organizations.tsx          | 261 +++++++++++-------
 .../src/components/view_users/columns.tsx     |   2 +-
 2 files changed, 167 insertions(+), 96 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/organizations.tsx b/ui/litellm-dashboard/src/components/organizations.tsx
index f9ee248b82..66eccdcc38 100644
--- a/ui/litellm-dashboard/src/components/organizations.tsx
+++ b/ui/litellm-dashboard/src/components/organizations.tsx
@@ -264,101 +264,172 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
                           </TableRow>
                         </TableHead>
 
-                        <TableBody>
-                          {organizations && organizations.length > 0
-                            ? organizations
-                                .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
-                                .map((org: Organization) => (
-                                  <TableRow key={org.organization_id}>
-                                    <TableCell>
-                                      <div className="overflow-hidden">
-                                        <Tooltip title={org.organization_id}>
-                                          <Button
-                                            size="xs"
-                                            variant="light"
-                                            className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px]"
-                                            onClick={() => setSelectedOrgId(org.organization_id)}
-                                          >
-                                            {org.organization_id?.slice(0, 7)}...
-                                          </Button>
-                                        </Tooltip>
-                                      </div>
-                                    </TableCell>
-                                    <TableCell>{org.organization_alias}</TableCell>
-                                    <TableCell>
-                                      {org.created_at ? new Date(org.created_at).toLocaleDateString() : "N/A"}
-                                    </TableCell>
-                                    <TableCell>{org.spend}</TableCell>
-                                    <TableCell>
-                                      {org.litellm_budget_table?.max_budget !== null && org.litellm_budget_table?.max_budget !== undefined ? org.litellm_budget_table?.max_budget : "No limit"}
-                                    </TableCell>
-                                    <TableCell>
-                                      {Array.isArray(org.models) && (
-                                        <div className="flex flex-col">
-                                          {org.models.length === 0 ? (
-                                            <Badge size="xs" className="mb-1" color="red">
-                                              All Proxy Models
-                                            </Badge>
-                                          ) : (
-                                            org.models.map((model, index) =>
-                                              model === "all-proxy-models" ? (
-                                                <Badge key={index} size="xs" className="mb-1" color="red">
-                                                  All Proxy Models
-                                                </Badge>
-                                              ) : (
-                                                <Badge key={index} size="xs" className="mb-1" color="blue">
-                                                  {model.length > 30
-                                                    ? `${getModelDisplayName(model).slice(0, 30)}...`
-                                                    : getModelDisplayName(model)}
-                                                </Badge>
-                                              )
-                                            )
-                                          )}
-                                        </div>
-                                      )}
-                                    </TableCell>
-                                    <TableCell>
-                                      <Text>
-                                        TPM: {org.litellm_budget_table?.tpm_limit ? org.litellm_budget_table?.tpm_limit : "Unlimited"}
-                                        <br />
-                                        RPM: {org.litellm_budget_table?.rpm_limit ? org.litellm_budget_table?.rpm_limit : "Unlimited"}
-                                      </Text>
-                                    </TableCell>
-                                    <TableCell>
-                                      <Text>{org.members?.length || 0} Members</Text>
-                                    </TableCell>
-                                    <TableCell>
-                                      {userRole === "Admin" && (
-                                        <>
-                                          <Icon
-                                            icon={PencilAltIcon}
-                                            size="sm"
-                                            onClick={() => {
-                                              setSelectedOrgId(org.organization_id);
-                                              setEditOrg(true);
-                                            }}
-                                          />
-                                          <Icon
-                                            onClick={() => handleDelete(org.organization_id)}
-                                            icon={TrashIcon}
-                                            size="sm"
-                                          />
-                                        </>
-                                      )}
-                                    </TableCell>
-                                  </TableRow>
-                                ))
-                            : null}
-                        </TableBody>
-                      </Table>
-                    </Card>
-                  </Col>
-                </Grid>
-              </TabPanel>
-            </TabPanels>
-          </TabGroup>
-        </Col>
-      </Grid>
+                  <TableBody>
+                    {organizations && organizations.length > 0
+                      ? organizations
+                          .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+                          .map((org: Organization) => (
+                            <TableRow key={org.organization_id}>
+                              <TableCell>
+                                <div className="overflow-hidden">
+                                  <Tooltip title={org.organization_id}>
+                                    <Button
+                                      size="xs"
+                                      variant="light"
+                                      className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px]"
+                                      onClick={() => setSelectedOrgId(org.organization_id)}
+                                    >
+                                      {org.organization_id?.slice(0, 7)}...
+                                    </Button>
+                                  </Tooltip>
+                                </div>
+                              </TableCell>
+                              <TableCell>{org.organization_alias}</TableCell>
+                              <TableCell>
+                                {org.created_at ? new Date(org.created_at).toLocaleDateString() : "N/A"}
+                              </TableCell>
+                              <TableCell>{org.spend.toFixed(4)}</TableCell>
+                              <TableCell>
+                                {org.litellm_budget_table?.max_budget !== null && org.litellm_budget_table?.max_budget !== undefined ? org.litellm_budget_table?.max_budget : "No limit"}
+                              </TableCell>
+                              <TableCell>
+                                {Array.isArray(org.models) && (
+                                  <div className="flex flex-col">
+                                    {org.models.length === 0 ? (
+                                      <Badge size="xs" className="mb-1" color="red">
+                                        All Proxy Models
+                                      </Badge>
+                                    ) : (
+                                      org.models.map((model, index) =>
+                                        model === "all-proxy-models" ? (
+                                          <Badge key={index} size="xs" className="mb-1" color="red">
+                                            All Proxy Models
+                                          </Badge>
+                                        ) : (
+                                          <Badge key={index} size="xs" className="mb-1" color="blue">
+                                            {model.length > 30
+                                              ? `${getModelDisplayName(model).slice(0, 30)}...`
+                                              : getModelDisplayName(model)}
+                                          </Badge>
+                                        )
+                                      )
+                                    )}
+                                  </div>
+                                )}
+                              </TableCell>
+                              <TableCell>
+                                <Text>
+                                  TPM: {org.litellm_budget_table?.tpm_limit ? org.litellm_budget_table?.tpm_limit : "Unlimited"}
+                                  <br />
+                                  RPM: {org.litellm_budget_table?.rpm_limit ? org.litellm_budget_table?.rpm_limit : "Unlimited"}
+                                </Text>
+                              </TableCell>
+                              <TableCell>
+                                <Text>{org.members?.length || 0} Members</Text>
+                              </TableCell>
+                              <TableCell>
+                                {userRole === "Admin" && (
+                                  <>
+                                    <Icon
+                                      icon={PencilAltIcon}
+                                      size="sm"
+                                      onClick={() => {
+                                        setSelectedOrgId(org.organization_id);
+                                        setEditOrg(true);
+                                      }}
+                                    />
+                                    <Icon
+                                      onClick={() => handleDelete(org.organization_id)}
+                                      icon={TrashIcon}
+                                      size="sm"
+                                    />
+                                  </>
+                                )}
+                              </TableCell>
+                            </TableRow>
+                          ))
+                      : null}
+                  </TableBody>
+                </Table>
+              </Card>
+            </Col>
+            {(userRole === "Admin" || userRole === "Org Admin") && (
+              <Col numColSpan={1}>
+                <Button
+                  className="mx-auto"
+                  onClick={() => setIsOrgModalVisible(true)}
+                >
+                  + Create New Organization
+                </Button>
+                <Modal
+                  title="Create Organization"
+                  visible={isOrgModalVisible}
+                  width={800}
+                  footer={null}
+                  onCancel={handleCancel}
+                >
+                  <Form
+                    form={form}
+                    onFinish={handleCreate}
+                    labelCol={{ span: 8 }}
+                    wrapperCol={{ span: 16 }}
+                    labelAlign="left"
+                  >
+                    <Form.Item
+                      label="Organization Name"
+                      name="organization_alias"
+                      rules={[{ required: true, message: "Please input an organization name" }]}
+                    >
+                      <TextInput placeholder="" />
+                    </Form.Item>
+                    <Form.Item label="Models" name="models">
+                      <Select2
+                        mode="multiple"
+                        placeholder="Select models"
+                        style={{ width: "100%" }}
+                      >
+                        <Select2.Option key="all-proxy-models" value="all-proxy-models">
+                          All Proxy Models
+                        </Select2.Option>
+                        {userModels && userModels.length > 0 && userModels.map((model) => (
+                          <Select2.Option key={model} value={model}>
+                            {getModelDisplayName(model)}
+                          </Select2.Option>
+                        ))}
+                      </Select2>
+                    </Form.Item>
+
+                    <Form.Item label="Max Budget (USD)" name="max_budget">
+                      <NumericalInput step={0.01} precision={2} width={200} />
+                    </Form.Item>
+                    <Form.Item label="Reset Budget" name="budget_duration">
+                      <Select2 defaultValue={null} placeholder="n/a">
+                        <Select2.Option value="24h">daily</Select2.Option>
+                        <Select2.Option value="7d">weekly</Select2.Option>
+                        <Select2.Option value="30d">monthly</Select2.Option>
+                      </Select2>
+                    </Form.Item>
+                    <Form.Item label="Tokens per minute Limit (TPM)" name="tpm_limit">
+                      <NumericalInput step={1} width={400} />
+                    </Form.Item>
+                    <Form.Item label="Requests per minute Limit (RPM)" name="rpm_limit">
+                      <NumericalInput step={1} width={400} />
+                    </Form.Item>
+
+                    <Form.Item label="Metadata" name="metadata">  
+                      <Input.TextArea rows={4} />
+                    </Form.Item>
+
+                    <div style={{ textAlign: "right", marginTop: "10px" }}>
+                      <Button type="submit">Create Organization</Button>
+                    </div>
+                  </Form>
+                </Modal>
+              </Col>
+            )}
+          </Grid>
+        </TabPanel>
+      </TabPanels>
 
       {isDeleteModalOpen ? (
         <div className="fixed z-10 inset-0 overflow-y-auto">
diff --git a/ui/litellm-dashboard/src/components/view_users/columns.tsx b/ui/litellm-dashboard/src/components/view_users/columns.tsx
index 6abf768034..3a5f9c3cbb 100644
--- a/ui/litellm-dashboard/src/components/view_users/columns.tsx
+++ b/ui/litellm-dashboard/src/components/view_users/columns.tsx
@@ -39,7 +39,7 @@ export const columns = (
     accessorKey: "spend",
     cell: ({ row }) => (
       <span className="text-xs">
-        {row.original.spend ? row.original.spend.toFixed(2) : "-"}
+        {row.original.spend ? row.original.spend.toFixed(4) : "-"}
       </span>
     ),
   },