merge main

app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, act } from "react";
 import FullCalendar from "@fullcalendar/react"; // must go before plugins
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
@@ -111,9 +111,18 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   // event canvas state
   const [sheetOpen, setSheetOpen] = useState<boolean>(false);
   const [date, setDate] = React.useState<Date>(new Date());
-  const [activeView, setActiveView] = useState("dayGridMonth");
+  const [activeView, setActiveView] = useState("listYear");
   const [yearlyData, setYearlyData] = useState();
 
+  const TODAY = dayjs().format("yyyy-MM-dd");
+  const INITIAL_YEAR = dayjs().format("YYYY");
+  const INITIAL_MONTH = dayjs().format("M");
+
+  const [selectedYear, setSelectedYear] = useState(new Date());
+  const [selectedMonth, setSelectedMonth] = useState(
+      dayjs(new Date(Number(INITIAL_YEAR), Number(INITIAL_MONTH) - 1, 1)),
+  );
+
   const [dragEvents] = useState([
     { title: "New Event Planning", id: "101", tag: "business" },
     { title: "Meeting", id: "102", tag: "meeting" },
@@ -124,41 +133,49 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   const [calendarEvents, setCalendarEvents] = useState<CalendarEvent[]>([]);
 
   useEffect(() => {
-    getCalendarEvents();
+    if (activeView == "listYear") {
-    getYearlyEvents();
+      getYearlyEvents();
-  }, []);
+    } else {
+      getCalendarEvents();
+    }
+  }, [activeView, selectedMonth]);
 
   const getCalendarEvents = async () => {
-    const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, "");
+    console.log("View : ", activeView);
-    console.log("API Response:", res);
+    const res = await getAgendaSettingsList(selectedMonth?.format("YYYY") || INITIAL_YEAR, selectedMonth.format("M") || INITIAL_MONTH, "");
+    console.log("View : API Response:", res);
 
     if (res?.error) {
       error(res?.message);
       return;
     }
 
-    // Map API data to the calendarEvents structure
+    const data = res?.data?.data;
-    const events = res?.data?.data.map((event: any) => ({
-      id: event.id.toString(),
-      title: event.title,
-      createBy: "Mabes Polri - Approver",
-      createdByName: event.createdByName,
-      start: new Date(event.startDate),
-      end: new Date(event.endDate),
-      allDay: true,
-      extendedProps: {
-        calendar: event.agendaType,
-        description: event.description,
-        createdByName: event.createdByName,
-      },
-    }));
 
