merge main

app/[locale]/(protected)/contributor/content/image/components/columns.tsx

@@ -102,23 +102,31 @@ const columns: ColumnDef<any>[] = [
   },
 
   {
-    accessorKey: "isDone",
+    accessorKey: "statusName",
     header: "Status",
     cell: ({ row }) => {
-      const isDone = row.getValue<boolean>("isDone");
+      const statusColors: Record<string, string> = {
+        diterima: "bg-green-100 text-green-600",
+        "menunggu review": "bg-orange-100 text-orange-600",
+      };
+
+      // Mengambil `statusName` dari data API
+      const status = row.getValue("statusName") as string;
+      const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
+
+      // Gunakan `statusName` untuk pencocokan
+      const statusStyles =
+        statusColors[statusName] || "bg-gray-100 text-gray-600";
+
       return (
-        <div>
+        <Badge
-          <Button
+          className={cn(
-            size="sm"
+            "rounded-full px-5 w-full whitespace-nowrap",
-            color="success"
+            statusStyles
-            variant="outline"
+          )}
-            className={` btn btn-sm ${
+        >
-              isDone ? "btn-outline-success" : "btn-outline-primary"
+          {status} {/* Tetap tampilkan nilai asli */}
-            } pill-btn ml-1`}
+        </Badge>
-          >
-            {isDone ? "Selesai" : "Aktif"}
-          </Button>
-        </div>
       );
     },
   },

app/[locale]/(public)/satker/[satker_name]/page.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import ContentCategory from "@/components/landing-page/content-category";
+import HeaderBannerSatker from "@/components/landing-page/header-banner-satker";
+import NewContent from "@/components/landing-page/new-content";
+import WelcomeSatker from "@/components/landing-page/welcome-satker";
+import React from "react";
+
+const page = () => {
+  return (
+    <div>
+      <HeaderBannerSatker />
+      <WelcomeSatker />
+      <NewContent type="latest" />
+      <NewContent type="popular" />
+      <ContentCategory />
+    </div>
+  );
+};
+
+export default page;

app/[locale]/(public)/satker/layout.tsx

@@ -0,0 +1,22 @@
+import LayoutProvider from "@/providers/layout.provider";
+import LayoutContentProvider from "@/providers/content.provider";
+import DashCodeSidebar from "@/components/partials/sidebar";
+import DashCodeFooter from "@/components/partials/footer";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeHeader from "@/components/partials/header";
+
+import { redirect } from "@/components/navigation";
+import Footer from "@/components/landing-page/footer";
+import Navbar from "@/components/landing-page/navbar";
+
+const layout = async ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  );
+};
+
+export default layout;

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

@@ -375,6 +375,18 @@ export default function FormImageDetail() {
     return false;
   };
 
