create attachment file table

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachments-editor.tsx

@@ -0,0 +1,35 @@
+import { Image, Button, Tooltip } from "@nextui-org/react";
+import { AttachmentType } from "./page";
+import { Trash } from "lucide-react";
+
+type Props = {
+  attachments: AttachmentType[];
+  onAttachmentDelete: (attachmentId: number) => void;
+};
+
+export default function AttachmentsEditor({
+  attachments = [],
+  onAttachmentDelete,
+}: Props) {
+  return (
+    <>
+      {attachments.map((attachment, index) => (
+        <div key={index} className="flex">
+          <Image alt={attachment.title} src={attachment.path} className="object-cover h-40 w-40"/>
+          <div className="mt-3 ms-1">
+            <Tooltip content="Delete this attachment file" placement="left">
+              <Button
+                isIconOnly
+                size="sm"
+                className="bg-transparent rounded-full"
+                onPress={() => onAttachmentDelete(attachment.id)}
+              >
+                <Trash size={16} />
+              </Button>
+            </Tooltip>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx

@@ -12,6 +12,7 @@ import {
 import { Plus, ArrowUpFromLine } from "lucide-react";
 import { priorities, testTypes, templates } from "@/config/selection";
 import StepsEditor from "./steps-editor";
+import AttachmentsEditor from "./attachments-editor";
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
 
@@ -28,6 +29,7 @@ type CaseType = {
   expectedResults: string;
   folderId: number;
   Steps: StepType[];
+  Attachments: AttachmentType[];
 };
 
 type CaseStepType = {
@@ -46,6 +48,23 @@ export type StepType = {
   caseSteps: CaseStepType;
 };
 
+type CaseAttachmentType = {
+  createdAt: Date;
+  updatedAt: Date;
+  CaseId: number;
+  AttachmentId: number;
+};
+
+export type AttachmentType = {
+  id: number;
+  title: string;
+  detail: string;
+  path: string;
+  createdAt: Date;
+  updatedAt: Date;
+  caseSteps: CaseAttachmentType;
+};
+
 const defaultTestCase = {
   id: 0,
   title: "",
@@ -411,6 +430,10 @@ export default function Page({
 
       <Divider className="my-6" />
       <h6>Attachments</h6>
+      <AttachmentsEditor
+        attachments={testCase.Attachments}
+        onAttachmentDelete={(id) => console.log(id)}
+      />
       <div className="flex items-center justify-center w-96 mt-3">
         <label
           htmlFor="dropzone-file"