-    setCalendarEvents(events);
+    if (data) {
-    console.log("event", events);
+      console.log("Dataaa : ", data);
+      // Map API data to the calendarEvents structure
+      const events = res?.data?.data?.map((event: any) => ({
+        id: event.id.toString(),
+        title: event.title,
+        createBy: event.createdById,
+        createdByName: event.createdByName,
+        start: new Date(event.startDate),
+        end: new Date(event.endDate),
+        allDay: true,
+        extendedProps: {
+          calendar: event.agendaType,
+          description: event.description,
+          createdByName: event.createdByName,
+        },
+      }));
+
+      setCalendarEvents(events);
+    }
   };
 
   const getYearlyEvents = async () => {
-    const res = await getAgendaSettingsList(INITIAL_YEAR, '', '');
+    const res = await getAgendaSettingsList(selectedMonth?.format("YYYY") || INITIAL_YEAR, '', '');
       if (res?.error) {
           error(res.message);
           return false;
@@ -186,50 +203,50 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   }, [selectedCategory]);
 
   useEffect(() => {
-    const fetchAgendaEvents = async () => {
-      setLoading(true);
-      try {
-        const selectedMonth = new Date(); // Replace with your logic for selected month
-        const year = selectedMonth.getFullYear().toString();
-        const month = (selectedMonth.getMonth() + 1).toString();
-        const typeFilter = ""; // Replace with your type filter logic if needed
-
-        const response = await getAgendaSettingsList(year, month, typeFilter);
-
-        if (response?.data && Array.isArray(response?.data)) {
-          // Transform API data to match CalendarEvent type
-          const eventsFromAPI: CalendarEvent[] = response?.data?.map(
-            (item) => ({
-              id: item.id.toString(),
-              title: item.title,
-              createBy: "Mabes Polri - Approver",
-              createdByName: item.createdByName,
-              start: new Date(item.startDate),
-              end: new Date(item.endDate),
-              allDay: true, // Sesuaikan jika memang ada event sepanjang hari
-              extendedProps: {
-                calendar: item.agendaType,
-                description: item.description,
-              },
-            })
-          );
-
-          setApiEvents(eventsFromAPI);
-        } else {
-          console.warn("No events found in API response.");
-          setApiEvents([]);
-        }
-      } catch (error) {
-        console.error("Failed to fetch agenda settings:", error);
-        setApiEvents([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-
     fetchAgendaEvents();
   }, []);
 
+  const fetchAgendaEvents = async (year?: string, month?: string) => {
+    setLoading(true);
+    try {
+      const selectedMonth = new Date(); // Replace with your logic for selected month
+      const year = selectedMonth.getFullYear().toString();
+      const month = (selectedMonth.getMonth() + 1).toString();
+      const typeFilter = ""; // Replace with your type filter logic if needed
+
+      const response = await getAgendaSettingsList(year, month, typeFilter);
+
+      if (response?.data && Array.isArray(response?.data)) {
+        // Transform API data to match CalendarEvent type
+        const eventsFromAPI: CalendarEvent[] = response?.data?.map(
+          (item) => ({
+            id: item.id.toString(),
+            title: item.title,
+            createBy: "Mabes Polri - Approver",
+            createdByName: item.createdByName,
+            start: new Date(item.startDate),
+            end: new Date(item.endDate),
+            allDay: true, // Sesuaikan jika memang ada event sepanjang hari
+            extendedProps: {
+              calendar: item.agendaType,
+              description: item.description,
+            },
+          })
+        );
+
+        setApiEvents(eventsFromAPI);
+      } else {
+        console.warn("No events found in API response.");
+        setApiEvents([]);
+      }
+    } catch (error) {
+      console.error("Failed to fetch agenda settings:", error);
+      setApiEvents([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   useEffect(() => {
     console.log("Fetched events from API 1:", apiEvents);
   }, [apiEvents]);
@@ -310,7 +327,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
       <>
         <p className="ml-1">{title}</p>
         <p className="ml-1 text-xs text-start mt-2">
-          Create By: {createdByName}
+          Created By : {createdByName}
         </p>
       </>
     );
@@ -331,11 +348,16 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   };
 
   const handleDateChange = (startDate: string, endDate: string) => {
-    console.log(startDate + " - " + endDate);
+    const startDateOfDate = new Date(startDate);
-  };  
+    const endDateOfDate = new Date(endDate);
+
+    console.log("Change Date : ", startDateOfDate);
+
+    setSelectedMonth(dayjs(startDateOfDate));
+  };
 
   const handleViewChange = (viewType: string) => {
-    console.log(viewType);
+    console.log("Change view : ", viewType);
     setActiveView(viewType);
   };  
 
@@ -394,7 +416,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
     <div className={`w-full p-1 mb-2 rounded-md text-white text-sm ${bgColor}`} onClick={() => handleClickListItem(item)}>
       <p className="ml-1">{text}</p>
       <p className="ml-1 text-xs text-start mt-2">
-        Create By: {createdBy}
+        Created By: {createdBy}
       </p>
     </div>
   );
@@ -472,13 +494,16 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
         <Card className="col-span-12 lg:col-span-4 2xl:col-span-3  pb-5">
           <CardContent className="p-0">
             <CardHeader className="border-none mb-2 pt-5">
-              <Button
+              {roleId == 10 || roleId == 11 ?
-                onClick={handleDateClick}
+                <Button
-                className="dark:bg-background dark:text-foreground"
+                  onClick={handleDateClick}
-              >
+                  className="dark:bg-background dark:text-foreground"
-                <Plus className="w-4 h-4   me-1" />
+                >
-                {"Tambahkan Agenda baru"}
+                  <Plus className="w-4 h-4 me-1" />
-              </Button>
+                  {"Tambahkan Agenda baru"}
+                </Button> :
+                ""
+              }
             </CardHeader>
 
             <div className="px-3">

app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx

@@ -38,13 +38,15 @@ import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { useRouter } from "next/navigation";
 import { postSchedule } from "@/service/schedule/schedule";
-import { saveAgendaSettings } from "@/service/agenda-setting/agenda-setting";
+import { getAgendaSettingsById, saveAgendaSettings } from "@/service/agenda-setting/agenda-setting";
 import { Checkbox } from "@/components/ui/checkbox";
 import { getUserLevelForAssignments } from "@/service/task";
 import { AudioRecorder } from "react-audio-voice-recorder";
 import FileUploader from "@/components/form/shared/file-uploader";
 import { Upload } from "tus-js-client";
 import { getCsrfToken } from "@/service/auth";
+import { Icon } from "@iconify/react";
+import Image from "next/image";
 
 const schema = z.object({
   title: z.string().min(3, { message: "Required" }),
@@ -55,6 +57,11 @@ interface FileWithPreview extends File {
   preview: string;
 }
 
+interface FileUploaded {
+  id: number;
+  url: string;
+}
+
 const EventModal = ({
   open,
   onClose,
@@ -83,10 +90,15 @@ const EventModal = ({
   const [audioFile, setAudioFile] = useState<File | null>(null);
   const [isRecording, setIsRecording] = useState(false);
   const [timer, setTimer] = useState<number>(120);
+  const [detailData, setDetailData] = useState<any>();
   const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]);
   const [videoFiles, setVideoFiles] = useState<FileWithPreview[]>([]);
   const [textFiles, setTextFiles] = useState<FileWithPreview[]>([]);
   const [audioFiles, setAudioFiles] = useState<FileWithPreview[]>([]);
+  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>([]);
+  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>([]);
+  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>([]);
+  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>([]);
   const [isImageUploadFinish, setIsImageUploadFinish] = useState(false);
   const [isVideoUploadFinish, setIsVideoUploadFinish] = useState(false);
   const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
@@ -110,6 +122,22 @@ const EventModal = ({
     mode: "all",
   });
 
+  useEffect(() => {
+    async function fetchDetailData(){
+      const res = await getAgendaSettingsById(event?.event?.id);
+      const detail = res?.data?.data;
+      setDetailData(detail);
+
+      const attachments = detail?.attachments;
+      setImageUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 1));
+      setVideoUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 2));
+      setTextUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 3));
+      setAudioUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 4));
+    }
+
+    fetchDetailData();
+  }, [event]);
+
   useEffect(() => {
     async function fetchPoldaPolres() {
       setIsLoading(true);
@@ -145,10 +173,8 @@ const EventModal = ({
         setIsLoading(false);
       }
     }
+    
     fetchPoldaPolres();
-    console.log("Event", event);
-
-    console.log("Event click modal : ", event);
   }, [agendaType]);
 
   const handleCheckboxChange = (levelId: number) => {
@@ -184,7 +210,8 @@ const EventModal = ({
     }
 
     const id = response?.data?.data.id;
-
+   
+    loading();
     if (imageFiles?.length == 0) {
       setIsImageUploadFinish(true);
     }
@@ -333,10 +360,9 @@ const EventModal = ({
       metadata: {
         agendaSettingId: id,
         filename: file.name,
-        filetype: file.type,
+        contentType: file.type,
         fileTypeId: fileTypeId,
         duration,
-        isWatermark: "false", // hardcode
       },
       onBeforeRequest: function (req) {
         var xhr = req.getUnderlyingObject();
@@ -351,19 +377,30 @@ const EventModal = ({
         bytesAccepted: any,
         bytesTotal: any
       ) => {
-        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
-        progressInfo[idx].percentage = uploadPersen;
+        // progressInfo[idx].percentage = uploadPersen;
-        counterUpdateProgress++;
+        // counterUpdateProgress++;
-        console.log(counterUpdateProgress);
+        // console.log(counterUpdateProgress);
-        setProgressList(progressInfo);
+        // setProgressList(progressInfo);
-        setCounterProgress(counterUpdateProgress);
+        // setCounterProgress(counterUpdateProgress);
       },
       onSuccess: async () => {
-        uploadPersen = 100;
+        // uploadPersen = 100;
-        progressInfo[idx].percentage = 100;
+        // progressInfo[idx].percentage = 100;
-        counterUpdateProgress++;
+        // counterUpdateProgress++;
-        setCounterProgress(counterUpdateProgress);
+        // setCounterProgress(counterUpdateProgress);
         successTodo();
+        if (fileTypeId == "1") {
+          setIsImageUploadFinish(true);
+        } else if (fileTypeId == "2") {
+          setIsVideoUploadFinish(true);
+        }
+        if (fileTypeId == "3") {
+          setIsTextUploadFinish(true);
+        }
+        if (fileTypeId == "4") {
+          setIsAudioUploadFinish(true);
+        }
       },
     });
 
@@ -402,6 +439,22 @@ const EventModal = ({
     });
   };
 
+  const renderFilePreview = (url: string) => {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={"file preview"}
+          src={url}
+          className=" rounded border p-0.5"
+        />
+      );
+  };
+  
+  const handleRemoveFile = (id: number) => {
+
+  };
+
   return (
     <>
       <DeleteConfirmationDialog
@@ -670,6 +723,29 @@ const EventModal = ({
                   <div className="space-y-3">
                     <div>
                       <Label>Video</Label>
+                      {videoUploadedFiles?.map((file: any, index: number) => (
+                        <div
+                          key={index}
+                          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.url)}</div>
+                            <div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
+                            </div>
+                          </div>
+
+                          <Button
+                            size="icon"
+                            color="destructive"
+                            variant="outline"
+                            className=" border-none rounded-full"
+                            onClick={() => handleRemoveFile(file)}
+                          >
+                            <Icon icon="tabler:x" className=" h-5 w-5" />
+                          </Button>
+                        </div>
+                      ))}
                       <FileUploader
                         accept={{
                           "mp4/*": [],
@@ -682,6 +758,29 @@ const EventModal = ({
                     </div>
                     <div>
                       <Label>Foto</Label>
+                      {imageUploadedFiles?.map((file: any, index: number) => (
+                        <div
+                          key={index}
+                          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.url)}</div>
+                            <div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
+                            </div>
+                          </div>
+
+                          <Button
+                            size="icon"
+                            color="destructive"
+                            variant="outline"
+                            className=" border-none rounded-full"
+                            onClick={() => handleRemoveFile(file)}
+                          >
+                            <Icon icon="tabler:x" className=" h-5 w-5" />
+                          </Button>
+                        </div>
+                      ))}
                       <FileUploader
                         accept={{
                           "image/*": [],
@@ -693,6 +792,29 @@ const EventModal = ({
                     </div>
                     <div>
                       <Label>Teks</Label>
+                      {textUploadedFiles?.map((file: any, index: number) => (
+                        <div
+                          key={index}
+                          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.url)}</div>
+                            <div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
+                            </div>
+                          </div>
+
+                          <Button
+                            size="icon"
+                            color="destructive"
+                            variant="outline"
+                            className=" border-none rounded-full"
+                            onClick={() => handleRemoveFile(file)}
+                          >
+                            <Icon icon="tabler:x" className=" h-5 w-5" />
+                          </Button>
+                        </div>
+                      ))}
                       <FileUploader
                         accept={{
                           "pdf/*": [],
@@ -704,6 +826,29 @@ const EventModal = ({
                     </div>
                     <div>
                       <Label>Voice Note</Label>
+                      {audioUploadedFiles?.map((file: any, index: number) => (
+                        <div
+                          key={index}
+                          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.url)}</div>
+                            <div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
+                            </div>
+                          </div>
+
+                          <Button
+                            size="icon"
+                            color="destructive"
+                            variant="outline"
+                            className=" border-none rounded-full"
+                            onClick={() => handleRemoveFile(file)}
+                          >
+                            <Icon icon="tabler:x" className=" h-5 w-5" />
+                          </Button>
+                        </div>
+                      ))}
                       <AudioRecorder
                         onRecordingComplete={addAudioElement}
                         audioTrackConstraints={{