Merge branch 'main' of https://gitlab.com/hanifsalafi/mediahub_redesign into dev-rama

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),

app/[locale]/(public)/image/detail/[slug]/page.tsx

@@ -43,5 +43,5 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
 }
 
 export default async function DetailInfo({ params }: Props) {
-  return <DetailImage />;
+  return <div className="w-full"><DetailImage /></div>;
 }

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 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]);
 
-    const response = await postAdvertisements(requestData);
+    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

@@ -0,0 +1,74 @@
+import { listDataAdvertisements } from "@/service/broadcast/broadcast";
+import { useEffect, useState } from "react";
+import * as React from "react";
+
+interface Advertisement {
+  id: string;
+  imageUrl: string;
+  [key: string]: any; // Tambahan kalau ada properti lain
+}
+
+// // Simulasi fungsi API (replace dengan yang asli)
+// async function listDataAdvertisements(
+//   page: number,
+//   size: number,
+//   search: string,
+//   category: string,
+//   status: string
+// ) {
+//   // contoh struktur response dummy
+//   return {
+//     data: {
+//       data: {
+//         content: [
+//           { id: "1", imageUrl: "/images/all-img/kiri1.png" },
+//           { id: "2", imageUrl: "/images/all-img/kiri2.png" },
+//         ],
+//         totalElements: 2,
+//         totalPages: 1,
+//       },
+//     },
+//   };
+// }
+
+const AdvertisementPlacements = (props: { placement?: string }) => {
+  const [ads, setAds] = useState<Advertisement[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const res = await listDataAdvertisements( 
+        0,
+        "4",
+        ""
+      );
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      if (props.placement == "left") {
+        setAds(contentData.slice(0,2));
+      } else {
+        setAds(contentData.slice(2));
+      }
+    } catch (error) {
+      console.error("Error fetching advertisements:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <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) => (
+        <img key={ad.id} src={ad.contentFileUrl} alt={`Banner ${ad.id}`} className="w-full" />
+      ))}
+    </div>
+  );
+};
+
+export default AdvertisementPlacements;

components/landing-page/coverage.tsx

