From bfb04d3e7583f91efbf9bdece0d18ca6f2a24c00 Mon Sep 17 00:00:00 2001
From: tanjiro <56165694+NANDINI-star@users.noreply.github.com>
Date: Thu, 22 May 2025 23:23:26 +0900
Subject: [PATCH] added cloding tags for </TabGroup> </Col> </Grid> +
 indentation changes (#11046)

---
 .../src/components/organizations.tsx          | 329 +++++++++---------
 1 file changed, 166 insertions(+), 163 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/organizations.tsx b/ui/litellm-dashboard/src/components/organizations.tsx
index 66eccdcc38..86a62ac42c 100644
--- a/ui/litellm-dashboard/src/components/organizations.tsx
+++ b/ui/litellm-dashboard/src/components/organizations.tsx
@@ -264,173 +264,175 @@ 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.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%" }}
+                        <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)}
                       >
-                        <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>
+                        + 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="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>
+                          <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>
+          </TabGroup>
+        </Col>
+      </Grid>
       {isDeleteModalOpen ? (
         <div className="fixed z-10 inset-0 overflow-y-auto">
           <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
@@ -467,6 +469,7 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
           </div>
         </div>
       ) : <></>}
+            
     </div>
   );
 };