fix: review matching and review page overhaul

app/members/components/Columns.tsx → app/members/columns.tsx

@@ -1,5 +1,6 @@
+"use client";
+
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
 import { MoreHorizontal } from "lucide-react";
 
 import { Button } from "@components/ui/button";
@@ -11,14 +12,10 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from "@components/ui/dropdown-menu";
-import { DataTableColumnHeader } from "./DataTabelHeader";
+import { DataTableColumnHeader } from "./components/DataTableHeader";
 import { SpaceRole } from "@prisma/client";
 import { Avatar, AvatarFallback, AvatarImage } from "@components/ui/avatar";
-import { RowUser } from "./DataTableTypes";
-
-export type ExtendedColumnDef<TData, TUnknown> = ColumnDef<TData, TUnknown> & {
-  label: string;
-};
+import { ExtendedColumnDef, RowUser } from "./components/DataTableTypes";
 
 export const columns: ExtendedColumnDef<RowUser, unknown>[] = [
   {

app/members/components/DataTable.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import {
   ColumnFiltersState,
   SortingState,
+  TableOptions,
   VisibilityState,
   flexRender,
   getCoreRowModel,
@@ -24,15 +25,19 @@ import {
   TableRow,
 } from "@components/ui/table";
 
-import { columns } from "./Columns";
-import { RowUser, ColumnData } from "./DataTableTypes";
+import { ColumnDefs, ExtendedColumnDef } from "./DataTableTypes";
 
-interface DataTableProps {
-  rowData: RowUser[];
-  columnData: ColumnData;
+interface DataTableProps<RowType> {
+  rowData: RowType[];
+  columnData: ExtendedColumnDef<RowType, unknown>[];
+  columnDefs: ColumnDefs;
 }
 
-export function DataTable({ rowData, columnData }: DataTableProps) {
+export interface CustomTableOptions<RowType> extends TableOptions<unknown> {
+  columnData: ExtendedColumnDef<RowType, unknown>[];
+}
+
+export function DataTable<RowType>({ rowData, columnData, columnDefs }: DataTableProps<RowType>) {
   const [data] = React.useState(rowData);
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -45,7 +50,7 @@ export function DataTable({ rowData, columnData }: DataTableProps) {
 
   const table = useReactTable({
     data,
-    columns,
+    columns: columnData,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
@@ -64,7 +69,7 @@ export function DataTable({ rowData, columnData }: DataTableProps) {
 
   return (
     <div className="space-y-4">
-      <DataTableToolbar table={table} columnData={columnData} />
+      <DataTableToolbar table={table} columnDefs={columnDefs} />
       <div className="rounded-md border">
         <Table>
           <TableHeader>
@@ -105,7 +110,7 @@ export function DataTable({ rowData, columnData }: DataTableProps) {
             ) : (
               <TableRow>
                 <TableCell
-                  colSpan={columns.length}
+                  colSpan={columnData.length}
                   className="h-24 text-center"
                 >
                   {!error ? (

app/members/components/DataTableToolbar.tsx

@@ -7,28 +7,28 @@ import { DataTableViewOptions } from "./DataTableViewOptions";
 
 import { DataTableFacetedFilter } from "./DataTableFacetedFilter";
 import React, { useState, useEffect } from "react";
-import { ColumnData, Option, RowUser } from "./DataTableTypes";
-import { ExtendedColumnDef } from "./Columns";
+import { ColumnDefs, ExtendedColumnDef, Option, RowUser } from "./DataTableTypes";
+
 
 interface DataTableToolbarProps<TData> {
   table: Table<TData>;
-  columnData: ColumnData;
+  columnDefs: ColumnDefs;
 }
 
 export function DataTableToolbar<TData>({
   table,
-  columnData,
+  columnDefs,
 }: DataTableToolbarProps<TData>) {
   const isFiltered = table.getState().columnFilters.length > 0;
   const [departments, setDepartments] = useState<Option[]>([]);
   const [roles, setRoles] = useState<Option[]>([]);
   const [positions, setPositions] = useState<Option[]>([]);
 
   useEffect(() => {
-    setDepartments(columnData.departments);
-    setRoles(columnData.roles);
-    setPositions(columnData.positions);
-  }, [columnData.departments, columnData.positions, columnData.roles]);
+    setDepartments(columnDefs.departments);
+    setRoles(columnDefs.roles);
+    setPositions(columnDefs.positions);
+  }, [columnDefs.departments, columnDefs.positions, columnDefs.roles]);
 
   // Remove the unused getSelectedRows function
   // const getSelectedRows = () => {

app/members/components/DataTableTypes.ts

@@ -1,4 +1,9 @@
 import { SpaceRole } from "@prisma/client";
+import { ColumnDef } from "@tanstack/react-table";
+
+export type ExtendedColumnDef<TData, TUnknown> = ColumnDef<TData, TUnknown> & {
+  label: string;
+};
 
 export interface Option {
   label: string | number;
@@ -15,7 +20,7 @@ export interface RowUser {
   currentDepartmentPosition: string;
 }
 
-export interface ColumnData {
+export interface ColumnDefs {
   departments: Option[];
   roles: Option[];
   positions: Option[];

app/members/components/DataTableViewOptions.tsx

@@ -12,8 +12,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
 } from "@components/ui/dropdown-menu";
-import { ExtendedColumnDef } from "./Columns";
-import { RowUser } from "./DataTableTypes";
+import { ExtendedColumnDef } from "./DataTableTypes";
 
 interface DataTableViewOptionsProps<TData> {
   table: Table<TData>;
@@ -48,7 +47,7 @@ export function DataTableViewOptions<TData>({
                 onCheckedChange={(value) => column.toggleVisibility(!!value)}
               >
                 {
-                  (column.columnDef as ExtendedColumnDef<RowUser, unknown>)
+                  (column.columnDef as ExtendedColumnDef<unknown, unknown>)
                     .label
                 }
               </DropdownMenuCheckboxItem>

app/members/page.tsx

@@ -1,9 +1,10 @@
 import { DataTable } from "./components/DataTable";
-import { RowUser } from "./components/DataTableTypes";
 import db from "server/db";
 import { DepartmentRole, SpaceRole } from "@prisma/client";
 import { getServerAuthSession } from "server/auth";
 import { redirect } from "next/navigation";
+import { columns } from "./columns";
+import { RowUser } from "./components/DataTableTypes";
 import Breadcrumbs from "@components/ui/breadcrumbs";
 
 export default async function MembersPage() {
@@ -53,7 +54,7 @@ export default async function MembersPage() {
     value: position[1],
   }));
 
-  const columnData = {
+  const columnDefs = {
     departments: departments,
     roles: roles,
     positions: positions,
@@ -68,7 +69,11 @@ export default async function MembersPage() {
         </h1>
         <p className="text-muted-foreground">Manage and list members</p>
       </div>
-      <DataTable rowData={profiles} columnData={columnData}></DataTable>
+      <DataTable<RowUser>
+        rowData={profiles}
+        columnData={columns}
+        columnDefs={columnDefs}
+      ></DataTable>
     </div>
   );
 }

app/opportunities/[opportunity_id]/review/[review_id]/page.tsx

@@ -14,21 +14,22 @@ export default async function Review({ params }: ReviewProps) {
   const session = await getServerAuthSession();
   if (!session?.user?.id) redirect("/auth");
 
+
   const review = await db.review.findUnique({
     where: {
       id: Number(params.review_id),
-      user: { id: session.user.id },
     },
-    include: { application: true, questionnaire: true },
+    include: { application: true, questionnaire: true, user: true },
   });
 
+  if (!review) redirect("/404");
+
   const opportunityTitle = db.opportunity.findUnique({
     where: {
       id: review?.application.opportunityId,
     },
   }).then((opportunity) => opportunity?.title);
 
-  if (!review) redirect("/404");
 
   const questions = review.questionnaire.questions as Question[];
 

app/opportunities/[opportunity_id]/review/[review_id]/reviewForm.tsx

@@ -28,11 +28,11 @@ export const ReviewForm = ({
   review,
   opportunityTitle,
 }: ReviewFormProps) => {
-  const applicationFields = (application.content as Tally).data.fields;
+  const applicationFields = (application?.content as Tally).data?.fields ?? [];
 
   const form = useForm<Question["value"][]>();
   const defaultValues = (review.content as Question[]).map((question) => {
-    return question.value;
+    return question.value; 
   });
   // Workaround to set default values
   defaultValues.forEach((value, index) => {
@@ -46,11 +46,15 @@ export const ReviewForm = ({
   const onSubmit: SubmitHandler<Question["value"][]> = (data) => {
     const content = QuestionSchema.array().parse(
       questions.map((question, index) => ({
-        ...question,
         value: data[index],
+        ...question,
       })),
     );
 
+    console.log(questions);
+    console.log(data);
+    console.log(content);
+
     toast.promise(
       updateMutation
         .mutateAsync({

app/opportunities/[opportunity_id]/review/columns.tsx

@@ -1,44 +1,45 @@
 "use client";
 
-import { ColumnDef } from "@tanstack/react-table";
 import { DataTableColumnHeader } from "@components/ui/data-table-column-header";
-import {
-  Application,
-  Questionnaire,
-  Review as PrismaReview,
-  Phase,
-} from "@prisma/client";
+import { RowType } from "./components/DataTableTypes";
 
 import { Button } from "@components/ui/button";
 import Link from "next/link";
 import { Edit } from "lucide-react";
 import { DeleteAlertDialog } from "./components/review-altert-dialog";
+import { ExtendedColumnDef } from "./components/DataTableTypes";
 
-export type Review = PrismaReview & {
-  application: Application;
-} & { questionnaire: Questionnaire & { phase: Phase } };
-
-export const columns: ColumnDef<Review>[] = [
+export const columns: ExtendedColumnDef<RowType, unknown>[] = [
   {
     accessorKey: "application.id",
     header: "Application",
+    label: "Application",
+  },
+  {
+    accessorKey: "user.name",
+    header: "Reviewer",
+    label: "Reviewer",
   },
   {
     accessorKey: "questionnaire.phase.name",
     header: "Phase",
+    label: "Phase",
   },
   {
     accessorKey: "questionnaire.name",
     header: "Questionnaire",
+    label: "Questionnaire",
   },
   {
     accessorKey: "status",
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Status" />
     ),
+    label: "Status",
   },
   {
     id: "actions",
+    label: "Actions",
     cell: ({ row }) => {
       const review = row.original;
       return (