Customize table a little more

This commit is contained in:
Owen
2026-03-29 20:29:31 -07:00
parent fcf92d4e2c
commit 1e9544af07

View File

@@ -2,6 +2,12 @@
import { Badge } from "@app/components/ui/badge"; import { Badge } from "@app/components/ui/badge";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger
} from "@app/components/ui/dropdown-menu";
import { InfoPopup } from "@app/components/ui/info-popup"; import { InfoPopup } from "@app/components/ui/info-popup";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { useNavigationContext } from "@app/hooks/useNavigationContext"; import { useNavigationContext } from "@app/hooks/useNavigationContext";
@@ -15,7 +21,8 @@ import {
ArrowUp10Icon, ArrowUp10Icon,
ArrowUpRight, ArrowUpRight,
Check, Check,
ChevronsUpDownIcon ChevronsUpDownIcon,
MoreHorizontal
} from "lucide-react"; } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Link from "next/link"; import Link from "next/link";
@@ -93,7 +100,7 @@ export default function PendingSitesTable({
async function approveSite(siteId: number) { async function approveSite(siteId: number) {
setApprovingIds((prev) => new Set(prev).add(siteId)); setApprovingIds((prev) => new Set(prev).add(siteId));
try { try {
await api.post(`/site/${siteId}`, { status: "approved" }); await api.post(`/site/${siteId}`, { status: "accepted" });
toast({ toast({
title: t("success"), title: t("success"),
description: t("siteApproveSuccess"), description: t("siteApproveSuccess"),
@@ -201,56 +208,56 @@ export default function PendingSitesTable({
} }
} }
}, },
{ // {
accessorKey: "mbIn", // accessorKey: "mbIn",
friendlyName: t("dataIn"), // friendlyName: t("dataIn"),
header: () => { // header: () => {
const dataInOrder = getSortDirection( // const dataInOrder = getSortDirection(
"megabytesIn", // "megabytesIn",
searchParams // searchParams
); // );
const Icon = // const Icon =
dataInOrder === "asc" // dataInOrder === "asc"
? ArrowDown01Icon // ? ArrowDown01Icon
: dataInOrder === "desc" // : dataInOrder === "desc"
? ArrowUp10Icon // ? ArrowUp10Icon
: ChevronsUpDownIcon; // : ChevronsUpDownIcon;
return ( // return (
<Button // <Button
variant="ghost" // variant="ghost"
onClick={() => toggleSort("megabytesIn")} // onClick={() => toggleSort("megabytesIn")}
> // >
{t("dataIn")} // {t("dataIn")}
<Icon className="ml-2 h-4 w-4" /> // <Icon className="ml-2 h-4 w-4" />
</Button> // </Button>
); // );
} // }
}, // },
{ // {
accessorKey: "mbOut", // accessorKey: "mbOut",
friendlyName: t("dataOut"), // friendlyName: t("dataOut"),
header: () => { // header: () => {
const dataOutOrder = getSortDirection( // const dataOutOrder = getSortDirection(
"megabytesOut", // "megabytesOut",
searchParams // searchParams
); // );
const Icon = // const Icon =
dataOutOrder === "asc" // dataOutOrder === "asc"
? ArrowDown01Icon // ? ArrowDown01Icon
: dataOutOrder === "desc" // : dataOutOrder === "desc"
? ArrowUp10Icon // ? ArrowUp10Icon
: ChevronsUpDownIcon; // : ChevronsUpDownIcon;
return ( // return (
<Button // <Button
variant="ghost" // variant="ghost"
onClick={() => toggleSort("megabytesOut")} // onClick={() => toggleSort("megabytesOut")}
> // >
{t("dataOut")} // {t("dataOut")}
<Icon className="ml-2 h-4 w-4" /> // <Icon className="ml-2 h-4 w-4" />
</Button> // </Button>
); // );
} // }
}, // },
{ {
accessorKey: "type", accessorKey: "type",
friendlyName: t("type"), friendlyName: t("type"),
@@ -375,6 +382,24 @@ export default function PendingSitesTable({
const isApproving = approvingIds.has(siteRow.id); const isApproving = approvingIds.has(siteRow.id);
return ( return (
<div className="flex items-center gap-2 justify-end"> <div className="flex items-center gap-2 justify-end">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<Link
className="block w-full"
href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
>
<DropdownMenuItem>
{t("viewSettings")}
</DropdownMenuItem>
</Link>
</DropdownMenuContent>
</DropdownMenu>
<Button <Button
variant="outline" variant="outline"
disabled={isApproving} disabled={isApproving}