Next

app/(interview)/interview/[interviewId]/page.tsx

@@ -36,8 +36,8 @@ export default async function Page({
     redirect('/interview/finished');
   }
 
-  // If the interview is finished, redirect to the finish page
-  if (!session && interview?.finishTime) {
+  // If the interview is finished and there is no session, redirect to the finish page
+  if (interview?.finishTime && !session) {
     redirect('/interview/finished');
   }
 

app/dashboard/_components/InterviewsTable/ActionsDropdown.tsx

@@ -4,7 +4,7 @@ import type { Interview } from '@prisma/client';
 import type { Row } from '@tanstack/react-table';
 import { MoreHorizontal } from 'lucide-react';
 import Link from 'next/link';
-import { objectHash } from 'ohash';
+import { hash as objectHash } from 'ohash';
 import { useState } from 'react';
 import { DeleteInterviewsDialog } from '~/app/dashboard/interviews/_components/DeleteInterviewsDialog';
 import { ExportInterviewsDialog } from '~/app/dashboard/interviews/_components/ExportInterviewsDialog';

app/dashboard/_components/InterviewsTable/Columns.tsx

@@ -1,14 +1,15 @@
 'use client';
 
+import type { Codebook, NcNetwork, Stage } from '@codaco/shared-consts';
 import { type ColumnDef } from '@tanstack/react-table';
-import { Checkbox } from '~/components/ui/checkbox';
+import Image from 'next/image';
 import { DataTableColumnHeader } from '~/components/DataTable/ColumnHeader';
-import { Progress } from '~/components/ui/progress';
-import type { Stage } from '@codaco/shared-consts';
 import { Badge } from '~/components/ui/badge';
+import { Checkbox } from '~/components/ui/checkbox';
+import { Progress } from '~/components/ui/progress';
 import TimeAgo from '~/components/ui/TimeAgo';
-import Image from 'next/image';
 import type { GetInterviewsReturnType } from '~/queries/interviews';
+import NetworkSummary from './NetworkSummary';
 
 export const InterviewColumns = (): ColumnDef<
   Awaited<GetInterviewsReturnType>[0]
@@ -32,30 +33,24 @@ export const InterviewColumns = (): ColumnDef<
     enableSorting: false,
     enableHiding: false,
   },
-  // {
-  //   accessorKey: 'id',
-  //   header: ({ column }) => {
-  //     return <DataTableColumnHeader column={column} title="Interview ID" />;
-  //   },
-  // },
-  // {
-  //   accessorKey: 'finishTime',
-  //   header: 'Finish Time',
-  //   cell: ({ row }) => {
-  //     // finishTime is optional
-  //     if (!row.original.finishTime) {
-  //       return 'Not completed';
-  //     }
-  //     const date = new Date(row.original.finishTime);
-  //     return date.toLocaleString();
-  //   },
-  // },
   {
     id: 'identifier',
     accessorKey: 'participant.identifier',
     header: ({ column }) => {
       return (
-        <DataTableColumnHeader column={column} title="Participant Identifier" />
+        <div className="flex items-center gap-2">
+          <Image
+            src="/images/participant.svg"
+            alt="Participant icon"
+            className="max-w-none"
+            width={24}
+            height={24}
+          />
+          <DataTableColumnHeader
+            column={column}
+            title="Participant Identifier"
+          />
+        </div>
       );
     },
     cell: ({ row }) => {
@@ -64,13 +59,6 @@ export const InterviewColumns = (): ColumnDef<
           className="flex items-center gap-2"
           title={row.original.participant.identifier}
         >
-          <Image
-            src="/images/participant.svg"
-            alt="Protocol icon"
-            className="max-w-none"
-            width={24}
-            height={24}
-          />
           <Badge variant={'outline'}>
             <span className="max-w-56 truncate">
               {row.original.participant.identifier}
@@ -81,47 +69,65 @@ export const InterviewColumns = (): ColumnDef<
     },
   },
   {
+    id: 'protocolName',
     accessorKey: 'protocol.name',
     header: ({ column }) => {
-      return <DataTableColumnHeader column={column} title="Protocol Name" />;
+      return (
+        <div className="flex items-center gap-2">
+          <Image
+            src="/images/protocol-icon.png"
+            alt="Protocol icon"
+            className="max-w-none"
+            width={24}
+            height={24}
+          />
+          <DataTableColumnHeader column={column} title="Protocol Name" />
+        </div>
+      );
     },
     cell: ({ row }) => {
+      const protocolFileName = row.original.protocol.name;
+      const protocolName = protocolFileName.replace(/\.netcanvas$/, '');
       return (
         <div
           className="flex w-full max-w-72 items-center gap-2"
           title={row.original.protocol.name}
         >
-          <Image
-            src="/images/protocol-icon.png"
-            alt="Protocol icon"
-            width={32}
-            height={24}
-          />
-          <span className="truncate">{row.original.protocol.name}</span>
+          <span className="truncate">{protocolName}</span>
         </div>
       );
     },
   },
   {
+    id: 'startTime',
     accessorKey: 'startTime',
-    header: 'Started',
+    header: ({ column }) => {
+      return <DataTableColumnHeader column={column} title="Started" />;
+    },
     cell: ({ row }) => {
       const date = new Date(row.original.startTime);
-      return <TimeAgo date={date} />;
+      return <TimeAgo date={date} className="text-xs" />;
     },
   },
   {
+    id: 'lastUpdated',
     accessorKey: 'lastUpdated',
     header: ({ column }) => {
       return <DataTableColumnHeader column={column} title="Updated" />;
     },
     cell: ({ row }) => {
       const date = new Date(row.original.lastUpdated);
-      return <TimeAgo date={date} />;
+      return <TimeAgo date={date} className="text-xs" />;
     },
   },
   {
     id: 'progress',
+    accessorFn: (row) => {
+      const stages = row.protocol.stages;
+      return Array.isArray(stages)
+        ? (row.currentStep / stages.length) * 100
+        : 0;
+    },
     header: ({ column }) => {
       return <DataTableColumnHeader column={column} title="Progress" />;
     },
@@ -136,6 +142,24 @@ export const InterviewColumns = (): ColumnDef<
       );
     },
   },
