feat: system admin blocklist table (calcom#25039)

* feat: system admin blocklist table

* chore: text

* fix: type error

* fix: type error

* fix: type error

* fix: frontend bug

* chore: improvments

* refactor: use shared components

* refactor: improvements

* fix: delete

* refactor: support multiple watchlist

* chore: update translation

* fix: type err

* fix: bulk bug

* tests: add unit test

* refactor: file

* refactor: file

* fix: type error

* fix: type error

* chore: translation

* refactor: use shared comments

* fix: imports

* fix: type error

Author: Udit-takkar

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/blocklist/page.tsx

@@ -0,0 +1,24 @@
+import { _generateMetadata, getTranslate } from "app/_utils";
+
+import SystemBlocklistView from "@calcom/features/ee/admin/pages/settings/blocklist";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("system_blocklist"),
+    (t) => t("system_blocklist_description"),
+    undefined,
+    undefined,
+    "/settings/admin/blocklist"
+  );
+
+const Page = async () => {
+  const t = await getTranslate();
+  return (
+    <SettingsHeader title={t("system_blocklist")} description={t("system_blocklist_description")}>
+      <SystemBlocklistView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx

@@ -240,6 +240,11 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
           href: "/settings/admin/lockedSMS",
           trackingMetadata: { section: "admin", page: "locked_sms" },
         },
+        {
+          name: "pbac_resource_blocklist",
+          href: "/settings/admin/blocklist",
+          trackingMetadata: { section: "admin", page: "blocklist" },
+        },
         {
           name: "oAuth",
           href: "/settings/admin/oAuth",

apps/web/modules/ee/organizations/privacy/blocklist-table.tsx

@@ -1,16 +1,21 @@
 "use client";
 
+import { keepPreviousData } from "@tanstack/react-query";
 import { useState } from "react";
 
+import {
+  BlockedEntriesTable,
+  CreateBlocklistEntryModal,
+  PendingReportsBadge,
+  PendingReportsTable,
+} from "@calcom/features/blocklist";
+import { useDataTable } from "@calcom/features/data-table";
 import { DataTableToolbar } from "~/data-table/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { ToggleGroup } from "@calcom/ui/components/form";
-
-import PendingReportsBadge from "./components/PendingReportsBadge";
-import { BlockedEntriesTable } from "./components/blocked-entries-table";
-import { CreateBlocklistEntryModal } from "./components/create-blocklist-entry-modal";
-import { PendingReportsTable } from "./components/pending-reports-table";
+import { showToast } from "@calcom/ui/components/toast";
 
 type ViewType = "blocked" | "pending";
 
@@ -24,8 +29,86 @@ interface BlocklistTableProps {
 
 export function BlocklistTable({ permissions }: BlocklistTableProps) {
   const { t } = useLocale();
+  const { limit, offset, searchTerm } = useDataTable();
   const [activeView, setActiveView] = useState<ViewType>("blocked");
   const [showCreateModal, setShowCreateModal] = useState(false);
+  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
+
+  const utils = trpc.useUtils();
+
+  const { data: blockedData, isPending: isBlockedPending } =
+    trpc.viewer.organizations.listWatchlistEntries.useQuery(
+      { limit, offset, searchTerm },
+      { placeholderData: keepPreviousData, enabled: activeView === "blocked" }
+    );
+
+  const { data: reportsData, isPending: isReportsPending } =
+    trpc.viewer.organizations.listBookingReports.useQuery(
+      {
+        limit,
+        offset,
+        searchTerm,
+        filters: { hasWatchlist: false, status: ["PENDING"] },
+      },
+      { placeholderData: keepPreviousData, enabled: activeView === "pending" }
+    );
+
+  const { data: pendingReportsCount } =
+    trpc.viewer.organizations.pendingReportsCount.useQuery();
+
+  const { data: entryDetails, isLoading: isDetailsLoading } =
+    trpc.viewer.organizations.getWatchlistEntryDetails.useQuery(
+      { id: selectedEntryId ?? "" },
+      { enabled: !!selectedEntryId }
+    );
+
+  const createEntry =
+    trpc.viewer.organizations.createWatchlistEntry.useMutation({
+      onSuccess: async () => {
+        await utils.viewer.organizations.listWatchlistEntries.invalidate();
+        showToast(t("blocklist_entry_created"), "success");
+        setShowCreateModal(false);
+      },
+      onError: (error) => {
+        showToast(error.message, "error");
+      },
+    });
+
+  const deleteEntry =
+    trpc.viewer.organizations.deleteWatchlistEntry.useMutation({
+      onSuccess: async () => {
+        await utils.viewer.organizations.listWatchlistEntries.invalidate();
+        setSelectedEntryId(null);
+        showToast(t("blocklist_entry_deleted"), "success");
+      },
+      onError: (error) => {
+        showToast(error.message, "error");
+      },
+    });
+
+  const addToWatchlist = trpc.viewer.organizations.addToWatchlist.useMutation({
+    onSuccess: async () => {
+      await utils.viewer.organizations.listBookingReports.invalidate();
+      await utils.viewer.organizations.listWatchlistEntries.invalidate();
+      await utils.viewer.organizations.pendingReportsCount.invalidate();
+      showToast(t("blocklist_entry_created"), "success");
+    },
+    onError: (error) => {
+      showToast(error.message, "error");
+    },
+  });
+
+  const dismissReport =
+    trpc.viewer.organizations.dismissBookingReport.useMutation({
+      onSuccess: async () => {
+        await utils.viewer.organizations.listBookingReports.invalidate();
+        await utils.viewer.organizations.pendingReportsCount.invalidate();
+        showToast(t("booking_report_dismissed"), "success");
+      },
+      onError: (error) => {
+        showToast(error.message, "error");
+      },
+    });
 
   return (
     <>
@@ -43,7 +126,7 @@ export function BlocklistTable({ permissions }: BlocklistTableProps) {
                 label: (
                   <span className="flex items-center">
                     {t("pending")}
-                    <PendingReportsBadge />
+                    <PendingReportsBadge count={pendingReportsCount} />
                   </span>
                 ),
               },
@@ -53,20 +136,58 @@ export function BlocklistTable({ permissions }: BlocklistTableProps) {
         </div>
         <div className="flex items-center gap-2">
           {permissions?.canCreate && (
-            <Button color="primary" StartIcon="plus" onClick={() => setShowCreateModal(true)}>
+            <Button
+              color="primary"
+              StartIcon="plus"
+              onClick={() => setShowCreateModal(true)}
+            >
               {t("add")}
             </Button>
           )}
         </div>
       </div>
 
       {activeView === "blocked" ? (
-        <BlockedEntriesTable permissions={permissions} onAddClick={() => setShowCreateModal(true)} />
+        <BlockedEntriesTable
+          scope="organization"
+          data={blockedData?.rows ?? []}
+          totalRowCount={blockedData?.meta?.totalRowCount ?? 0}
+          isPending={isBlockedPending}
+          limit={limit}
+          searchTerm={searchTerm}
+          permissions={permissions}
+          onAddClick={() => setShowCreateModal(true)}
+          onDelete={(entry) => deleteEntry.mutate({ id: entry.id })}
+          isDeleting={deleteEntry.isPending}
+          detailsQuery={{ data: entryDetails, isLoading: isDetailsLoading }}
+          selectedEntryId={selectedEntryId ?? undefined}
+          onSelectEntry={setSelectedEntryId}
+        />
       ) : (
-        <PendingReportsTable />
+        <PendingReportsTable
+          scope="organization"
+          data={reportsData?.rows ?? []}
+          totalRowCount={reportsData?.meta?.totalRowCount ?? 0}
+          isPending={isReportsPending}
+          limit={limit}
+          onAddToBlocklist={(reportIds, type, onSuccess) =>
+            addToWatchlist.mutate({ reportIds, type }, { onSuccess })
+          }
+          onDismiss={(reportId, onSuccess) =>
+            dismissReport.mutate({ reportId }, { onSuccess })
+          }
+          isAddingToBlocklist={addToWatchlist.isPending}
+          isDismissing={dismissReport.isPending}
+        />
       )}
 
-      <CreateBlocklistEntryModal isOpen={showCreateModal} onClose={() => setShowCreateModal(false)} />
+      <CreateBlocklistEntryModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        scope="organization"
+        onCreateEntry={(data) => createEntry.mutate(data)}
+        isPending={createEntry.isPending}
+      />
     </>
   );
 }