feat: use rbac

src/app/(authenticated)/(dashboard)/[publicId]/stakeholders/page.tsx

@@ -2,6 +2,7 @@ import EmptyState from "@/components/common/empty-state";
 import StakeholderDropdown from "@/components/stakeholder/stakeholder-dropdown";
 import StakeholderTable from "@/components/stakeholder/stakeholder-table";
 import { Card } from "@/components/ui/card";
+import { serverAccessControl } from "@/lib/rbac/access-control";
 import { api } from "@/trpc/server";
 import { RiGroup2Fill } from "@remixicon/react";
 import type { Metadata } from "next";
@@ -11,7 +12,21 @@ export const metadata: Metadata = {
 };
 
 const StakeholdersPage = async () => {
-  const stakeholders = await api.stakeholder.getStakeholders.query();
+  const { allow } = await serverAccessControl();
+  const stakeholders = await allow(api.stakeholder.getStakeholders.query(), [
+    "stakeholder",
+    "read",
+  ]);
+
+  const stakeholderDropdown = allow(
+    <StakeholderDropdown />,
+    ["stakeholder", "create"],
+    null,
+  );
+
+  if (!stakeholders) {
+    return <div>access denied</div>;
+  }
 
   if (stakeholders.length === 0) {
     return (
@@ -20,7 +35,7 @@ const StakeholdersPage = async () => {
         title="You do not have any stakeholders!"
         subtitle="Please click the button below to add or import stakeholders."
       >
-        <StakeholderDropdown />
+        {stakeholderDropdown}
       </EmptyState>
     );
   }
@@ -35,9 +50,7 @@ const StakeholdersPage = async () => {
           </p>
         </div>
 
-        <div>
-          <StakeholderDropdown />
-        </div>
+        <div>{stakeholderDropdown}</div>
       </div>
 
       <Card className="mx-auto mt-3 w-[28rem] sm:w-[38rem] md:w-full">

src/components/stakeholder/stakeholder-table.tsx

@@ -10,7 +10,7 @@ import { DataTableContent } from "@/components/ui/data-table/data-table-content"
 import { DataTableHeader } from "@/components/ui/data-table/data-table-header";
 import { DataTablePagination } from "@/components/ui/data-table/data-table-pagination";
 import type { RouterOutputs } from "@/trpc/shared";
-import { RiUserSettingsLine } from "@remixicon/react";
+import { RiMore2Fill } from "@remixicon/react";
 import {
   type ColumnDef,
   type ColumnFiltersState,
@@ -25,6 +25,16 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import React from "react";
+import { Allow } from "../rbac/allow";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
 import { StakeholderTableToolbar } from "./stakeholder-table-toolbar";
 
 type Stakeholder = RouterOutputs["stakeholder"]["getStakeholders"];
@@ -176,17 +186,32 @@ export const columns: ColumnDef<Stakeholder[number]>[] = [
     cell: ({ row }) => {
       const singleStakeholder = row.original;
       return (
-        <RiUserSettingsLine
-          className="h-4 w-4 cursor-pointer"
-          onClick={() => {
-            console.log(row.original);
-            pushModal("UpdateSingleStakeholderModal", {
-              title: "Update stakeholder",
-              subtitle: "Edit the stakeholder details",
-              stakeholder: singleStakeholder,
-            });
-          }}
-        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <RiMore2Fill className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+
+            <Allow action="update" subject="stakeholder">
+              <DropdownMenuItem
+                onSelect={() => {
+                  pushModal("UpdateSingleStakeholderModal", {
+                    title: "Update stakeholder",
+                    subtitle: "Edit the stakeholder details",
+                    stakeholder: singleStakeholder,
+                  });
+                }}
+              >
+                Edit
+              </DropdownMenuItem>
+            </Allow>
+          </DropdownMenuContent>
+        </DropdownMenu>
       );
     },
   },