PEER-219: Add Attempt UI

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/src/components/blocks/interview/question-attempts/attempt-details.tsx

@@ -0,0 +1 @@
+export * from './main';

frontend/src/components/blocks/interview/question-attempts/attempt-details/index.ts

@@ -0,0 +1,43 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { IQuestionAttempt } from '@/types/question-types';
+
+type AttemptDetailsPaneProps = {
+  triggerText: string;
+} & IQuestionAttempt;
+
+export const AttemptDetailsDialog: FC<PropsWithChildren<AttemptDetailsPaneProps>> = ({
+  children,
+  triggerText,
+  code,
+  language,
+  attemptId,
+}) => {
+  return (
+    <Dialog>
+      {children ? (
+        <DialogTrigger>{children}</DialogTrigger>
+      ) : (
+        <DialogTrigger>{triggerText}</DialogTrigger>
+      )}
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            Attempt&nbsp;<span className='font-mono'>{attemptId}</span>
+          </DialogTitle>
+        </DialogHeader>
+        <DialogDescription />
+        <DialogFooter />
+      </DialogContent>
+    </Dialog>
+  );
+};

frontend/src/components/blocks/interview/question-attempts/attempt-details/main.tsx

@@ -1,20 +1,38 @@
 import { ColumnDef } from '@tanstack/react-table';
 
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { DataTableSortableHeader } from '@/components/ui/data-table';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { IQuestionAttempt } from '@/types/question-types';
 
+import { AttemptDetailsDialog } from './attempt-details';
+
 export const columns: Array<ColumnDef<IQuestionAttempt>> = [
   {
     accessorKey: 'attemptId',
     header: 'ID',
   },
   {
     accessorKey: 'timestamp',
-    header: ({ column }) => <DataTableSortableHeader column={column} title='Attempted' />,
+    header: ({ column }) => (
+      <DataTableSortableHeader column={column} title='Attempted' className='ml-4' />
+    ),
     cell({ row }) {
       const attemptedTime = row.getValue('timestamp') as string;
-      return <div>{new Date(attemptedTime).toLocaleString()}</div>;
+      const label = new Date(attemptedTime).toLocaleString();
+      return (
+        <AttemptDetailsDialog triggerText={label} {...row.original}>
+          <TooltipProvider delayDuration={100}>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button variant='link'>{label}</Button>
+              </TooltipTrigger>
+              <TooltipContent>View Details</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </AttemptDetailsDialog>
+      );
     },
   },
   {

frontend/src/components/blocks/interview/question-attempts/columns.tsx

@@ -59,6 +59,7 @@ export type IQuestionAttempt = {
   attemptId: string;
   code: string;
   language: string;
+  timestamp: string;
   userId1: string;
   userId2?: string;
 };