Spaces:
Sleeping
Sleeping
File size: 3,394 Bytes
c40c75a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
import { ColumnDef } from "@tanstack/react-table";
import { Badge, Grid, Icon } from "@tremor/react";
import { Tooltip } from "antd";
import { UserInfo } from "./types";
import { PencilAltIcon, TrashIcon, InformationCircleIcon } from "@heroicons/react/outline";
export const columns = (
possibleUIRoles: Record<string, Record<string, string>>,
handleEdit: (user: UserInfo) => void,
handleDelete: (userId: string) => void,
): ColumnDef<UserInfo>[] => [
{
header: "User ID",
accessorKey: "user_id",
cell: ({ row }) => (
<Tooltip title={row.original.user_id}>
<span className="text-xs">{row.original.user_id ? `${row.original.user_id.slice(0, 7)}...` : "-"}</span>
</Tooltip>
),
},
{
header: "User Email",
accessorKey: "user_email",
cell: ({ row }) => (
<span className="text-xs">{row.original.user_email || "-"}</span>
),
},
{
header: "Global Proxy Role",
accessorKey: "user_role",
cell: ({ row }) => (
<span className="text-xs">
{possibleUIRoles?.[row.original.user_role]?.ui_label || "-"}
</span>
),
},
{
header: "User Spend ($ USD)",
accessorKey: "spend",
cell: ({ row }) => (
<span className="text-xs">
{row.original.spend ? row.original.spend.toFixed(2) : "-"}
</span>
),
},
{
header: "User Max Budget ($ USD)",
accessorKey: "max_budget",
cell: ({ row }) => (
<span className="text-xs">
{row.original.max_budget !== null ? row.original.max_budget : "Unlimited"}
</span>
),
},
{
header: () => (
<div className="flex items-center gap-2">
<span>SSO ID</span>
<Tooltip title="SSO ID is the ID of the user in the SSO provider. If the user is not using SSO, this will be null.">
<InformationCircleIcon className="w-4 h-4" />
</Tooltip>
</div>
),
accessorKey: "sso_user_id",
cell: ({ row }) => (
<span className="text-xs">
{row.original.sso_user_id !== null ? row.original.sso_user_id : "-"}
</span>
),
},
{
header: "API Keys",
accessorKey: "key_count",
cell: ({ row }) => (
<Grid numItems={2}>
{row.original.key_count > 0 ? (
<Badge size="xs" color="indigo">
{row.original.key_count} Keys
</Badge>
) : (
<Badge size="xs" color="gray">
No Keys
</Badge>
)}
</Grid>
),
},
{
header: "Created At",
accessorKey: "created_at",
sortingFn: "datetime",
cell: ({ row }) => (
<span className="text-xs">
{row.original.created_at ? new Date(row.original.created_at).toLocaleDateString() : "-"}
</span>
),
},
{
header: "Updated At",
accessorKey: "updated_at",
sortingFn: "datetime",
cell: ({ row }) => (
<span className="text-xs">
{row.original.updated_at ? new Date(row.original.updated_at).toLocaleDateString() : "-"}
</span>
),
},
{
id: "actions",
header: "",
cell: ({ row }) => (
<div className="flex gap-2">
<Icon
icon={PencilAltIcon}
size="sm"
onClick={() => handleEdit(row.original)}
/>
<Icon
icon={TrashIcon}
size="sm"
onClick={() => handleDelete(row.original.user_id)}
/>
</div>
),
},
]; |