diff --git a/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx b/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx
index 61cbd6c9..4ccafa03 100644
--- a/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx
+++ b/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { ColumnDef } from "@tanstack/react-table";
 
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,6 +13,8 @@ import { Button } from "@/components/ui/button";
 import { format } from "date-fns";
 import { Link } from "@/i18n/routing";
 
+const userLevelId = getCookiesDecrypt("ulie");
+
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -120,9 +122,27 @@ const columns: ColumnDef<any>[] = [
         Ditolak: "text-red-500 border-red-500",
       };
 
+      const colors = [
+        "text-orange-500 border-orange-500",
+        "text-orange-500 border-orange-500",
+        "text-green-500 border-green-500",
+        "text-blue-500 border-blue-500",
+        "text-red-500 border-red-500",
+      ];
+
+      const status =
+        Number(row.original?.statusId) == 2 &&
+        row.original?.reviewedAtLevel !== null &&
+        !row.original?.reviewedAtLevel?.includes(`:${userLevelId}:`) &&
+        Number(row.original?.creatorGroupLevelId) != Number(userLevelId)
+          ? "1"
+          : row.original?.statusId;
+
       // Mendapatkan kelas warna dari mapping, default ke abu-abu jika tidak ditemukan
       const buttonClass =
-        colorMapping[statusName] || "text-gray-500 border-gray-500";
+        colors[Number(status)] || "text-gray-500 border-gray-500";
+      // const buttonClass =
+      //   colorMapping[statusName] || "text-gray-500 border-gray-500";
 
       return (
         <div>
@@ -131,7 +151,18 @@ const columns: ColumnDef<any>[] = [
             variant="outline"
             className={`btn btn-sm pill-btn ml-1 ${buttonClass}`}
           >
-            {statusName || "Tidak Diketahui"}
+            {(Number(row.original?.statusId) == 2 &&
+              !row.original?.reviewedAtLevel !== null &&
+              !row.original?.reviewedAtLevel?.includes(
+                `:${Number(userLevelId)}:`
+              ) &&
+              Number(row.original?.creatorGroupLevelId) !=
+                Number(userLevelId)) ||
+            (Number(row.original?.statusId) == 1 &&
+              Number(row.original?.needApprovalFromLevel) ==
+                Number(userLevelId))
+              ? "Menunggu Review"
+              : row.original?.statusName}{" "}
           </Button>
         </div>
       );
diff --git a/components/form/content/audio-detail-form.tsx b/components/form/content/audio-detail-form.tsx
index a6bc9eae..d3f28fb7 100644
--- a/components/form/content/audio-detail-form.tsx
+++ b/components/form/content/audio-detail-form.tsx
@@ -316,19 +316,20 @@ export default function FormAudioDetail() {
       Number(status) == 2 ||
       Number(status) == 4
     ) {
-      MySwal.fire({
-        title: "Simpan Approval",
-        text: "",
-        icon: "warning",
-        showCancelButton: true,
-        cancelButtonColor: "#d33",
-        confirmButtonColor: "#3085d6",
-        confirmButtonText: "Simpan",
-      }).then((result) => {
-        if (result.isConfirmed) {
-          save();
-        }
-      });
+      save();
+
+      // MySwal.fire({
+      //   title: "Simpan Approval",
+      //   text: "",
+      //   icon: "warning",
+      //   showCancelButton: true,
+      //   cancelButtonColor: "#d33",
+      //   confirmButtonColor: "#3085d6",
+      //   confirmButtonText: "Simpan",
+      // }).then((result) => {
+      //   if (result.isConfirmed) {
+      //   }
+      // });
     }
   };
 
@@ -353,7 +354,7 @@ export default function FormAudioDetail() {
       // files: [],
       files: isUserMabesApprover ? getPlacement() : [],
     };
-
+    setModalOpen(false);
     loading();
     const response = await submitApproval(data);
 
@@ -568,7 +569,7 @@ export default function FormAudioDetail() {
             </div>
           </Card>
           <div className="w-full lg:w-4/12">
-            <Card className=" h-[600px]">
+            <Card className="pb-3">
               <div className="px-3 py-3">
                 <div className="space-y-2">
                   <Label>{t("creator")}</Label>
@@ -670,39 +671,6 @@ export default function FormAudioDetail() {
               ) : (
                 ""
               )} */}
