pull main

app/[locale]/(protected)/admin/add-experts/create/page.tsx

@@ -230,11 +230,13 @@ export default function AddExpertForm() {
   };
 
   const handleAddRow = () => {
-    setPlacementRows((prevRows: any) => [
+    if (placementRows.length < 2) {
-      ...prevRows,
+      setPlacementRows((prevRows) => [
-      { index: incrementId, roleId: "", userLevelId: 0 },
+        ...prevRows,
-    ]);
+        { index: incrementId, roleId: "", userLevelId: 0 },
-    setIncrementId((prevId) => prevId + 1);
+      ]);
+      setIncrementId((prevId) => prevId + 1);
+    }
   };
 
   return (
@@ -424,7 +426,7 @@ export default function AddExpertForm() {
                     ))}
                   </SelectContent>
                 </Select>
-                <Select
+                {/* <Select
                   onValueChange={(e) =>
                     handleSelectionChange(row.index, "userLevelId", e)
                   }
@@ -441,6 +443,20 @@ export default function AddExpertForm() {
                       </SelectItem>
                     ))}
                   </SelectContent>
+                </Select> */}
+                <Select
+                  onValueChange={(e) =>
+                    handleSelectionChange(row.index, "userLevelId", e)
+                  }
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih User Level" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="216">MABES POLRI</SelectItem>
+                  </SelectContent>
                 </Select>
                 {placementRows.length > 1 && (
                   <Button
@@ -454,7 +470,12 @@ export default function AddExpertForm() {
                 )}
               </div>
             ))}
-            <Button type="button" size="md" onClick={() => handleAddRow()}>
+            <Button
+              type="button"
+              size="md"
+              onClick={handleAddRow}
+              disabled={placementRows.length >= 2} // optional: disable button if already 1 row added
+            >
               Tambah
             </Button>
           </div>

app/[locale]/(protected)/admin/settings/iklan/component/table.tsx

@@ -154,8 +154,6 @@ const AdvertisementsList = () => {
         page - 1,
         showData,
         "",
-        categoryFilter?.sort().join(","),
-        statusFilter?.sort().join(",")
       );
       const data = res?.data?.data;
       const contentData = data?.content;

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

@@ -44,7 +44,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
 import {
-  paginationCalendar,
+  getCalendarPagination,
   paginationSchedule,
 } from "@/service/schedule/schedule";
 import { CardHeader, CardTitle } from "@/components/ui/card";