+  {
+    id: 'network',
+    accessorFn: (row) => {
+      const network = row.network as NcNetwork;
+      const nodeCount = network?.nodes?.length ?? 0;
+      const edgeCount = network?.edges?.length ?? 0;
+      return nodeCount + edgeCount;
+    },
+    header: ({ column }) => {
+      return <DataTableColumnHeader column={column} title="Network" />;
+    },
+    cell: ({ row }) => {
+      const network = row.original.network as NcNetwork;
+      const codebook = row.original.protocol.codebook as Codebook;
+
+      return <NetworkSummary network={network} codebook={codebook} />;
+    },
+  },
   {
     accessorKey: 'exportTime',
     header: ({ column }) => {
@@ -146,7 +170,11 @@ export const InterviewColumns = (): ColumnDef<
         return <Badge variant="secondary">Not exported</Badge>;
       }
 
-      return <TimeAgo date={row.original.exportTime} />;
+      return (
+        <div className="text-xs">
+          <TimeAgo date={row.original.exportTime} />
+        </div>
+      );
     },
   },
 ];

app/dashboard/_components/InterviewsTable/InterviewsTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { HardDriveUpload } from 'lucide-react';
-import { objectHash } from 'ohash';
+import { hash as objectHash } from 'ohash';
 import { use, useMemo, useState } from 'react';
 import { ActionsDropdown } from '~/app/dashboard/_components/InterviewsTable/ActionsDropdown';
 import { InterviewColumns } from '~/app/dashboard/_components/InterviewsTable/Columns';

app/dashboard/_components/InterviewsTable/InterviewsTableServer.tsx

@@ -10,7 +10,7 @@ export default function InterviewsTableServer() {
 
   return (
     <Suspense
-      fallback={<DataTableSkeleton columnCount={6} filterableColumnCount={2} />}
+      fallback={<DataTableSkeleton columnCount={7} filterableColumnCount={2} />}
     >
       <InterviewsTable
         interviewsPromise={interviewsPromise}