fixing

app/[locale]/(protected)/contributor/schedule/calendar-polri/component/calendar-polri-table.tsx

@@ -60,7 +60,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Label } from "@/components/ui/label";
-import { CalendarPolriAdd } from "@/components/form/schedule/form-calendar-polri";
 
 const CalendarPolriTable = () => {
   const router = useRouter();
@@ -75,7 +74,7 @@ const CalendarPolriTable = () => {
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
-  const [showData, setShowData] = React.useState("50");
+  const [showData, setShowData] = React.useState("10");
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: Number(showData),
@@ -161,7 +160,8 @@ const CalendarPolriTable = () => {
         <CardTitle>
           <div className="flex items-center">
             <div className="flex-1 text-xl font-medium text-default-900">
-              {t("calendar-polri", { defaultValue: "Calendar Polri" })} {t("schedule", { defaultValue: "Schedule" })}
+              {t("calendar-polri", { defaultValue: "Calendar Polri" })}{" "}
+              {t("schedule", { defaultValue: "Schedule" })}
             </div>
             <div className="flex-none">
               <Link href={"/contributor/schedule/calendar-polri/create"}>

app/[locale]/(protected)/contributor/schedule/live-report/component/live-report-table.tsx

@@ -80,7 +80,7 @@ const LiveReportTable = () => {
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
-  const [showData, setShowData] = React.useState("50");
+  const [showData, setShowData] = React.useState("10");
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: Number(showData),

components/form/content/audio-detail-form.tsx

@@ -151,15 +151,13 @@ export default function FormAudioDetail() {
   const [files, setFiles] = useState<FileType[]>([]);
   const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
   const [detailThumb, setDetailThumb] = useState<string[]>([]);
-
   const waveSurferRef = useRef<any>(null);
   const waveSurfersRef = useRef<WaveSurfer[]>([]);
   const [isPlayingIndex, setIsPlayingIndex] = useState<number | null>(null);
-
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
   const [isPlaying, setIsPlaying] = useState(false);
   const [approval, setApproval] = useState<any>();
-
+  
   const onDrop = (acceptedFiles: File[]) => {
     setUploadedFiles(acceptedFiles);
     const blobUrls = acceptedFiles.map((file) => URL.createObjectURL(file));

components/form/content/audio-form.tsx

@@ -179,9 +179,13 @@ export default function FormAudio() {
       const filesWithPreview = acceptedFiles.map((file) =>
         Object.assign(file, { preview: URL.createObjectURL(file) })
       );
-      setFiles(filesWithPreview);
 
-      setValue("files", filesWithPreview, { shouldValidate: true });
+      setFiles((prevFiles) => [...prevFiles, ...filesWithPreview]);
+
+      const prevFiles = getValues("files") || [];
+      setValue("files", [...prevFiles, ...filesWithPreview], {
+        shouldValidate: true,
+      });
     },
   });
 
@@ -570,7 +574,6 @@ export default function FormAudio() {
       Cookies.set("idCreate", response?.data?.data, { expires: 1 });
       id = response?.data?.data;
 
-      // Upload Thumbnail
       const formMedia = new FormData();
       console.log("Thumbnail : ", files[0]);
       formMedia.append("file", files[0]);
@@ -581,7 +584,6 @@ export default function FormAudio() {
       }
     }
 
-    // Upload File
     const progressInfoArr = [];
     for (const item of files) {
       progressInfoArr.push({ percentage: 0, fileName: item.name });
@@ -645,7 +647,7 @@ export default function FormAudio() {
         filename: file.name,
         filetype: file.type,
         duration,
-        isWatermark: "false", // hardcode
+        isWatermark: "false", 
       },
       onBeforeRequest: function (req) {
         var xhr = req.getUnderlyingObject();
@@ -787,7 +789,6 @@ export default function FormAudio() {
   };
 
   useEffect(() => {
-    // Jika input title kosong, isi dengan hasil generate title
     if (!getValues("title") && title) {
       setValue("title", title);
     }
@@ -801,7 +802,7 @@ export default function FormAudio() {
       lang: "id",
       contextType: "text",
       urlContext: null,
-      context: editorContent, // Ambil isi editor original
+      context: editorContent,
       createdBy: roleId,
       sentiment: "Humorous",
       clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",

components/form/content/spit-convert-form.tsx

@@ -757,7 +757,7 @@ export default function FormConvertSPIT() {
                       render={({ field }) => (
                         <CustomEditor
                           onChange={field.onChange}
-                          initialData={detail?.contentDescription}
+                          initialData={field.value}
                         />
                       )}
                     />

components/form/content/video-detail-form.tsx

@@ -252,9 +252,9 @@ export default function FormVideoDetail() {
           setSelectedTarget(matchingCategory.name);
         }
 
-        setSelectedTarget(details.categoryId); // Untuk dropdown
+        setSelectedTarget(details?.categoryId); 
 
-        const filesData = details.files || [];
+        const filesData = details?.files || [];
         const fileUrls = filesData.map((files: { url: string }) =>
           files.url ? files.url : "default-image.jpg"
         );

components/main/audio-detail.tsx

@@ -274,13 +274,13 @@ const DetailAudio = () => {
   };
 
   const sizes = [
-    { label: "MP3", value: "... MB" },
+    { label: "MP3", value: "100 MB" },
-    { label: "WAV", value: "... MB" },
+    { label: "WAV", value: "100 MB" },
   ];
 
   const handleShare = (type: any, url: any) => {
     if (Number(userRoleId) < 1 || userRoleId == undefined) {
-      router.push("/auth/login");
+      router.push("/auth");
     } else {
       sendActivityLog(2);
       sendActivityLog(4);
@@ -641,6 +641,40 @@ const DetailAudio = () => {
                 defaultValue={volume}
               />
             </div>
+            {/* audio kedua bawah */}
+            <div className="py-4 flex flex-row gap-3">
+              <div className="flex flex-col gap-2">
+                {detailDataAudio?.files?.map((file: any, index: number) => (
+                  <a
+                    onClick={() =>
+                      setMain({
+                        id: detailDataAudio.files[index]?.id,
+                        type: detailDataAudio.fileType.name,
+                        url:
+                          Number(detailDataAudio.fileType?.id) == 4
+                            ? detailDataAudio.files[index]?.secondaryUrl
+                            : Number(detailDataAudio.fileType?.id) == 2
+                            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${detailDataAudio.files[0]?.id}&operation=file&type=video`
+                            : detailDataAudio.files[index]?.url,
+                        thumbnailFileUrl:
+                          detailDataAudio.files[index]?.thumbnailFileUrl,
+                        names: detailDataAudio.files[index]?.fileName,
+                        format: detailDataAudio.files[index]?.format,
+                        widthPixel: detailDataAudio.files[index]?.widthPixel,
+                        heightPixel: detailDataAudio.files[index]?.heightPixel,
+                        size: detailDataAudio.files[index]?.size,
+                        caption: detailDataAudio.files[index]?.caption,
+                      })
+                    }
+                    key={file?.id}
+                  >
+                    <p className="cursor-pointer">
+                      {file.fileName} | {index + 1}
+                    </p>
+                  </a>
+                ))}
+              </div>
+            </div>
 
             {/* Footer Informasi */}
             <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
@@ -655,7 +689,8 @@ const DetailAudio = () => {
                   &nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })} {detailDataAudio?.updatedAt} WIB &nbsp;|&nbsp;
                 </p> */}
                 <p className="text-xs lg:text-sm">
-                  &nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}&nbsp;
+                  &nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}
+                  &nbsp;
                   {formatDateToIndonesian(
                     new Date(detailDataAudio?.updatedAt)
                   )}{" "}
@@ -669,7 +704,8 @@ const DetailAudio = () => {
               </div>
               <div className="mt-3">
                 <p className="flex text-end text-xs lg:text-sm font-semibold">
-                  {t("creator", { defaultValue: "Creator" })} {detailDataAudio?.creatorName}
+                  {t("creator", { defaultValue: "Creator" })}{" "}
+                  {detailDataAudio?.creatorName}
                 </p>
               </div>
             </div>
@@ -695,7 +731,9 @@ const DetailAudio = () => {
                 className="flex flex-col mb-3 items-center justify-center cursor-pointer"
               >
                 <Icon icon="material-symbols:bookmark" width={40} />
-                <p className="text-base lg:text-lg">{t("delete", { defaultValue: "Delete" })}</p>
+                <p className="text-base lg:text-lg">
+                  {t("delete", { defaultValue: "Delete" })}
+                </p>
               </a>
             ) : (
               <a
@@ -703,7 +741,9 @@ const DetailAudio = () => {
                 className="flex flex-col mb-3 items-center justify-center cursor-pointer"
               >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
-                <p className="text-base lg:text-lg">{t("save", { defaultValue: "Save" })}</p>
+                <p className="text-base lg:text-lg">
+                  {t("save", { defaultValue: "Save" })}
+                </p>
               </a>
             )}
 
@@ -745,7 +785,7 @@ const DetailAudio = () => {
                     key={size.label}
                     className="items-center flex flex-row  gap-2 cursor-pointer"
                   >
-                    <input
+                    <Input
                       type="radio"
                       name="size"
                       value={size.label}
@@ -770,7 +810,9 @@ const DetailAudio = () => {
                   className="text-red-600 focus:ring-red-600"
                   onChange={() => setIsDownloadAll(!isDownloadAll)}
                 />
-                <span>{t("downloadAll", { defaultValue: "Download All" })}</span>
+                <span>
+                  {t("downloadAll", { defaultValue: "Download All" })}
+                </span>
               </label>
             </div>
 
@@ -795,7 +837,49 @@ const DetailAudio = () => {
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row py-3">
-              <p className="text-base font-semibold">{t("share", { defaultValue: "Share" })}</p>
+              <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button className="w-full flex items-center gap-2">
+                      {/* <Icon icon="oi:share" fontSize={20} /> */}
+                      <p className="text-base font-semibold mb-2">
+                        {t("share", { defaultValue: "Share" })}
+                      </p>
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <div className="flex flex-col">
+                      <h1 className="mb-2">
+                        {t("shareTo", { defaultValue: "Share To" })}
+                      </h1>
+                      <div className="flex flex-col mb-2">
+                        <p className="text-base font-semibold mb-1">
+                          {t("destinationEmail", {
+                            defaultValue: "Destination Email",
+                          })}
+                        </p>
+                        <Input
+                          value={emailShareInput}
+                          onChange={(event) =>
+                            setEmailShareInput(event.target.value)
+                          }
+                          onKeyPress={handleEmailList}
+                          type="email"
+                          placeholder={t("pressEnter", {
+                            defaultValue: "Press Enter",
+                          })}
+                        />
+                      </div>
+                      <Button
+                        className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                        onClick={() => shareToEmail()}
+                      >
+                        {t("send", { defaultValue: "Send" })}
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>{" "}
               <a
                 className="ml-8 cursor-pointer"
                 onClick={() =>
@@ -861,10 +945,14 @@ const DetailAudio = () => {
                 </PopoverTrigger>
                 <PopoverContent>
                   <div className="flex flex-col">
-                    <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                    <h1 className="mb-2">
+                      {t("shareTo", { defaultValue: "Share To" })}
+                    </h1>
                     <div className="flex flex-col mb-2">
                       <p className="text-base font-semibold mb-1">
-                        {t("destinationEmail", { defaultValue: "Destination Email" })}
+                        {t("destinationEmail", {
+                          defaultValue: "Destination Email",
+                        })}
                       </p>
                       <Input
                         value={emailShareInput}
@@ -873,7 +961,9 @@ const DetailAudio = () => {
                         }
                         onKeyPress={handleEmailList}
                         type="email"
-                        placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
+                        placeholder={t("pressEnter", {
+                          defaultValue: "Press Enter",
+                        })}
                       />
                     </div>
                     <Button
@@ -895,7 +985,9 @@ const DetailAudio = () => {
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <div className="flex flex-col">
-              <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+              <h1 className="mb-2">
+                {t("shareTo", { defaultValue: "Share To" })}
+              </h1>
               <div className="flex flex-col mb-2">
                 <p className="text-base font-semibold mb-1">
                   {t("destinationEmail", { defaultValue: "Destination Email" })}
@@ -989,7 +1081,9 @@ const DetailAudio = () => {
                     <Textarea
                       id={`input-comment-${data.id}`}
                       className="p-4 focus:outline-none focus:border-sky-500"
-                      placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
+                      placeholder={t("enterReply", {
+                        defaultValue: "Enter Reply",
+                      })}
                     />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
@@ -1079,7 +1173,9 @@ const DetailAudio = () => {
                               name=""
                               className="mt-2 "
                               id={`input-comment-${child1.id}`}
-                              placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
+                              placeholder={t("enterReply", {
+                                defaultValue: "Enter Reply",
+                              })}
                             />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
@@ -1148,7 +1244,9 @@ const DetailAudio = () => {
                                         }
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("reply", { defaultValue: "Reply" })}
+                                          {t("reply", {
+                                            defaultValue: "Reply",
+                                          })}
                                         </small>
                                       </a>
                                       <a
@@ -1163,7 +1261,9 @@ const DetailAudio = () => {
                                         onClick={() => deleteData(child2.id)}
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("delete", { defaultValue: "Delete" })}
+                                          {t("delete", {
+                                            defaultValue: "Delete",
+                                          })}
                                         </small>
                                       </a>
                                     </div>
@@ -1194,7 +1294,9 @@ const DetailAudio = () => {
                                         }
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("cancel", { defaultValue: "Cancel" })}
+                                          {t("cancel", {
+                                            defaultValue: "Cancel",
+                                          })}
                                         </small>
                                       </a>
                                     </div>

components/main/document-detail.tsx

@@ -270,7 +270,7 @@ const DetailDocument = () => {
 
   const handleShare = (type: any, url: any) => {
     if (Number(userRoleId) < 1 || userRoleId == undefined) {
-      router.push("/auth/login");
+      router.push("/auth");
     } else {
       sendActivityLog(2);
       sendActivityLog(4);
@@ -494,7 +494,8 @@ const DetailDocument = () => {
                   &nbsp;|&nbsp; {t("updatedOn", { defaultValue: "Updated On" })} {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;
                 </p> */}
                 <p className="text-xs lg:text-sm">
-                  &nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}&nbsp;
+                  &nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}
+                  &nbsp;
                   {formatDateToIndonesian(
                     new Date(detailDataDocument?.updatedAt)
                   )}{" "}
@@ -536,7 +537,9 @@ const DetailDocument = () => {
                 className="flex flex-col mb-3 items-center justify-center cursor-pointer"
               >
                 <Icon icon="material-symbols:bookmark" width={40} />
-                <p className="text-base lg:text-lg">{t("delete", { defaultValue: "Delete" })}</p>
+                <p className="text-base lg:text-lg">
+                  {t("delete", { defaultValue: "Delete" })}
+                </p>
               </a>
             ) : (
               <a
@@ -544,7 +547,9 @@ const DetailDocument = () => {
                 className="flex flex-col mb-3 items-center justify-center cursor-pointer"
               >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
-                <p className="text-base lg:text-lg">{t("save", { defaultValue: "Save" })}</p>
+                <p className="text-base lg:text-lg">
+                  {t("save", { defaultValue: "Save" })}
+                </p>
               </a>
             )}
 
@@ -609,7 +614,9 @@ const DetailDocument = () => {
                   className="text-red-600 focus:ring-red-600"
                   onChange={() => setIsDownloadAll(!isDownloadAll)}
                 />
-                <span>{t("downloadAll", { defaultValue: "Download All" })}</span>
+                <span>
+                  {t("downloadAll", { defaultValue: "Download All" })}
+                </span>
               </label>
             </div>
 
@@ -634,27 +641,49 @@ const DetailDocument = () => {
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row py-3">
-              <div className="flex flex-col">
+              <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
-                <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                <Popover>
-                <div className="flex flex-col mb-2">
+                  <PopoverTrigger asChild>
-                  <p className="text-base font-semibold mb-1">
+                    <button className="w-full flex items-center gap-2">
-                    {t("destinationEmail", { defaultValue: "Destination Email" })}
+                      {/* <Icon icon="oi:share" fontSize={20} /> */}
-                  </p>
+                      <p className="text-base font-semibold mb-2">
-                  <Input
+                        {t("share", { defaultValue: "Share" })}
-                    value={emailShareInput}
+                      </p>
-                    onChange={(event) => setEmailShareInput(event.target.value)}
+                    </button>
-                    onKeyPress={handleEmailList}
+                  </PopoverTrigger>
-                    type="email"
+                  <PopoverContent>
-                    placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
+                    <div className="flex flex-col">
-                  />
+                      <h1 className="mb-2">
-                </div>
+                        {t("shareTo", { defaultValue: "Share To" })}
-                <Button
+                      </h1>
-                  className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                      <div className="flex flex-col mb-2">
-                  onClick={() => shareToEmail()}
+                        <p className="text-base font-semibold mb-1">
-                >
+                          {t("destinationEmail", {
-                  {t("send", { defaultValue: "Send" })}
+                            defaultValue: "Destination Email",
-                </Button>
+                          })}
-              </div>{" "}
+                        </p>
+                        <Input
+                          value={emailShareInput}
+                          onChange={(event) =>
+                            setEmailShareInput(event.target.value)
+                          }
+                          onKeyPress={handleEmailList}
+                          type="email"
+                          placeholder={t("pressEnter", {
+                            defaultValue: "Press Enter",
+                          })}
+                        />
+                      </div>
+                      <Button
+                        className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                        onClick={() => shareToEmail()}
+                      >
+                        {t("send", { defaultValue: "Send" })}
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
               <a
                 className="ml-8 cursor-pointer"
                 onClick={() =>
@@ -720,10 +749,14 @@ const DetailDocument = () => {
                 </PopoverTrigger>
                 <PopoverContent>
                   <div className="flex flex-col">
-                    <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                    <h1 className="mb-2">
+                      {t("shareTo", { defaultValue: "Share To" })}
+                    </h1>
                     <div className="flex flex-col mb-2">
                       <p className="text-base font-semibold mb-1">
-                        {t("destinationEmail", { defaultValue: "Destination Email" })}
+                        {t("destinationEmail", {
+                          defaultValue: "Destination Email",
+                        })}
                       </p>
                       <Input
                         value={emailShareInput}
@@ -732,7 +765,9 @@ const DetailDocument = () => {
                         }
                         onKeyPress={handleEmailList}
                         type="email"
-                        placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
+                        placeholder={t("pressEnter", {
+                          defaultValue: "Press Enter",
+                        })}
                       />
                     </div>
                     <Button
@@ -753,7 +788,9 @@ const DetailDocument = () => {
         {/* Comment */}
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
-            <p className="flex items-start text-lg">{t("comment", { defaultValue: "Comment" })}</p>
+            <p className="flex items-start text-lg">
+              {t("comment", { defaultValue: "Comment" })}
+            </p>
             <Textarea
               placeholder="Type your comments here."
               className="flex w-full pb-12"
@@ -828,7 +865,9 @@ const DetailDocument = () => {
                     <Textarea
                       id={`input-comment-${data.id}`}
                       className="p-4 focus:outline-none focus:border-sky-500"
-                      placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
+                      placeholder={t("enterReply", {
+                        defaultValue: "Enter Reply",
+                      })}
                     />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
@@ -918,7 +957,9 @@ const DetailDocument = () => {
                               name=""
                               className="mt-2 "
                               id={`input-comment-${child1.id}`}
-                              placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
+                              placeholder={t("enterReply", {
+                                defaultValue: "Enter Reply",
+                              })}
                             />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
@@ -987,7 +1028,9 @@ const DetailDocument = () => {
                                         }
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("reply", { defaultValue: "Reply" })}
+                                          {t("reply", {
+                                            defaultValue: "Reply",
+                                          })}
                                         </small>
                                       </a>
                                       <a
@@ -1002,7 +1045,9 @@ const DetailDocument = () => {
                                         onClick={() => deleteData(child2.id)}
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("delete", { defaultValue: "Delete" })}
+                                          {t("delete", {
+                                            defaultValue: "Delete",
+                                          })}
                                         </small>
                                       </a>
                                     </div>
@@ -1017,7 +1062,9 @@ const DetailDocument = () => {
                                       name=""
                                       id={`input-comment-${child2.id}`}
                                       className="my-2"
-                                      placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
+                                      placeholder={t("enterReply", {
+                                        defaultValue: "Enter Reply",
+                                      })}
                                     />
                                     <div className="flex flex-row gap-3">
                                       <a
@@ -1033,7 +1080,9 @@ const DetailDocument = () => {
                                         }
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("cancel", { defaultValue: "Cancel" })}
+                                          {t("cancel", {
+                                            defaultValue: "Cancel",
+                                          })}
                                         </small>
                                       </a>
                                     </div>

components/main/image-detail.tsx

@@ -62,7 +62,7 @@ const DetailImage = (data: any) => {
   const [isFromSPIT, setIsFromSPIT] = useState(false);
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
-  const [imageSizeSelected, setImageSizeSelected] = useState("l");
+  const [imageSizeSelected, setImageSizeSelected] = useState("L");
   const userId = getCookiesDecrypt("uie");
   const [content, setContent] = useState<any>([]);
   const [emailShareList, setEmailShareList] = useState<any>();
@@ -221,6 +221,11 @@ const DetailImage = (data: any) => {
 
   const handleDownload = () => {
     if (downloadProgress === 0) {
+      if (!imageSizeSelected) {
+        alert("Please select an image size before downloading.");
+        return;
+      }
+
       if (!userId) {
         router.push("/auth");
       } else {
@@ -310,7 +315,7 @@ const DetailImage = (data: any) => {
 
   const handleShare = (type: any, url: any) => {
     if (Number(userRoleId) < 1 || userRoleId == undefined) {
-      router.push("/auth/login");
+      router.push("/auth");
     } else {
       sendActivityLog(2);
       sendActivityLog(4);
@@ -579,7 +584,8 @@ const DetailImage = (data: any) => {
                   {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
                 </p> */}
                 <p className="text-xs lg:text-sm">
-                  &nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}&nbsp;
+                  &nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}
+                  &nbsp;
                   {formatDateToIndonesian(
                     new Date(detailDataImage?.updatedAt)
                   )}{" "}
@@ -624,7 +630,9 @@ const DetailImage = (data: any) => {
                 className="flex flex-col mb-3 items-center justify-center cursor-pointer"
               >
                 <Icon icon="material-symbols:bookmark" width={40} />
-                <p className="text-base lg:text-lg">{t("delete", { defaultValue: "Delete" })}</p>
+                <p className="text-base lg:text-lg">
+                  {t("delete", { defaultValue: "Delete" })}
+                </p>
               </a>
             ) : (
               <a
@@ -632,7 +640,9 @@ const DetailImage = (data: any) => {
                 className="flex flex-col mb-3 items-center justify-center cursor-pointer"
               >
                 <Icon icon="material-symbols:bookmark-outline" width={25} />
-                <p className="text-base lg:text-sm">{t("save", { defaultValue: "Save" })}</p>
+                <p className="text-base lg:text-sm">
+                  {t("save", { defaultValue: "Save" })}
+                </p>
               </a>
             )}
 
@@ -681,7 +691,10 @@ const DetailImage = (data: any) => {
                       name="size"
                       value={size?.label}
                       checked={selectedSize === size?.label}
-                      onChange={(e) => setImageSizeSelected(e.target.value)}
+                      onChange={(e) => {
+                        setSelectedSize(e.target.value);
+                        setImageSizeSelected(e.target.value);
+                      }}
                       className="text-red-600 focus:ring-red-600"
                     />
                     <div className="text-sm">{size?.label}</div>
@@ -699,7 +712,9 @@ const DetailImage = (data: any) => {
                   className="text-red-600 focus:ring-red-600"
                   onChange={() => setIsDownloadAll(!isDownloadAll)}
                 />
-                <span>{t("downloadAll", { defaultValue: "Download All" })}</span>
+                <span>
+                  {t("downloadAll", { defaultValue: "Download All" })}
+                </span>
               </label>
             </div>
 
@@ -736,10 +751,14 @@ const DetailImage = (data: any) => {
                   </PopoverTrigger>
                   <PopoverContent>
                     <div className="flex flex-col">
-                      <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                      <h1 className="mb-2">
+                        {t("shareTo", { defaultValue: "Share To" })}
+                      </h1>
                       <div className="flex flex-col mb-2">
                         <p className="text-base font-semibold mb-1">
-                          {t("destinationEmail", { defaultValue: "Destination Email" })}
+                          {t("destinationEmail", {
+                            defaultValue: "Destination Email",
+                          })}
                         </p>
                         <Input
                           value={emailShareInput}
@@ -748,7 +767,9 @@ const DetailImage = (data: any) => {
                           }
                           onKeyPress={handleEmailList}
                           type="email"
-                          placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
+                          placeholder={t("pressEnter", {
+                            defaultValue: "Press Enter",
+                          })}
                         />
                       </div>
                       <Button
@@ -826,10 +847,14 @@ const DetailImage = (data: any) => {
                 </PopoverTrigger>
                 <PopoverContent>
                   <div className="flex flex-col">
-                    <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                    <h1 className="mb-2">
+                      {t("shareTo", { defaultValue: "Share To" })}
+                    </h1>
                     <div className="flex flex-col mb-2">
                       <p className="text-base font-semibold mb-1">
-                        {t("destinationEmail", { defaultValue: "Destination Email" })}
+                        {t("destinationEmail", {
+                          defaultValue: "Destination Email",
+                        })}
                       </p>
                       <Input
                         value={emailShareInput}
@@ -838,7 +863,9 @@ const DetailImage = (data: any) => {
                         }
                         onKeyPress={handleEmailList}
                         type="email"
-                        placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
+                        placeholder={t("pressEnter", {
+                          defaultValue: "Press Enter",
+                        })}
                       />
                     </div>
                     <Button
@@ -859,7 +886,9 @@ const DetailImage = (data: any) => {
         {/* Comment */}
         <div className="flex  flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-[300px]">
-            <p className="flex items-start text-lg">{t("comment", { defaultValue: "Comment" })}</p>
+            <p className="flex items-start text-lg">
+              {t("comment", { defaultValue: "Comment" })}
+            </p>
             <Textarea
               placeholder={t("leaveComment", { defaultValue: "Leave Comment" })}
               className="flex w-full pb-12"
@@ -939,7 +968,9 @@ const DetailImage = (data: any) => {
                     <Textarea
                       id={`input-comment-${data.id}`}
                       className="p-4 focus:outline-none focus:border-sky-500"
-                      placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
+                      placeholder={t("enterReply", {
+                        defaultValue: "Enter Reply",
+                      })}
                     />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
@@ -1034,7 +1065,9 @@ const DetailImage = (data: any) => {
                               name=""
                               className="mt-2 "
                               id={`input-comment-${child1.id}`}
-                              placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
+                              placeholder={t("enterReply", {
+                                defaultValue: "Enter Reply",
+                              })}
                             />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
@@ -1108,7 +1141,9 @@ const DetailImage = (data: any) => {
                                         }
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("reply", { defaultValue: "Reply" })}
+                                          {t("reply", {
+                                            defaultValue: "Reply",
+                                          })}
                                         </small>
                                       </a>
                                       <a
@@ -1123,7 +1158,9 @@ const DetailImage = (data: any) => {
                                         onClick={() => deleteData(child2.id)}
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("delete", { defaultValue: "Delete" })}
+                                          {t("delete", {
+                                            defaultValue: "Delete",
+                                          })}
                                         </small>
                                       </a>
                                     </div>
@@ -1154,7 +1191,9 @@ const DetailImage = (data: any) => {
                                         }
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("cancel", { defaultValue: "Cancel" })}
+                                          {t("cancel", {
+                                            defaultValue: "Cancel",
+                                          })}
                                         </small>
                                       </a>
                                     </div>

components/main/video-detail.tsx

@@ -75,6 +75,7 @@ const DetailVideo = () => {
   const MySwal = withReactContent(Swal);
   const t = useTranslations("LandingPage");
   let typeString = "video";
+  const [selectedVideo, setSelectedVideo] = useState(0);
 
   useEffect(() => {
     initFetch();
@@ -268,7 +269,7 @@ const DetailVideo = () => {
 
   const handleShare = (type: any, url: any) => {
     if (Number(userRoleId) < 1 || userRoleId == undefined) {
-      router.push("/auth/login");
+      router.push("/auth");
     } else {
       sendActivityLog(2);
       sendActivityLog(4);
@@ -468,9 +469,28 @@ const DetailVideo = () => {
           {/* Bagian Kiri */}
           <div className="md:w-3/4">
             <div className="relative">
-              <VideoPlayer url={detailDataVideo?.files[0]?.url} />
+              <VideoPlayer url={detailDataVideo?.files[selectedVideo]?.secondaryUrl} />
               <div className="absolute top-4 left-4"></div>
             </div>
+            <div className="py-4 flex flex-col gap-3">
+              {detailDataVideo?.files?.map((file: any, index: number) => (
+                <a onClick={() => setSelectedVideo(index)} key={file?.id}>
+                  {/* <Image
+                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                      shimmer(700, 475)
+                    )}`}
+                    width={1920}
+                    height={1080}
+                    alt="image-small"
+                    src={file?.url}
+                    className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
+                  /> */}
+                  <p className="cursor-pointer">
+                    {file.fileName} | {index + 1}
+                  </p>
+                </a>
+              ))}
+            </div>
 
             {/* Footer Informasi */}
             <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
@@ -495,7 +515,8 @@ const DetailVideo = () => {
                   {detailDataVideo?.updatedAt} WIB &nbsp;|&nbsp;
                 </p> */}
                 <p className="text-xs lg:text-sm">
-                  &nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}&nbsp;
+                  &nbsp;|&nbsp;{t("updatedOn", { defaultValue: "Updated On" })}
+                  &nbsp;
                   {formatDateToIndonesian(
                     new Date(detailDataVideo?.updatedAt)
                   )}{" "}
@@ -537,7 +558,9 @@ const DetailVideo = () => {
                 className="flex flex-col mb-3 items-center justify-center cursor-pointer"
               >
                 <Icon icon="material-symbols:bookmark" width={40} />
-                <p className="text-base lg:text-lg">{t("delete", { defaultValue: "Delete" })}</p>
+                <p className="text-base lg:text-lg">
+                  {t("delete", { defaultValue: "Delete" })}
+                </p>
               </a>
             ) : (
               <a
@@ -545,7 +568,9 @@ const DetailVideo = () => {
                 className="flex flex-col mb-3 items-center justify-center cursor-pointer"
               >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
-                <p className="text-base lg:text-lg">{t("save", { defaultValue: "Save" })}</p>
+                <p className="text-base lg:text-lg">
+                  {t("save", { defaultValue: "Save" })}
+                </p>
               </a>
             )}
 
@@ -612,7 +637,9 @@ const DetailVideo = () => {
                   className="text-red-600 focus:ring-red-600"
                   onChange={() => setIsDownloadAll(!isDownloadAll)}
                 />
-                <span>{t("downloadAll", { defaultValue: "Download All" })}</span>
+                <span>
+                  {t("downloadAll", { defaultValue: "Download All" })}
+                </span>
               </label>
             </div>
 
@@ -649,10 +676,14 @@ const DetailVideo = () => {
                   </PopoverTrigger>
                   <PopoverContent>
                     <div className="flex flex-col">
-                      <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                      <h1 className="mb-2">
+                        {t("shareTo", { defaultValue: "Share To" })}
+                      </h1>
                       <div className="flex flex-col mb-2">
                         <p className="text-base font-semibold mb-1">
-                          {t("destinationEmail", { defaultValue: "Destination Email" })}
+                          {t("destinationEmail", {
+                            defaultValue: "Destination Email",
+                          })}
                         </p>
                         <Input
                           value={emailShareInput}
@@ -661,7 +692,9 @@ const DetailVideo = () => {
                           }
                           onKeyPress={handleEmailList}
                           type="email"
-                          placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
+                          placeholder={t("pressEnter", {
+                            defaultValue: "Press Enter",
+                          })}
                         />
                       </div>
                       <Button
@@ -739,10 +772,14 @@ const DetailVideo = () => {
                 </PopoverTrigger>
                 <PopoverContent>
                   <div className="flex flex-col">
-                    <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                    <h1 className="mb-2">
+                      {t("shareTo", { defaultValue: "Share To" })}
+                    </h1>
                     <div className="flex flex-col mb-2">
                       <p className="text-base font-semibold mb-1">
-                        {t("destinationEmail", { defaultValue: "Destination Email" })}
+                        {t("destinationEmail", {
+                          defaultValue: "Destination Email",
+                        })}
                       </p>
                       <Input
                         value={emailShareInput}
@@ -751,7 +788,9 @@ const DetailVideo = () => {
                         }
                         onKeyPress={handleEmailList}
                         type="email"
-                        placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
+                        placeholder={t("pressEnter", {
+                          defaultValue: "Press Enter",
+                        })}
                       />
                     </div>
                     <Button
@@ -771,7 +810,9 @@ const DetailVideo = () => {
         {/* Comment */}
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
-            <p className="flex items-start text-lg">{t("comment", { defaultValue: "Comment" })}</p>
+            <p className="flex items-start text-lg">
+              {t("comment", { defaultValue: "Comment" })}
+            </p>
             <Textarea
               placeholder="Type your comments here."
               className="flex w-full pb-12"
@@ -851,7 +892,9 @@ const DetailVideo = () => {
                     <Textarea
                       id={`input-comment-${data.id}`}
                       className="p-4 focus:outline-none focus:border-sky-500"
-                      placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
+                      placeholder={t("enterReply", {
+                        defaultValue: "Enter Reply",
+                      })}
                     />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
@@ -945,7 +988,9 @@ const DetailVideo = () => {
                               name=""
                               className="mt-2 "
                               id={`input-comment-${child1.id}`}
-                              placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
+                              placeholder={t("enterReply", {
+                                defaultValue: "Enter Reply",
+                              })}
                             />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
@@ -1019,7 +1064,9 @@ const DetailVideo = () => {
                                         }
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("reply", { defaultValue: "Reply" })}
+                                          {t("reply", {
+                                            defaultValue: "Reply",
+                                          })}
                                         </small>
                                       </a>
                                       <a
@@ -1034,7 +1081,9 @@ const DetailVideo = () => {
                                         onClick={() => deleteData(child2.id)}
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("delete", { defaultValue: "Delete" })}
+                                          {t("delete", {
+                                            defaultValue: "Delete",
+                                          })}
                                         </small>
                                       </a>
                                     </div>
@@ -1049,7 +1098,9 @@ const DetailVideo = () => {
                                       name=""
                                       id={`input-comment-${child2.id}`}
                                       className="my-2"
-                                      placeholder={t("enterReply", { defaultValue: "Enter Reply" })}
+                                      placeholder={t("enterReply", {
+                                        defaultValue: "Enter Reply",
+                                      })}
                                     />
                                     <div className="flex flex-row gap-3">
                                       <a
@@ -1065,7 +1116,9 @@ const DetailVideo = () => {
                                         }
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
-                                          {t("cancel", { defaultValue: "Cancel" })}
+                                          {t("cancel", {
+                                            defaultValue: "Cancel",
+                                          })}
                                         </small>
                                       </a>
                                     </div>