@@ -13,7 +13,7 @@ const regions = [
   {
     name: "Polda Bangka Belitung",
     slug: "bangka-belitung",
-    logo: "/logo/polda/polda-bangkabelitung.png",
+    logo: "/logo/polda/polda-bangka-belitung.png",
   },
   {
     name: "Polda Banten",
@@ -27,7 +27,7 @@ const regions = [
   },
   {
     name: "Polda DIY",
-    slug: "di-yogyakarta",
+    slug: "jogja",
     logo: "/logo/polda/polda-jogja.png",
   },
   {
@@ -39,17 +39,17 @@ const regions = [
   {
     name: "Polda Jawa Barat",
     slug: "jawa-barat",
-    logo: "/logo/polda/polda-jawabarat.png",
+    logo: "/logo/polda/polda-jawa-barat.png",
   },
   {
     name: "Polda Jawa Tengah",
     slug: "jawa-tengah",
-    logo: "/logo/polda/polda-jawatengah.png",
+    logo: "/logo/polda/polda-jawa-tengah.png",
   },
   {
     name: "Polda Jawa Timur",
     slug: "jawa-timur",
-    logo: "/logo/polda/polda-jawatimur.png",
+    logo: "/logo/polda/polda-jawa-timur.png",
   },
   {
     name: "Polda Kalimantan Barat",
@@ -79,7 +79,7 @@ const regions = [
   {
     name: "Polda Kepulauan Riau",
     slug: "kepulauan-riau",
-    logo: "/logo/polda/polda-kepri.png",
+    logo: "/logo/polda/polda-kepulauan-riau.png",
   },
   {
     name: "Polda Lampung",
@@ -99,7 +99,7 @@ const regions = [
   {
     name: "Polda Metro Jaya",
     slug: "metro-jaya",
-    logo: "/logo/polda/polda-metro.png",
+    logo: "/logo/polda/polda-metro-jaya.png",
   },
   {
     name: "Polda NTB",
@@ -121,12 +121,12 @@ const regions = [
   {
     name: "Polda Sulawesi Barat",
     slug: "sulawesi-barat",
-    logo: "/logo/polda/polda-sulbar.png",
+    logo: "/logo/polda/polda-sulawesi-barat.png",
   },
   {
     name: "Polda Sulawesi Selatan",
     slug: "sulawesi-selatan",
-    logo: "/logo/polda/polda-sulsel.png",
+    logo: "/logo/polda/polda-sulawesi-selatan.png",
   },
   {
     name: "Polda Sulawesi Tengah",
@@ -151,12 +151,12 @@ const regions = [
   {
     name: "Polda Sumatera Selatan",
     slug: "sumatera-selatan",
-    logo: "/logo/polda/polda-sumsel.png",
+    logo: "/logo/polda/polda-sumatera-selatan.png",
   },
   {
     name: "Polda Sumatera Utara",
     slug: "sumatera-utara",
-    logo: "/logo/polda/polda-sumut.png",
+    logo: "/logo/polda/polda-sumatera-utara.png",
   },
   // {
   //   name: "Satuan Kerja POLRI",

components/landing-page/division.tsx

@@ -18,13 +18,13 @@ const regions = [
   { name: "STAMARENA POLRI", slug: "srena", logo: "/logo/satker/SRENA.png" },
   { name: "SSDM POLRI", slug: "ssdm", logo: "/logo/satker/SSDM.png" },
   { name: "SLOG POLRI", slug: "slog", logo: "/logo/satker/SLOG.png" },
-  { name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/logo/satker/STAFAHLI.png" },
+  { name: "SAHLI KAPOLRI", slug: "stafahli", logo: "/logo/satker/STAFAHLI.png" },
   { name: "DIVPROPRAM POLRI", slug: "divpropram", logo: "/logo/satker/DIVPROPAM.png" },
   { name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
   { name: "DIVHUBINTER POLRI", slug: "divhubinter", logo: "/logo/satker/DIVHUBINTER.png" },
   { name: "DIVTIK POLRI", slug: "div-tik", logo: "/logo/satker/DIV-TIK.png" },
   { name: "KORLANTAS POLRI", slug: "korlantas", logo: "/logo/satker/KORLANTAS.png" },
-  { name: "DENSUS 88 POLRI", slug: "densus-88", logo: "/logo/satker/DENSUS88.png" },
+  { name: "DENSUS 88 POLRI", slug: "densus-88", logo: "/logo/satker/DENSUS-88.png" },
   { name: "PUSDOKKES POLRI", slug: "pusdokkes", logo: "/logo/satker/PUSDOKKES.png" },
   { name: "PUSLITBANG POLRI", slug: "puslitbang", logo: "/logo/satker/PUSLITBANG.png" },
   { name: "PUSKEU POLRI", slug: "puskeu", logo: "/logo/satker/PUSKEU.png" },
@@ -47,10 +47,10 @@ const regions = [
   { name: "STIK LEMDIKLAT POLRI", slug: "stik-ptik", logo: "/logo/satker/STIK-PTIK.png" },
   { name: "AKPOL LEMDIKLAT POLRI", slug: "akpol", logo: "/logo/satker/AKPOL.png" },
   { name: "SESPIM LEMDIKLAT POLRI", slug: "sespim-polri", logo: "/logo/satker/SESPIM-POLRI.png" },
-  { name: "SETUKPA LEMDIKLAT POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" },
+  { name: "SETUKPA LEMDIKLAT POLRI", slug: "setupa-polri", logo: "/logo/satker/SETUPA-POLRI.png" },
-  { name: "SEPOLWAN LEMDIKLAT POLRI", slug: "sepolwan-polri", logo: "/assets/satker/sepolwan.png" },
+  { name: "SEPOLWAN LEMDIKLAT POLRI", slug: "sepolwan-polri", logo: "/logo/satker/SEPOLWAN-POLRI.png" },
-  { name: "SEBASA LEMDIKLAT POLRI", slug: "sebasa-polri", logo: "/assets/satker/sebasa.png" },
+  { name: "SEBASA LEMDIKLAT POLRI", slug: "sebasa-polri", logo: "/logo/satker/SEBASA-POLRI.png" },
-  { name: "RUMKIT BHAYANGKARA TK I", slug: "rumkit-bhayangkara", logo: "/assets/satker/rumkit.png" },
+  { name: "RUMKIT BHAYANGKARA TK I", slug: "rumkit-bhayangkara", logo: "/logo/satker/RUMKIT-BHAYANGKARA.png" },
   { name: "POLAIR", slug: "polair", logo: "/logo/satker/POLAIR.png" },
   { name: "POLUDARA", slug: "poludara", logo: "/logo/satker/POLUDARA.png" },
   { name: "PUSINAFIS", slug: "pusinafis", logo: "/logo/satker/PUSINAFIS.png" },
@@ -91,7 +91,6 @@ const Division = () => {
 
   return (
     <div className="mx-auto px-4 w-full">
-      {/* Header */}
       {/* <Reveal> */}
       {/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-3">
           {pathname?.split("/")[1] == "in" ? (

components/landing-page/dynamic-logo-satker.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+
+export const DynamicLogoSatker = () => {
+  const pathname = usePathname();
+  const satker = pathname?.split("/")[3];
+  console.log("satker", satker?.toUpperCase())
+
+  return <div className="p-2">
+      {pathname?.includes("/satker") && (
+        <Image
+          src={`/logo/satker/${satker?.toUpperCase()}.png`}
+          alt="Logo"
+          width={1920}
+          height={1080}
+          className="object-contain h-[150px] w-[50px]"
+        />
+      )}
+    </div>;
+};

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>
@@ -88,4 +287,4 @@ const EventCalender = () => {
   );
 };
 
-export default EventCalender;
+export default EventCalender;

components/landing-page/landing-polda-kaltara/welcome-polda-kaltara.tsx

@@ -0,0 +1,143 @@
+import { useParams, usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+const WelcomePoldaKaltara = () => {
+  const router = useRouter();
+  const asPath: any = usePathname();
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  const [categorySelect, setCategorySelect] = useState("0");
+  const t = useTranslations("LandingPage");
+  const [contentType, setContentType] = useState("all");
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    function initState() {
+      console.log(categorySelect);
+    }
+
+    initState();
+  }, [categorySelect]);
+
+  return (
+    <section className="w-full py-8 px-4">
+      <div className="">
+        {/* Heading */}
+        <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
+          <span className="text-[#bb3523] dark:text-white">{t("welcome")} Di Polda</span> <span className="capitalize text-[#bb3523] dark:text-white">{poldaName.replace("-", " ")}</span>
+        </h1>
+        <div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
+        <p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
+          {t("polda")} <span className="capitalize">{poldaName.replace("-", " ")}</span>
+        </p>
+
+        {/* Search Form */}
+        {/* <div className="mt-6 flex flex-col md:flex-row justify-center gap-4"> */}
+        {/* Dropdown */}
+        {/* <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
+                  <svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  {t("content")}
+                  <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                    <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
+                  </svg>
+                </a>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiYoutube className="mr-2" />
+                    {t("video")}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiMusic className="mr-2" />
+                    {t("audio")}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiImage className="mr-2" />
+                    {t("image")}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiFile className="mr-2" />
+                    {t("text")}
+                  </span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
+              <span className="material-icons text-black dark:text-white px-4">
+                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                  <path
+                    fill="currentColor"
+                    d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+                  />
+                </svg>
+              </span>
+              <Input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
+            </div>
+          </div> */}
+
+        {/* Button */}
+        {/* <button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
+            {t("searchCoverage")}  <Icon icon="ri:arrow-right-s-line" fontSize={20} />
+          </button> */}
+        {/* </div> */}
+
+        <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
+          {/* Dropdown */}
+          <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
+            <Select value={contentType} onValueChange={setContentType}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value="all">{t("allContent")}</SelectItem>
+                  <SelectItem value="image">{t("image")}</SelectItem>
+                  <SelectItem value="video">{t("video")}</SelectItem>
+                  <SelectItem value="document">{t("text")}</SelectItem>
+                  <SelectItem value="audio">{t("audio")}</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
+              <span className="material-icons text-black dark:text-white px-4">
+                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                  <path
+                    fill="currentColor"
+                    d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+                  />
+                </svg>
+              </span>
+              <input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
+            </div>
+          </div>
+
+          {/* Search Input */}
+          <button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
+            {t("searchCoverage")}
+            <Icon icon="ri:arrow-right-s-line" fontSize={20} />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WelcomePoldaKaltara;

components/landing-page/navbar.tsx

@@ -23,6 +23,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import PoldaLogo from "./polda-logo";
 import { DynamicLogoPolda } from "./dynamic-logo-polda";
+import { DynamicLogoSatker } from "./dynamic-logo-satker";
 
 type Detail = {
   id: number;
@@ -162,7 +163,7 @@ const Navbar = () => {
           <Link href={prefixPath} className="flex items-center">
             <Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={2560} height={1440} className=" w-[200px] h-full shrink-0 object-contain" />
           </Link>
-          <DynamicLogoPolda />
+          <DynamicLogoPolda /> <DynamicLogoSatker />
           {/* Nav Menu */}
           <div className="hidden custom-lg-button:flex items-center gap-5">
             <NavigationMenu>

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,21 +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 ScrollableContentPolda from "./scrollable-content-polda";
+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");
@@ -45,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">
@@ -59,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>
   );

components/landing-page/welcome-polda.tsx

@@ -25,7 +25,7 @@ const WelcomePolda = () => {
   }, [categorySelect]);
 
   return (
-    <section className="w-full py-8 px-4 ">
+    <section className="w-full py-8 px-4">
       <div className="">
         {/* Heading */}
         <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">

components/main/image-detail.tsx

@@ -513,29 +513,29 @@ const DetailImage = (data: any) => {
 
   return (
     <>
-      <div className="min-h-screen px-4 md:px-24 py-4">
+      <div className="w-full max-w-screen-xl mx-auto px-4 py-4">
-        <div className="rounded-md overflow-hidden md:flex">
+        <div className="rounded-md overflow-hidden md:flex flex-row justify-center">
           {/* Bagian Kiri */}
-          <div className="md:w-3/4">
+          <div className="">
             {/* Gambar Besar */}
             {isLoading ? (
               <div className="relative">
                 <Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" />
               </div>
             ) : (
-              <div className="relative">
+              <div className="relative self-end ml-auto">
-                <Image
+  <Image
-                  placeholder={`data:image/svg+xml;base64,${toBase64(
+    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
-                    shimmer(700, 475)
+    width={2560}
-                  )}`}
+    height={1440}
-                  width={2560}
+    src={detailDataImage?.files[selectedImage]?.url}
-                  height={1440}
+    alt="Main"
-                  src={detailDataImage?.files[selectedImage]?.url}
+    className="rounded-md w-full h-[670px] object-contain"
-                  alt="Main"
+  />
-                  className="rounded-lg w-auto h-fit"
+
-                />
+  <div className="absolute top-4 right-4"></div>
-                <div className="absolute top-4 left-4"></div>
+</div>
-              </div>
+
             )}
 
             {/* Gambar bawah Kecil */}
@@ -616,7 +616,7 @@ const DetailImage = (data: any) => {
           </div>
 
           {/* Bagian Kanan */}
-          <div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
+          <div className="p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
             {isSaved ? (
               <a
                 onClick={() => handleDeleteWishlist()}
@@ -1135,7 +1135,7 @@ const DetailImage = (data: any) => {
         </div>
 
         {/* Konten Serupa */}
-        <div className="">
+        <div className="px-4 lg:px-[300px]">
           <NewContent group="mabes" type={"similar"} />
         </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}`
   );
 }