+  const submitApprovalSuccesss = () => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/in/contributor/content/image");
+    });
+  };
+
   return (
     <form>
       {detail !== undefined ? (

components/form/content/image-form.tsx

@@ -1,5 +1,11 @@
 "use client";
-import React, { ChangeEvent, useEffect, useRef, Fragment, useState } from "react";
+import React, {
+  ChangeEvent,
+  useEffect,
+  useRef,
+  Fragment,
+  useState,
+} from "react";
 import { useForm, Controller } from "react-hook-form";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -7,7 +13,7 @@ import { Label } from "@/components/ui/label";
 import { Card } from "@/components/ui/card";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
-import { Upload } from 'tus-js-client';
+import { Upload } from "tus-js-client";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { redirect, useRouter } from "next/navigation";
@@ -39,6 +45,12 @@ import {
   getGenerateTitle,
 } from "@/service/content/ai";
 import { getCookiesDecrypt } from "@/lib/utils";
+import { useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react";
+import { CloudUpload } from "lucide-react";
+import Image from "next/image";
+import { error, loading } from "@/config/swal";
+import { Item } from "@radix-ui/react-dropdown-menu";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -48,12 +60,6 @@ const imageSchema = z.object({
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { error, loading } from "@/config/swal";
-import { Item } from "@radix-ui/react-dropdown-menu";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -290,19 +296,19 @@ export default function FormImage() {
     setArticleImages(articleImagesData || []);
   };
 
-  // const handleKeyDown = (e: any) => {
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
-  //   const newTag = e.target.value.trim(); // Ambil nilai input
+    if (e.key === "Enter" && e.currentTarget.value.trim()) {
-  //   if (e.key === "Enter" && newTag) {
+      e.preventDefault();
-  //     e.preventDefault(); // Hentikan submit form
+      const newTag = e.currentTarget.value.trim();
-  //     if (!tags.includes(newTag)) {
+      if (!tags.includes(newTag)) {
-  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
+        setTags((prevTags) => [...prevTags, newTag]); // Add new tag
-  //       setValue("tags", ""); // Kosongkan input
+        // setValue("tags", ""); // Clear input field
-  //     }
+      }
-  //   }
+    }
-  // };
+  };
 
-  const handleRemoveTag = (index: any) => {
+  const handleRemoveTag = (index: number) => {
-    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // Remove tag
   };
 
   const handleRemoveImage = (index: number) => {
@@ -346,6 +352,7 @@ export default function FormImage() {
 
   const save = async (data: ImageSchema) => {
     loading();
+    const finalTags = tags.join(", ");
     const finalTitle = isSwitchOn ? title : data.title;
     const requestData = {
       ...data,
@@ -359,12 +366,12 @@ export default function FormImage() {
       statusId: "1",
       publishedFor: "6",
       creatorName: data.creatorName,
-      tags: "siap",
+      tags: finalTags,
       isYoutube: false,
       isInternationalMedia: false,
     };
 
-    let id = Cookies.get('idCreate');
+    let id = Cookies.get("idCreate");
 
     if (id == undefined) {
       const response = await createMedia(requestData);
@@ -374,21 +381,17 @@ export default function FormImage() {
         MySwal.fire("Error", response?.message, "error");
         return;
       }
-      Cookies.set('idCreate', response?.data.data, { expires: 1 });
+      Cookies.set("idCreate", response?.data.data, { expires: 1 });
       id = response?.data?.data;
 
       // Upload Thumbnail
-      if (fileTypeId == '1') {
+      const formMedia = new FormData();
-        const formMedia = new FormData();
+      console.log('Thumbnail : ', files[0]);
-        formMedia.append('file', files[0]);
+      formMedia.append("file", files[0]);
-        const responseThumbnail = await uploadThumbnail(
+      const responseThumbnail = await uploadThumbnail(id, formMedia);
-          formMedia,
+      if (responseThumbnail?.error == true) {
-          id,
+        error(responseThumbnail?.message);
-        );
+        return false;
-        if (responseThumbnail?.error == true) {
-          error(responseThumbnail?.message);
-          return false;
-        }
       }
     }
 
@@ -403,29 +406,20 @@ export default function FormImage() {
 
     close();
     // showProgress();
-    files.map( async (item: any, index: number) => {
+    files.map(async (item: any, index: number) => {
       await uploadResumableFile(
         index,
         String(id),
         item,
-        fileTypeId == '2' || fileTypeId == '4' ? item.duration : '0',
+        fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
       );
     });
 
-    
+    Cookies.remove("idCreate");
-    Cookies.remove('idCreate');
 
     // MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
   };
 
-  // function showProgress() {
-  //   $('#modalProgress').modal('show');
-  // }
-
-  // function hideProgress() {
-  //   $('#modalProgress').modal('hide');
-  // }
-
   const onSubmit = (data: ImageSchema) => {
     MySwal.fire({
       title: "Simpan Data",
@@ -442,7 +436,12 @@ export default function FormImage() {
     });
   };
 
-  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    duration: string
+  ) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -457,13 +456,17 @@ export default function FormImage() {
         filename: file.name,
         filetype: file.type,
         duration,
-        isWatermark: 'true', // hardcode
+        isWatermark: "true", // hardcode
       },
       onError: async (e: any) => {
-        console.log('Error upload :', e);
+        console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -493,7 +496,7 @@ export default function FormImage() {
     }).then(() => {
       router.push(redirect);
     });
-  }
+  };
 
   function successTodo() {
     let counter = 0;
@@ -505,7 +508,7 @@ export default function FormImage() {
     if (counter == progressInfo.length) {
       setIsStartUpload(false);
       // hideProgress();
-      Cookies.remove('idCreate');
+      Cookies.remove("idCreate");
       successSubmit("/in/contributor/content/image/");
     }
   }
@@ -579,7 +582,6 @@ export default function FormImage() {
     setFiles([]);
   };
 
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex lg:flex-row gap-10">
@@ -891,7 +893,8 @@ export default function FormImage() {
                         Tarik file disini atau klik untuk upload.
                       </h4>
                       <div className=" text-xs text-muted-foreground">
-                        ( Upload file dengan format .jpg, .jpeg, atau .png. Ukuran maksimal 100mb.)
+                        ( Upload file dengan format .jpg, .jpeg, atau .png.
+                        Ukuran maksimal 100mb.)
                       </div>
                     </div>
                   </div>
@@ -905,14 +908,16 @@ export default function FormImage() {
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
                         </div>
-                        <Button color="destructive" onClick={handleRemoveAllFiles}>
+                        <Button
+                          color="destructive"
+                          onClick={handleRemoveAllFiles}
+                        >
                           Remove All
                         </Button>
                       </div>
                     </Fragment>
                   ) : null}
                 </Fragment>
-                
               </div>
             </div>
 
@@ -945,38 +950,29 @@ export default function FormImage() {
               </div>
             </div>
             <div className="px-3 py-3">
-              <Label>Tags</Label>
+              <Label htmlFor="tags">Tags</Label>
-              {/* <Controller
+
-                control={control}
+              <Input
-                name="tags"
+                type="text"
-                render={({ field }) => (
+                id="tags"
-                  <Input
+                placeholder="Add a tag and press Enter"
-                    size="md"
+                onKeyDown={handleAddTag}
-                    type="text"
+              />
-                    value={field.value}
+              <div className="mt-3 ">
-                    onChange={field.onChange}
-                    placeholder="Enter Title"
-                    onKeyDown={handleKeyDown}
-                  />
-                )}
-              /> */}
-              <div className="text-sm text-red-500">
-                {tags.length === 0 && "Please add at least one tag."}
-              </div>
-              <div className="flex flex-wrap gap-2 border border-gray-300 mt-2 rounded-md p-2 items-center">
                 {tags.map((tag, index) => (
-                  <div
+                  <span
                     key={index}
-                    className="flex items-center gap-1 bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-medium"
+                    className=" px-1 py-1 rounded-lg bg-black text-white mr-2 text-sm font-sans"
                   >
-                    <span>{tag}</span>
+                    {tag}{" "}
                     <button
-                      className="text-blue-600 hover:text-blue-800 focus:outline-none"
+                      type="button"
                       onClick={() => handleRemoveTag(index)}
+                      className="remove-tag-button"
                     >
                       ×
                     </button>
-                  </div>
+                  </span>
                 ))}
               </div>
             </div>

components/landing-page/division.tsx

@@ -2,50 +2,51 @@ import React, { useState } from "react";
 import { Button } from "../ui/button";
 import { Reveal } from "./Reveal";
 import { Icon } from "@iconify/react/dist/iconify.js";
+import { Link } from "@/i18n/routing";
 
 const Division = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [seeAllValue, setSeeAllValue] = useState(false);
 
   const regions = [
-    { name: "SIBER", logo: "/assets/satker/siber.png" },
+    { name: "SIBER", slug: "siber", logo: "/assets/satker/siber.png" },
-    { name: "DIVKUM", logo: "/assets/satker/divkum.png" },
+    { name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
-    { name: "PUSKEU", logo: "/assets/satker/puskeu.png" },
+    { name: "PUSKEU", slug: "puskeu", logo: "/assets/satker/puskeu.png" },
-    { name: "SSDM", logo: "/assets/satker/ssdm.png" },
+    { name: "SSDM", slug: "ssdm", logo: "/assets/satker/ssdm.png" },
-    { name: "ITWASUM", logo: "/assets/satker/itwasum.png" },
+    { name: "ITWASUM", slug: "itwasum", logo: "/assets/satker/itwasum.png" },
-    { name: "STIK-PTIK", logo: "/assets/satker/stik-ptik.png" },
+    { name: "STIK-PTIK", slug: "stik-ptik", logo: "/assets/satker/stik-ptik.png" },
-    { name: "SATUAN KERJA POLRI", logo: "/assets/satker/satuan-kerja-polri.png" },
+    { name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/assets/satker/satuan-kerja-polri.png" },
-    { name: "BRIMOB", logo: "/assets/satker/brimob.png" },
+    { name: "BRIMOB", slug: "brimob", logo: "/assets/satker/brimob.png" },
-    { name: "DIV HUMAS", logo: "/assets/satker/div-humas.png" },
+    { name: "DIV HUMAS", slug: "div-humas", logo: "/assets/satker/div-humas.png" },
-    { name: "PUSLITBANG", logo: "/assets/satker/puslitbang.png" },
+    { name: "PUSLITBANG", slug: "puslitbang", logo: "/assets/satker/puslitbang.png" },
-    { name: "BINMAS", logo: "/assets/satker/binmas.png" },
+    { name: "BINMAS", slug: "binmas", logo: "/assets/satker/binmas.png" },
-    { name: "DIV TIK", logo: "/assets/satker/div-tik.png" },
+    { name: "DIV TIK", slug: "div-tik", logo: "/assets/satker/div-tik.png" },
-    { name: "SPRIPIM", logo: "/assets/satker/spripim.png" },
+    { name: "SPRIPIM", slug: "spripim", logo: "/assets/satker/spripim.png" },
-    { name: "DIVPROPRAM", logo: "/assets/satker/div-propram.png" },
+    { name: "DIVPROPRAM", slug: "divpropram", logo: "/assets/satker/div-propram.png" },
-    { name: "KORPS SABHARA BAHARKAM", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
+    { name: "KORPS SABHARA BAHARKAM", slug: "korps-sabhara-baharkam", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
-    { name: "PUSDOKKES", logo: "/assets/satker/pusdokkes.png" },
+    { name: "PUSDOKKES", slug: "pusdokkes", logo: "/assets/satker/pusdokkes.png" },
-    { name: "BAHARKAM", logo: "/assets/satker/baharkam.png" },
+    { name: "BAHARKAM", slug: "baharkam", logo: "/assets/satker/baharkam.png" },
-    { name: "POLAIRUD", logo: "/assets/satker/polairud.png" },
+    { name: "POLAIRUD", slug: "polairud", logo: "/assets/satker/polairud.png" },
-    { name: "POLAIR", logo: "/assets/satker/polair.png" },
+    { name: "POLAIR", slug: "polair", logo: "/assets/satker/polair.png" },
-    { name: "POLUDARA", logo: "/assets/satker/poludara.png" },
+    { name: "POLUDARA", slug: "poludara", logo: "/assets/satker/poludara.png" },
-    { name: "LEMDIKLAT", logo: "/assets/satker/lemdiklat.png" },
+    { name: "LEMDIKLAT", slug: "lemdiklat", logo: "/assets/satker/lemdiklat.png" },
-    { name: "AKPOL", logo: "/assets/satker/akpol.png" },
+    { name: "AKPOL", slug: "akpol", logo: "/assets/satker/akpol.png" },
-    { name: "KORLANTAS", logo: "/assets/satker/korlantas.png" },
+    { name: "KORLANTAS", slug: "korlantas", logo: "/assets/satker/korlantas.png" },
-    { name: "PUSINAFIS", logo: "/assets/satker/pusinafis.png" },
+    { name: "PUSINAFIS", slug: "pusinafis", logo: "/assets/satker/pusinafis.png" },
-    { name: "PUSJARAH", logo: "/assets/satker/pusjarah.png" },
+    { name: "PUSJARAH", slug: "pusjarah", logo: "/assets/satker/pusjarah.png" },
-    { name: "PUSIKNAS", logo: "/assets/satker/pusiknas.png" },
+    { name: "PUSIKNAS", slug: "pusiknas", logo: "/assets/satker/pusiknas.png" },
-    { name: "SLOG", logo: "/assets/satker/slog.png" },
+    { name: "SLOG", slug: "slog", logo: "/assets/satker/slog.png" },
-    { name: "BAINTELKAM", logo: "/assets/satker/baintelkam.jpg" },
+    { name: "BAINTELKAM", slug: "baintelkam", logo: "/assets/satker/baintelkam.jpg" },
-    { name: "BARESKRIM", logo: "/assets/satker/bareskrim.png" },
+    { name: "BARESKRIM", slug: "bareskrim", logo: "/assets/satker/bareskrim.png" },
-    { name: "DIVHUBINTER", logo: "/assets/satker/divhubinter.png" },
+    { name: "DIVHUBINTER", slug: "divhubinter", logo: "/assets/satker/divhubinter.png" },
-    { name: "SETUM", logo: "/assets/satker/setum.png" },
+    { name: "SETUM", slug: "setum", logo: "/assets/satker/setum.png" },
-    { name: "PUSLABFOR", logo: "/assets/satker/puslabfor.png" },
+    { name: "PUSLABFOR", slug: "puslabfor", logo: "/assets/satker/puslabfor.png" },
-    { name: "DENSUS 88", logo: "/assets/satker/densus88.png" },
+    { name: "DENSUS 88", slug: "densus-88", logo: "/assets/satker/densus88.png" },
-    { name: "SAHLI KAPOLRI", logo: "/assets/satker/sahli-kapolri.png" },
+    { name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/assets/satker/sahli-kapolri.png" },
-    { name: "SOPS", logo: "/assets/satker/sops.png" },
+    { name: "SOPS", slug: "sops", logo: "/assets/satker/sops.png" },
-    { name: "SRENA", logo: "/assets/satker/srena.png" },
+    { name: "SRENA", slug: "srena", logo: "/assets/satker/srena.png" },
-    { name: "SESPIM POLRI", logo: "/assets/satker/sespim-polri.png" },
+    { name: "SESPIM POLRI", slug: "sespim-polri", logo: "/assets/satker/sespim-polri.png" },
-    { name: "SETUPA POLRI", logo: "/assets/satker/setupa-polri.png" },
+    { name: "SETUPA POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" },
   ];
 
   return (
@@ -70,22 +71,22 @@ const Division = () => {
           {regions.map((region, index) =>
             !seeAllValue ? (
               index < 7 ? (
-                <div key={index} className="flex flex-col items-center text-center group">
+                <Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
                   <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
                     <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
                   </div>
                   <p className="text-md font-semibold">{region.name}</p>
-                </div>
+                </Link>
               ) : (
                 ""
               )
             ) : (
-              <div key={index} className="flex flex-col items-center text-center group">
+              <Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
                 <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
                   <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
                 </div>
                 <p className="text-md font-semibold">{region.name}</p>
-              </div>
+              </Link>
             )
           )}
         </div>

components/landing-page/header-banner-satker.tsx

@@ -0,0 +1,121 @@
+"use client";
+import { listData } from "@/service/landing/landing";
+import { useParams, usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import { Link } from "@/i18n/routing";
+import { getPublicLocaleTimestamp } from "@/utils/globals";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+
+const HeaderBannerSatker = () => {
+  const router = useRouter();
+  const params = useParams();
+  const satkerName: any = params?.satker_name;
+  const asPath: any = usePathname();
+  const [content, setContent] = useState([]);
+
+  const [isBannerLoading, setIsBannerLoading] = useState(true);
+  const [centerPadding, setCenterPadding] = useState<any>();
+
+  useEffect(() => {
+    // async function initState() {
+    //   const res = await listCarousel();
+    //   setContent(res.data?.data);
+    //   setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
+    // }
+
+    async function fetchData() {
+      const res = await listData("1", "", "", 5, 0, "createdAt", "", "", satkerName);
+      let data = res?.data?.data?.content;
+      setContent(data);
+      setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
+      setIsBannerLoading(false);
+      console.log("Done");
+    }
+
+    fetchData();
+  }, [params?.page]);
+
+  const settings = {
+    className: "center",
+    // centerMode: true,
+    infinite: true,
+    centerPadding,
+    slidesToShow: 2,
+    autoplay: true,
+    speed: 1500,
+    autoplaySpeed: 15_000,
+    focusOnSelect: true,
+    responsive: [
+      {
+        breakpoint: 768,
+        settings: {
+          arrows: false,
+          centerMode: true,
+          centerPadding: "60px",
+          slidesToShow: 1,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          arrows: false,
+          centerMode: true,
+          centerPadding: "20px",
+          slidesToShow: 1,
+        },
+      },
+    ],
+  };
+  return (
+    <div>
+      {/* Header */}
+      <div className="p-6 lg:px-16 flex flex-col lg:flex-row">
+        {isBannerLoading ? (
+          <SkeletonTheme highlightColor="#f2f2f2">
+            <Skeleton className="w-[100%] h-[480px]" />
+          </SkeletonTheme>
+        ) : (
+          <div className="mt-3">
+            <Carousel className="w-full h-full">
+              <CarouselContent>
+                {content?.map((row: any) => (
+                  <CarouselItem key={row?.id} className="basis-1/2">
+                    <div className="relative h-[310px] lg:h-[420px]">
+                      <img src={row?.thumbnailLink} alt="" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
+                      <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
+                        <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{row?.categoryName}</span>
+                        <Link
+                          href={
+                            Number(row.fileType?.id) == 1
+                              ? `${asPath.includes("/satker/") == true ? asPath : ""}/image/detail/${row.slug}`
+                              : Number(row.fileType?.id) == 2
+                              ? `/video/detail/${row.slug}`
+                              : Number(row.fileType?.id) == 3
+                              ? `/document/detail/${row.slug}`
+                              : `/audio/detail/${row.slug}`
+                          }
+                        >
+                          <h3>{row.title}</h3>
+                        </Link>
+                        <p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
+                          {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
+                          <Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
+                        </p>
+                      </div>
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HeaderBannerSatker;

components/landing-page/welcome-polda.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from "react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
 import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { capitalize } from "@/utils/globals";
 
 const WelcomePolda = () => {
   const router = useRouter();

components/landing-page/welcome-satker.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useParams, usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { capitalize } from "@/utils/globals";
+
+const WelcomeSatker = () => {
+  const router = useRouter();
+  const asPath: any = usePathname();
+  const params = useParams();
+  const satkerName: any = params?.satker_name;
+  const [categorySelect, setCategorySelect] = useState("0");
+  const [search, setSearch] = useState();
+
+  useEffect(() => {
+    function initState() {
+      console.log(categorySelect);
+    }
+
+    initState();
+  }, [categorySelect]);
+
+  return (
+    <section className="w-full py-8 px-4 ">
+      <div className="max-w-screen-xl mx-auto text-center">
+        {/* Heading */}
+        <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
+          Selamat Datang di <span className="text-[#bb3523] dark:text-white">Satker</span> <span className="capitalize">{satkerName.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">
+          Liputan resmi yang bersumber dari kegiatan Polri di Satker <span className="capitalize">{satkerName.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>
+                  Konten
+                  <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" />
+                    Audio Visual
+                  </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" />
+                    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" />
+                    Foto
+                  </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" />
+                    Teks
+                  </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="Pencarian" className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
+            </div>
+          </div>
+
+          {/* Search Input */}
+
+          {/* 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">
+            Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WelcomeSatker;

service/auth.ts

@@ -13,6 +13,7 @@ export async function login(data: any) {
     'content-type': 'application/x-www-form-urlencoded',
   };
   return httpPost(pathUrl, headers, qs.stringify(data));
+
 }
 
 export async function getProfile(token: any) {