-              {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
-                Number(detail?.uploadedById) == Number(userId) ? (
-                  ""
-                ) : (
-                  <div className="flex flex-col gap-2 p-3">
-                    <Button
-                      onClick={() => actionApproval("2")}
-                      color="primary"
-                      type="button"
-                    >
-                      <Icon icon="fa:check" className="mr-3" /> {t("accept")}
-                    </Button>
-                    <Button
-                      onClick={() => actionApproval("3")}
-                      className="bg-orange-400 hover:bg-orange-300"
-                      type="button"
-                    >
-                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
-                      {t("revision")}
-                    </Button>
-                    <Button
-                      onClick={() => actionApproval("4")}
-                      color="destructive"
-                      type="button"
-                    >
-                      <Icon icon="fa:times" className="mr-3" />
-                      {t("reject")}
-                    </Button>
-                  </div>
-                )
-              ) : (
-                ""
-              )}
 
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
                 <DialogContent size="md">
@@ -715,7 +683,18 @@ export default function FormAudioDetail() {
                           key={file.id}
                           className="flex flex-row gap-2 items-center"
                         >
-                          <img src={file.url} className="w-[200px]" />
+                          {/* <img src={file.url} className="w-[200px]" /> */}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="48"
+                            height="48"
+                            viewBox="0 0 20 20"
+                          >
+                            <path
+                              fill="currentColor"
+                              d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
+                            />
+                          </svg>{" "}
                           <div className="flex flex-col gap-2 w-full">
                             <div className="flex justify-between text-sm">
                               {file.fileName}
@@ -904,6 +883,39 @@ export default function FormAudioDetail() {
                 </DialogContent>
               </Dialog>
             </Card>
+            {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
+              Number(detail?.uploadedById) == Number(userId) ? (
+                ""
+              ) : (
+                <div className="flex flex-col gap-2 p-3">
+                  <Button
+                    onClick={() => actionApproval("2")}
+                    color="primary"
+                    type="button"
+                  >
+                    <Icon icon="fa:check" className="mr-3" /> {t("accept")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("3")}
+                    className="bg-orange-400 hover:bg-orange-300"
+                    type="button"
+                  >
+                    <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                    {t("revision")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("4")}
+                    color="destructive"
+                    type="button"
+                  >
+                    <Icon icon="fa:times" className="mr-3" />
+                    {t("reject")}
+                  </Button>
+                </div>
+              )
+            ) : (
+              ""
+            )}
           </div>
         </div>
       ) : (
diff --git a/components/form/content/audio-form.tsx b/components/form/content/audio-form.tsx
index 3ff74041..8da158ab 100644
--- a/components/form/content/audio-form.tsx
+++ b/components/form/content/audio-form.tsx
@@ -148,6 +148,9 @@ export default function FormAudio() {
     onDrop: (acceptedFiles) => {
       setFiles(acceptedFiles.map((file) => Object.assign(file)));
     },
+    accept: {
+      "audio/*": [],
+    },
   });
 
   const audioSchema = z.object({
@@ -668,7 +671,18 @@ export default function FormAudio() {
       className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
     >
       <div className="flex gap-3 items-center">
-        <div className="file-preview">{renderFilePreview(file)}</div>
+        {/* <div className="file-preview">{renderFilePreview(file)}</div> */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fill="currentColor"
+            d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
+          />
+        </svg>{" "}
         <div>
           <div className=" text-sm  text-card-foreground">{file.name}</div>
           <div className=" text-xs font-light text-muted-foreground">
@@ -1015,12 +1029,12 @@ export default function FormAudio() {
                     <Fragment>
                       <div>{fileList}</div>
                       <div className=" flex justify-between gap-2">
-                        <div className="flex flex-row items-center gap-3 py-3">
+                        {/* <div className="flex flex-row items-center gap-3 py-3">
                           <Label>Gunakan Watermark</Label>
                           <div className="flex items-center gap-3">
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
-                        </div>
+                        </div> */}
                         <Button
                           color="destructive"
                           onClick={handleRemoveAllFiles}
@@ -1036,7 +1050,7 @@ export default function FormAudio() {
           </div>
         </Card>
         <div className="w-full lg:w-4/12">
-          <Card className=" h-[500px]">
+          <Card className="pb-3">
             <div className="px-3 py-3">
               <div className="space-y-2">
                 <Label>{t("creator")}</Label>
diff --git a/components/form/content/audio-update-form.tsx b/components/form/content/audio-update-form.tsx
index 697946ff..4c9cb9a1 100644
--- a/components/form/content/audio-update-form.tsx
+++ b/components/form/content/audio-update-form.tsx
@@ -148,6 +148,7 @@ export default function FormAudioUpdate() {
     polres: false,
   });
   const [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [prevFiles, setPrefFiles] = useState([]);
 
   let fileTypeId = "4";
 
@@ -155,6 +156,9 @@ export default function FormAudioUpdate() {
     onDrop: (acceptedFiles) => {
       setFiles(acceptedFiles.map((file) => Object.assign(file)));
     },
+    accept: {
+      "audio/*": [],
+    },
   });
   const {
     control,
@@ -242,7 +246,8 @@ export default function FormAudioUpdate() {
         setDetail(details);
 
         if (details?.files) {
-          setFiles(details.files);
+          setPrefFiles(details.files);
+          // setFiles(details.files);
           const initialOptions: { [key: number]: string[] } = {};
           details.files.forEach((file: any) => {
             if (file.placements) {
@@ -505,11 +510,11 @@ export default function FormAudioUpdate() {
     }
   };
 
-  // const handleRemoveFile = (file: FileWithPreview) => {
-  //   const uploadedFiles = files;
-  //   const filtered = uploadedFiles.filter((i) => i.name !== file.name);
-  //   setFiles([...filtered]);
-  // };
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
 
   const fileList = files.map((file: any) => (
     <div
@@ -517,7 +522,17 @@ export default function FormAudioUpdate() {
       className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
     >
       <div className="flex gap-3 items-center">
-        <div className="file-preview">{renderFilePreview(file)}</div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fill="currentColor"
+            d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
+          />
+        </svg>{" "}
         <div>
           <div className="text-sm text-card-foreground">
             {file.fileName || file.name}
@@ -538,7 +553,7 @@ export default function FormAudioUpdate() {
         color="destructive"
         variant="outline"
         className="border-none rounded-full"
-        onClick={() => handleDeleteFile(file.id)} // Kirim ID spesifik
+        onClick={() => handleRemoveFile(file)} // Kirim ID spesifik
       >
         <Icon icon="tabler:x" className="h-5 w-5" />
       </Button>
@@ -723,12 +738,12 @@ export default function FormAudioUpdate() {
                       <Fragment>
                         <div>{fileList}</div>
                         <div className=" flex justify-between gap-2">
-                          <div className="flex flex-row items-center gap-3 py-3">
+                          {/* <div className="flex flex-row items-center gap-3 py-3">
                             <Label>{t("watermark")}</Label>
                             <div className="flex items-center gap-3">
                               <Switch defaultChecked color="primary" id="c2" />
                             </div>
-                          </div>
+                          </div> */}
                           {/* <Button
                             color="destructive"
                             onClick={handleRemoveAllFiles}
@@ -738,7 +753,59 @@ export default function FormAudioUpdate() {
                         </div>
                       </Fragment>
                     ) : null}
-                    {files.length > 0 && (
+                    {prevFiles?.length > 0 &&
+                      prevFiles.map((file: any) => (
+                        <div
+                          key={file.id} // Gunakan ID file sebagai key
+                          className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
+                        >
+                          <div className="flex gap-3 items-center">
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="48"
+                              height="48"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
+                              />
+                            </svg>{" "}
+                            <div>
+                              <div className="text-sm text-card-foreground">
+                                {file.fileName || file.name}
+                              </div>
+                              <div className="text-xs font-light text-muted-foreground">
+                                {Math.round(file.size / 100) / 10 > 1000 ? (
+                                  <>
+                                    {(
+                                      Math.round(file.size / 100) / 10000
+                                    ).toFixed(1)}
+                                  </>
+                                ) : (
+                                  <>
+                                    {(Math.round(file.size / 100) / 10).toFixed(
+                                      1
+                                    )}
+                                  </>
+                                )}
+                                {" kb"}
+                              </div>
+                            </div>
+                          </div>
+
+                          <Button
+                            size="icon"
+                            color="destructive"
+                            variant="outline"
+                            className="border-none rounded-full"
+                            onClick={() => handleDeleteFile(file.id)} // Kirim ID spesifik
+                          >
+                            <Icon icon="tabler:x" className="h-5 w-5" />
+                          </Button>
+                        </div>
+                      ))}
+                    {/* {files.length > 0 && (
                       <div className="mt-4">
                         <Label className="text-lg font-semibold">
                           {" "}
@@ -844,14 +911,14 @@ export default function FormAudioUpdate() {
                           ))}
                         </div>
                       </div>
-                    )}
+                    )} */}
                   </Fragment>
                 </div>
               </div>
             </div>
           </Card>
           <div className="w-full lg:w-4/12">
-            <Card className=" h-[800px]">
+            <Card className="pb-3">
               <div className="px-3 py-3">
                 <div className="space-y-2">
                   <Label>{t("creator")}</Label>
@@ -930,14 +997,14 @@ export default function FormAudioUpdate() {
                   ))}
                 </div>
               </div>
-              <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
+              {/* <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                 <MailIcon />
                 <p className="">{t("suggestion-box")} (0)</p>
               </div>
               <div className="px-3 py-3">
                 <p>{t("information")}:</p>
-                {/* <p>{detail?.status}</p> */}
-              </div>
+                <p>{detail?.status}</p>
+              </div> */}
             </Card>
             <div className="flex flex-row justify-end gap-3">
               <div className="mt-4">
diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx
index cc0b1e5a..3cd600ca 100644
--- a/components/form/content/image-detail-form.tsx
+++ b/components/form/content/image-detail-form.tsx
@@ -333,6 +333,8 @@ export default function FormImageDetail() {
       message: description,
       files: isUserMabesApprover ? getPlacement() : [],
     };
+
+    setModalOpen(false);
     loading();
     const response = await submitApproval(data);
 
@@ -551,7 +553,7 @@ export default function FormImageDetail() {
             </div>
           </Card>
           <div className="w-full lg:w-4/12">
-            <Card className=" h-[1050px]">
+            <Card className="pb-3">
               <div className="px-3 py-3">
                 <div className="space-y-2">
                   <Label>{t("creator")}</Label>
@@ -695,40 +697,6 @@ export default function FormImageDetail() {
               ) : (
                 ""
               )} */}
-              {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
-                Number(detail?.uploadedById) == Number(userId) ? (
-                  ""
-                ) : (
-                  <div className="flex flex-col gap-2 p-3">
-                    <Button
-                      onClick={() => actionApproval("2")}
-                      color="primary"
-                      type="button"
-                    >
-                      <Icon icon="fa:check" className="mr-3" />
-                      {t("accept")}
-                    </Button>
-                    <Button
-                      onClick={() => actionApproval("3")}
-                      className="bg-orange-400 hover:bg-orange-300"
-                      type="button"
-                    >
-                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
-                      {t("revision")}
-                    </Button>
-                    <Button
-                      onClick={() => actionApproval("4")}
-                      color="destructive"
-                      type="button"
-                    >
-                      <Icon icon="fa:times" className="mr-3" />
-                      {t("reject")}
-                    </Button>
-                  </div>
-                )
-              ) : (
-                ""
-              )}
 
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
                 <DialogContent className="min-w-max h-[600px] overflow-y-auto">
@@ -939,6 +907,40 @@ export default function FormImageDetail() {
                 </DialogContent>
               </Dialog>
             </Card>
+            {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
+              Number(detail?.uploadedById) == Number(userId) ? (
+                ""
+              ) : (
+                <div className="flex flex-col gap-2 p-3">
+                  <Button
+                    onClick={() => actionApproval("2")}
+                    color="primary"
+                    type="button"
+                  >
+                    <Icon icon="fa:check" className="mr-3" />
+                    {t("accept")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("3")}
+                    className="bg-orange-400 hover:bg-orange-300"
+                    type="button"
+                  >
+                    <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                    {t("revision")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("4")}
+                    color="destructive"
+                    type="button"
+                  >
+                    <Icon icon="fa:times" className="mr-3" />
+                    {t("reject")}
+                  </Button>
+                </div>
+              )
+            ) : (
+              ""
+            )}
           </div>
         </div>
       ) : (
diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx
index 669abf69..58933e16 100644
--- a/components/form/content/image-form.tsx
+++ b/components/form/content/image-form.tsx
@@ -157,6 +157,9 @@ export default function FormImage() {
     onDrop: (acceptedFiles) => {
       setFiles(acceptedFiles.map((file) => Object.assign(file)));
     },
+    accept: {
+      "image/*": [],
+    },
   });
 
   const imageSchema = z.object({
@@ -1020,12 +1023,12 @@ export default function FormImage() {
                     <Fragment>
                       <div>{fileList}</div>
                       <div className=" flex justify-between gap-2">
-                        <div className="flex flex-row items-center gap-3 py-3">
+                        {/* <div className="flex flex-row items-center gap-3 py-3">
                           <Label>{t("watermark")}</Label>
                           <div className="flex items-center gap-3">
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
-                        </div>
+                        </div> */}
                         <Button
                           color="destructive"
                           onClick={handleRemoveAllFiles}
diff --git a/components/form/content/image-update-form.tsx b/components/form/content/image-update-form.tsx
index 96396a55..7391cf2c 100644
--- a/components/form/content/image-update-form.tsx
+++ b/components/form/content/image-update-form.tsx
@@ -160,6 +160,9 @@ export default function FormImageUpdate() {
     onDrop: (acceptedFiles) => {
       setFiles(acceptedFiles.map((file) => Object.assign(file)));
     },
+    accept: {
+      "image/*": [],
+    },
   });
 
   const {
diff --git a/components/form/content/teks-detail-form.tsx b/components/form/content/teks-detail-form.tsx
index a7eb6531..c9d5c6f8 100644
--- a/components/form/content/teks-detail-form.tsx
+++ b/components/form/content/teks-detail-form.tsx
@@ -334,6 +334,7 @@ export default function FormTeksDetail() {
       message: description,
       files: isUserMabesApprover ? getPlacement() : [],
     };
+    setModalOpen(false);
 
     loading();
     const response = await submitApproval(data);
@@ -582,7 +583,7 @@ export default function FormTeksDetail() {
             </div>
           </Card>
           <div className="w-full lg:w-4/12">
-            <Card className=" h-[800px]">
+            <Card className="pb-3">
               <div className="px-3 py-3">
                 <div className="space-y-2">
                   <Label>{t("creator")}</Label>
@@ -693,39 +694,6 @@ export default function FormTeksDetail() {
               ) : (
                 ""
               )} */}
-              {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
-                Number(detail?.uploadedById) == Number(userId) ? (
-                  ""
-                ) : (
-                  <div className="flex flex-col gap-2 p-3">
-                    <Button
-                      onClick={() => actionApproval("2")}
-                      color="primary"
-                      type="button"
-                    >
-                      <Icon icon="fa:check" className="mr-3" /> {t("accept")}
-                    </Button>
-                    <Button
-                      onClick={() => actionApproval("3")}
-                      className="bg-orange-400 hover:bg-orange-300"
-                      type="button"
-                    >
-                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
-                      {t("revision")}
-                    </Button>
-                    <Button
-                      onClick={() => actionApproval("4")}
-                      color="destructive"
-                      type="button"
-                    >
-                      <Icon icon="fa:times" className="mr-3" />
-                      {t("reject")}
-                    </Button>
-                  </div>
-                )
-              ) : (
-                ""
-              )}
 
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
                 <DialogContent size="md">
@@ -738,7 +706,18 @@ export default function FormTeksDetail() {
                           key={file.id}
                           className="flex flex-row gap-2 items-center"
                         >
-                          <img src={file.url} className="w-[200px]" />
+                          {/* <img src={file.url} className="w-[200px]" /> */}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="48"
+                            height="48"
+                            viewBox="0 0 16 16"
+                          >
+                            <path
+                              fill="currentColor"
+                              d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207zM7 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M7.5 9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM7 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M6 9.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M5.5 12a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"
+                            />
+                          </svg>
                           <div className="flex flex-col gap-2 w-full">
                             <div className="flex justify-between text-sm">
                               {file.fileName}
@@ -927,6 +906,39 @@ export default function FormTeksDetail() {
                 </DialogContent>
               </Dialog>
             </Card>
+            {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
+              Number(detail?.uploadedById) == Number(userId) ? (
+                ""
+              ) : (
+                <div className="flex flex-col gap-2 p-3">
+                  <Button
+                    onClick={() => actionApproval("2")}
+                    color="primary"
+                    type="button"
+                  >
+                    <Icon icon="fa:check" className="mr-3" /> {t("accept")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("3")}
+                    className="bg-orange-400 hover:bg-orange-300"
+                    type="button"
+                  >
+                    <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                    {t("revision")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("4")}
+                    color="destructive"
+                    type="button"
+                  >
+                    <Icon icon="fa:times" className="mr-3" />
+                    {t("reject")}
+                  </Button>
+                </div>
+              )
+            ) : (
+              ""
+            )}
           </div>
         </div>
       ) : (
diff --git a/components/form/content/teks-form.tsx b/components/form/content/teks-form.tsx
index ffc993b4..c9a9ce4e 100644
--- a/components/form/content/teks-form.tsx
+++ b/components/form/content/teks-form.tsx
@@ -147,6 +147,12 @@ export default function FormTeks() {
     onDrop: (acceptedFiles) => {
       setFiles(acceptedFiles.map((file) => Object.assign(file)));
     },
+    accept: {
+      "application/pdf": [],
+      "application/msword": [], // .doc
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+        [], // .docx
+    },
   });
 
   const teksSchema = z.object({
@@ -1012,12 +1018,12 @@ export default function FormTeks() {
                     <Fragment>
                       <div>{fileList}</div>
                       <div className=" flex justify-between gap-2">
-                        <div className="flex flex-row items-center gap-3 py-3">
+                        {/* <div className="flex flex-row items-center gap-3 py-3">
                           <Label>{t("watermark")}</Label>
                           <div className="flex items-center gap-3">
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
-                        </div>
+                        </div> */}
                         <Button
                           color="destructive"
                           onClick={handleRemoveAllFiles}
diff --git a/components/form/content/teks-update-form.tsx b/components/form/content/teks-update-form.tsx
index 35628479..7323b430 100644
--- a/components/form/content/teks-update-form.tsx
+++ b/components/form/content/teks-update-form.tsx
@@ -145,6 +145,12 @@ export default function FormTeksUpdate() {
     onDrop: (acceptedFiles) => {
       setFiles(acceptedFiles.map((file) => Object.assign(file)));
     },
+    accept: {
+      "application/pdf": [],
+      "application/msword": [], // .doc
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+        [], // .docx
+    },
   });
 
   const options: Option[] = [
diff --git a/components/form/content/video-detail-form.tsx b/components/form/content/video-detail-form.tsx
index ccaba67e..569304b6 100644
--- a/components/form/content/video-detail-form.tsx
+++ b/components/form/content/video-detail-form.tsx
@@ -286,19 +286,20 @@ export default function FormVideoDetail() {
       Number(status) == 2 ||
       Number(status) == 4
     ) {
-      MySwal.fire({
-        title: "Simpan Approval",
-        text: "",
-        icon: "warning",
-        showCancelButton: true,
-        cancelButtonColor: "#d33",
-        confirmButtonColor: "#3085d6",
-        confirmButtonText: "Simpan",
-      }).then((result) => {
-        if (result.isConfirmed) {
-          save();
-        }
-      });
+      save();
+
+      // MySwal.fire({
+      //   title: "Simpan Approval",
+      //   text: "",
+      //   icon: "warning",
+      //   showCancelButton: true,
+      //   cancelButtonColor: "#d33",
+      //   confirmButtonColor: "#3085d6",
+      //   confirmButtonText: "Simpan",
+      // }).then((result) => {
+      //   if (result.isConfirmed) {
+      //   }
+      // });
     }
   };
 
@@ -309,7 +310,7 @@ export default function FormVideoDetail() {
       message: description,
       files: isUserMabesApprover ? getPlacement() : [],
     };
-
+    setModalOpen(false);
     loading();
     const response = await submitApproval(data);
 
@@ -496,11 +497,11 @@ export default function FormVideoDetail() {
                       navigation={false}
                       className="w-full"
                     >
-                      {detailVideo?.map((data: any) => (
+                      {files?.map((data: any) => (
                         <SwiperSlide key={data.id}>
                           <video
                             className="object-fill h-full w-full"
-                            src={data}
+                            src={data.secondaryUrl}
                             controls
                             title={`Video ${data.id}`} // Mengganti alt dengan title
                           />
@@ -518,11 +519,11 @@ export default function FormVideoDetail() {
                         modules={[Pagination, Thumbs]}
                         // className="mySwiper2"
                       >
-                        {detailVideo?.map((data: any) => (
+                        {files?.map((data: any) => (
                           <SwiperSlide key={data.id}>
                             <video
                               className="object-cover h-[60px] w-[80px]"
-                              src={data}
+                              src={data.secondaryUrl}
                               muted
                               title={`Video ${data.id}`} // Mengganti alt dengan title
                             />
@@ -536,7 +537,7 @@ export default function FormVideoDetail() {
             </div>
           </Card>
           <div className="w-full lg:w-4/12">
-            <Card className=" h-[800px]">
+            <Card className="pb-3">
               <div className="px-3 py-3">
                 <div className="space-y-2">
                   <Label>{t("creator")}</Label>
@@ -647,39 +648,6 @@ export default function FormVideoDetail() {
               ) : (
                 ""
               )} */}
-              {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
-                Number(detail?.uploadedById) == Number(userId) ? (
-                  ""
-                ) : (
-                  <div className="flex flex-col gap-2 p-3">
-                    <Button
-                      onClick={() => actionApproval("2")}
-                      color="primary"
-                      type="button"
-                    >
-                      <Icon icon="fa:check" className="mr-3" /> {t("accept")}
-                    </Button>
-                    <Button
-                      onClick={() => actionApproval("3")}
-                      className="bg-orange-400 hover:bg-orange-300"
-                      type="button"
-                    >
-                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
-                      {t("revision")}
-                    </Button>
-                    <Button
-                      onClick={() => actionApproval("4")}
-                      color="destructive"
-                      type="button"
-                    >
-                      <Icon icon="fa:times" className="mr-3" />
-                      {t("reject")}
-                    </Button>
-                  </div>
-                )
-              ) : (
-                ""
-              )}
 
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
                 <DialogContent size="md">
@@ -692,7 +660,21 @@ export default function FormVideoDetail() {
                           key={file.id}
                           className="flex flex-row gap-2 items-center"
                         >
-                          <img src={file.url} className="w-[200px]" />
+                          {/* <img src={file.url} className="w-[200px]" /> */}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="48"
+                            height="48"
+                            viewBox="0 0 24 24"
+                          >
+                            <g fill="none" fill-rule="evenodd">
+                              <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+                              <path
+                                fill="currentColor"
+                                d="M20 3a2 2 0 0 1 1.995 1.85L22 5v14a2 2 0 0 1-1.85 1.995L20 21H4a2 2 0 0 1-1.995-1.85L2 19V5a2 2 0 0 1 1.85-1.995L4 3zm0 2H4v14h16zm-9.66 2.638l.518.23l.338.16l.387.19l.43.218l.47.25l.507.28l.266.152l.518.305l.474.292l.43.273l.38.253l.48.33l.364.263l.095.07a1.234 1.234 0 0 1 0 1.98l-.323.235l-.44.308l-.356.239l-.405.263l-.453.283l-.499.3l-.534.309l-.509.282l-.471.25l-.43.22l-.386.188l-.622.288l-.23.1a1.234 1.234 0 0 1-1.714-.99l-.058-.565l-.032-.374l-.042-.664l-.023-.508l-.015-.555l-.004-.294l-.002-.305q0-.31.006-.6l.015-.555l.023-.507l.027-.457l.03-.401l.075-.744a1.235 1.235 0 0 1 1.715-.992m.611 2.501l-.436-.218l-.029.487l-.022.551l-.013.61l-.002.325l.002.325l.013.609l.01.283l.026.52l.015.235l.434-.218l.487-.256l.535-.294l.284-.162l.551-.326l.494-.306l.436-.28l.196-.13l-.407-.27l-.466-.294a30 30 0 0 0-.803-.48l-.283-.161l-.534-.294z"
+                              />
+                            </g>
+                          </svg>
                           <div className="flex flex-col gap-2 w-full">
                             <div className="flex justify-between text-sm">
                               {file.fileName}
@@ -879,6 +861,39 @@ export default function FormVideoDetail() {
                 </DialogContent>
               </Dialog>
             </Card>
+            {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
+              Number(detail?.uploadedById) == Number(userId) ? (
+                ""
+              ) : (
+                <div className="flex flex-col gap-2 p-3">
+                  <Button
+                    onClick={() => actionApproval("2")}
+                    color="primary"
+                    type="button"
+                  >
+                    <Icon icon="fa:check" className="mr-3" /> {t("accept")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("3")}
+                    className="bg-orange-400 hover:bg-orange-300"
+                    type="button"
+                  >
+                    <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                    {t("revision")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("4")}
+                    color="destructive"
+                    type="button"
+                  >
+                    <Icon icon="fa:times" className="mr-3" />
+                    {t("reject")}
+                  </Button>
+                </div>
+              )
+            ) : (
+              ""
+            )}
           </div>
         </div>
       ) : (
diff --git a/components/form/content/video-form.tsx b/components/form/content/video-form.tsx
index e6e4be2d..e27a0a94 100644
--- a/components/form/content/video-form.tsx
+++ b/components/form/content/video-form.tsx
@@ -148,6 +148,9 @@ export default function FormVideo() {
     onDrop: (acceptedFiles) => {
       setFiles(acceptedFiles.map((file) => Object.assign(file)));
     },
+    accept: {
+      "video/*": [],
+    },
   });
 
   const videoSchema = z.object({
@@ -666,7 +669,21 @@ export default function FormVideo() {
       className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
     >
       <div className="flex gap-3 items-center">
-        <div className="file-preview">{renderFilePreview(file)}</div>
+        {/* <div className="file-preview">{renderFilePreview(file)}</div> */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 24 24"
+        >
+          <g fill="none" fillRule="evenodd">
+            <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+            <path
+              fill="currentColor"
+              d="M20 3a2 2 0 0 1 1.995 1.85L22 5v14a2 2 0 0 1-1.85 1.995L20 21H4a2 2 0 0 1-1.995-1.85L2 19V5a2 2 0 0 1 1.85-1.995L4 3zm0 2H4v14h16zm-9.66 2.638l.518.23l.338.16l.387.19l.43.218l.47.25l.507.28l.266.152l.518.305l.474.292l.43.273l.38.253l.48.33l.364.263l.095.07a1.234 1.234 0 0 1 0 1.98l-.323.235l-.44.308l-.356.239l-.405.263l-.453.283l-.499.3l-.534.309l-.509.282l-.471.25l-.43.22l-.386.188l-.622.288l-.23.1a1.234 1.234 0 0 1-1.714-.99l-.058-.565l-.032-.374l-.042-.664l-.023-.508l-.015-.555l-.004-.294l-.002-.305q0-.31.006-.6l.015-.555l.023-.507l.027-.457l.03-.401l.075-.744a1.235 1.235 0 0 1 1.715-.992m.611 2.501l-.436-.218l-.029.487l-.022.551l-.013.61l-.002.325l.002.325l.013.609l.01.283l.026.52l.015.235l.434-.218l.487-.256l.535-.294l.284-.162l.551-.326l.494-.306l.436-.28l.196-.13l-.407-.27l-.466-.294a30 30 0 0 0-.803-.48l-.283-.161l-.534-.294z"
+            />
+          </g>
+        </svg>
         <div>
           <div className=" text-sm  text-card-foreground">{file.name}</div>
           <div className=" text-xs font-light text-muted-foreground">
@@ -1011,12 +1028,12 @@ export default function FormVideo() {
                     <Fragment>
                       <div>{fileList}</div>
                       <div className=" flex justify-between gap-2">
-                        <div className="flex flex-row items-center gap-3 py-3">
+                        {/* <div className="flex flex-row items-center gap-3 py-3">
                           <Label>{t("watermark")}</Label>
                           <div className="flex items-center gap-3">
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
-                        </div>
+                        </div> */}
                         <Button
                           color="destructive"
                           onClick={handleRemoveAllFiles}
diff --git a/components/form/content/video-update-form.tsx b/components/form/content/video-update-form.tsx
index 7821af75..c081082b 100644
--- a/components/form/content/video-update-form.tsx
+++ b/components/form/content/video-update-form.tsx
@@ -162,6 +162,9 @@ export default function FormVideoUpdate() {
     onDrop: (acceptedFiles) => {
       setFiles(acceptedFiles.map((file) => Object.assign(file)));
     },
+    accept: {
+      "video/*": [],
+    },
   });
 
   const {
diff --git a/components/modal/approval-history-modal.tsx b/components/modal/approval-history-modal.tsx
index 9eed49d3..68abb743 100644
--- a/components/modal/approval-history-modal.tsx
+++ b/components/modal/approval-history-modal.tsx
@@ -33,7 +33,7 @@ export default function ApprovalHistoryModal(props: { id: number }) {
         </a>
       </DialogTrigger>
       <DialogContent size="md" className="px-1 lg:px-4">
-        <div className="grid grid-cols-6 font-light text-sm">
+        <div className="grid grid-cols-2 md:grid-cols-6 font-light text-sm">
           <div className="col-span-2 flex justify-center">
             <p className="px-12 py-4 rounded-full bg-cyan-200 ">Upload</p>
           </div>
@@ -69,10 +69,10 @@ export default function ApprovalHistoryModal(props: { id: number }) {
                     <p>Direview oleh: {list.approvalBy.fullname}</p>
                   </div>
                 </div>
-                <div className="col-span-1 flex justify-center items-center">
+                <div className="col-span-1 hidden md:flex justify-center items-center">
                   <ChevronRightIcon />
                 </div>
-                <div className="col-span-3 flex items-center">
+                <div className="col-span-3 flex items-center mt-2 md:mt-0">
                   <div
                     className={`flex flex-col p-4 w-full rounded-lg ${
                       list.status.id == 2
diff --git a/components/partials/auth/login-form.tsx b/components/partials/auth/login-form.tsx
index c644fd62..a85555b0 100644
--- a/components/partials/auth/login-form.tsx
+++ b/components/partials/auth/login-form.tsx
@@ -279,15 +279,17 @@ const LoginForm = () => {
       return false;
     }
     const msg = response?.data?.message;
-    if (msg == "Continue to setup email") {
-      setStep(2);
-    } else if (msg == "Email is valid and OTP has been sent") {
-      setStep(3);
-    } else if (msg == "Username & password valid") {
-      onSubmit(data);
-    } else {
-      error("Username / password incorrect");
-    }
+    onSubmit(data);
+
+    // if (msg == "Continue to setup email") {
+    //   setStep(2);
+    // } else if (msg == "Email is valid and OTP has been sent") {
+    //   setStep(3);
+    // } else if (msg == "Username & password valid") {
+    //   onSubmit(data);
+    // } else {
+    //   error("Username / password incorrect");
+    // }
     // else {
     //   setStep(1);
     // }