@@ -120,10 +120,9 @@ const CalendarPolriTable = () => {
 
   async function fetchData() {
     try {
-      const res = await paginationCalendar(
+      const res = await getCalendarPagination(
         showData,
         page - 1,
-        1,
         search,
         statusFilter
       );

app/[locale]/(protected)/contributor/task-ta/components/columns.tsx

@@ -159,7 +159,7 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              {roleId == 11 && (
+              {(roleId == 11 || roleId == 12) && (
                 <Link href={`/contributor/task-ta/detail/${row.original.id}`}>
                   <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                     <Eye className="w-4 h-4 me-1.5" />

app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx

@@ -73,7 +73,7 @@ const TaskTaTable = () => {
   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/schedule/form-calendar-polri.tsx

@@ -25,7 +25,6 @@ import DatePicker from "react-datepicker";
 import { id } from "date-fns/locale";
 import "react-datepicker/dist/react-datepicker.css";
 import { zodResolver } from "@hookform/resolvers/zod";
-import router from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { date, z } from "zod";
 import { error, loading } from "@/lib/swal";
@@ -51,6 +50,7 @@ import Image from "next/image";
 import FileUploader from "../shared/file-uploader";
 import { getCsrfToken } from "@/service/auth";
 import { Upload } from "tus-js-client";
+import { useRouter } from "next/navigation";
 
 const calendarSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -68,6 +68,7 @@ interface FileUploaded {
 
 export function CalendarPolriAdd() {
   const MySwal = withReactContent(Swal);
+  const router = useRouter();
   const [open, setOpen] = React.useState(false);
   const t = useTranslations("Schedule");
   type CalendarSchema = z.infer<typeof calendarSchema>;
@@ -212,9 +213,7 @@ export function CalendarPolriAdd() {
       return false;
     }
 
-    Cookies.set("scheduleId", response?.data?.data.id, {
+    const id = response?.data?.data?.id;
-      expires: 1,
-    });
 
     loading();
     if (imageFiles?.length === 0) {
@@ -242,7 +241,7 @@ export function CalendarPolriAdd() {
     };
 
     const upload = new Upload(file, {
-      endpoint: `${process.env.NEXT_PUBLIC_API}/agenda-settings/file/upload`,
+      endpoint: `${process.env.NEXT_PUBLIC_API}/calendars/file/upload`,
       headers: headers,
       retryDelays: [0, 3000, 6000, 12_000, 24_000],
       chunkSize: 20_000,

components/form/setting/form-add-iklan.tsx

@@ -134,7 +134,7 @@ export function TambahIklanModal() {
   };
 
   const handlePoldaPolresChange = () => {
-    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+    return Array.from(checkedLevels).join(",");
   };
 
   const handleUnitChange = (
@@ -185,34 +185,30 @@ export function TambahIklanModal() {
       .filter((key) => unitSelection[key as keyof typeof unitSelection])
       .map((key) => unitMapping[key as keyof typeof unitMapping])
       .join(",");
-    const requestData = {
-      title: data.title,
-      placements: selectedPlacement,
-      description: data.description,
-      redirectLink: "https://new.netidhub.com",
-      createdBy: assignmentToString,
-      assignedToLevel: handlePoldaPolresChange(),
-    };
 
-    console.log("Form Data Submitted:", requestData);
     
-    const response = await postAdvertisements(requestData);
+    const formMedia = new FormData();
+    formMedia.append("title", data.title);
+    formMedia.append("placements", selectedPlacement);
+    formMedia.append("description", data.description);
+    formMedia.append("redirectLink", "https://new.netidhub.com");
+    formMedia.append("assignedToLevel", handlePoldaPolresChange());
+    formMedia.append("file", imageFiles[0]);
+
+    console.log("Form Data Submitted:", formMedia);
+
+    loading();
+    const response = await postAdvertisements(formMedia);
     if (response?.error) {
       error(response?.message);
       return false;
     }
+    close();
 
     Cookies.set("scheduleId", response?.data?.data.id, {
       expires: 1,
     });
 
-    loading();
-    if (imageFiles?.length === 0) {
-      setIsImageUploadFinish(true);
-    }
-    imageFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "1", "0");
-    });
   };
 
   async function uploadResumableFile(
@@ -232,7 +228,7 @@ export function TambahIklanModal() {
     };
 
     const upload = new Upload(file, {
-      endpoint: `${process.env.NEXT_PUBLIC_API}/advertisment/file/upload`,
+      endpoint: `${process.env.NEXT_PUBLIC_API}/advertisements/file/upload`,
       headers: headers,
       retryDelays: [0, 3000, 6000, 12_000, 24_000],
       chunkSize: 20_000,

components/form/task-ta/task-ta-detail-form.tsx

@@ -907,7 +907,7 @@ export default function FormTaskTaDetail() {
         <div className="px-6 py-6">
           <div className="flex flex-col sm:flex-row lg:flex-row justify-between">
             <p className="text-lg font-semibold mb-3">{t("detail-task")}</p>
-            <div
+            {/* <div
               className="flex  gap-3"
               style={
                 detail?.createdBy?.id === Number(userId)
@@ -950,7 +950,7 @@ export default function FormTaskTaDetail() {
                   </DialogContent>
                 </Dialog>
               </div>
-            </div>
+            </div> */}
           </div>
 
           <form>
@@ -1320,7 +1320,7 @@ export default function FormTaskTaDetail() {
               </div>
             </div>
             <div className="flex flex-wrap lg:flex-row  justify-between gap-3 my-3">
-              <div className="lg:px-1">
+              {/* <div className="lg:px-1">
                 {detail?.isDone !== true &&
                 (Number(userLevelNumber) !== 3 ||
                   Number(userLevelNumber) == 2) ? (
@@ -1336,9 +1336,9 @@ export default function FormTaskTaDetail() {
                 ) : (
                   ""
                 )}
-              </div>
+              </div> */}
               <div className="flex flex-wrap gap-2">
-                <div className="">
+                {/* <div className="">
                   <Button
                     type="button"
                     color="primary"
@@ -1347,8 +1347,8 @@ export default function FormTaskTaDetail() {
                   >
                     Beri Tanggapan
                   </Button>
-                </div>
+                </div> */}
-                <div className="">
+                {/* <div className="">
                   <Button
                     type="button"
                     className="btn btn-primary lg:mx-3"
@@ -1364,9 +1364,9 @@ export default function FormTaskTaDetail() {
                   >
                     Terima Tugas
                   </Button>
-                </div>
+                </div> */}
                 <div
-                  className="task-response w-100 lg:px-3 "
+                  className="task-response w-100 lg:px-3"
                   // style={
                   //   Number(detail?.createdBy?.id) == Number(userId)
                   //     ? {}
@@ -1384,7 +1384,7 @@ export default function FormTaskTaDetail() {
                       if (!isTableResult) fetchAllData(); // Panggil API saat tombol diklik
                     }}
                   >
-                    Hasil Upload {Number(userId)}
+                    Hasil Upload
                   </Button>
                 </div>
               </div>
@@ -1406,7 +1406,7 @@ export default function FormTaskTaDetail() {
                       />
                     </InputGroup>
                   </div>
-                  <Dialog>
+                  {/* <Dialog>
                     <DialogTrigger asChild>
                       <Button variant="outline" size="md" color="primary">
                         Filter Polda/Polres
@@ -1486,7 +1486,7 @@ export default function FormTaskTaDetail() {
                         ))}
                       </div>
                     </DialogContent>
-                  </Dialog>
+                  </Dialog> */}
                 </div>
                 <div className="overflow-x-auto">
                   <table className="min-w-full border-collapse border border-gray-300">

components/form/task-ta/task-ta-form.tsx

@@ -157,7 +157,7 @@ export default function FormTaskTa() {
   const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
   const [voiceNoteLink, setVoiceNoteLink] = useState("");
   const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(2024, 0, 1),
+    from: new Date(),
   });
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
@@ -400,7 +400,7 @@ export default function FormTaskTa() {
     fileTypeId: string,
     duration: string
   ) {
-    console.log(idx, id, file, fileTypeId, duration);
+    console.log("Tus Upload : ", idx, id, file, fileTypeId, duration);
 
     const resCsrf = await getCsrfToken();
     const csrfToken = resCsrf?.data?.token;
@@ -631,7 +631,10 @@ export default function FormTaskTa() {
                               }
                               className="mr-3"
                             />
-                            {expert.fullname}
+                            <div className="flex flex-col gap-2">
+                              <div className="font-bold">{expert.fullname}</div>
+                              <div className="italic">({expert.username})</div>
+                            </div>
                           </Label>
                         </div>
                       ))}
@@ -639,6 +642,36 @@ export default function FormTaskTa() {
                   </DialogContent>
                 </Dialog>
               </div>
+              {checkedLevels.size > 0 && (
+                <div className="mt-3">
+                  <Label className="text-sm text-gray-600 mb-2 block">
+                    Tenaga Ahli Terpilih ({checkedLevels.size})
+                  </Label>
+                  <div className="flex flex-wrap gap-2">
+                    {Array.from(checkedLevels).map((expertId) => {
+                      const expert = listExpert?.find((exp: any) => exp.id === expertId);
+                      return expert ? (
+                        <div
+                          key={expert.id}
+                          className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full border border-blue-200"
+                        >
+                          <span>{expert.fullname}</span>
+                          <button
+                            type="button"
+                            onClick={() => handleCheckboxChange(expert.id)}
+                            className="ml-1 text-blue-600 hover:text-blue-800 hover:bg-blue-200 rounded-full p-0.5 transition-colors"
+                            title="Remove expert"
+                          >
+                            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                              <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+                            </svg>
+                          </button>
+                        </div>
+                      ) : null;
+                    })}
+                  </div>
+                </div>
+              )}
             </div>
             <div className="mt-5 space-y-2">
               <Label>{t("description")}</Label>

components/landing-page/advertisement-placements.tsx

@@ -31,34 +31,25 @@ interface Advertisement {
 //   };
 // }
 
-const LeftBanner = () => {
+const AdvertisementPlacements = (props: { placement?: string }) => {
   const [ads, setAds] = useState<Advertisement[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
- const [showData, setShowData] = React.useState("10");
-  const [categories, setCategories] = React.useState<any>();
-  const [dataTable, setDataTable] = React.useState<any[]>([]);
-  const [totalData, setTotalData] = React.useState<number>(1);
-  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
-    const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
-  const [page, setPage] = React.useState(1);
-
 
   const fetchData = async () => {
     try {
       setLoading(true);
-      const res = await listDataAdvertisements( page - 1,
+      const res = await listDataAdvertisements( 
-        showData,
+        0,
-        "",
+        "4",
-        categoryFilter?.sort().join(","),
+        ""
-        statusFilter?.sort().join(","));
+      );
       const data = res?.data?.data;
       const contentData = data?.content;
-
+      if (props.placement == "left") {
-      contentData.forEach((item: Advertisement, index: number) => {
+        setAds(contentData.slice(0,2));
-        item.no = index + 1;
+      } else {
-      });
+        setAds(contentData.slice(2));
-
+      }
-      setAds(contentData);
     } catch (error) {
       console.error("Error fetching advertisements:", error);
     } finally {
@@ -71,13 +62,13 @@ const LeftBanner = () => {
   }, []);
 
   return (
-    <div className="sticky top-0 space-y-4 ml-14">
+    <div className={`sticky top-0 space-y-4 ${props.placement == "left" ? "ml-14" : "mr-14"}`}>
       {loading && <p className="text-sm text-gray-500">Loading...</p>}
-      {ads.map((ad) => (
+      {ads?.map((ad) => (
-        <img key={ad.id} src={ad.imageUrl} alt={`Banner ${ad.id}`} width={180} />
+        <img key={ad.id} src={ad.contentFileUrl} alt={`Banner ${ad.id}`} className="w-full" />
       ))}
     </div>
   );
 };
 
-export default LeftBanner;
+export default AdvertisementPlacements;

components/landing-page/event-calender.tsx

@@ -1,86 +1,285 @@
-import React from "react";
+import { getCalendarPagination } from "@/service/schedule/schedule";
+import React, { useEffect, useState } from "react";
+
+interface CalendarItem {
+  id: number;
+  title: string;
+  description: string;
+  assignedTo: string;
+  assignedToLevel: string;
+  startDate: string; 
+  endDate: string;
+  isActive: boolean;
+  createdById: number;
+  createdByName: string;
+  thumbnailUrl: string;
+  createdAt: string;
+  updatedAt: string;
+}
 
 const EventCalender = () => {
+  // Get current date
+  const today = new Date();
+  const currentMonth = today.getMonth();
+  const currentYear = today.getFullYear();
+  const currentDate = today.getDate();
+
+  const [events, setEvents] = useState<CalendarItem[]>([]);
+  const [selectedEvent, setSelectedEvent] = useState<CalendarItem | null>(null);
+
+  // Month names in Indonesian
+  const monthNames = [
+    "Januari", "Februari", "Maret", "April", "Mei", "Juni",
+    "Juli", "Agustus", "September", "Oktober", "November", "Desember"
+  ];
+
+  const fetchData = async () => {
+    try {
+      const res = await getCalendarPagination(100, 0);
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      setEvents(contentData || []);
+      
+      // Set first event as selected by default
+      if (contentData && contentData.length > 0) {
+        setSelectedEvent(contentData[0]);
+      }
+    } catch (error) {
+      console.error("Error fetching calendar events:", error);
+    }
+  };
+  
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  // Get first day of the month and number of days
+  const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
+  const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);
+  const daysInMonth = lastDayOfMonth.getDate();
+  const startingDayOfWeek = firstDayOfMonth.getDay();
+  
+  // Convert Sunday (0) to 7 for Monday-first week
+  const adjustedStartingDay = startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1;
+
+  // Generate calendar days
+  const generateCalendarDays = () => {
+    const days = [];
+    
+    // Empty cells for days before the first day of month
+    for (let i = 0; i < adjustedStartingDay; i++) {
+      days.push(null);
+    }
+    
+    // Days of the month
+    for (let day = 1; day <= daysInMonth; day++) {
+      days.push(day);
+    }
+    
+    // Fill remaining cells to complete the grid (6 rows × 7 days = 42 cells)
+    while (days.length < 42) {
+      days.push(null);
+    }
+    
+    return days;
+  };
+
+  const calendarDays = generateCalendarDays();
+
+  // Helper function to extract day from date string
+  const getDateFromString = (dateString: string) => {
+    try {
+      const date = new Date(dateString);
+      if (date.getMonth() === currentMonth && date.getFullYear() === currentYear) {
+        return date.getDate();
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  };
+
+  // Helper function to format date range
+  const formatDateRange = (startDate: string, endDate: string) => {
+    try {
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+      
+      const startDay = start.getDate();
+      const endDay = end.getDate();
+      const startMonth = monthNames[start.getMonth()];
+      const endMonth = monthNames[end.getMonth()];
+      
+      if (startDay === endDay && startMonth === endMonth) {
+        return `${startDay} ${startMonth}`;
+      } else {
+        return `${startDay} ${startMonth} - ${endDay} ${endMonth}`;
+      }
+    } catch {
+      return "Tanggal tidak valid";
+    }
+  };
+
+  // Helper function to format time range
+  const formatTimeRange = (startDate: string, endDate: string) => {
+    try {
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+      
+      const startTime = start.toLocaleTimeString('id-ID', { 
+        hour: '2-digit', 
+        minute: '2-digit',
+        timeZone: 'Asia/Jakarta'
+      });
+      const endTime = end.toLocaleTimeString('id-ID', { 
+        hour: '2-digit', 
+        minute: '2-digit',
+        timeZone: 'Asia/Jakarta'
+      });
+      
+      return `${startTime} - ${endTime} WIB`;
+    } catch {
+      return "Waktu tidak tersedia";
+    }
+  };
+
+  // Get event dates for highlighting calendar
+  const eventDates = events
+    .map(event => getDateFromString(event.startDate))
+    .filter(date => date !== null);
+
   return (
     <div className="mt-8 rounded-lg bg-white dark:bg-zinc-900 p-4 shadow">
       <h2 className="text-lg font-bold text-red-600 border-b border-red-600 mb-4 pb-2">
         KALENDER ACARA
       </h2>
-      <div className="flex flex-col md:flex-row gap-4">
+      <div className="flex flex-col lg:flex-row gap-6">
-        <div className="w-full md:w-1/2">
+        {/* Left Side - Calendar and Event List */}
-          <div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md ">
+        <div className="w-full lg:w-1/2">
-            <div className="text-center font-semibold mb-2">Mei 2025</div>
+          {/* Mini Calendar */}
+          <div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md mb-4">
+            <div className="text-center font-semibold mb-2">
+              {monthNames[currentMonth]} {currentYear}
+            </div>
             <div className="grid grid-cols-7 gap-1 text-sm text-center">
               {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => (
-                <div key={d} className="font-medium">
+                <div key={d} className="font-medium p-1">
                   {d}
                 </div>
               ))}
-              {[...Array(35)].map((_, i) => (
+              {calendarDays?.map((day, index) => (
                 <div
-                  key={i}
+                  key={index}
-                  className={`p-1 rounded ${
+                  className={`p-1 rounded min-h-[24px] flex items-center justify-center text-xs ${
-                    [6, 7, 15].includes(i) ? "bg-red-600 text-white" : ""
+                    day === null 
+                      ? "" 
+                      : eventDates.includes(day)
+                      ? "bg-red-600 text-white font-semibold"
+                      : day === currentDate
+                      ? "bg-blue-500 text-white font-semibold"
+                      : "hover:bg-gray-200 dark:hover:bg-zinc-700"
                   }`}
                 >
-                  {i >= 2 && i - 1}
+                  {day}
                 </div>
               ))}
             </div>
           </div>
-          <div className="space-y-4 mt-3">
-            <div className="flex items-center bg-gray-200 rounded-xl shadow-sm p-2">
-              <img
-                src="/images/all-img/calendar1.png"
-                alt="HUT Polwan"
-                className="w-24 h-20 object-cover rounded"
-              />
-              <div className="flex justify-between items-center w-full ml-3">
-                <div className="text-sm font-semibold line-clamp-2">
-                  HUT Polwan ke-76, Kapolri...
-                </div>
-                <div className="text-sm font-semibold whitespace-nowrap ml-3">
-                  16 Mei - 16 Mei
-                </div>
-              </div>
-            </div>
 
-            <div className="flex items-center bg-gray-200 rounded-xl shadow-sm p-2">
+          {/* Event List */}
-              <img
+          <div className="space-y-3 max-h-[230px] overflow-y-auto pr-5">
-                src="/images/all-img/calendar2.png"
+            <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">
-                alt="Olahraga"
+              Daftar Acara
-                className="w-24 h-20 object-cover rounded"
+            </h3>
-              />
+            {events?.length === 0 ? (
-              <div className="flex justify-between items-center w-full ml-3">
+              <div className="text-center text-gray-500 dark:text-gray-400 py-8">
-                <div className="text-sm font-semibold line-clamp-2 uppercase">
+                Tidak ada acara yang tersedia
-                  Olahraga Bersama Pad...
-                </div>
-                <div className="text-sm font-semibold whitespace-nowrap ml-3">
-                  22 Mei - 22 Mei
-                </div>
               </div>
-            </div>
+            ) : (
+              events.map((event) => (
+                <div
+                  key={event.id}
+                  onClick={() => setSelectedEvent(event)}
+                  className={`flex items-center rounded-xl shadow-sm p-3 cursor-pointer transition-all duration-200 hover:shadow-md ${
+                    selectedEvent?.id === event.id
+                      ? "bg-red-100 dark:bg-red-900/20 border-2 border-red-500"
+                      : "bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700"
+                  }`}
+                >
+                  <img
+                    src={event.thumbnailUrl || "/images/default-event.png"}
+                    alt={event.title}
+                    className="w-16 h-12 object-cover rounded flex-shrink-0"
+                    onError={(e) => {
+                      const target = e.target as HTMLImageElement;
+                      target.src = "/images/default-event.png";
+                    }}
+                  />
+                  <div className="ml-3 flex-1 min-w-0">
+                    <div className="text-sm font-semibold text-gray-800 dark:text-gray-200 line-clamp-2">
+                      {event.title}
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      {formatDateRange(event.startDate, event.endDate)}
+                    </div>
+                  </div>
+                  <div className="ml-2 flex-shrink-0">
+                    <div className={`w-2 h-2 rounded-full ${event.isActive ? 'bg-green-500' : 'bg-red-500'}`}></div>
+                  </div>
+                </div>
+              ))
+            )}
           </div>
         </div>
 
-        {/* Detail Acara */}
+        {/* Right Side - Event Detail */}
-        <div className="w-full md:w-1/2 space-y-4">
+        <div className="w-full lg:w-1/2">
-          <div className="bg-gray-100 dark:bg-zinc-800 rounded-md p-2 mt-4">
+          <div className="bg-gray-100 dark:bg-zinc-800 rounded-lg p-4 sticky top-4">
-            <img
+            <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
-              src="/images/all-img/calendar1.png"
+              Detail Acara
-              alt="Detail Event"
+            </h3>
-              className="rounded mb-2"
+            
-            />
+            {selectedEvent ? (
-            <p className="text-sm font-semibold mb-1">
+              <div className="space-y-4">
-              HUT Polwan ke-76, Kapolri Apresiasi Prestasi yang Diberikan
+                <img
-            </p>
+                  src={selectedEvent.thumbnailUrl || "/images/default-event.png"}
-            <p className="text-xs text-gray-500 mb-1">
+                  alt={selectedEvent.title}
-              Kapolri Jenderal Pol. Listyo Sigit Prabowo memberikan apresiasi
+                  className="w-full h-48 object-cover rounded-lg"
-              kepada polisi wanita yang berprestasi...
+                  onError={(e) => {
-            </p>
+                    const target = e.target as HTMLImageElement;
-            <a href="#" className="text-xs text-blue-500">
+                    target.src = "/images/default-event.png";
-              Lihat Selengkapnya
+                  }}
-            </a>
+                />
+                
+                <div>
+                  <h4 className="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">
+                    {selectedEvent.title}
+                  </h4>
+                  
+                  <div className="grid grid-cols-1 gap-3 mb-4">
+                    <div className="flex items-start text-sm text-gray-600 dark:text-gray-400">
+                      <span className="w-20 font-semibold flex-shrink-0">Tanggal:</span>
+                      <span>{formatDateRange(selectedEvent.startDate, selectedEvent.endDate)}</span>
+                    </div>
+                    <div className="mb-4">
+                      <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
+                        {selectedEvent.description || "Tidak ada deskripsi tersedia."}
+                      </p>
+                    </div>
+                  </div>
+                  
+                  <div className="flex gap-2">
+                    <button className="px-4 py-2 bg-gray-300 dark:bg-zinc-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-400 dark:hover:bg-zinc-600 transition-colors">
+                      Bagikan
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="text-center text-gray-500 dark:text-gray-400 py-8">
+                Pilih acara untuk melihat detail
+              </div>
+            )}
           </div>
         </div>
       </div>

components/landing-page/search-section-polda.tsx

@@ -12,20 +12,7 @@ import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
 import EventCalender from "./event-calender";
 import UserSurveyBox from "./survey-box";
 import ScrollableContentPolda from "./scrollable-content-polda";
-
+import AdvertisementPlacements from "./advertisement-placements";
-const LeftBanner = () => (
-  <div className="sticky top-0 space-y-4">
-    <img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" />
-    <img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" />
-  </div>
-);
-
-const RightBanner = () => (
-  <div className="sticky top-0 space-y-4">
-    <img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" />
-    <img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" />
-  </div>
-);
 
 const SearchSectionPolda = () => {
   const [contentType, setContentType] = useState("all");
@@ -35,7 +22,7 @@ const SearchSectionPolda = () => {
   return (
     <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
-        <LeftBanner />
+        <AdvertisementPlacements placement="left"/>
       </div>
 
       <div className="w-full xl:w-[70%] px-4 py-8 bg-white">
@@ -49,7 +36,7 @@ const SearchSectionPolda = () => {
       </div>
 
       <div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
-        <RightBanner />
+         <AdvertisementPlacements placement="right"/>
       </div>
     </div>
   );

components/landing-page/search-section-satker.tsx

@@ -13,20 +13,7 @@ import EventCalender from "./event-calender";
 import UserSurveyBox from "./survey-box";
 import ScrollableContentPolda from "./scrollable-content-polda";
 import ScrollableContentSatker from "./scrollable-content-satker";
-
+import AdvertisementPlacements from "./advertisement-placements";
-const LeftBanner = () => (
-  <div className="sticky top-0 space-y-4">
-    <img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" />
-    <img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" />
-  </div>
-);
-
-const RightBanner = () => (
-  <div className="sticky top-0 space-y-4">
-    <img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" />
-    <img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" />
-  </div>
-);
 
 const SearchSectionSatker = () => {
   const [contentType, setContentType] = useState("all");
@@ -36,7 +23,7 @@ const SearchSectionSatker = () => {
   return (
     <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
-        <LeftBanner />
+        <AdvertisementPlacements placement="left"/>
       </div>
 
       <div className="w-full xl:w-[70%] px-4 py-8 bg-white">
@@ -50,7 +37,7 @@ const SearchSectionSatker = () => {
       </div>
 
       <div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
-        <RightBanner />
+        <AdvertisementPlacements placement="right"/>
       </div>
     </div>
   );

components/landing-page/search-section.tsx

@@ -18,20 +18,7 @@ import ContentCategory from "./content-category";
 import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
 import EventCalender from "./event-calender";
 import UserSurveyBox from "./survey-box";
-
+import AdvertisementPlacements from "./advertisement-placements";
-const LeftBanner = () => (
-  <div className="sticky top-0 space-y-4 ml-14">
-    <img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" width={180} />
-    <img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" width={180} />
-  </div>
-);
-
-const RightBanner = () => (
-  <div className="sticky top-0 space-y-4">
-    <img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" width={180} />
-    <img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" width={180} />
-  </div>
-);
 
 const SearchSection = () => {
   const [contentType, setContentType] = useState("all");
@@ -44,7 +31,7 @@ const SearchSection = () => {
       style={{ backgroundImage: "url('/assets/background.png')" }}
     >
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[130px] space-y-4 self-start">
-        <LeftBanner />
+        <AdvertisementPlacements placement="left"/>
       </div>
 
       <div className="w-full xl:w-[70%] px-4 py-8 bg-white">
@@ -58,7 +45,7 @@ const SearchSection = () => {
       </div>
 
       <div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[130px] space-y-4 self-start">
-        <RightBanner />
+        <AdvertisementPlacements placement="right" />
       </div>
     </div>
   );

messages/in.json

@@ -690,7 +690,7 @@
     "type-task": "Tipe Penugasan",
     "category-task": "Kategori Penugasan",
     "areas-expertise": "Bidang Keahlian",
-    "choose-expert": "Pilih Tenaga Ahli",
+    "choose-expert": "Tenaga Ahli",
     "code": "Kode",
     "start-date": "Tanggal Mulai",
     "end-date": "Tanggal Selesai",

service/broadcast/broadcast.ts

@@ -20,11 +20,9 @@ export async function listDataAdvertisements(
   page: number,
   limit: string,
   search: string,
-  categoryFilter: string,
-  statusFilter: string
 ) {
   const name = search || "";
-  const url = `advertisements/pagination?title=${name}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&categoryId=${categoryFilter}&statusId=${statusFilter}`;
+  const url = `advertisements/pagination?title=${search}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}`;
   return httpGetInterceptor(url);
 }
 

service/schedule/schedule.ts

@@ -20,17 +20,16 @@ export async function paginationSchedule(
   );
 }
 
-export async function paginationCalendar(
+export async function getCalendarPagination(
   size: any,
   page: number,
-  type: any,
   title: string = "",
   statusFilter: number[] = []
 ) {
   const statusQuery =
     statusFilter.length > 0 ? `&statusId=${statusFilter.join(",")}` : "";
   return await httpGetInterceptor(
-    `calendars/pagination?enablePage=1&scheduleTypeId=${type}&page=${page}&size=${size}&title=${title}${statusQuery}`
+    `calendars/pagination?enablePage=1&page=${page}&size=${size}&title=${title}${statusQuery}`
   );
 }
 

service/settings/settings.ts

@@ -132,5 +132,8 @@ export async function getTagsByParentId(parentId: string | number) {
 
 export async function postAdvertisements(data: any) {
   const url = "advertisements";
-  return httpPostInterceptor(url, data);
+  const headers = {
+    "Content-Type": "multipart/form-data",
+  };
+  return httpPostInterceptor(url, data, headers);
 }

service/task.ts

@@ -146,7 +146,7 @@ export async function listTaskTa(
   }
 
   return httpGetInterceptor(
-    `assignment-expert/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&taskType=${taskType}&uniqueCode=${code}&createdAt=${createdAt}${statusQuery}`
+    `assignment-expert/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&assignmentType=${taskType}&uniqueCode=${code}&createdAt=${createdAt}${statusQuery}`
   );
 }