From 2403b9391aefa831af583a61d5d611124fabbf17 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Mon, 13 Jan 2025 01:38:34 +0800
Subject: [PATCH] feat:add table hasil tugas task

---
 components/form/task/task-detail-form.tsx | 61 +++++++++++++++++++++--
 1 file changed, 56 insertions(+), 5 deletions(-)

diff --git a/components/form/task/task-detail-form.tsx b/components/form/task/task-detail-form.tsx
index 5383a378..8ff676db 100644
--- a/components/form/task/task-detail-form.tsx
+++ b/components/form/task/task-detail-form.tsx
@@ -151,6 +151,17 @@ interface FileWithPreview extends File {
   preview: string;
 }
 
+interface UploadResult {
+  id: number;
+  title: string;
+  description: string;
+  createdAt: string;
+  category: { name: string };
+  fileType: { name: string };
+  uploadStatus: { name: string };
+  creatorName: string;
+}
+
 export default function FormTaskDetail() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
@@ -171,8 +182,9 @@ export default function FormTaskDetail() {
     text: false,
   });
 
-  // const [assignmentType, setAssignmentType] = useState("mediahub");
-  // const [assignmentCategory, setAssignmentCategory] = useState("publication");
+  const [uploadResults, setUploadResults] = useState<UploadResult[]>([]);
+  const [isTableResult, setIsTableResult] = useState(false);
+  const [isSentResult] = useState(false);
   const [mainType, setMainType] = useState<string>("1");
   const [taskType, setTaskType] = useState<string>("atensi-khusus");
   const [broadcastType, setBroadcastType] = useState<string>(""); // untuk Tipe Penugasan
@@ -267,6 +279,10 @@ export default function FormTaskDetail() {
 
         setDetail(details);
 
+        if (details) {
+          setUploadResults(details.uploadResults || []);
+        }
+
         if (details?.assignedToLevel) {
           const levels = new Set(
             details.assignedToLevel.split(",").map(Number)
@@ -1140,7 +1156,7 @@ export default function FormTaskDetail() {
                 </div>
               </div>
             </div>
-            <div className="flex flex-row justify-end gap-3">
+            <div className="flex flex-row justify-end gap-3 my-3">
               <div className="">
                 <Button
                   color="primary"
@@ -1165,12 +1181,47 @@ export default function FormTaskDetail() {
                   Terima Tugas
                 </Button>
               </div>
-              <div className="">
-                <Button color="primary" variant={"default"}>
+              <div
+                className="task-response w-100 px-3 "
+                style={
+                  isSentResult || detail?.createdBy?.id == Number(userId)
+                    ? {}
+                    : {
+                        display: "none",
+                      }
+                }
+              >
+                <Button
+                  color="primary"
+                  variant={"default"}
+                  onClick={() => setIsTableResult(!isTableResult)}
+                >
                   Hasil Upload
                 </Button>
               </div>
             </div>
+            {isTableResult && (
+              <table className="w-full border-collapse border border-gray-300">
+                <thead>
+                  <tr className="bg-gray-100 border-b">
+                    <th className="px-4 py-2 text-left">Judul</th>
+                    <th className="px-4 py-2 text-left">Konten</th>
+                    <th className="px-4 py-2 text-left">Kategory</th>
+                    <th className="px-4 py-2 text-left">Diupload Oleh</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {uploadResults.map((item) => (
+                    <tr key={item.id} className="border-b">
+                      <td className="px-4 py-2">{item.title}</td>
+                      <td className="px-4 py-2">{item.fileType.name}</td>
+                      <td className="px-4 py-2">{item.category.name}</td>
+                      <td className="px-4 py-2">{item.creatorName}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
             {showInput && (
               <div className="mt-4 border p-4 rounded bg-gray-50">
                 <Textarea