Lewis/shared tables

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/components/controls-table-columns.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { Control, Artifact, Policy, Evidence, RequirementMap } from "@comp/db/types";
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
+import { DisplayFrameworkStatus } from "@/components/frameworks/framework-status";
+import { getControlStatus } from "../lib/utils";
+
+export function getControlColumns(): ColumnDef<Control & {
+  artifacts: (Artifact & {
+    policy: { status: string } | null;
+    evidence: { published: boolean } | null;
+  })[];
+  requirementsMapped: RequirementMap[];
+}>[] {
+  return [
+    {
+      id: "name",
+      accessorKey: "name",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Control Name" />
+      ),
+      cell: ({ row }) => {
+        return (
+          <div className="flex items-center gap-2">
+            <span className="max-w-[31.25rem] truncate font-medium">
+              {row.getValue("name")}
+            </span>
+          </div>
+        );
+      },
+      meta: {
+        label: "Control Name",
+        placeholder: "Search for a control...",
+        variant: "text",
+      },
+      enableColumnFilter: true,
+    },
+    {
+      id: "status",
+      accessorKey: "status",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Status" />
+      ),
+      cell: ({ row }) => {
+        const control = row.original;
+        const status = getControlStatus(control);
+
+        return <DisplayFrameworkStatus status={status} />;
+      },
+      meta: {
+        label: "Status",
+        placeholder: "Search status...",
+        variant: "select",
+      },
+    },
+    {
+      id: "mappedRequirements",
+      accessorKey: "mappedRequirements",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Mapped Requirements" />
+      ),
+      cell: ({ row }) => {
+        const control = row.original;
+        return <div>{control.requirementsMapped.length}</div>;
+      },
+    },
+  ];
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/components/controls-table.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React from "react";
+
+import { DataTable } from "@/components/data-table/data-table";
+import { useDataTable } from "@/hooks/use-data-table";
+import { getControls } from "../data/queries";
+import { DataTableSortList } from "@/components/data-table/data-table-sort-list";
+import { getControlColumns } from "./controls-table-columns";
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
+import { CreatePolicySheet } from "@/components/sheets/create-policy-sheet";
+
+interface ControlsTableProps {
+  promises: Promise<[
+    Awaited<ReturnType<typeof getControls>>
+  ]>;
+}
+
+export function ControlsTable({ promises }: ControlsTableProps) {
+  const [{ data, pageCount }] = React.use(promises);
+
+  const columns = React.useMemo(() => getControlColumns(), []);
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    initialState: {
+      sorting: [{ id: "name", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => originalRow.id,
+    shallow: false,
+    clearOnDefault: true,
+  });
+
+  return (
+    <>
+      <DataTable
+        table={table}
+        getRowId={(row) => row.id}
+      >
+        <DataTableToolbar table={table} sheet="create-control-sheet" action="Create Control">
+          <DataTableSortList table={table} align="end" />
+        </DataTableToolbar>
+      </DataTable>
+      <CreatePolicySheet />
+    </>
+  );
+}