[] = [
+ {
+ accessorKey: "startedAt",
+ header: ({ column }) => {
+ return t("timestamp");
+ },
+ cell: ({ row }) => {
+ return (
+
+ {new Date(
+ row.original.startedAt * 1000
+ ).toLocaleString()}
+
+ );
+ }
+ },
+ {
+ accessorKey: "protocol",
+ header: ({ column }) => {
+ return (
+
+ {t("protocol")}
+ ({
+ label: protocol.toUpperCase(),
+ value: protocol
+ })
+ )}
+ selectedValue={filters.protocol}
+ onValueChange={(value) =>
+ handleFilterChange("protocol", value)
+ }
+ searchPlaceholder="Search..."
+ emptyMessage="None found"
+ />
+
+ );
+ },
+ cell: ({ row }) => {
+ return (
+
+ {row.original.protocol?.toUpperCase()}
+
+ );
+ }
+ },
+ {
+ accessorKey: "resourceName",
+ header: ({ column }) => {
+ return (
+
+ {t("resource")}
+ ({
+ value: res.id.toString(),
+ label: res.name || "Unnamed Resource"
+ }))}
+ selectedValue={filters.siteResourceId}
+ onValueChange={(value) =>
+ handleFilterChange("siteResourceId", value)
+ }
+ searchPlaceholder="Search..."
+ emptyMessage="None found"
+ />
+
+ );
+ },
+ cell: ({ row }) => {
+ if (row.original.resourceName && row.original.resourceNiceId) {
+ return (
+
+
+
+ );
+ }
+ return (
+
+ {row.original.resourceName ?? "—"}
+
+ );
+ }
+ },
+ {
+ accessorKey: "clientName",
+ header: ({ column }) => {
+ return (
+
+ {t("client")}
+ ({
+ value: c.id.toString(),
+ label: c.name
+ }))}
+ selectedValue={filters.clientId}
+ onValueChange={(value) =>
+ handleFilterChange("clientId", value)
+ }
+ searchPlaceholder="Search..."
+ emptyMessage="None found"
+ />
+
+ );
+ },
+ cell: ({ row }) => {
+ const clientType = row.original.clientType === "olm" ? "machine" : "user";
+ if (row.original.clientName && row.original.clientNiceId) {
+ return (
+
+
+
+ );
+ }
+ return (
+
+ {row.original.clientName ?? "—"}
+
+ );
+ }
+ },
+ {
+ accessorKey: "userEmail",
+ header: ({ column }) => {
+ return (
+
+ {t("user")}
+ ({
+ value: u.id,
+ label: u.email || u.id
+ }))}
+ selectedValue={filters.userId}
+ onValueChange={(value) =>
+ handleFilterChange("userId", value)
+ }
+ searchPlaceholder="Search..."
+ emptyMessage="None found"
+ />
+
+ );
+ },
+ cell: ({ row }) => {
+ if (row.original.userEmail || row.original.userId) {
+ return (
+
+
+ {row.original.userEmail ?? row.original.userId}
+
+ );
+ }
+ return —;
+ }
+ },
+ {
+ accessorKey: "sourceAddr",
+ header: ({ column }) => {
+ return t("sourceAddress");
+ },
+ cell: ({ row }) => {
+ return (
+
+ {row.original.sourceAddr}
+
+ );
+ }
+ },
+ {
+ accessorKey: "destAddr",
+ header: ({ column }) => {
+ return (
+
+ {t("destinationAddress")}
+ ({
+ value: addr,
+ label: addr
+ }))}
+ selectedValue={filters.destAddr}
+ onValueChange={(value) =>
+ handleFilterChange("destAddr", value)
+ }
+ searchPlaceholder="Search..."
+ emptyMessage="None found"
+ />
+
+ );
+ },
+ cell: ({ row }) => {
+ return (
+
+ {row.original.destAddr}
+
+ );
+ }
+ },
+ {
+ accessorKey: "duration",
+ header: ({ column }) => {
+ return t("duration");
+ },
+ cell: ({ row }) => {
+ return (
+
+ {formatDuration(
+ row.original.startedAt,
+ row.original.endedAt
+ )}
+
+ );
+ }
+ }
+ ];
+
+ const renderExpandedRow = (row: any) => {
+ return (
+
+
+
+ {/*
+ Connection Details
+
*/}
+
+ Session ID:{" "}
+
+ {row.sessionId ?? "—"}
+
+
+
+ Protocol:{" "}
+ {row.protocol?.toUpperCase() ?? "—"}
+
+
+ Source:{" "}
+
+ {row.sourceAddr ?? "—"}
+
+
+
+ Destination:{" "}
+
+ {row.destAddr ?? "—"}
+
+
+
+
+ {/*
+ Resource & Site
+
*/}
+ {/*
+ Resource:{" "}
+ {row.resourceName ?? "—"}
+ {row.resourceNiceId && (
+
+ ({row.resourceNiceId})
+
+ )}
+
*/}
+
+ Site: {row.siteName ?? "—"}
+ {row.siteNiceId && (
+
+ ({row.siteNiceId})
+
+ )}
+
+
+ Site ID: {row.siteId ?? "—"}
+
+
+ Started At:{" "}
+ {row.startedAt
+ ? new Date(
+ row.startedAt * 1000
+ ).toLocaleString()
+ : "—"}
+
+
+ Ended At:{" "}
+ {row.endedAt
+ ? new Date(
+ row.endedAt * 1000
+ ).toLocaleString()
+ : "Active"}
+
+
+ Duration:{" "}
+ {formatDuration(row.startedAt, row.endedAt)}
+
+ {/*
+ Resource ID:{" "}
+ {row.siteResourceId ?? "—"}
+
*/}
+
+
+ {/*
+ Client & Transfer
+
*/}
+ {/*
+ Bytes Sent (TX):{" "}
+ {formatBytes(row.bytesTx)}
+
*/}
+ {/*
+ Bytes Received (RX):{" "}
+ {formatBytes(row.bytesRx)}
+
*/}
+ {/*
+ Total Transfer:{" "}
+ {formatBytes(
+ (row.bytesTx ?? 0) + (row.bytesRx ?? 0)
+ )}
+
*/}
+
+
+
+
+
+
+ {t("provisioningKeysSave")}
+
+
+ {t("provisioningKeysSaveDescription")}
+
+
+
+
+
{canShowProductUpdates && (
-
+
)}
{build === "enterprise" && (
-
+
)}
{build === "oss" && (
-
+
)}
{build === "saas" && (
-
+
)}
{!isSidebarCollapsed && (
-
+
{loadFooterLinks() ? (
<>
{loadFooterLinks()!.map((link, index) => (
diff --git a/src/components/ProductUpdates.tsx b/src/components/ProductUpdates.tsx
index 01689d9d7..76ab0252d 100644
--- a/src/components/ProductUpdates.tsx
+++ b/src/components/ProductUpdates.tsx
@@ -192,13 +192,13 @@ function ProductUpdatesListPopup({
-
+
{t("productUpdateWhatsNew")}
@@ -346,13 +346,13 @@ function NewVersionAvailable({
rel="noopener noreferrer"
className={cn(
"relative z-2 group cursor-pointer block",
- "rounded-md border border-primary/30 bg-linear-to-br dark:from-primary/20 from-primary/20 via-background to-background p-2 py-3 w-full flex flex-col gap-2 text-sm",
+ "rounded-md border bg-secondary p-2 py-3 w-full flex flex-col gap-2 text-sm",
"transition duration-300 ease-in-out",
"data-closed:opacity-0 data-closed:translate-y-full"
)}
>
-
+
{t("pangolinUpdateAvailable")}
diff --git a/src/components/SiteProvisioningKeysTable.tsx b/src/components/SiteProvisioningKeysTable.tsx
new file mode 100644
index 000000000..df7fd241c
--- /dev/null
+++ b/src/components/SiteProvisioningKeysTable.tsx
@@ -0,0 +1,320 @@
+"use client";
+
+import {
+ DataTable,
+ ExtendedColumnDef
+} from "@app/components/ui/data-table";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger
+} from "@app/components/ui/dropdown-menu";
+import { Button } from "@app/components/ui/button";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import CreateSiteProvisioningKeyCredenza from "@app/components/CreateSiteProvisioningKeyCredenza";
+import EditSiteProvisioningKeyCredenza from "@app/components/EditSiteProvisioningKeyCredenza";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { toast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/api";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import moment from "moment";
+import { useTranslations } from "next-intl";
+import { build } from "@server/build";
+import { TierFeature, tierMatrix } from "@server/lib/billing/tierMatrix";
+
+export type SiteProvisioningKeyRow = {
+ id: string;
+ key: string;
+ name: string;
+ createdAt: string;
+ lastUsed: string | null;
+ maxBatchSize: number | null;
+ numUsed: number;
+ validUntil: string | null;
+};
+
+type SiteProvisioningKeysTableProps = {
+ keys: SiteProvisioningKeyRow[];
+ orgId: string;
+};
+
+export default function SiteProvisioningKeysTable({
+ keys,
+ orgId
+}: SiteProvisioningKeysTableProps) {
+ const router = useRouter();
+ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+ const [selected, setSelected] = useState
(
+ null
+ );
+ const [rows, setRows] = useState(keys);
+ const api = createApiClient(useEnvContext());
+ const t = useTranslations();
+ const { isPaidUser } = usePaidStatus();
+ const canUseSiteProvisioning =
+ isPaidUser(tierMatrix[TierFeature.SiteProvisioningKeys]) &&
+ build !== "oss";
+ const [isRefreshing, setIsRefreshing] = useState(false);
+ const [createOpen, setCreateOpen] = useState(false);
+ const [editOpen, setEditOpen] = useState(false);
+ const [editingKey, setEditingKey] =
+ useState(null);
+
+ useEffect(() => {
+ setRows(keys);
+ }, [keys]);
+
+ const refreshData = async () => {
+ setIsRefreshing(true);
+ try {
+ await new Promise((resolve) => setTimeout(resolve, 200));
+ router.refresh();
+ } catch (error) {
+ toast({
+ title: t("error"),
+ description: t("refreshError"),
+ variant: "destructive"
+ });
+ } finally {
+ setIsRefreshing(false);
+ }
+ };
+
+ const deleteKey = async (siteProvisioningKeyId: string) => {
+ try {
+ await api.delete(
+ `/org/${orgId}/site-provisioning-key/${siteProvisioningKeyId}`
+ );
+ router.refresh();
+ setIsDeleteModalOpen(false);
+ setSelected(null);
+ setRows((prev) => prev.filter((row) => row.id !== siteProvisioningKeyId));
+ } catch (e) {
+ console.error(t("provisioningKeysErrorDelete"), e);
+ toast({
+ variant: "destructive",
+ title: t("provisioningKeysErrorDelete"),
+ description: formatAxiosError(
+ e,
+ t("provisioningKeysErrorDeleteMessage")
+ )
+ });
+ throw e;
+ }
+ };
+
+ const columns: ExtendedColumnDef[] = [
+ {
+ accessorKey: "name",
+ enableHiding: false,
+ friendlyName: t("name"),
+ header: ({ column }) => {
+ return (
+
+ );
+ }
+ },
+ {
+ accessorKey: "key",
+ friendlyName: t("key"),
+ header: () => {t("key")},
+ cell: ({ row }) => {
+ const r = row.original;
+ return {r.key};
+ }
+ },
+ {
+ accessorKey: "maxBatchSize",
+ friendlyName: t("provisioningKeysMaxBatchSize"),
+ header: () => (
+ {t("provisioningKeysMaxBatchSize")}
+ ),
+ cell: ({ row }) => {
+ const r = row.original;
+ return (
+
+ {r.maxBatchSize == null
+ ? t("provisioningKeysMaxBatchUnlimited")
+ : r.maxBatchSize}
+
+ );
+ }
+ },
+ {
+ accessorKey: "numUsed",
+ friendlyName: t("provisioningKeysNumUsed"),
+ header: () => (
+ {t("provisioningKeysNumUsed")}
+ ),
+ cell: ({ row }) => {
+ const r = row.original;
+ return {r.numUsed};
+ }
+ },
+ {
+ accessorKey: "validUntil",
+ friendlyName: t("provisioningKeysValidUntil"),
+ header: () => (
+ {t("provisioningKeysValidUntil")}
+ ),
+ cell: ({ row }) => {
+ const r = row.original;
+ return (
+
+ {r.validUntil
+ ? moment(r.validUntil).format("lll")
+ : t("provisioningKeysNoExpiry")}
+
+ );
+ }
+ },
+ {
+ accessorKey: "lastUsed",
+ friendlyName: t("provisioningKeysLastUsed"),
+ header: () => (
+ {t("provisioningKeysLastUsed")}
+ ),
+ cell: ({ row }) => {
+ const r = row.original;
+ return (
+
+ {r.lastUsed
+ ? moment(r.lastUsed).format("lll")
+ : t("provisioningKeysNeverUsed")}
+
+ );
+ }
+ },
+ {
+ accessorKey: "createdAt",
+ friendlyName: t("createdAt"),
+ header: () => {t("createdAt")},
+ cell: ({ row }) => {
+ const r = row.original;
+ return {moment(r.createdAt).format("lll")};
+ }
+ },
+ {
+ id: "actions",
+ enableHiding: false,
+ header: () => ,
+ cell: ({ row }) => {
+ const r = row.original;
+ return (
+
+
+
+
+
+
+ {
+ setEditingKey(r);
+ setEditOpen(true);
+ }}
+ >
+ {t("edit")}
+
+ {
+ setSelected(r);
+ setIsDeleteModalOpen(true);
+ }}
+ >
+
+ {t("delete")}
+
+
+
+
+
+ );
+ }
+ }
+ ];
+
+ return (
+ <>
+
+
+ {
+ setEditOpen(v);
+ if (!v) {
+ setEditingKey(null);
+ }
+ }}
+ orgId={orgId}
+ provisioningKey={editingKey}
+ />
+
+ {selected && (
+ {
+ setIsDeleteModalOpen(val);
+ if (!val) {
+ setSelected(null);
+ }
+ }}
+ dialog={
+
+
{t("provisioningKeysQuestionRemove")}
+
{t("provisioningKeysMessageRemove")}
+