From 9b4016af8029bc227cf89d44f7a6a09c9f37e051 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Fri, 30 May 2025 23:08:12 +0700
Subject: [PATCH 1/8] feat:news all filter, document attach article

---
 .../admin/comment/review/[id]/page.tsx        |   3 +-
 .../form/article/create-article-form.tsx      | 367 ++++++++++++++----
 components/form/article/edit-article-form.tsx | 361 +++++++++++++----
 components/form/login.tsx                     | 162 ++++----
 components/landing/HeaderNews.tsx             | 154 +++++---
 components/landing/NewsTicker.tsx             |   8 +-
 components/landing/footer-new.tsx             |   8 +
 components/layout/navbar/NavbarHumas.tsx      |  20 +
 components/main/detail/e-magazine-detail.tsx  |   6 +-
 components/main/detail/list-news.tsx          | 236 +++++++++--
 components/main/detail/new-detail.tsx         |   5 +-
 components/page/detail-news.tsx               | 106 ++++-
 components/page/related-news.tsx              |  13 +-
 components/page/sidebar-detail.tsx            | 210 +++++-----
 components/table/comment/comment-table.tsx    |   3 +
 components/table/tabel-emajalah-polri.tsx     |  19 +-
 services/article.ts                           |  15 +-
 17 files changed, 1217 insertions(+), 479 deletions(-)

diff --git a/app/(admin)/admin/comment/review/[id]/page.tsx b/app/(admin)/admin/comment/review/[id]/page.tsx
index 65fadc3..62adf39 100644
--- a/app/(admin)/admin/comment/review/[id]/page.tsx
+++ b/app/(admin)/admin/comment/review/[id]/page.tsx
@@ -54,7 +54,6 @@ export default function ReviewComment() {
     setDetailData(res?.data?.data);
     const resArticle = await getArticleById(res?.data?.data?.articleId);
     setDetailArticle(resArticle?.data?.data);
-    console.log("iddd", res?.data?.data);
     close();
   };
 
@@ -115,7 +114,7 @@ export default function ReviewComment() {
 
   return (
     <div className="p-8">
-      <div className="bg-white shadow-lg p-4 rounded-lg flex flex-col gap-3 text-sm w-full lg:w-1/2">
+      <div className="bg-white text-black shadow-lg p-4 rounded-lg flex flex-col gap-3 text-sm w-full lg:w-1/2">
         <div className="flex flex-col gap-1">
           <p>Artikel</p>
           <Link
diff --git a/components/form/article/create-article-form.tsx b/components/form/article/create-article-form.tsx
index 5e7868d..f087f47 100644
--- a/components/form/article/create-article-form.tsx
+++ b/components/form/article/create-article-form.tsx
@@ -4,6 +4,7 @@ import {
   Fragment,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -14,7 +15,6 @@ import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { Input, Textarea } from "@heroui/input";
 import dynamic from "next/dynamic";
-import JoditEditor from "jodit-react";
 import { useDropzone } from "react-dropzone";
 import { Button } from "@heroui/button";
 import { CloudUploadIcon, TimesIcon } from "@/components/icons";
@@ -44,6 +44,8 @@ import {
   Select,
   SelectItem,
   SelectSection,
+  Tab,
+  Tabs,
   useDisclosure,
 } from "@heroui/react";
 import GenerateSingleArticleForm from "./generate-ai-single-form";
@@ -60,6 +62,7 @@ import GenerateContentRewriteForm from "./generate-ai-content-rewrite-form";
 import Datepicker from "react-tailwindcss-datepicker";
 import Cookies from "js-cookie";
 import { getUserLevels } from "@/services/user-levels/user-levels-service";
+import { PdfIcon, WordIcon } from "@/components/icons/globals";
 
 const CustomEditor = dynamic(
   () => {
@@ -112,6 +115,20 @@ const createArticleSchema = z.object({
   }),
 });
 
+const renderPreview = (file: File) => {
+  if (file.type === "application/pdf") {
+    return <PdfIcon size={60} />;
+  } else if (
+    file.type ===
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
+    file.type === "application/msword"
+  ) {
+    return <WordIcon size={60} />;
+  } else {
+    return "File";
+  }
+};
+
 export default function CreateArticleForm() {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const userLevel = Cookies.get("ulne");
@@ -124,11 +141,16 @@ export default function CreateArticleForm() {
   const [listCategory, setListCategory] = useState<CategoryType[]>([]);
   const [tag, setTag] = useState("");
   const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
+  const [thumbnailDocumentImg, setThumbnailDocumentImg] = useState<File[]>([]);
+  const [documentFiles, setDocumentFiles] = useState<File[]>([]);
   const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
     null
   );
   const [thumbnailValidation, setThumbnailValidation] = useState("");
+  const [thumbnailDocumentValidation, setThumbnailDocumentValidation] =
+    useState("");
   const [filesValidation, setFileValidation] = useState("");
+  const [documentValidation, setDocumentValidation] = useState("");
   const [diseData, setDiseData] = useState<DiseData>();
   const [selectedWritingType, setSelectedWritingType] = useState("single");
   const [status, setStatus] = useState<"publish" | "draft" | "scheduled">(
@@ -139,17 +161,37 @@ export default function CreateArticleForm() {
 
   const [startDateValue, setStartDateValue] = useState<any>(null);
 
+  const [selectedFileType, setSelectedFileType] = useState("image");
+
   const { getRootProps, getInputProps } = useDropzone({
+    accept:
+      selectedFileType === "image"
+        ? {
+            "image/*": [],
+          }
+        : {
+            "application/pdf": [],
+            "application/msword": [],
+            "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+              [],
+            "application/vnd.ms-powerpoint": [],
+            "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+              [],
+          },
     onDrop: (acceptedFiles) => {
-      setFiles((prevFiles) => [
-        ...prevFiles,
-        ...acceptedFiles.map((file) => Object.assign(file)),
-      ]);
+      if (selectedFileType === "image") {
+        setFiles((prevFiles) => [
+          ...prevFiles,
+          ...acceptedFiles.map((file) => Object.assign(file)),
+        ]);
+      } else {
+        setDocumentFiles((prevFiles) => [
+          ...prevFiles,
+          ...acceptedFiles.map((file) => Object.assign(file)),
+        ]);
+      }
     },
     multiple: true,
-    accept: {
-      "image/*": [],
-    },
   });
 
   const formOptions = {
@@ -193,17 +235,33 @@ export default function CreateArticleForm() {
   };
 
   const onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
-    if ((thumbnailImg.length < 1 && !selectedMainImage) || files.length < 1) {
+    if (
+      (selectedFileType === "image" &&
+        ((thumbnailImg.length < 1 && !selectedMainImage) ||
+          files.length < 1)) ||
+      (selectedFileType === "document" &&
+        (documentFiles.length < 1 || thumbnailDocumentImg.length < 1))
+    ) {
       if (files.length < 1) {
         setFileValidation("Required");
       } else {
         setFileValidation("");
       }
+      if (documentFiles.length < 1) {
+        setDocumentValidation("Required");
+      } else {
+        setDocumentValidation("");
+      }
       if (thumbnailImg.length < 1 && !selectedMainImage) {
         setThumbnailValidation("Required");
       } else {
         setThumbnailValidation("");
       }
+      if (thumbnailDocumentImg.length < 1) {
+        setThumbnailDocumentValidation("Required");
+      } else {
+        setThumbnailDocumentValidation("");
+      }
     } else {
       setThumbnailValidation("");
       setFileValidation("");
@@ -293,9 +351,9 @@ export default function CreateArticleForm() {
   };
 
   const save = async (values: z.infer<typeof createArticleSchema>) => {
+    // const userLevelStatus = await getUserLevelApprovalStatus();
     loading();
 
-    const userLevelStatus = await getUserLevelApprovalStatus();
     const formData = {
       title: values.title,
       typeId: 1,
@@ -311,6 +369,8 @@ export default function CreateArticleForm() {
       isPublish: status === "publish",
     };
 
+    console.log("formData", formData);
+
     const response = await createArticle(formData);
 
     if (response?.error) {
@@ -319,31 +379,51 @@ export default function CreateArticleForm() {
     }
     const articleId = response?.data?.data?.id;
 
-    if (files?.length > 0) {
+    if (files?.length > 0 || documentFiles.length > 0) {
       const formFiles = new FormData();
 
-      for (const element of files) {
-        formFiles.append("file", element);
-        const resFile = await uploadArticleFile(articleId, formFiles);
+      if (selectedFileType === "image") {
+        for (const element of files) {
+          formFiles.append("file", element);
+          const resFile = await uploadArticleFile(articleId, formFiles);
+        }
+      }
+
+      if (selectedFileType === "document") {
+        for (const element of documentFiles) {
+          formFiles.append("file", element);
+          const resFile = await uploadArticleFile(articleId, formFiles);
+        }
       }
     }
-    if (thumbnailImg?.length > 0 || files?.length > 0) {
-      if (thumbnailImg?.length > 0) {
-        const formFiles = new FormData();
-
-        formFiles.append("files", thumbnailImg[0]);
-        const resFile = await uploadArticleThumbnail(articleId, formFiles);
-      } else {
-        const formFiles = new FormData();
-
-        if (selectedMainImage) {
-          formFiles.append("files", files[selectedMainImage - 1]);
+    if (selectedFileType === "image") {
+      if (thumbnailImg?.length > 0 || files?.length > 0) {
+        if (thumbnailImg?.length > 0) {
+          const formFiles = new FormData();
 
+          formFiles.append("files", thumbnailImg[0]);
           const resFile = await uploadArticleThumbnail(articleId, formFiles);
+        } else {
+          const formFiles = new FormData();
+
+          if (selectedMainImage) {
+            formFiles.append("files", files[selectedMainImage - 1]);
+
+            const resFile = await uploadArticleThumbnail(articleId, formFiles);
+          }
         }
       }
     }
 
+    if (selectedFileType === "document") {
+      if (thumbnailDocumentImg?.length > 0) {
+        const formFiles = new FormData();
+
+        formFiles.append("files", thumbnailDocumentImg[0]);
+        const resFile = await uploadArticleThumbnail(articleId, formFiles);
+      }
+    }
+
     if (status === "scheduled") {
       const request = {
         id: articleId,
@@ -406,10 +486,18 @@ export default function CreateArticleForm() {
     }
   };
 
-  const handleRemoveFile = (file: FileWithPreview) => {
-    const uploadedFiles = files;
-    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
-    setFiles([...filtered]);
+  const handleRemoveFile = (file: FileWithPreview | File, type: string) => {
+    if (type === "image") {
+      const uploadedFiles = files;
+      const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+      setFiles([...filtered]);
+    }
+
+    if (type === "document") {
+      const uploadedFiles = documentFiles;
+      const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+      setDocumentFiles([...filtered]);
+    }
   };
 
   const fileList = files.map((file, index) => (
@@ -444,17 +532,55 @@ export default function CreateArticleForm() {
       <Button
         className=" border-none rounded-full"
         variant="bordered"
-        onClick={() => handleRemoveFile(file)}
+        onPress={() => handleRemoveFile(file, "image")}
       >
-        <TimesIcon />
+        <TimesIcon className="text-black" />
       </Button>
     </div>
   ));
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const documentList = documentFiles.map((file, index) => (
+    <div
+      key={file.name}
+      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        <div className="file-preview">{renderPreview(file)}</div>
+        <div>
+          <div className=" text-sm  text-card-foreground">{file.name}</div>
+          <div className=" text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        className=" border-none rounded-full"
+        variant="bordered"
+        onPress={() => handleRemoveFile(file, "document")}
+      >
+        <TimesIcon className="text-black" />
+      </Button>
+    </div>
+  ));
+
+  const handleFileChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    type: string
+  ) => {
     const selectedFiles = event.target.files;
     if (selectedFiles) {
-      setThumbnailImg(Array.from(selectedFiles));
+      if (type === "image") {
+        setThumbnailImg(Array.from(selectedFiles));
+      }
+      if (type === "document") {
+        setThumbnailDocumentImg(Array.from(selectedFiles));
+      }
     }
   };
 
@@ -612,43 +738,134 @@ export default function CreateArticleForm() {
         )}
 
         <p className="text-sm mt-3">File Media</p>
-        <Fragment>
-          <div {...getRootProps({ className: "dropzone" })}>
-            <input {...getInputProps()} />
-            <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
-              <CloudUploadIcon size={50} className="text-gray-300" />
-              <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
-                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.)
-              </div>
-            </div>
-          </div>
-          {files.length ? (
+        <Tabs
+          selectedKey={selectedFileType}
+          onSelectionChange={(e) => {
+            setSelectedFileType(String(e));
+          }}
+        >
+          <Tab key="image" title="Foto">
             <Fragment>
-              <div>{fileList}</div>
-              <div className=" flex justify-between gap-2">
-                <Button onPress={() => setFiles([])} size="sm">
-                  Hapus Semua
-                </Button>
+              <div {...getRootProps({ className: "dropzone" })}>
+                <input {...getInputProps()} />
+                <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                  <CloudUploadIcon size={50} className="text-gray-300" />
+                  <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                    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.)
+                  </div>
+                </div>
               </div>
+              {files.length ? (
+                <Fragment>
+                  <div>{fileList}</div>
+                  <div className=" flex justify-between gap-2">
+                    <Button onPress={() => setFiles([])} size="sm">
+                      Hapus Semua
+                    </Button>
+                  </div>
+                </Fragment>
+              ) : null}
             </Fragment>
-          ) : null}
-        </Fragment>
-        {filesValidation !== "" && files.length < 1 && (
-          <p className="text-red-400 text-sm mb-3">Upload File Media</p>
-        )}
+            {filesValidation !== "" && files.length < 1 && (
+              <p className="text-red-400 text-sm mb-3">Upload File Media</p>
+            )}
+          </Tab>
+          <Tab key="document" title="Dokumen">
+            <Fragment>
+              <div {...getRootProps({ className: "dropzone" })}>
+                <input {...getInputProps()} />
+                <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                  <CloudUploadIcon size={50} className="text-gray-300" />
+                  <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                    Tarik file disini atau klik untuk upload.
+                  </h4>
+                  <div className=" text-xs text-muted-foreground">
+                    ( Upload file dengan format .pdf, atau .docx. Ukuran
+                    maksimal 100mb.)
+                  </div>
+                </div>
+              </div>
+              {documentFiles.length ? (
+                <Fragment>
+                  <div>{documentList}</div>
+                  <div className=" flex justify-between gap-2">
+                    <Button onPress={() => setFiles([])} size="sm">
+                      Hapus Semua
+                    </Button>
+                  </div>
+                </Fragment>
+              ) : null}
+            </Fragment>
+            {documentValidation !== "" && documentFiles.length < 1 && (
+              <p className="text-red-400 text-sm mb-3">Upload Document</p>
+            )}
+          </Tab>
+        </Tabs>
       </div>
       <div className="w-full lg:w-[35%]  flex flex-col gap-8">
         <div className="h-fit bg-white rounded-lg p-8 flex flex-col gap-1">
           <p className="text-sm">Thubmnail</p>
 
-          {selectedMainImage && files.length >= selectedMainImage ? (
+          {selectedFileType === "image" ? (
+            selectedMainImage && files.length >= selectedMainImage ? (
+              <div className="flex flex-row">
+                <img
+                  src={URL.createObjectURL(files[selectedMainImage - 1])}
+                  className="w-[30%]"
+                  alt="thumbnail"
+                />
+                <Button
+                  className=" border-none rounded-full"
+                  variant="bordered"
+                  size="sm"
+                  color="danger"
+                  onPress={() => setSelectedMainImage(null)}
+                >
+                  <TimesIcon />
+                </Button>
+              </div>
+            ) : thumbnailImg.length > 0 ? (
+              <div className="flex flex-row">
+                <img
+                  src={URL.createObjectURL(thumbnailImg[0])}
+                  className="w-[30%]"
+                  alt="thumbnail"
+                />
+                <Button
+                  className=" border-none rounded-full"
+                  variant="bordered"
+                  size="sm"
+                  color="danger"
+                  onPress={() => setThumbnailImg([])}
+                >
+                  <TimesIcon />
+                </Button>
+              </div>
+            ) : (
+              <>
+                <input
+                  id="file-upload"
+                  type="file"
+                  multiple
+                  className="w-fit h-fit"
+                  accept="image/*"
+                  onChange={(e) => handleFileChange(e, "image")}
+                />
+                {thumbnailValidation !== "" && (
+                  <p className="text-red-400 text-sm mb-3">
+                    Upload thumbnail atau pilih dari File Media
+                  </p>
+                )}
+              </>
+            )
+          ) : thumbnailDocumentImg.length > 0 ? (
             <div className="flex flex-row">
               <img
-                src={URL.createObjectURL(files[selectedMainImage - 1])}
+                src={URL.createObjectURL(thumbnailDocumentImg[0])}
                 className="w-[30%]"
                 alt="thumbnail"
               />
@@ -657,45 +874,23 @@ export default function CreateArticleForm() {
                 variant="bordered"
                 size="sm"
                 color="danger"
-                onClick={() => setSelectedMainImage(null)}
-              >
-                <TimesIcon />
-              </Button>
-            </div>
-          ) : thumbnailImg.length > 0 ? (
-            <div className="flex flex-row">
-              <img
-                src={URL.createObjectURL(thumbnailImg[0])}
-                className="w-[30%]"
-                alt="thumbnail"
-              />
-              <Button
-                className=" border-none rounded-full"
-                variant="bordered"
-                size="sm"
-                color="danger"
-                onPress={() => setThumbnailImg([])}
+                onPress={() => setThumbnailDocumentImg([])}
               >
                 <TimesIcon />
               </Button>
             </div>
           ) : (
             <>
-              {/* <label htmlFor="file-upload">
-                <button>Upload Thumbnail</button>
-              </label>{" "} */}
               <input
                 id="file-upload"
                 type="file"
                 multiple
                 className="w-fit h-fit"
                 accept="image/*"
-                onChange={handleFileChange}
+                onChange={(e) => handleFileChange(e, "document")}
               />
-              {thumbnailValidation !== "" && (
-                <p className="text-red-400 text-sm mb-3">
-                  Upload thumbnail atau pilih dari File Media
-                </p>
+              {thumbnailDocumentValidation !== "" && (
+                <p className="text-red-400 text-sm mb-3">Upload thumbnail</p>
               )}
             </>
           )}
diff --git a/components/form/article/edit-article-form.tsx b/components/form/article/edit-article-form.tsx
index 61b7349..0b9316a 100644
--- a/components/form/article/edit-article-form.tsx
+++ b/components/form/article/edit-article-form.tsx
@@ -26,6 +26,8 @@ import {
 import ReactSelect from "react-select";
 import makeAnimated from "react-select/animated";
 import {
+  Accordion,
+  AccordionItem,
   Calendar,
   Chip,
   Modal,
@@ -36,10 +38,16 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Tab,
+  Tabs,
   useDisclosure,
 } from "@heroui/react";
 import GenerateSingleArticleForm from "./generate-ai-single-form";
-import { convertDateFormatNoTime, htmlToString } from "@/utils/global";
+import {
+  convertDateFormatNoTime,
+  formatMonthString,
+  htmlToString,
+} from "@/utils/global";
 import { close, error, loading } from "@/config/swal";
 import { useParams, useRouter } from "next/navigation";
 import { fromJSON, list } from "postcss";
@@ -47,6 +55,7 @@ import GetSeoScore from "./get-seo-score-form";
 import Link from "next/link";
 import { stringify } from "querystring";
 import Cookies from "js-cookie";
+import { PdfIcon, WordIcon } from "@/components/icons/globals";
 
 const ViewEditor = dynamic(
   () => {
@@ -105,6 +114,20 @@ interface DiseData {
   additionalKeywords: string;
 }
 
+const renderPreview = (file: File) => {
+  if (file.type === "application/pdf") {
+    return <PdfIcon size={60} />;
+  } else if (
+    file.type ===
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
+    file.type === "application/msword"
+  ) {
+    return <WordIcon size={60} />;
+  } else {
+    return "File";
+  }
+};
+
 export default function EditArticleForm(props: { isDetail: boolean }) {
   const { isDetail } = props;
   const params = useParams();
@@ -116,6 +139,8 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
   const router = useRouter();
   const editor = useRef(null);
   const [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [documentFiles, setDocumentFiles] = useState<File[]>([]);
+
   const [useAi, setUseAI] = useState(false);
   const [listCategory, setListCategory] = useState<CategoryType[]>([]);
   const [tag, setTag] = useState("");
@@ -134,20 +159,40 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
   const [detailData, setDetailData] = useState<any>();
   const [startDateValue, setStartDateValue] = useState<any>(null);
   const [timeValue, setTimeValue] = useState("00:00");
+  const [documentValidation, setDocumentValidation] = useState("");
+  const [filesValidation, setFileValidation] = useState("");
+  const [selectedFileType, setSelectedFileType] = useState("image");
 
   const { getRootProps, getInputProps } = useDropzone({
+    accept:
+      selectedFileType === "image"
+        ? {
+            "image/*": [],
+          }
+        : {
+            "application/pdf": [],
+            "application/msword": [],
+            "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+              [],
+            "application/vnd.ms-powerpoint": [],
+            "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+              [],
+          },
     onDrop: (acceptedFiles) => {
-      setFiles((prevFiles) => [
-        ...prevFiles,
-        ...acceptedFiles.map((file) => Object.assign(file)),
-      ]);
+      if (selectedFileType === "image") {
+        setFiles((prevFiles) => [
+          ...prevFiles,
+          ...acceptedFiles.map((file) => Object.assign(file)),
+        ]);
+      } else {
+        setDocumentFiles((prevFiles) => [
+          ...prevFiles,
+          ...acceptedFiles.map((file) => Object.assign(file)),
+        ]);
+      }
     },
     multiple: true,
-    accept: {
-      "image/*": [],
-    },
   });
-
   const formOptions = {
     resolver: zodResolver(createArticleSchema),
     defaultValues: { title: "", description: "", category: [], tags: [] },
@@ -181,7 +226,14 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
     setThumbnail(data?.thumbnailUrl);
     setDiseId(data?.aiArticleId);
     setDetailFiles(data?.files);
-
+    if (
+      data.files[0].file_name.split(".")[1].includes("doc") ||
+      data.files[0].file_name.split(".")[1].includes("pdf")
+    ) {
+      setSelectedFileType("document");
+    } else {
+      setSelectedFileType("image");
+    }
     setupInitCategory(data?.categories);
     close();
   }
@@ -358,12 +410,19 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
     }
   };
 
-  const handleRemoveFile = (file: FileWithPreview) => {
-    const uploadedFiles = files;
-    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
-    setFiles([...filtered]);
-  };
+  const handleRemoveFile = (file: FileWithPreview | File, type: string) => {
+    if (type === "image") {
+      const uploadedFiles = files;
+      const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+      setFiles([...filtered]);
+    }
 
+    if (type === "document") {
+      const uploadedFiles = documentFiles;
+      const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+      setDocumentFiles([...filtered]);
+    }
+  };
   const fileList = files.map((file) => (
     <div
       key={file.name}
@@ -387,13 +446,43 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
       <Button
         className=" border-none rounded-full"
         variant="bordered"
-        onClick={() => handleRemoveFile(file)}
+        onPress={() => handleRemoveFile(file, "image")}
       >
         <TimesIcon />
       </Button>
     </div>
   ));
 
+  const documentList = documentFiles.map((file, index) => (
+    <div
+      key={file.name}
+      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        <div className="file-preview">{renderPreview(file)}</div>
+        <div>
+          <div className=" text-sm  text-card-foreground">{file.name}</div>
+          <div className=" text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        className=" border-none rounded-full"
+        variant="bordered"
+        onPress={() => handleRemoveFile(file, "document")}
+      >
+        <TimesIcon className="text-black" />
+      </Button>
+    </div>
+  ));
+
   const handleDeleteFile = (id: number) => {
     MySwal.fire({
       title: "Hapus File",
@@ -559,14 +648,6 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
           control={control}
           name="description"
           render={({ field: { onChange, value } }) =>
-            // <CustomEditor onChange={onChange} initialData={value} />
-            // <JoditEditor
-            //   ref={editor}
-            //   value={value}
-            //   onChange={onChange}
-            //   config={{ readonly: isDetail }}
-            //   className="dark:text-black"
-            // />
             isDetail ? (
               <ViewEditor initialData={value} />
             ) : (
@@ -582,66 +663,167 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
 
         <p className="text-sm mt-3">File Media</p>
         {!isDetail && (
-          <Fragment>
-            <div {...getRootProps({ className: "dropzone" })}>
-              <input {...getInputProps()} />
-              <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
-                <CloudUploadIcon size={50} className="text-gray-300" />
-                <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
-                  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.)
-                </div>
-              </div>
-            </div>
-            {files.length ? (
+          <Tabs
+            isDisabled
+            selectedKey={selectedFileType}
+            onSelectionChange={(e) => {
+              setSelectedFileType(String(e));
+            }}
+          >
+            <Tab key="image" title="Foto">
               <Fragment>
-                <div className="flex flex-col">{fileList}</div>
-                <div className=" flex justify-between gap-2">
-                  {/* <div className="flex flex-row items-center gap-3 py-3">
-                  <Label>Gunakan Watermark</Label>
-                  <div className="flex items-center gap-3">
-                    <Switch defaultChecked color="primary" id="c2" />
+                <div {...getRootProps({ className: "dropzone" })}>
+                  <input {...getInputProps()} />
+                  <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                    <CloudUploadIcon size={50} className="text-gray-300" />
+                    <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                      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.)
+                    </div>
                   </div>
-                </div> */}
                 </div>
+                {files.length ? (
+                  <Fragment>
+                    <div>{fileList}</div>
+                    <div className=" flex justify-between gap-2">
+                      <Button onPress={() => setFiles([])} size="sm">
+                        Hapus Semua
+                      </Button>
+                    </div>
+                  </Fragment>
+                ) : null}
               </Fragment>
-            ) : null}
-          </Fragment>
+              {filesValidation !== "" && files.length < 1 && (
+                <p className="text-red-400 text-sm mb-3">Upload File Media</p>
+              )}
+            </Tab>
+            <Tab key="document" title="Dokumen">
+              <Fragment>
+                <div {...getRootProps({ className: "dropzone" })}>
+                  <input {...getInputProps()} />
+                  <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                    <CloudUploadIcon size={50} className="text-gray-300" />
+                    <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                      Tarik file disini atau klik untuk upload.
+                    </h4>
+                    <div className=" text-xs text-muted-foreground">
+                      ( Upload file dengan format .pdf, atau .docx. Ukuran
+                      maksimal 100mb.)
+                    </div>
+                  </div>
+                </div>
+                {documentFiles.length ? (
+                  <Fragment>
+                    <div>{documentList}</div>
+                    <div className=" flex justify-between gap-2">
+                      <Button onPress={() => setFiles([])} size="sm">
+                        Hapus Semua
+                      </Button>
+                    </div>
+                  </Fragment>
+                ) : null}
+              </Fragment>
+              {documentValidation !== "" && documentFiles.length < 1 && (
+                <p className="text-red-400 text-sm mb-3">Upload Document</p>
+              )}
+            </Tab>
+          </Tabs>
         )}
 
         {isDetail ? (
           detailfiles.length > 0 ? (
-            <>
-              <div>
-                <Image
-                  alt="main"
-                  width={720}
-                  height={480}
-                  src={detailfiles[mainImage]?.file_url}
-                  className="w-[75%] mx-auto"
-                />
-              </div>
-              <div className="flex flex-row gap-2">
-                {detailfiles?.map((file: any, index: number) => (
-                  <a
-                    key={index}
-                    onClick={() => setMainImage(index)}
-                    className="cursor-pointer"
+            selectedFileType === "document" ? (
+              detailfiles?.map((file: any, index: number) => (
+                <Accordion key={file?.id} variant="splitted" className="px-0">
+                  <AccordionItem
+                    key={file?.id}
+                    aria-label={file?.title}
+                    className="p-2"
+                    title={
+                      <p className="text-black dark:text-white font-semibold text-xs md:text-sm">
+                        {`File ${index + 1}`}
+                      </p>
+                    }
                   >
-                    <Image
-                      width={480}
-                      height={360}
-                      alt={`image-${index}`}
-                      src={file.file_url}
-                      className="h-[100px] object-cover w-[150px]"
-                    />
-                  </a>
-                ))}
-              </div>
-            </>
+                    <div className="bg-[#FFFFFF] rounded-md font-medium text-xs md:text-sm">
+                      <div className="flex justify-between items-center border text-black dark:text-white border-gray-300 p-3 rounded-t-md bg-gray-100 dark:bg-stone-900">
+                        <div className="w-[35%] md:w-[20%]">Nama File</div>
+                        <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
+                          {file?.file_name}
+                        </div>
+                      </div>
+                      <div className="flex justify-between border items-center border-gray-300 p-3 text-black">
+                        <div className="w-[35%] md:w-[20%]">Ukuran File</div>
+                        <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
+                          {Math.round(file?.size / 100) / 10 > 1000 ? (
+                            <>
+                              {(Math.round(file?.size / 100) / 10000).toFixed(
+                                1
+                              )}
+                            </>
+                          ) : (
+                            <>
+                              {(Math.round(file?.size / 100) / 10).toFixed(1)}
+                            </>
+                          )}
+                          {" kb"}
+                        </div>
+                      </div>
+
+                      <div className="flex justify-between items-center border rounded-b-md border-gray-300 p-3 text-black">
+                        <div className="w-[35%] md:w-[20%]">
+                          Tanggal Publish
+                        </div>
+                        <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
+                          {formatMonthString(file?.created_at)}
+                        </div>
+                      </div>
+                    </div>
+                    <Link href={file?.file_url} target="_blank">
+                      <Button
+                        className="w-full bg-[#DD8306] text-sm font-semibold text-white mt-2"
+                        radius="sm"
+                        // onPress={() => doDownload(file?.fileName, file?.title)}
+                      >
+                        File
+                      </Button>
+                    </Link>
+                  </AccordionItem>
+                </Accordion>
+              ))
+            ) : (
+              <>
+                <div>
+                  <Image
+                    alt="main"
+                    width={720}
+                    height={480}
+                    src={detailfiles[mainImage]?.file_url}
+                    className="w-[75%] mx-auto"
+                  />
+                </div>
+                <div className="flex flex-row gap-2">
+                  {detailfiles?.map((file: any, index: number) => (
+                    <a
+                      key={index}
+                      onClick={() => setMainImage(index)}
+                      className="cursor-pointer"
+                    >
+                      <Image
+                        width={480}
+                        height={360}
+                        alt={`image-${index}`}
+                        src={file.file_url}
+                        className="h-[100px] object-cover w-[150px]"
+                      />
+                    </a>
+                  ))}
+                </div>
+              </>
+            )
           ) : (
             <p>Belum Ada File</p>
           )
@@ -653,15 +835,22 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                 className=" flex justify-between border px-3.5 py-3 rounded-md"
               >
                 <div className="flex gap-3 items-center">
-                  <div className="file-preview">
-                    <Image
-                      width={480}
-                      height={360}
-                      alt={`image-${index}`}
-                      src={file?.file_url}
-                      className="h-[100px] object-cover w-[150px]"
-                    />
-                  </div>
+                  {selectedFileType === "image" ? (
+                    <div className="file-preview">
+                      <Image
+                        width={480}
+                        height={360}
+                        alt={`image-${index}`}
+                        src={file?.file_url}
+                        className="h-[100px] object-cover w-[150px]"
+                      />
+                    </div>
+                  ) : file.file_name.split(".")[1].includes("pdf") ? (
+                    <PdfIcon size={60} />
+                  ) : (
+                    <WordIcon size={60} />
+                  )}
+
                   <div>
                     <div className=" text-sm  text-card-foreground">
                       {file?.file_name}
@@ -735,7 +924,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                 variant="bordered"
                 size="sm"
                 color="danger"
-                onClick={() => setThumbnail("")}
+                onPress={() => setThumbnail("")}
               >
                 <TimesIcon />
               </Button>
@@ -754,7 +943,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                 variant="bordered"
                 size="sm"
                 color="danger"
-                onClick={() => setThumbnailImg([])}
+                onPress={() => setThumbnailImg([])}
               >
                 <TimesIcon />
               </Button>
diff --git a/components/form/login.tsx b/components/form/login.tsx
index bd1735d..ccef5fa 100644
--- a/components/form/login.tsx
+++ b/components/form/login.tsx
@@ -69,90 +69,90 @@ export default function Login() {
       error("Username & Password Wajib Diisi !");
     } else {
       // login dengan otp
-      const response = await emailValidation(data);
-      if (response?.error) {
-        error("Username / Password Tidak Sesuai");
-        return false;
-      }
-
-      if (response?.data?.messages[0] === "Continue to setup email") {
-        setFirstLogin(true);
-      } else {
-        setNeedOtp(true);
-      }
-
-      // login tanpa otp
-      // loading();
-      // const response = await postSignIn(data);
+      // const response = await emailValidation(data);
       // if (response?.error) {
       //   error("Username / Password Tidak Sesuai");
-      // } else {
-      //   const profile = await getProfile(response?.data?.data?.access_token);
-      //   const dateTime: any = new Date();
-
-      //   const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
-
-      //   Cookies.set("access_token", response?.data?.data?.access_token, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("time_refresh", newTime, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("is_first_login", "true", {
-      //     secure: true,
-      //     sameSite: "strict",
-      //   });
-      //   const resActivity = await saveActivity(
-      //     {
-      //       activityTypeId: 1,
-      //       url: "https://kontenhumas.com/auth",
-      //       userId: profile?.data?.data?.id,
-      //     },
-      //     accessData?.id_token
-      //   );
-      //   Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("uie", profile?.data?.data?.id, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("ufne", profile?.data?.data?.fullname, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("username", profile?.data?.data?.username, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("urie", profile?.data?.data?.roleId, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("roleName", profile?.data?.data?.roleName, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("ulne", profile?.data?.data?.userLevelId, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("urce", profile?.data?.data?.roleCode, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("email", profile?.data?.data?.email, {
-      //     expires: 1,
-      //   });
-      //   router.push("/admin/dashboard");
-      //   Cookies.set("status", "login", {
-      //     expires: 1,
-      //   });
-
-      //   close();
+      //   return false;
       // }
+
+      // if (response?.data?.messages[0] === "Continue to setup email") {
+      //   setFirstLogin(true);
+      // } else {
+      //   setNeedOtp(true);
+      // }
+
+      // login tanpa otp
+      loading();
+      const response = await postSignIn(data);
+      if (response?.error) {
+        error("Username / Password Tidak Sesuai");
+      } else {
+        const profile = await getProfile(response?.data?.data?.access_token);
+        const dateTime: any = new Date();
+
+        const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
+
+        Cookies.set("access_token", response?.data?.data?.access_token, {
+          expires: 1,
+        });
+        Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
+          expires: 1,
+        });
+        Cookies.set("time_refresh", newTime, {
+          expires: 1,
+        });
+        Cookies.set("is_first_login", "true", {
+          secure: true,
+          sameSite: "strict",
+        });
+        const resActivity = await saveActivity(
+          {
+            activityTypeId: 1,
+            url: "https://kontenhumas.com/auth",
+            userId: profile?.data?.data?.id,
+          },
+          accessData?.id_token
+        );
+        Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
+          expires: 1,
+        });
+        Cookies.set("uie", profile?.data?.data?.id, {
+          expires: 1,
+        });
+        Cookies.set("ufne", profile?.data?.data?.fullname, {
+          expires: 1,
+        });
+        Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
+          expires: 1,
+        });
+        Cookies.set("username", profile?.data?.data?.username, {
+          expires: 1,
+        });
+        Cookies.set("urie", profile?.data?.data?.roleId, {
+          expires: 1,
+        });
+        Cookies.set("roleName", profile?.data?.data?.roleName, {
+          expires: 1,
+        });
+        Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
+          expires: 1,
+        });
+        Cookies.set("ulne", profile?.data?.data?.userLevelId, {
+          expires: 1,
+        });
+        Cookies.set("urce", profile?.data?.data?.roleCode, {
+          expires: 1,
+        });
+        Cookies.set("email", profile?.data?.data?.email, {
+          expires: 1,
+        });
+        router.push("/admin/dashboard");
+        Cookies.set("status", "login", {
+          expires: 1,
+        });
+
+        close();
+      }
     }
   };
 
diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index e2fb6b0..f8ce4b1 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -5,6 +5,7 @@ import {
   CardFooter,
   CircularProgress,
   ScrollShadow,
+  Skeleton,
 } from "@heroui/react";
 import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
 import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
@@ -82,7 +83,7 @@ export default function HeaderNews() {
     <div className="w-full">
       <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black  p-1 lg:p-8 lg:h-[540px] w-full lg:w-[75%] lg:mx-auto">
         <div className="lg:hidden w-[90%] h-[300px] md:h-[500px] mx-auto">
-          {banner ? (
+          {banner.length > 0 ? (
             <Swiper
               centeredSlides={true}
               autoplay={{
@@ -150,7 +151,9 @@ export default function HeaderNews() {
               ))}
             </Swiper>
           ) : (
-            <CircularProgress aria-label="Loading..." size="lg" />
+            <Skeleton className="rounded-lg">
+              <div className="h-[200px] rounded-lg bg-default-300" />
+            </Skeleton>
           )}
         </div>
         <div className="w-[90%] lg:w-[25%] p-2 dark:bg-stone-800  bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[40vh] lg:h-[500px] mx-auto">
@@ -159,51 +162,57 @@ export default function HeaderNews() {
             Hot Topik
           </p>
           <ScrollShadow hideScrollBar className="h-[29vh] lg:h-[400px] ">
-            {hotNews?.map((data: any, index: number) => (
-              <div
-                className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
-                key={data?.id}
-              >
-                {/* <Image
-                  height={480}
-                  width={480}
-                  alt="headernews"
-                  src={
-                    data?.thumbnailUrl == ""
-                      ? "/no-image.jpg"
-                      : data?.thumbnailUrl
-                  }
-                  className="object-cover w-[60px] h-[60px] rounded-md"
-                /> */}
-                <div>
-                  <Link
-                    href={`/news/detail/${data?.id}-${data?.slug}`}
-                    className="lg:hidden"
-                  >
-                    {textEllipsis(data.title, 40)}
-                  </Link>
-                  <Link
-                    href={`/news/detail/${data?.id}-${data?.slug}`}
-                    key={data?.id}
-                    className="hidden lg:block"
-                  >
-                    {textEllipsis(data.title, 66)}
-                  </Link>
-                  <div className="flex flex-row gap-2 text-[10px]">
-                    <p className="py-[2px]">
-                      {convertDateFormat(data.createdAt)} WIB
-                    </p>
-                    <p className="flex items-center gap-1">
-                      <EyeIcon size={14} />
-                      {data.viewCount === null ? 0 : data.viewCount}
-                    </p>
+            {hotNews.length > 0 ? (
+              hotNews.map((data: any, index: number) => (
+                <div
+                  className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
+                  key={data?.id}
+                >
+                  <div>
+                    <Link
+                      href={`/news/detail/${data?.id}-${data?.slug}`}
+                      className="lg:hidden"
+                    >
+                      {textEllipsis(data.title, 40)}
+                    </Link>
+                    <Link
+                      href={`/news/detail/${data?.id}-${data?.slug}`}
+                      key={data?.id}
+                      className="hidden lg:block"
+                    >
+                      {textEllipsis(data.title, 66)}
+                    </Link>
+                    <div className="flex flex-row gap-2 text-[10px]">
+                      <p className="py-[2px]">
+                        {convertDateFormat(data.createdAt)} WIB
+                      </p>
+                      <p className="flex items-center gap-1">
+                        <EyeIcon size={14} />
+                        {data.viewCount === null ? 0 : data.viewCount}
+                      </p>
+                    </div>
                   </div>
                 </div>
+              ))
+            ) : (
+              <div className="flex flex-col gap-2">
+                <Skeleton className="rounded-lg">
+                  <div className="h-16 rounded-lg bg-default-300" />
+                </Skeleton>
+                <Skeleton className="rounded-lg">
+                  <div className="h-16 rounded-lg bg-default-300" />
+                </Skeleton>
+                <Skeleton className="rounded-lg">
+                  <div className="h-16 rounded-lg bg-default-300" />
+                </Skeleton>
+                <Skeleton className="rounded-lg">
+                  <div className="h-16 rounded-lg bg-default-300" />
+                </Skeleton>
               </div>
-            ))}
+            )}
           </ScrollShadow>
           <div className="m-2">
-            <Link href="/news/all">
+            <Link href="/news/all?category_id=586">
               <Button
                 className="w-full bg-gradient-to-r from-red-700  to-[#bb3523] text-white font-bold rounded-md focus:outline-none"
                 radius="none"
@@ -215,8 +224,8 @@ export default function HeaderNews() {
           </div>
         </div>
 
-        <div className="hidden lg:flex w-full lg:w-[50%] h-[500px]">
-          {banner ? (
+        <div className="hidden lg:block w-full lg:w-[50%] h-[500px]">
+          {banner.length > 0 ? (
             <Swiper
               centeredSlides={true}
               autoplay={{
@@ -243,7 +252,7 @@ export default function HeaderNews() {
                 );
               }}
             >
-              {banner?.map((newsItem: any, index: number) => (
+              {banner.map((newsItem: any, index: number) => (
                 <SwiperSlide key={newsItem?.id} className="!w-full h-[50vh]">
                   <Card
                     isFooterBlurred
@@ -289,7 +298,9 @@ export default function HeaderNews() {
               ))}
             </Swiper>
           ) : (
-            <CircularProgress aria-label="Loading..." size="lg" />
+            <Skeleton className="rounded-lg">
+              <div className="w-full !h-[500px] rounded-lg bg-default-300" />
+            </Skeleton>
           )}
         </div>
         <div className="w-[90%] lg:w-[25%] h-[50vh] lg:h-[500px]  rounded-md text-white dark:text-black mx-auto lg:mx-0">
@@ -315,25 +326,42 @@ export default function HeaderNews() {
                 </a>
               </div>
               <ScrollShadow hideScrollBar className="h-[39vh] lg:h-[400px]">
-                {article?.map((list: any, index: number) => (
-                  <div
-                    key={list?.id}
-                    className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
-                  >
-                    <Link href={`news/detail/${list?.id}`}>
-                      <p className="text-left font-semibold">{list?.title}</p>
-                    </Link>
-                    <div className="flex flex-row gap-1">
-                      <p className="py-[2px] text-left text-xs">
-                        {convertDateFormat(list?.createdAt)} WIB
-                      </p>
-                      <p className="flex items-center gap-1 text-xs">
-                        <EyeIcon />
-                        {list?.viewCount === null ? 0 : list?.viewCount}
-                      </p>
+                {article.length > 0 ? (
+                  article.map((list: any, index: number) => (
+                    <div
+                      key={list?.id}
+                      className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
+                    >
+                      <Link href={`news/detail/${list?.id}`}>
+                        <p className="text-left font-semibold">{list?.title}</p>
+                      </Link>
+                      <div className="flex flex-row gap-1">
+                        <p className="py-[2px] text-left text-xs">
+                          {convertDateFormat(list?.createdAt)} WIB
+                        </p>
+                        <p className="flex items-center gap-1 text-xs">
+                          <EyeIcon />
+                          {list?.viewCount === null ? 0 : list?.viewCount}
+                        </p>
+                      </div>
                     </div>
+                  ))
+                ) : (
+                  <div className="flex flex-col gap-2">
+                    <Skeleton className="rounded-lg">
+                      <div className="h-16 rounded-lg bg-default-300" />
+                    </Skeleton>
+                    <Skeleton className="rounded-lg">
+                      <div className="h-16 rounded-lg bg-default-300" />
+                    </Skeleton>
+                    <Skeleton className="rounded-lg">
+                      <div className="h-16 rounded-lg bg-default-300" />
+                    </Skeleton>
+                    <Skeleton className="rounded-lg">
+                      <div className="h-16 rounded-lg bg-default-300" />
+                    </Skeleton>
                   </div>
-                ))}
+                )}
               </ScrollShadow>
               <Link href="/news/all">
                 <Button
diff --git a/components/landing/NewsTicker.tsx b/components/landing/NewsTicker.tsx
index d0b0af5..1a50d73 100644
--- a/components/landing/NewsTicker.tsx
+++ b/components/landing/NewsTicker.tsx
@@ -12,7 +12,7 @@ export default function NewsTicker() {
 
   useEffect(() => {
     async function getArticle() {
-      const req = { page: 1, search: "", limit: "10" };
+      const req = { page: 1, search: "", limit: "10", isPublish: true };
       const response = await getListArticle(req);
       setArticle(response?.data?.data);
     }
@@ -51,7 +51,7 @@ export default function NewsTicker() {
         <span className="mr-2"></span> BREAKING NEWS
         <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clipPath-triangle"></div>
       </div>
-      {article && (
+      {article.length > 0 ? (
         <div
           className={`w-full  px-5 py-1 flex flex-col justify-center gap-1 transition-transform duration-300 ${
             animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
@@ -77,6 +77,10 @@ export default function NewsTicker() {
             {convertDateFormat(article[currentNewsIndex]?.createdAt)}
           </p>
         </div>
+      ) : (
+        <div className="flex justify-center items-center">
+          <p>Loading...</p>
+        </div>
       )}
       <div className="flex flex-row text-white h-full gap-[1px]">
         <a
diff --git a/components/landing/footer-new.tsx b/components/landing/footer-new.tsx
index d4f2fc8..0193192 100644
--- a/components/landing/footer-new.tsx
+++ b/components/landing/footer-new.tsx
@@ -41,6 +41,14 @@ export default function FooterNew(props: { margin?: boolean }) {
 
     success("Sukses");
   };
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
 
   return (
     <div
diff --git a/components/layout/navbar/NavbarHumas.tsx b/components/layout/navbar/NavbarHumas.tsx
index b1566bb..d5a414b 100644
--- a/components/layout/navbar/NavbarHumas.tsx
+++ b/components/layout/navbar/NavbarHumas.tsx
@@ -64,6 +64,7 @@ export default function NavbarHumas(props: { size: string }) {
   const token = Cookies.get("access_token");
   const isAuthenticated = Cookies.get("is_authenticated");
   const [isScrolled, setIsScrolled] = useState(false);
+  const [search, setSearch] = useState("");
 
   const language = storedLanguage((state) => state.locale);
   const setLanguage = storedLanguage((state) => state.setLocale);
@@ -88,6 +89,22 @@ export default function NavbarHumas(props: { size: string }) {
     });
   };
 
+  let typingTimer: NodeJS.Timeout;
+  const doneTypingInterval = 1500;
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  async function doneTyping() {
+    router.push(`/news/all?search=${search}`);
+  }
+
   const searchInput = (
     <Input
       aria-label="search"
@@ -98,6 +115,9 @@ export default function NavbarHumas(props: { size: string }) {
       }}
       labelPlacement="outside"
       placeholder="Pencarian..."
+      onChange={(e) => setSearch(e.target.value)}
+      onKeyUp={handleKeyUp}
+      onKeyDown={handleKeyDown}
       startContent={
         <SearchIcon className="text-base text-default-400 pointer-events-none" />
       }
diff --git a/components/main/detail/e-magazine-detail.tsx b/components/main/detail/e-magazine-detail.tsx
index ea8dbb2..c02db8c 100644
--- a/components/main/detail/e-magazine-detail.tsx
+++ b/components/main/detail/e-magazine-detail.tsx
@@ -114,13 +114,13 @@ export default function EMagazineDetail() {
                         {file?.fileName}
                       </div>
                     </div>
-                    <div className="flex justify-between border items-center border-gray-300 p-3">
+                    <div className="flex justify-between border items-center border-gray-300 p-3 text-black">
                       <div className="w-[35%] md:w-[20%]">Deskripsi</div>
                       <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
                         {file?.description == "" ? "-" : file?.description}
                       </div>
                     </div>
-                    <div className="flex justify-between border items-center border-gray-300 p-3">
+                    <div className="flex justify-between border items-center border-gray-300 p-3 text-black">
                       <div className="w-[35%] md:w-[20%]">Ukuran File</div>
                       <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
                         {Math.round(file?.size / 100) / 10 > 1000 ? (
@@ -134,7 +134,7 @@ export default function EMagazineDetail() {
                       </div>
                     </div>
 
-                    <div className="flex justify-between items-center border rounded-b-md border-gray-300 p-3">
+                    <div className="flex justify-between items-center border rounded-b-md border-gray-300 p-3 text-black">
                       <div className="w-[35%] md:w-[20%]">Tanggal Publish</div>
                       <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
                         {formatMonthString(file?.createdAt)}
diff --git a/components/main/detail/list-news.tsx b/components/main/detail/list-news.tsx
index b31870d..d2a7411 100644
--- a/components/main/detail/list-news.tsx
+++ b/components/main/detail/list-news.tsx
@@ -1,31 +1,68 @@
 "use client";
 import {
+  Autocomplete,
+  AutocompleteItem,
   BreadcrumbItem,
   Breadcrumbs,
   Button,
+  DatePicker,
   Image,
   Input,
+  Listbox,
+  ListboxItem,
   Pagination,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Select,
+  SelectItem,
 } from "@heroui/react";
 import {
   CalendarIcon,
   Calender,
+  ChevronLeftIcon,
   ChevronRightIcon,
   ClockIcon,
   EyeFilledIcon,
   SearchIcon,
+  TimesIcon,
   UserIcon,
 } from "../../icons";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
-import { getListArticle } from "@/services/article";
-import { formatMonthString, htmlToString, textEllipsis } from "@/utils/global";
+import {
+  getArticleByCategoryLanding,
+  getListArticle,
+} from "@/services/article";
+import {
+  convertDateFormatNoTimeV2,
+  formatMonthString,
+  htmlToString,
+  textEllipsis,
+} from "@/utils/global";
 import {
   useParams,
   usePathname,
   useRouter,
   useSearchParams,
 } from "next/navigation";
+import { close, loading } from "@/config/swal";
+import { format } from "date-fns";
+
+const months = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
 
 export default function ListNews() {
   const [article, setArticle] = useState<any>([]);
@@ -37,35 +74,97 @@ export default function ListNews() {
   const params = useParams();
   const category = params?.name;
   const searchParams = useSearchParams();
-  const search = searchParams.get("search");
+  const categoryIds = searchParams.get("category_id");
+  const [categories, setCategories] = useState<any>([]);
+  const [search, setSearch] = useState(searchParams.get("search") || "");
   const [searchValue, setSearchValue] = useState(search || "");
+  const [categorySearch, setCategorySearch] = useState("");
+  const [debouncedValue, setDebouncedValue] = useState("");
+  const [selectedCategoryId, setSelectedCategoryId] = useState<any>();
+
+  const today = new Date();
+  const [year, setYear] = useState(today.getFullYear());
+
+  const [selectedMonth, setSelectedMonth] = useState<number | null>(
+    searchParams.get("month") ? Number(searchParams.get("month")) - 1 : null
+  );
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+
+  const handleMonthClick = (monthIndex: number) => {
+    setSelectedMonth(monthIndex);
+    setSelectedDate(new Date(year, monthIndex, 1));
+  };
+
+  useEffect(() => {
+    setSearch(searchParams.get("search") || "");
+    setSearchValue(searchParams.get("search") || "");
+    console.log(
+      "ini",
+      searchParams.get("month") ? Number(searchParams.get("month")) : null
+    );
+    setSelectedMonth(
+      searchParams.get("month") ? Number(searchParams.get("month")) : null
+    );
+  }, [searchParams]);
 
   useEffect(() => {
     getArticle();
-  }, [page, category]);
+  }, [page, category, search, searchParams]);
+
+  useEffect(() => {
+    getCategory();
+  }, [debouncedValue]);
+
+  const getCategory = async () => {
+    const res = await getArticleByCategoryLanding({
+      limit: debouncedValue === "" ? "5" : "",
+      title: debouncedValue,
+    });
+    if (res?.data?.data) {
+      setCategories(res?.data?.data);
+    }
+  };
 
   async function getArticle() {
-    // loading();
-    topRef.current?.scrollIntoView({ behavior: "smooth" });
+    loading();
+    // topRef.current?.scrollIntoView({ behavior: "smooth" });
 
     const req = {
       page: page,
       search: searchValue || "",
       limit: "9",
-      // isPublish: pathname.includes("polda") ? false : true,
       isPublish: true,
       sort: "desc",
       categorySlug:
         pathname.includes("polda") || pathname.includes("satker")
           ? String(category)
           : "",
+      categoryIds: categoryIds ? categoryIds : "",
+      startDate: selectedMonth
+        ? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
+        : "",
+      endDate: selectedMonth
+        ? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
+        : "",
     };
     const response = await getListArticle(req);
     setArticle(response?.data?.data);
     setTotalPage(response?.data?.meta?.totalPage);
-    // close();
+    close();
   }
 
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedValue(categorySearch);
+    }, 1500);
+
+    return () => clearTimeout(timeout);
+  }, [categorySearch]);
+
+  const onInputChange = (value: string) => {
+    setCategorySearch(value);
+  };
+
   return (
     <div className="bg-white border-b-1" ref={topRef}>
       <div className="text-black py-5 px-3 lg:w-[75vw] mx-auto bg-white">
@@ -76,38 +175,109 @@ export default function ListNews() {
           <ChevronRightIcon />
           <p className="text-black">Berita</p>
         </div>
-        <div className="py-5 lg:py-10 lg:px-24 ">
+        <div className="py-5 lg:py-10 lg:px-10 flex flex-col lg:flex-row gap-2 items-end">
           <Input
-            aria-label="Search"
+            aria-label="Judul"
             className="w-full"
             classNames={{
               inputWrapper: "bg-white hover:!bg-gray-100 border-1",
               input: "text-sm !text-black",
             }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                router.push(pathname + `?search=${searchValue}`);
-                getArticle();
-              }
-            }}
+            // onKeyDown={(event) => {
+            //   if (event.key === "Enter") {
+            //     router.push(pathname + `?search=${searchValue}`);
+            //     getArticle();
+            //   }
+            // }}
             labelPlacement="outside"
-            placeholder="Search..."
-            value={searchValue || ""}
+            placeholder="Judul..."
+            value={searchValue}
             onValueChange={setSearchValue}
-            endContent={
-              <Button
-                onPress={() => {
-                  router.push(pathname + `?search=${searchValue}`);
-                  getArticle();
-                }}
-                size="sm"
-                className="bg-red-500 font-semibold"
-              >
-                <SearchIcon className="text-white" />
-              </Button>
-            }
             type="search"
           />
+          <div className="flex w-full lg:w-fit gap-4">
+            <Autocomplete
+              className="w-full lg:w-[240px] mt-0"
+              label=""
+              labelPlacement="outside"
+              variant="bordered"
+              placeholder="Kategori"
+              classNames={{ base: "!mt-0" }}
+              inputValue={categorySearch}
+              onInputChange={onInputChange}
+              onSelectionChange={(e) => setSelectedCategoryId(e)}
+              inputProps={{ classNames: { inputWrapper: "border-1" } }}
+            >
+              {categories.length > 0 &&
+                categories.map((category: any) => (
+                  <AutocompleteItem key={category.id}>
+                    {category.title}
+                  </AutocompleteItem>
+                ))}
+            </Autocomplete>
+          </div>
+          <div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[240px] rounded-xl px-2">
+            <Popover placement="bottom" showArrow={true} className="w-full">
+              <PopoverTrigger>
+                <a className="px-2 py-1 text-sm w-[220px]">
+                  {" "}
+                  {selectedDate
+                    ? format(selectedDate, "MMMM yyyy")
+                    : "Pilih Bulan"}
+                </a>
+              </PopoverTrigger>
+              <PopoverContent className="p-4 w-[220px]">
+                <div className="flex items-center justify-between mb-2 px-1 w-full">
+                  <button
+                    className="text-gray-500 hover:text-black"
+                    onClick={() => setYear((prev) => prev - 1)}
+                  >
+                    <ChevronLeftIcon />
+                  </button>
+                  <span className="font-semibold text-center">{year}</span>
+                  <button
+                    className="text-gray-500 hover:text-black"
+                    onClick={() => setYear((prev) => prev + 1)}
+                  >
+                    <ChevronRightIcon />
+                  </button>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 w-full">
+                  {months.map((month, idx) => (
+                    <button
+                      key={idx}
+                      onClick={() => handleMonthClick(idx)}
+                      className={`py-1 rounded-md text-sm transition-colors ${
+                        selectedDate &&
+                        selectedDate.getMonth() === idx &&
+                        selectedDate.getFullYear() === year
+                          ? "bg-blue-500 text-white"
+                          : "hover:bg-gray-200 text-gray-700"
+                      }`}
+                    >
+                      {month}
+                    </button>
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>{" "}
+            {selectedDate && (
+              <a
+                className="cursor-pointer w-[20px]"
+                onClick={() => setSelectedDate(null)}
+              >
+                <TimesIcon size={20} />
+              </a>
+            )}
+          </div>
+          <Link
+            href={`/news/all?search=${searchValue}&category_id=${
+              selectedCategoryId || ""
+            }&month=${selectedMonth && selectedDate ? selectedMonth + 1 : ""}`}
+          >
+            <Button className="bg-red-600 text-white w-[80px]">Cari</Button>
+          </Link>
         </div>
         <section
           id="content"
@@ -135,14 +305,14 @@ export default function ListNews() {
                 <div className="flex flex-row items-center py-1 text-[10px] gap-2">
                   <div className="flex flex-row items-center gap-1">
                     <CalendarIcon size={18} />
-                    <p>{formatMonthString(news?.updatedAt)}</p>
+                    <p>{formatMonthString(news?.createdAt)}</p>
                   </div>
                   <div className="flex flex-row items-center">
                     <ClockIcon size={18} />
-                    <p>{`${new Date(news?.updatedAt)
+                    <p>{`${new Date(news?.createdAt)
                       .getHours()
                       .toString()
-                      .padStart(2, "0")}:${new Date(news?.updatedAt)
+                      .padStart(2, "0")}:${new Date(news?.createdAt)
                       .getMinutes()
                       .toString()
                       .padStart(2, "0")}`}</p>
diff --git a/components/main/detail/new-detail.tsx b/components/main/detail/new-detail.tsx
index aec025a..a359c82 100644
--- a/components/main/detail/new-detail.tsx
+++ b/components/main/detail/new-detail.tsx
@@ -24,13 +24,12 @@ export default function NewsDetailPage(props: { datas: any }) {
   const [articles, setArticles] = useState<any>([]);
 
   useEffect(() => {
-    // initFetch();
     getArticles();
     sendActivity();
   }, []);
 
   async function getArticles() {
-    const req = { page: 1, search: "", limit: "50" };
+    const req = { page: 1, search: "", limit: "50", isPublish: true };
     const response = await getListArticle(req);
     setArticles(response?.data?.data);
   }
@@ -70,7 +69,7 @@ export default function NewsDetailPage(props: { datas: any }) {
           </div>
 
           <div className="bg-gray-50 text-black dark:bg-black dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit ">
-            <RelatedNews />
+            <RelatedNews categories={props.datas.categories} />
           </div>
           <div className="md:hidden text-black">
             <SidebarDetail />
diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index 4056688..1408a41 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -25,7 +25,7 @@ import { useEffect, useState } from "react";
 import { image } from "@heroui/theme";
 import Cookies from "js-cookie";
 import { saveActivity } from "@/services/activity-log";
-import { Image } from "@heroui/react";
+import { Accordion, AccordionItem, Image } from "@heroui/react";
 
 const token = Cookies.get("access_token");
 const uid = Cookies.get("uie");
@@ -153,35 +153,101 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
         </p>
       </div>
       <div className="flex justify-center my-2 lg:my-5">
-        {data?.files?.length > 0 && (
+        {data.files[0].file_name.split(".")[1].includes("doc") ||
+        data.files[0].file_name.split(".")[1].includes("pdf") ? (
           <Image
             classNames={{
               wrapper: "!w-full !max-w-full",
               img: "!w-full",
             }}
             alt="Main Image"
-            src={data?.files[imageNow]?.file_url}
+            src={data.thumbnailUrl}
             className="object-cover w-[100%] rounded-md"
           />
+        ) : (
+          data?.files?.length > 0 && (
+            <Image
+              classNames={{
+                wrapper: "!w-full !max-w-full",
+                img: "!w-full",
+              }}
+              alt="Main Image"
+              src={data?.files[imageNow]?.file_url}
+              className="object-cover w-[100%] rounded-md"
+            />
+          )
         )}
       </div>
-      {data?.files?.length > 0 && (
-        <div className="flex flex-row gap-3 flex-nowrap overflow-x-auto">
-          {data?.files?.map((file: any, index: number) => (
-            <a
-              key={file.id}
-              onClick={() => setImageNow(index)}
-              className="cursor-pointer"
-            >
-              <Image
-                alt="NextUI hero Image"
-                src={file?.file_url}
-                className="object-cover w-[75px] lg:w-[150px] h-[50px] lg:h-[100px] rounded-md"
-              />
-            </a>
-          ))}
-        </div>
-      )}
+      {data?.files?.length > 0 &&
+        (data.files[0].file_name.split(".")[1].includes("doc") ||
+        data.files[0].file_name.split(".")[1].includes("pdf") ? (
+          data.files?.map((file: any, index: number) => (
+            <Accordion key={file?.id} variant="splitted" className="px-0">
+              <AccordionItem
+                key={file?.id}
+                aria-label={file?.title}
+                className="p-2"
+                title={
+                  <p className="text-black dark:text-white font-semibold text-xs md:text-sm">
+                    {`File ${index + 1}`}
+                  </p>
+                }
+              >
+                <div className="bg-[#FFFFFF] rounded-md font-medium text-xs md:text-sm">
+                  <div className="flex justify-between items-center border text-black dark:text-white border-gray-300 p-3 rounded-t-md bg-gray-100 dark:bg-stone-900">
+                    <div className="w-[35%] md:w-[20%]">Nama File</div>
+                    <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
+                      {file?.file_name}
+                    </div>
+                  </div>
+                  <div className="flex justify-between border items-center border-gray-300 p-3 text-black">
+                    <div className="w-[35%] md:w-[20%]">Ukuran File</div>
+                    <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
+                      {Math.round(file?.size / 100) / 10 > 1000 ? (
+                        <>{(Math.round(file?.size / 100) / 10000).toFixed(1)}</>
+                      ) : (
+                        <>{(Math.round(file?.size / 100) / 10).toFixed(1)}</>
+                      )}
+                      {" kb"}
+                    </div>
+                  </div>
+
+                  <div className="flex justify-between items-center border rounded-b-md border-gray-300 p-3 text-black">
+                    <div className="w-[35%] md:w-[20%]">Tanggal Publish</div>
+                    <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
+                      {formatMonthString(file?.created_at)}
+                    </div>
+                  </div>
+                </div>
+                <Link href={file?.file_url} target="_blank">
+                  <Button
+                    className="w-full bg-[#DD8306] text-sm font-semibold text-white mt-2"
+                    radius="sm"
+                    // onPress={() => doDownload(file?.fileName, file?.title)}
+                  >
+                    File
+                  </Button>
+                </Link>
+              </AccordionItem>
+            </Accordion>
+          ))
+        ) : (
+          <div className="flex flex-row gap-3 flex-nowrap overflow-x-auto">
+            {data?.files?.map((file: any, index: number) => (
+              <a
+                key={file.id}
+                onClick={() => setImageNow(index)}
+                className="cursor-pointer"
+              >
+                <Image
+                  alt="NextUI hero Image"
+                  src={file?.file_url}
+                  className="object-cover w-[75px] lg:w-[150px] h-[50px] lg:h-[100px] rounded-md"
+                />
+              </a>
+            ))}
+          </div>
+        ))}
       <div
         dangerouslySetInnerHTML={removeImgTags(
           formatTextToHtmlTag(data?.htmlDescription)
diff --git a/components/page/related-news.tsx b/components/page/related-news.tsx
index 0fc83fa..62c8a62 100644
--- a/components/page/related-news.tsx
+++ b/components/page/related-news.tsx
@@ -12,13 +12,22 @@ import "swiper/css/navigation";
 import Link from "next/link";
 import { convertDateFormat, textEllipsis } from "@/utils/global";
 
-export default function RelatedNews() {
+export default function RelatedNews(props: { categories: any }) {
+  const { categories } = props;
   const [article, setArticle] = useState<any>([]);
 
   useEffect(() => {
     async function getArticle() {
-      const req = { page: 1, search: "", limit: "10" };
+      console.log("categories", categories);
+      const idString = categories.map((item: any) => item.id).join(",");
 
+      const req = {
+        page: 1,
+        search: "",
+        limit: "10",
+        isPublish: true,
+        categoryIds: idString,
+      };
       const response = await getListArticle(req);
       setArticle(response?.data?.data);
     }
diff --git a/components/page/sidebar-detail.tsx b/components/page/sidebar-detail.tsx
index 913e806..15580c6 100644
--- a/components/page/sidebar-detail.tsx
+++ b/components/page/sidebar-detail.tsx
@@ -8,22 +8,38 @@ import "swiper/css/effect-fade";
 import "swiper/css/pagination";
 import Link from "next/link";
 import { getListArticle } from "@/services/article";
-import { Card, CardFooter } from "@heroui/react";
+import { Card, CardFooter, Skeleton } from "@heroui/react";
 import { convertDateFormat, textEllipsis } from "@/utils/global";
 import Image from "next/image";
 
 export default function SidebarDetail() {
+  const [articleMabes, setArticleMabes] = useState<any>([]);
   const [article, setArticle] = useState<any>([]);
 
   useEffect(() => {
-    async function getArticle() {
-      const req = { page: 1, search: "", limit: "10" };
-
-      const response = await getListArticle(req);
-      setArticle(response?.data?.data);
-    }
     getArticle();
+    getArticleMabes();
   }, []);
+
+  async function getArticle() {
+    const req = { page: 1, search: "", limit: "10", isPublish: true };
+
+    const response = await getListArticle(req);
+    setArticle(response?.data?.data);
+  }
+
+  async function getArticleMabes() {
+    const req = {
+      page: 1,
+      search: "",
+      limit: "10",
+      isPublish: true,
+      category: "586",
+    };
+
+    const response = await getListArticle(req);
+    setArticleMabes(response?.data?.data);
+  }
   return (
     <div className="mt-2 space-y-5">
       <div className="font-semibold flex flex-col items-center py-3 rounded-lg">
@@ -33,49 +49,57 @@ export default function SidebarDetail() {
           </div>
         </div>
         <div className="w-full mt-3">
-          <Swiper
-            centeredSlides={false}
-            spaceBetween={10}
-            mousewheel={true}
-            autoplay={{
-              delay: 5000,
-              disableOnInteraction: false,
-            }}
-            pagination={{
-              clickable: true,
-            }}
-            modules={[Autoplay, Pagination, Mousewheel]}
-            className="mySwiper"
-            slidesPerView={1}
-          >
-            {article?.map((newsItem: any) => (
-              <SwiperSlide key={newsItem.id}>
-                <div className=" h-[320px] flex flex-col gap-2 bg-gray-100 dark:bg-black p-4 rounded-lg">
-                  <Image
-                    width={480}
-                    height={480}
-                    alt="headernews"
-                    src={
-                      newsItem?.thumbnailUrl == ""
-                        ? "/no-image.jpg"
-                        : newsItem?.thumbnailUrl
-                    }
-                    className="object-cover !h-[200px] rounded-lg"
-                  />
-                  <div className="text-black dark:text-white flex flex-col">
-                    <Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
-                      <p className="text-left font-bold text-sm">
-                        {textEllipsis(newsItem.title, 45)}
+          {articleMabes?.length < 1 ? (
+            <Skeleton className="rounded-lg">
+              <div className="h-[320px] rounded-lg bg-default-300" />
+            </Skeleton>
+          ) : (
+            <Swiper
+              centeredSlides={false}
+              spaceBetween={10}
+              mousewheel={true}
+              autoplay={{
+                delay: 5000,
+                disableOnInteraction: false,
+              }}
+              pagination={{
+                clickable: true,
+              }}
+              modules={[Autoplay, Pagination, Mousewheel]}
+              className="mySwiper"
+              slidesPerView={1}
+            >
+              {articleMabes?.map((newsItem: any) => (
+                <SwiperSlide key={newsItem.id}>
+                  <div className=" h-[320px] flex flex-col gap-2 bg-gray-100 dark:bg-black p-4 rounded-lg">
+                    <Image
+                      width={480}
+                      height={480}
+                      alt="headernews"
+                      src={
+                        newsItem?.thumbnailUrl == ""
+                          ? "/no-image.jpg"
+                          : newsItem?.thumbnailUrl
+                      }
+                      className="object-cover !h-[200px] rounded-lg"
+                    />
+                    <div className="text-black dark:text-white flex flex-col">
+                      <Link
+                        href={`/news/detail/${newsItem.id}-${newsItem.slug}`}
+                      >
+                        <p className="text-left font-bold text-sm">
+                          {textEllipsis(newsItem.title, 45)}
+                        </p>
+                      </Link>
+                      <p className="py-[2px] text-left text-xs">
+                        {convertDateFormat(newsItem.createdAt)} WIB
                       </p>
-                    </Link>
-                    <p className="py-[2px] text-left text-xs">
-                      {convertDateFormat(newsItem.createdAt)} WIB
-                    </p>
+                    </div>
                   </div>
-                </div>
-              </SwiperSlide>
-            ))}
-          </Swiper>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          )}
         </div>
       </div>
       <div className="font-semibold flex flex-col items-center space-y-5">
@@ -85,49 +109,57 @@ export default function SidebarDetail() {
           </div>
         </div>
         <div className="w-full mt-3">
-          <Swiper
-            centeredSlides={false}
-            spaceBetween={10}
-            mousewheel={true}
-            autoplay={{
-              delay: 5000,
-              disableOnInteraction: false,
-            }}
-            pagination={{
-              clickable: true,
-            }}
-            modules={[Autoplay, Pagination, Mousewheel]}
-            className="mySwiper"
-            slidesPerView={1}
-          >
-            {article?.map((newsItem: any) => (
-              <SwiperSlide key={newsItem.id}>
-                <div className=" h-[320px] flex flex-col gap-2 bg-gray-100 dark:bg-black p-4 rounded-lg">
-                  <Image
-                    width={480}
-                    height={480}
-                    alt="headernews"
-                    src={
-                      newsItem?.thumbnailUrl == ""
-                        ? "/no-image.jpg"
-                        : newsItem?.thumbnailUrl
-                    }
-                    className="object-cover !h-[200px] rounded-lg"
-                  />
-                  <div className="text-black dark:text-white flex flex-col">
-                    <Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
-                      <p className="text-left font-bold text-sm">
-                        {textEllipsis(newsItem.title, 45)}
+          {article?.length < 1 ? (
+            <Skeleton className="rounded-lg">
+              <div className="h-[320px] rounded-lg bg-default-300" />
+            </Skeleton>
+          ) : (
+            <Swiper
+              centeredSlides={false}
+              spaceBetween={10}
+              mousewheel={true}
+              autoplay={{
+                delay: 5000,
+                disableOnInteraction: false,
+              }}
+              pagination={{
+                clickable: true,
+              }}
+              modules={[Autoplay, Pagination, Mousewheel]}
+              className="mySwiper"
+              slidesPerView={1}
+            >
+              {article?.map((newsItem: any) => (
+                <SwiperSlide key={newsItem.id}>
+                  <div className=" h-[320px] flex flex-col gap-2 bg-gray-100 dark:bg-black p-4 rounded-lg">
+                    <Image
+                      width={480}
+                      height={480}
+                      alt="headernews"
+                      src={
+                        newsItem?.thumbnailUrl == ""
+                          ? "/no-image.jpg"
+                          : newsItem?.thumbnailUrl
+                      }
+                      className="object-cover !h-[200px] rounded-lg"
+                    />
+                    <div className="text-black dark:text-white flex flex-col">
+                      <Link
+                        href={`/news/detail/${newsItem.id}-${newsItem.slug}`}
+                      >
+                        <p className="text-left font-bold text-sm">
+                          {textEllipsis(newsItem.title, 45)}
+                        </p>
+                      </Link>
+                      <p className="py-[2px] text-left text-xs">
+                        {convertDateFormat(newsItem.createdAt)} WIB
                       </p>
-                    </Link>
-                    <p className="py-[2px] text-left text-xs">
-                      {convertDateFormat(newsItem.createdAt)} WIB
-                    </p>
+                    </div>
                   </div>
-                </div>
-              </SwiperSlide>
-            ))}
-          </Swiper>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          )}
         </div>
       </div>
     </div>
diff --git a/components/table/comment/comment-table.tsx b/components/table/comment/comment-table.tsx
index d839d55..2305e86 100644
--- a/components/table/comment/comment-table.tsx
+++ b/components/table/comment/comment-table.tsx
@@ -142,7 +142,10 @@ export default function CommentTable() {
   };
 
   const openArticle = async (id: number) => {
+    loading();
     const res = await getArticleById(id);
+    close();
+
     if (res?.error) {
       MySwal.fire({
         title: "Artikel tidak ditemukan atau telah dihapus",
diff --git a/components/table/tabel-emajalah-polri.tsx b/components/table/tabel-emajalah-polri.tsx
index c2319f9..55793dc 100644
--- a/components/table/tabel-emajalah-polri.tsx
+++ b/components/table/tabel-emajalah-polri.tsx
@@ -116,9 +116,9 @@ export default function ListEnewsPolri() {
             <Input
               aria-label="Search"
               classNames={{
-                input: ["w-full", "bg-transparent", "h-[20px]", "!text-black"],
+                input: ["w-full", "bg-transparent", "h-[40px]", "!text-black"],
                 mainWrapper: ["w-full", "bg-transparent"],
-                innerWrapper: ["bg-transparent", "h-[20px]"],
+                innerWrapper: ["bg-transparent", "h-[40px]"],
                 inputWrapper: [
                   "bg-white",
                   "dark:bg-white",
@@ -128,7 +128,7 @@ export default function ListEnewsPolri() {
                   "dark:group-data-[focused=true]:bg-transaparent",
                   "group-data-[focused=false]:bg-transparent",
                   "focus-within:!bg-transparent",
-                  "h-[20px]",
+                  "h-[40px]",
                   "dark:focus-within:!bg-gray-100",
                 ],
               }}
@@ -149,19 +149,19 @@ export default function ListEnewsPolri() {
               }
             />
 
-            <div className="flex flex-col gap-1 w-full md:w-[240px]">
+            {/* <div className="flex flex-col gap-1 w-full md:w-[240px]">
               <p className="font-semibold text-xs md:text-sm">
                 Tanggal Publikasi
               </p>
-              {/* <Datepicker
+              <Datepicker
                 value={startDateValue}
                 displayFormat="DD/MM/YYYY"
                 useRange={false}
                 asSingle={true}
                 onChange={(e: any) => setStartDateValue(e)}
                 inputClassName="z-50 w-full text-sm bg-white border-1 border-gray-200 px-2 py-[6px] rounded-xl h-[40px] text-black"
-              /> */}
-            </div>
+              />
+            </div> */}
           </div>
           <div className="flex flex-col gap-3">
             <Table
@@ -187,7 +187,10 @@ export default function ListEnewsPolri() {
                 {(item: any) => (
                   <TableRow key={item.id}>
                     <TableCell>
-                      <Link href={`/e-majalah-polri/detail/${item.id}`}>
+                      <Link
+                        href={`/e-majalah-polri/detail/${item.id}`}
+                        className="text-black"
+                      >
                         {item.title}
                       </Link>
                     </TableCell>
diff --git a/services/article.ts b/services/article.ts
index 4264e1f..fdc5342 100644
--- a/services/article.ts
+++ b/services/article.ts
@@ -34,7 +34,7 @@ export async function getListArticle(props: PaginationRequest) {
     }&title=${search}&startDate=${startDate || ""}&endDate=${
       endDate || ""
     }&categoryId=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
-      sort || "asc"
+      sort || "desc"
     }&category=${categorySlug || ""}&isBanner=${isBanner || ""}&categoryIds=${
       categoryIds || ""
     }&createdByIds=${createdByIds || ""}`,
@@ -222,3 +222,16 @@ export async function updateIsBannerArticle(id: number, status: boolean) {
   const pathUrl = `/articles/banner/${id}?isBanner=${status}`;
   return await httpPut(pathUrl, headers);
 }
+
+export async function getArticleByCategoryLanding(props: {
+  limit: string;
+  title: string;
+}) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(
+    `/article-categories?limit=${props.limit}&title=${props.title}`,
+    headers
+  );
+}

From a7eef2e1dc51be712f21016761d2cae4ac2827ca Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Sat, 31 May 2025 20:56:53 +0700
Subject: [PATCH 2/8] fix:news all filter, pagination collapse

---
 components/main/detail/list-news.tsx | 201 ++++++++++++++++-----------
 1 file changed, 118 insertions(+), 83 deletions(-)

diff --git a/components/main/detail/list-news.tsx b/components/main/detail/list-news.tsx
index d2a7411..9e6fd28 100644
--- a/components/main/detail/list-news.tsx
+++ b/components/main/detail/list-news.tsx
@@ -48,6 +48,7 @@ import {
 } from "next/navigation";
 import { close, loading } from "@/config/swal";
 import { format } from "date-fns";
+import { getCategoryById } from "@/services/master-categories";
 
 const months = [
   "Jan",
@@ -76,11 +77,16 @@ export default function ListNews() {
   const searchParams = useSearchParams();
   const categoryIds = searchParams.get("category_id");
   const [categories, setCategories] = useState<any>([]);
-  const [search, setSearch] = useState(searchParams.get("search") || "");
-  const [searchValue, setSearchValue] = useState(search || "");
+  const [searchValue, setSearchValue] = useState(
+    searchParams.get("search") || ""
+  );
   const [categorySearch, setCategorySearch] = useState("");
   const [debouncedValue, setDebouncedValue] = useState("");
-  const [selectedCategoryId, setSelectedCategoryId] = useState<any>();
+  const [selectedCategoryId, setSelectedCategoryId] = useState<any>(
+    categoryIds ? categoryIds : ""
+  );
+
+  const [count, setCount] = useState(0);
 
   const today = new Date();
   const [year, setYear] = useState(today.getFullYear());
@@ -95,26 +101,26 @@ export default function ListNews() {
     setSelectedDate(new Date(year, monthIndex, 1));
   };
 
-  useEffect(() => {
-    setSearch(searchParams.get("search") || "");
-    setSearchValue(searchParams.get("search") || "");
-    console.log(
-      "ini",
-      searchParams.get("month") ? Number(searchParams.get("month")) : null
-    );
-    setSelectedMonth(
-      searchParams.get("month") ? Number(searchParams.get("month")) : null
-    );
-  }, [searchParams]);
-
-  useEffect(() => {
-    getArticle();
-  }, [page, category, search, searchParams]);
+  const getCategoryId = async () => {
+    if (categoryIds) {
+      const res = await getCategoryById(Number(selectedCategoryId));
+      setCategorySearch(res?.data?.data.title);
+      setCategories([res?.data?.data]);
+      setCount(1);
+    }
+  };
 
   useEffect(() => {
     getCategory();
+    if (categoryIds && count == 0) {
+      getCategoryId();
+    }
   }, [debouncedValue]);
 
+  useEffect(() => {
+    getArticle();
+  }, [page]);
+
   const getCategory = async () => {
     const res = await getArticleByCategoryLanding({
       limit: debouncedValue === "" ? "5" : "",
@@ -128,7 +134,6 @@ export default function ListNews() {
   async function getArticle() {
     loading();
     // topRef.current?.scrollIntoView({ behavior: "smooth" });
-
     const req = {
       page: page,
       search: searchValue || "",
@@ -139,13 +144,17 @@ export default function ListNews() {
         pathname.includes("polda") || pathname.includes("satker")
           ? String(category)
           : "",
-      categoryIds: categoryIds ? categoryIds : "",
-      startDate: selectedMonth
-        ? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
-        : "",
-      endDate: selectedMonth
-        ? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
-        : "",
+      categoryIds: selectedCategoryId,
+      // categoryIds:
+      //   selectedCategoryId && categorySearch !== "" ? selectedCategoryId : "",
+      startDate:
+        selectedDate && selectedMonth !== null
+          ? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
+          : "",
+      endDate:
+        selectedDate && selectedMonth !== null
+          ? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
+          : "",
     };
     const response = await getListArticle(req);
     setArticle(response?.data?.data);
@@ -163,6 +172,9 @@ export default function ListNews() {
 
   const onInputChange = (value: string) => {
     setCategorySearch(value);
+    if (value === "") {
+      setSelectedCategoryId("");
+    }
   };
 
   return (
@@ -202,18 +214,22 @@ export default function ListNews() {
               labelPlacement="outside"
               variant="bordered"
               placeholder="Kategori"
-              classNames={{ base: "!mt-0" }}
               inputValue={categorySearch}
+              // selectedKey={selectedCategoryId}
               onInputChange={onInputChange}
               onSelectionChange={(e) => setSelectedCategoryId(e)}
               inputProps={{ classNames: { inputWrapper: "border-1" } }}
+              defaultItems={categories}
             >
-              {categories.length > 0 &&
+              {/* {categories.length > 0 &&
                 categories.map((category: any) => (
-                  <AutocompleteItem key={category.id}>
+                  <AutocompleteItem key={`${category.id}`}>
                     {category.title}
                   </AutocompleteItem>
-                ))}
+                ))} */}
+              {(item: any) => (
+                <AutocompleteItem key={item.id}>{item.title}</AutocompleteItem>
+              )}
             </Autocomplete>
           </div>
           <div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[240px] rounded-xl px-2">
@@ -271,67 +287,86 @@ export default function ListNews() {
               </a>
             )}
           </div>
-          <Link
+          {/* <Link
             href={`/news/all?search=${searchValue}&category_id=${
               selectedCategoryId || ""
             }&month=${selectedMonth && selectedDate ? selectedMonth + 1 : ""}`}
+          > */}
+          <Button
+            onPress={getArticle}
+            className="bg-red-600 text-white w-[80px]"
           >
-            <Button className="bg-red-600 text-white w-[80px]">Cari</Button>
-          </Link>
+            Cari
+          </Button>
+          {/* </Link> */}
         </div>
-        <section
-          id="content"
-          className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7"
-        >
-          {article?.map((news: any) => (
-            <Link
-              href={`/news/detail/${news?.id}-${news?.slug}`}
-              key={news?.id}
+        {article?.length < 1 || !article ? (
+          <div className="flex justify-center items-center">Tidak ada Data</div>
+        ) : (
+          <>
+            <section
+              id="content"
+              className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7"
             >
-              <div className="">
-                <Image
-                  src={
-                    news.thumbnailUrl == ""
-                      ? "/no-image.jpg"
-                      : news.thumbnailUrl
-                  }
-                  width={1920}
-                  alt="thumbnail"
-                  className="rounded-b-none h-[27vh] w-full object-cover"
-                />
-              </div>
-              <div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-b-md">
-                <div className="font-semibold text-lg">{news?.title}</div>
-                <div className="flex flex-row items-center py-1 text-[10px] gap-2">
-                  <div className="flex flex-row items-center gap-1">
-                    <CalendarIcon size={18} />
-                    <p>{formatMonthString(news?.createdAt)}</p>
+              {article?.map((news: any) => (
+                <Link
+                  href={`/news/detail/${news?.id}-${news?.slug}`}
+                  key={news?.id}
+                >
+                  <div className="">
+                    <Image
+                      src={
+                        news.thumbnailUrl == ""
+                          ? "/no-image.jpg"
+                          : news.thumbnailUrl
+                      }
+                      width={1920}
+                      alt="thumbnail"
+                      className="rounded-b-none h-[27vh] w-full object-cover"
+                    />
                   </div>
-                  <div className="flex flex-row items-center">
-                    <ClockIcon size={18} />
-                    <p>{`${new Date(news?.createdAt)
-                      .getHours()
-                      .toString()
-                      .padStart(2, "0")}:${new Date(news?.createdAt)
-                      .getMinutes()
-                      .toString()
-                      .padStart(2, "0")}`}</p>
+                  <div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-b-md">
+                    <div className="font-semibold text-lg">{news?.title}</div>
+                    <div className="flex flex-row items-center py-1 text-[10px] gap-2">
+                      <div className="flex flex-row items-center gap-1">
+                        <CalendarIcon size={18} />
+                        <p>{formatMonthString(news?.createdAt)}</p>
+                      </div>
+                      <div className="flex flex-row items-center">
+                        <ClockIcon size={18} />
+                        <p>{`${new Date(news?.createdAt)
+                          .getHours()
+                          .toString()
+                          .padStart(2, "0")}:${new Date(news?.createdAt)
+                          .getMinutes()
+                          .toString()
+                          .padStart(2, "0")}`}</p>
+                      </div>
+                      <div className="flex flex-row items-center gap-1">
+                        <UserIcon size={14} />
+                        <p>{news?.createdByName}</p>
+                      </div>
+                    </div>
+                    <div className="text-sm">
+                      {textEllipsis(htmlToString(news?.description), 165)}
+                    </div>
                   </div>
-                  <div className="flex flex-row items-center gap-1">
-                    <UserIcon size={14} />
-                    <p>{news?.createdByName}</p>
-                  </div>
-                </div>
-                <div className="text-sm">
-                  {textEllipsis(htmlToString(news?.description), 165)}
-                </div>
-              </div>
-            </Link>
-          ))}
-        </section>
-        <div className="flex justify-center mt-5">
-          <Pagination page={page} total={totalPage} onChange={setPage} />
-        </div>
+                </Link>
+              ))}
+            </section>
+            <div className="flex justify-center mt-5">
+              <Pagination
+                page={page}
+                total={totalPage}
+                onChange={setPage}
+                classNames={{
+                  item: "w-fit px-3",
+                  cursor: "w-fit px-3 text-center",
+                }}
+              />
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

From b740ca8c449da95181cfb5969e3ca2e171b9a72b Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Sat, 31 May 2025 21:52:58 +0700
Subject: [PATCH 3/8] fix:pagination width

---
 components/main/dashboard/dashboard-container.tsx            | 4 ++++
 components/main/detail/list-news.tsx                         | 2 +-
 components/page/detail-news.tsx                              | 5 +++--
 components/table/article-table.tsx                           | 2 ++
 components/table/comment/comment-table.tsx                   | 2 ++
 components/table/disestages/transcript-draft-table.tsx       | 2 ++
 components/table/magazine/magazine-table.tsx                 | 2 ++
 components/table/master-categories/categories-table.tsx      | 2 ++
 components/table/master-role-table.tsx                       | 2 ++
 components/table/master-user-table.tsx                       | 2 ++
 .../master/master-user-level/master-user-level-table.tsx     | 2 ++
 components/table/static-page-table.tsx                       | 2 ++
 components/table/suggestions/suggestions-table.tsx           | 2 ++
 13 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx
index d96c550..e216131 100644
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@@ -362,6 +362,8 @@ export default function DashboardContainer() {
                 classNames={{
                   base: "bg-transparent",
                   wrapper: "bg-transparent",
+                  item: "w-fit px-3",
+                  cursor: "w-fit px-3",
                 }}
                 page={page}
                 total={totalPage}
@@ -492,6 +494,8 @@ export default function DashboardContainer() {
                 classNames={{
                   base: "bg-transparent",
                   wrapper: "bg-transparent",
+                  item: "w-fit px-3",
+                  cursor: "w-fit px-3",
                 }}
                 page={topPagespage}
                 total={topPagesTotalPage}
diff --git a/components/main/detail/list-news.tsx b/components/main/detail/list-news.tsx
index 9e6fd28..8fd2432 100644
--- a/components/main/detail/list-news.tsx
+++ b/components/main/detail/list-news.tsx
@@ -361,7 +361,7 @@ export default function ListNews() {
                 onChange={setPage}
                 classNames={{
                   item: "w-fit px-3",
-                  cursor: "w-fit px-3 text-center",
+                  cursor: "w-fit px-3",
                 }}
               />
             </div>
diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index 1408a41..b07365e 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -189,7 +189,8 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
                 className="p-2"
                 title={
                   <p className="text-black dark:text-white font-semibold text-xs md:text-sm">
-                    {`File ${index + 1}`}
+                    {file.file_alt}
+                    {/* {`File ${index + 1}`} */}
                   </p>
                 }
               >
@@ -225,7 +226,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
                     radius="sm"
                     // onPress={() => doDownload(file?.fileName, file?.title)}
                   >
-                    File
+                    Buka File
                   </Button>
                 </Link>
               </AccordionItem>
diff --git a/components/table/article-table.tsx b/components/table/article-table.tsx
index adfcf42..62e3c51 100644
--- a/components/table/article-table.tsx
+++ b/components/table/article-table.tsx
@@ -664,6 +664,8 @@ export default function ArticleTable() {
               classNames={{
                 base: "bg-transparent",
                 wrapper: "bg-transparent",
+                item: "w-fit px-3",
+                cursor: "w-fit px-3",
               }}
               page={page}
               total={totalPage}
diff --git a/components/table/comment/comment-table.tsx b/components/table/comment/comment-table.tsx
index 2305e86..c8126cb 100644
--- a/components/table/comment/comment-table.tsx
+++ b/components/table/comment/comment-table.tsx
@@ -343,6 +343,8 @@ export default function CommentTable() {
               classNames={{
                 base: "bg-transparent",
                 wrapper: "bg-transparent",
+                item: "w-fit px-3",
+                cursor: "w-fit px-3",
               }}
               page={page}
               total={totalPage}
diff --git a/components/table/disestages/transcript-draft-table.tsx b/components/table/disestages/transcript-draft-table.tsx
index f5f7ee4..a4c90c7 100644
--- a/components/table/disestages/transcript-draft-table.tsx
+++ b/components/table/disestages/transcript-draft-table.tsx
@@ -179,6 +179,8 @@ export default function TranscriptDraftTable(props: {
               classNames={{
                 base: "bg-transparent",
                 wrapper: "bg-transparent",
+                item: "w-fit px-3",
+                cursor: "w-fit px-3",
               }}
               page={page}
               total={totalPage}
diff --git a/components/table/magazine/magazine-table.tsx b/components/table/magazine/magazine-table.tsx
index 03a08ea..6fc83c6 100644
--- a/components/table/magazine/magazine-table.tsx
+++ b/components/table/magazine/magazine-table.tsx
@@ -342,6 +342,8 @@ export default function MagazineTable() {
               classNames={{
                 base: "bg-transparent",
                 wrapper: "bg-transparent",
+                item: "w-fit px-3",
+                cursor: "w-fit px-3",
               }}
               page={page}
               total={totalPage}
diff --git a/components/table/master-categories/categories-table.tsx b/components/table/master-categories/categories-table.tsx
index ab3bbc1..92dded9 100644
--- a/components/table/master-categories/categories-table.tsx
+++ b/components/table/master-categories/categories-table.tsx
@@ -467,6 +467,8 @@ export default function CategoriesTable(props: { triggerRefresh: boolean }) {
               classNames={{
                 base: "bg-transparent",
                 wrapper: "bg-transparent",
+                item: "w-fit px-3",
+                cursor: "w-fit px-3",
               }}
               page={page}
               total={totalPage}
diff --git a/components/table/master-role-table.tsx b/components/table/master-role-table.tsx
index a9093ad..9c32b2d 100644
--- a/components/table/master-role-table.tsx
+++ b/components/table/master-role-table.tsx
@@ -288,6 +288,8 @@ export default function MasterRoleTable() {
               classNames={{
                 base: "bg-transparent",
                 wrapper: "bg-transparent",
+                item: "w-fit px-3",
+                cursor: "w-fit px-3",
               }}
               page={page}
               total={totalPage}
diff --git a/components/table/master-user-table.tsx b/components/table/master-user-table.tsx
index 797bc18..1e2f198 100644
--- a/components/table/master-user-table.tsx
+++ b/components/table/master-user-table.tsx
@@ -306,6 +306,8 @@ export default function MasterUserTable() {
               classNames={{
                 base: "bg-transparent",
                 wrapper: "bg-transparent",
+                item: "w-fit px-3",
+                cursor: "w-fit px-3",
               }}
               page={page}
               total={totalPage}
diff --git a/components/table/master/master-user-level/master-user-level-table.tsx b/components/table/master/master-user-level/master-user-level-table.tsx
index 6ca8be8..5ab3d58 100644
--- a/components/table/master/master-user-level/master-user-level-table.tsx
+++ b/components/table/master/master-user-level/master-user-level-table.tsx
@@ -378,6 +378,8 @@ export default function MasterUserLevelTable() {
               classNames={{
                 base: "bg-transparent",
                 wrapper: "bg-transparent",
+                item: "w-fit px-3",
+                cursor: "w-fit px-3",
               }}
               page={page}
               total={totalPage}
diff --git a/components/table/static-page-table.tsx b/components/table/static-page-table.tsx
index daaa7cc..66166c7 100644
--- a/components/table/static-page-table.tsx
+++ b/components/table/static-page-table.tsx
@@ -290,6 +290,8 @@ export default function StaticPageTable() {
               classNames={{
                 base: "bg-transparent",
                 wrapper: "bg-transparent",
+                item: "w-fit px-3",
+                cursor: "w-fit px-3",
               }}
               page={page}
               total={totalPage}
diff --git a/components/table/suggestions/suggestions-table.tsx b/components/table/suggestions/suggestions-table.tsx
index 2578e5c..1e9d72d 100644
--- a/components/table/suggestions/suggestions-table.tsx
+++ b/components/table/suggestions/suggestions-table.tsx
@@ -658,6 +658,8 @@ export default function SuggestionsTable() {
               classNames={{
                 base: "bg-transparent",
                 wrapper: "bg-transparent",
+                item: "w-fit px-3",
+                cursor: "w-fit px-3",
               }}
               page={page}
               total={totalPage}

From 53d291c31df02eedd171eac344f097ce0e44d2f6 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Sat, 31 May 2025 21:55:07 +0700
Subject: [PATCH 4/8] fix:login with otp

---
 components/form/login.tsx | 162 +++++++++++++++++++-------------------
 1 file changed, 81 insertions(+), 81 deletions(-)

diff --git a/components/form/login.tsx b/components/form/login.tsx
index ccef5fa..bd1735d 100644
--- a/components/form/login.tsx
+++ b/components/form/login.tsx
@@ -69,90 +69,90 @@ export default function Login() {
       error("Username & Password Wajib Diisi !");
     } else {
       // login dengan otp
-      // const response = await emailValidation(data);
-      // if (response?.error) {
-      //   error("Username / Password Tidak Sesuai");
-      //   return false;
-      // }
-
-      // if (response?.data?.messages[0] === "Continue to setup email") {
-      //   setFirstLogin(true);
-      // } else {
-      //   setNeedOtp(true);
-      // }
-
-      // login tanpa otp
-      loading();
-      const response = await postSignIn(data);
+      const response = await emailValidation(data);
       if (response?.error) {
         error("Username / Password Tidak Sesuai");
-      } else {
-        const profile = await getProfile(response?.data?.data?.access_token);
-        const dateTime: any = new Date();
-
-        const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
-
-        Cookies.set("access_token", response?.data?.data?.access_token, {
-          expires: 1,
-        });
-        Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
-          expires: 1,
-        });
-        Cookies.set("time_refresh", newTime, {
-          expires: 1,
-        });
-        Cookies.set("is_first_login", "true", {
-          secure: true,
-          sameSite: "strict",
-        });
-        const resActivity = await saveActivity(
-          {
-            activityTypeId: 1,
-            url: "https://kontenhumas.com/auth",
-            userId: profile?.data?.data?.id,
-          },
-          accessData?.id_token
-        );
-        Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
-          expires: 1,
-        });
-        Cookies.set("uie", profile?.data?.data?.id, {
-          expires: 1,
-        });
-        Cookies.set("ufne", profile?.data?.data?.fullname, {
-          expires: 1,
-        });
-        Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
-          expires: 1,
-        });
-        Cookies.set("username", profile?.data?.data?.username, {
-          expires: 1,
-        });
-        Cookies.set("urie", profile?.data?.data?.roleId, {
-          expires: 1,
-        });
-        Cookies.set("roleName", profile?.data?.data?.roleName, {
-          expires: 1,
-        });
-        Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
-          expires: 1,
-        });
-        Cookies.set("ulne", profile?.data?.data?.userLevelId, {
-          expires: 1,
-        });
-        Cookies.set("urce", profile?.data?.data?.roleCode, {
-          expires: 1,
-        });
-        Cookies.set("email", profile?.data?.data?.email, {
-          expires: 1,
-        });
-        router.push("/admin/dashboard");
-        Cookies.set("status", "login", {
-          expires: 1,
-        });
-
-        close();
+        return false;
       }
+
+      if (response?.data?.messages[0] === "Continue to setup email") {
+        setFirstLogin(true);
+      } else {
+        setNeedOtp(true);
+      }
+
+      // login tanpa otp
+      // loading();
+      // const response = await postSignIn(data);
+      // if (response?.error) {
+      //   error("Username / Password Tidak Sesuai");
+      // } else {
+      //   const profile = await getProfile(response?.data?.data?.access_token);
+      //   const dateTime: any = new Date();
+
+      //   const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
+
+      //   Cookies.set("access_token", response?.data?.data?.access_token, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("time_refresh", newTime, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("is_first_login", "true", {
+      //     secure: true,
+      //     sameSite: "strict",
+      //   });
+      //   const resActivity = await saveActivity(
+      //     {
+      //       activityTypeId: 1,
+      //       url: "https://kontenhumas.com/auth",
+      //       userId: profile?.data?.data?.id,
+      //     },
+      //     accessData?.id_token
+      //   );
+      //   Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("uie", profile?.data?.data?.id, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("ufne", profile?.data?.data?.fullname, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("username", profile?.data?.data?.username, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("urie", profile?.data?.data?.roleId, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("roleName", profile?.data?.data?.roleName, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("ulne", profile?.data?.data?.userLevelId, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("urce", profile?.data?.data?.roleCode, {
+      //     expires: 1,
+      //   });
+      //   Cookies.set("email", profile?.data?.data?.email, {
+      //     expires: 1,
+      //   });
+      //   router.push("/admin/dashboard");
+      //   Cookies.set("status", "login", {
+      //     expires: 1,
+      //   });
+
+      //   close();
+      // }
     }
   };
 

From af5b8000cd74c1f14ffb7a0e67741a46af49946b Mon Sep 17 00:00:00 2001
From: hanif salafi <hanifsalafi456@gmail.com>
Date: Sun, 1 Jun 2025 02:00:00 +0700
Subject: [PATCH 5/8] feat: update list sidebar polda

---
 components/page/sidebar-detail.tsx | 23 ++++++++++++-----------
 services/article.ts                |  5 +++--
 types/globals.tsx                  |  1 +
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/components/page/sidebar-detail.tsx b/components/page/sidebar-detail.tsx
index 15580c6..6a4ce3a 100644
--- a/components/page/sidebar-detail.tsx
+++ b/components/page/sidebar-detail.tsx
@@ -14,20 +14,13 @@ import Image from "next/image";
 
 export default function SidebarDetail() {
   const [articleMabes, setArticleMabes] = useState<any>([]);
-  const [article, setArticle] = useState<any>([]);
+  const [articlePolda, setArticlePolda] = useState<any>([]);
 
   useEffect(() => {
-    getArticle();
     getArticleMabes();
+    getArticlePolda();
   }, []);
 
-  async function getArticle() {
-    const req = { page: 1, search: "", limit: "10", isPublish: true };
-
-    const response = await getListArticle(req);
-    setArticle(response?.data?.data);
-  }
-
   async function getArticleMabes() {
     const req = {
       page: 1,
@@ -40,6 +33,14 @@ export default function SidebarDetail() {
     const response = await getListArticle(req);
     setArticleMabes(response?.data?.data);
   }
+
+  async function getArticlePolda() {
+    const req = { page: 1, search: "", limit: "10", isPublish: true, isPolda: true };
+
+    const response = await getListArticle(req);
+    setArticlePolda(response?.data?.data);
+  }
+
   return (
     <div className="mt-2 space-y-5">
       <div className="font-semibold flex flex-col items-center py-3 rounded-lg">
@@ -109,7 +110,7 @@ export default function SidebarDetail() {
           </div>
         </div>
         <div className="w-full mt-3">
-          {article?.length < 1 ? (
+          {articlePolda?.length < 1 ? (
             <Skeleton className="rounded-lg">
               <div className="h-[320px] rounded-lg bg-default-300" />
             </Skeleton>
@@ -129,7 +130,7 @@ export default function SidebarDetail() {
               className="mySwiper"
               slidesPerView={1}
             >
-              {article?.map((newsItem: any) => (
+              {articlePolda?.map((newsItem: any) => (
                 <SwiperSlide key={newsItem.id}>
                   <div className=" h-[320px] flex flex-col gap-2 bg-gray-100 dark:bg-black p-4 rounded-lg">
                     <Image
diff --git a/services/article.ts b/services/article.ts
index fdc5342..99cb05f 100644
--- a/services/article.ts
+++ b/services/article.ts
@@ -24,12 +24,13 @@ export async function getListArticle(props: PaginationRequest) {
     isBanner,
     categoryIds,
     createdByIds,
+    isPolda,
   } = props;
   const headers = {
     "content-type": "application/json",
   };
   return await httpGet(
-    `/articles?limit=${limit}&page=${page}&isPublish=${
+    `/articles/public?limit=${limit}&page=${page}&isPublish=${
       isPublish === undefined ? "" : isPublish
     }&title=${search}&startDate=${startDate || ""}&endDate=${
       endDate || ""
@@ -37,7 +38,7 @@ export async function getListArticle(props: PaginationRequest) {
       sort || "desc"
     }&category=${categorySlug || ""}&isBanner=${isBanner || ""}&categoryIds=${
       categoryIds || ""
-    }&createdByIds=${createdByIds || ""}`,
+    }&createdByIds=${createdByIds || ""}&isPolda=${isPolda || ""}`,
     headers
   );
 }
diff --git a/types/globals.tsx b/types/globals.tsx
index c7e8eb4..a9e1597 100644
--- a/types/globals.tsx
+++ b/types/globals.tsx
@@ -69,4 +69,5 @@ export type PaginationRequest = {
   isBanner?: boolean;
   categoryIds?: string;
   createdByIds?: string;
+  isPolda?: boolean;
 };

From 70ac77dba44386776239bfb08bb4c86a0a4fc1fd Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Mon, 2 Jun 2025 12:18:56 +0700
Subject: [PATCH 6/8] fix:category landing

---
 components/main/detail/list-news.tsx | 323 ++++++++++++++-------------
 components/page/detail-news.tsx      |  31 ++-
 components/page/related-news.tsx     |   4 +-
 3 files changed, 191 insertions(+), 167 deletions(-)

diff --git a/components/main/detail/list-news.tsx b/components/main/detail/list-news.tsx
index 8fd2432..b578d0f 100644
--- a/components/main/detail/list-news.tsx
+++ b/components/main/detail/list-news.tsx
@@ -29,7 +29,7 @@ import {
   UserIcon,
 } from "../../icons";
 import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   getArticleByCategoryLanding,
   getListArticle,
@@ -49,6 +49,7 @@ import {
 import { close, loading } from "@/config/swal";
 import { format } from "date-fns";
 import { getCategoryById } from "@/services/master-categories";
+import AsyncSelect from "react-select/async";
 
 const months = [
   "Jan",
@@ -81,12 +82,7 @@ export default function ListNews() {
     searchParams.get("search") || ""
   );
   const [categorySearch, setCategorySearch] = useState("");
-  const [debouncedValue, setDebouncedValue] = useState("");
-  const [selectedCategoryId, setSelectedCategoryId] = useState<any>(
-    categoryIds ? categoryIds : ""
-  );
-
-  const [count, setCount] = useState(0);
+  const [selectedCategoryId, setSelectedCategoryId] = useState<any>([]);
 
   const today = new Date();
   const [year, setYear] = useState(today.getFullYear());
@@ -101,42 +97,43 @@ export default function ListNews() {
     setSelectedDate(new Date(year, monthIndex, 1));
   };
 
-  const getCategoryId = async () => {
-    if (categoryIds) {
-      const res = await getCategoryById(Number(selectedCategoryId));
-      setCategorySearch(res?.data?.data.title);
-      setCategories([res?.data?.data]);
-      setCount(1);
-    }
-  };
-
   useEffect(() => {
-    getCategory();
-    if (categoryIds && count == 0) {
-      getCategoryId();
+    const search = searchParams.get("search");
+    const category = searchParams.get("category_id");
+    if (searchParams.get("search")) {
+      setSearchValue(String(searchParams.get("search")));
+      getArticle({ title: String(search) });
     }
-  }, [debouncedValue]);
+
+    if (category && category !== "") {
+      getCategoryFromQueries(category.split(","));
+    }
+  }, [searchParams]);
+
+  const getCategoryFromQueries = async (category: string[]) => {
+    const temp = [];
+    for (const element of category) {
+      const res = await getCategoryById(Number(element));
+      if (res?.data?.data) {
+        temp.push(res?.data?.data);
+      }
+    }
+
+    const setup = setupCategory(temp);
+    setSelectedCategoryId(setup);
+    getArticle({ category: setup });
+  };
 
   useEffect(() => {
     getArticle();
-  }, [page]);
+  }, [page, searchParams]);
 
-  const getCategory = async () => {
-    const res = await getArticleByCategoryLanding({
-      limit: debouncedValue === "" ? "5" : "",
-      title: debouncedValue,
-    });
-    if (res?.data?.data) {
-      setCategories(res?.data?.data);
-    }
-  };
-
-  async function getArticle() {
+  async function getArticle(props?: { title?: string; category?: any }) {
     loading();
     // topRef.current?.scrollIntoView({ behavior: "smooth" });
     const req = {
       page: page,
-      search: searchValue || "",
+      search: props?.title || searchValue || "",
       limit: "9",
       isPublish: true,
       sort: "desc",
@@ -144,9 +141,12 @@ export default function ListNews() {
         pathname.includes("polda") || pathname.includes("satker")
           ? String(category)
           : "",
-      categoryIds: selectedCategoryId,
-      // categoryIds:
-      //   selectedCategoryId && categorySearch !== "" ? selectedCategoryId : "",
+      categoryIds: props?.category
+        ? props.category.map((val: any) => val.id).join(",")
+        : selectedCategoryId.length > 0
+        ? selectedCategoryId.map((val: any) => val.id).join(",")
+        : "",
+
       startDate:
         selectedDate && selectedMonth !== null
           ? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
@@ -162,21 +162,52 @@ export default function ListNews() {
     close();
   }
 
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedValue(categorySearch);
-    }, 1500);
+  const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
 
-    return () => clearTimeout(timeout);
-  }, [categorySearch]);
-
-  const onInputChange = (value: string) => {
-    setCategorySearch(value);
-    if (value === "") {
-      setSelectedCategoryId("");
+  const getCategory = async (search?: string) => {
+    const res = await getArticleByCategoryLanding({
+      // limit: debouncedValue === "" ? "5" : "",
+      // title: debouncedValue,
+      limit: !search || search === "" ? "5" : "",
+      title: search ? search : "",
+    });
+    if (res?.data?.data) {
+      setCategories(res?.data?.data);
+      return res?.data?.data;
     }
+    return [];
   };
 
+  const setupCategory = (data: any) => {
+    const temp = [];
+    for (const element of data) {
+      temp.push({
+        id: element.id,
+        label: element.title,
+        value: element.id,
+      });
+    }
+    return temp;
+  };
+
+  const loadOptions = useCallback(
+    (inputValue: string, callback: (options: any) => void) => {
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+
+      debounceTimeout.current = setTimeout(async () => {
+        try {
+          const data = await getCategory(inputValue);
+          callback(setupCategory(data));
+        } catch (error) {
+          callback([]);
+        }
+      }, 1500);
+    },
+    []
+  );
+
   return (
     <div className="bg-white border-b-1" ref={topRef}>
       <div className="text-black py-5 px-3 lg:w-[75vw] mx-auto bg-white">
@@ -187,118 +218,104 @@ export default function ListNews() {
           <ChevronRightIcon />
           <p className="text-black">Berita</p>
         </div>
-        <div className="py-5 lg:py-10 lg:px-10 flex flex-col lg:flex-row gap-2 items-end">
-          <Input
-            aria-label="Judul"
-            className="w-full"
-            classNames={{
-              inputWrapper: "bg-white hover:!bg-gray-100 border-1",
-              input: "text-sm !text-black",
-            }}
-            // onKeyDown={(event) => {
-            //   if (event.key === "Enter") {
-            //     router.push(pathname + `?search=${searchValue}`);
-            //     getArticle();
-            //   }
-            // }}
-            labelPlacement="outside"
-            placeholder="Judul..."
-            value={searchValue}
-            onValueChange={setSearchValue}
-            type="search"
-          />
-          <div className="flex w-full lg:w-fit gap-4">
-            <Autocomplete
-              className="w-full lg:w-[240px] mt-0"
-              label=""
+        <div className="w-full flex justify-center">
+          <div className="py-5 lg:py-10 lg:mx-auto flex flex-col lg:flex-row gap-2 items-end grow-0 mx-auto">
+            <Input
+              aria-label="Judul"
+              className="w-full lg:w-[300px]"
+              classNames={{
+                inputWrapper: "bg-white hover:!bg-gray-100 border-1 rounded-md",
+                input: "text-sm !text-black",
+              }}
+              // onKeyDown={(event) => {
+              //   if (event.key === "Enter") {
+              //     router.push(pathname + `?search=${searchValue}`);
+              //     getArticle();
+              //   }
+              // }}
               labelPlacement="outside"
-              variant="bordered"
+              placeholder="Judul..."
+              value={searchValue}
+              onValueChange={setSearchValue}
+              type="search"
+            />
+            <AsyncSelect
+              isMulti
+              loadOptions={loadOptions}
+              defaultOptions
               placeholder="Kategori"
-              inputValue={categorySearch}
-              // selectedKey={selectedCategoryId}
-              onInputChange={onInputChange}
-              onSelectionChange={(e) => setSelectedCategoryId(e)}
-              inputProps={{ classNames: { inputWrapper: "border-1" } }}
-              defaultItems={categories}
-            >
-              {/* {categories.length > 0 &&
-                categories.map((category: any) => (
-                  <AutocompleteItem key={`${category.id}`}>
-                    {category.title}
-                  </AutocompleteItem>
-                ))} */}
-              {(item: any) => (
-                <AutocompleteItem key={item.id}>{item.title}</AutocompleteItem>
-              )}
-            </Autocomplete>
-          </div>
-          <div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[240px] rounded-xl px-2">
-            <Popover placement="bottom" showArrow={true} className="w-full">
-              <PopoverTrigger>
-                <a className="px-2 py-1 text-sm w-[220px]">
-                  {" "}
-                  {selectedDate
-                    ? format(selectedDate, "MMMM yyyy")
-                    : "Pilih Bulan"}
-                </a>
-              </PopoverTrigger>
-              <PopoverContent className="p-4 w-[220px]">
-                <div className="flex items-center justify-between mb-2 px-1 w-full">
-                  <button
-                    className="text-gray-500 hover:text-black"
-                    onClick={() => setYear((prev) => prev - 1)}
-                  >
-                    <ChevronLeftIcon />
-                  </button>
-                  <span className="font-semibold text-center">{year}</span>
-                  <button
-                    className="text-gray-500 hover:text-black"
-                    onClick={() => setYear((prev) => prev + 1)}
-                  >
-                    <ChevronRightIcon />
-                  </button>
-                </div>
-
-                <div className="grid grid-cols-3 gap-2 w-full">
-                  {months.map((month, idx) => (
+              className="z-50 min-w-[300px] max-w-[600px]"
+              classNames={{
+                control: () =>
+                  "border border-gray-300 border-1 rounded-xl min-w-[300px] max-w-[600px]",
+                menu: () => "z-50",
+              }}
+              value={selectedCategoryId}
+              onChange={setSelectedCategoryId}
+            />
+            <div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[200px] rounded-md px-2">
+              <Popover placement="bottom" showArrow={true} className="w-full">
+                <PopoverTrigger>
+                  <a className="px-2 py-1 text-sm w-[220px]">
+                    {" "}
+                    {selectedDate
+                      ? format(selectedDate, "MMMM yyyy")
+                      : "Pilih Bulan"}
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent className="p-4 w-[200px]">
+                  <div className="flex items-center justify-between mb-2 px-1 w-full">
                     <button
-                      key={idx}
-                      onClick={() => handleMonthClick(idx)}
-                      className={`py-1 rounded-md text-sm transition-colors ${
-                        selectedDate &&
-                        selectedDate.getMonth() === idx &&
-                        selectedDate.getFullYear() === year
-                          ? "bg-blue-500 text-white"
-                          : "hover:bg-gray-200 text-gray-700"
-                      }`}
+                      className="text-gray-500 hover:text-black"
+                      onClick={() => setYear((prev) => prev - 1)}
                     >
-                      {month}
+                      <ChevronLeftIcon />
                     </button>
-                  ))}
-                </div>
-              </PopoverContent>
-            </Popover>{" "}
-            {selectedDate && (
-              <a
-                className="cursor-pointer w-[20px]"
-                onClick={() => setSelectedDate(null)}
-              >
-                <TimesIcon size={20} />
-              </a>
-            )}
+                    <span className="font-semibold text-center">{year}</span>
+                    <button
+                      className="text-gray-500 hover:text-black"
+                      onClick={() => setYear((prev) => prev + 1)}
+                    >
+                      <ChevronRightIcon />
+                    </button>
+                  </div>
+
+                  <div className="grid grid-cols-3 gap-2 w-full">
+                    {months.map((month, idx) => (
+                      <button
+                        key={idx}
+                        onClick={() => handleMonthClick(idx)}
+                        className={`py-1 rounded-md text-sm transition-colors ${
+                          selectedDate &&
+                          selectedDate.getMonth() === idx &&
+                          selectedDate.getFullYear() === year
+                            ? "bg-blue-500 text-white"
+                            : "hover:bg-gray-200 text-gray-700"
+                        }`}
+                      >
+                        {month}
+                      </button>
+                    ))}
+                  </div>
+                </PopoverContent>
+              </Popover>{" "}
+              {selectedDate && (
+                <a
+                  className="cursor-pointer w-[20px]"
+                  onClick={() => setSelectedDate(null)}
+                >
+                  <TimesIcon size={20} />
+                </a>
+              )}
+            </div>
+            <Button
+              onPress={() => getArticle()}
+              className="bg-red-600 text-white w-[80px] rounded-md"
+            >
+              Cari
+            </Button>
+            {/* </Link> */}
           </div>
-          {/* <Link
-            href={`/news/all?search=${searchValue}&category_id=${
-              selectedCategoryId || ""
-            }&month=${selectedMonth && selectedDate ? selectedMonth + 1 : ""}`}
-          > */}
-          <Button
-            onPress={getArticle}
-            className="bg-red-600 text-white w-[80px]"
-          >
-            Cari
-          </Button>
-          {/* </Link> */}
         </div>
         {article?.length < 1 || !article ? (
           <div className="flex justify-center items-center">Tidak ada Data</div>
diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index b07365e..303b7bb 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -260,7 +260,11 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
         <p className="text-lg border-b-3 border-red-600 font-semibold">TAGS</p>
         <div className="flex flex-wrap gap-2">
           {data?.categories?.map((category: any) => (
-            <Link href={""} key={category?.id} className="text-sm ">
+            <Link
+              href={`/news/all?category_id=${category?.id}`}
+              key={category?.id}
+              className="text-sm "
+            >
               <Button className="bg-[#BE0106] text-white px-2 py-2 rounded-md ">
                 {category?.title}
               </Button>
@@ -268,17 +272,20 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
           ))}
         </div>
         <div className="flex flex-wrap gap-2">
-          {data?.tags?.split(",").map((tag: any) => (
-            <Link href={""} key={tag} className="text-xs">
-              <Button
-                className="border-[#BE0106] px-2 py-2 rounded-md "
-                variant="bordered"
-                size="sm"
-              >
-                {tag}
-              </Button>
-            </Link>
-          ))}
+          {data?.tags?.split(",").map(
+            (tag: any) =>
+              tag !== "" && (
+                <Link href={``} key={tag} className="text-xs">
+                  <Button
+                    className="border-[#BE0106] px-2 py-2 rounded-md "
+                    variant="bordered"
+                    size="sm"
+                  >
+                    {tag}
+                  </Button>
+                </Link>
+              )
+          )}
         </div>
       </div>
       <div className="grid grid-cols-2  md:flex lg:justify-between gap-2 lg:gap-10 my-8">
diff --git a/components/page/related-news.tsx b/components/page/related-news.tsx
index 62c8a62..976485d 100644
--- a/components/page/related-news.tsx
+++ b/components/page/related-news.tsx
@@ -72,8 +72,8 @@ export default function RelatedNews(props: { categories: any }) {
               );
             }}
           >
-            {article?.map((newsItem: any) => (
-              <SwiperSlide key={newsItem.id}>
+            {article?.map((newsItem: any, index: number) => (
+              <SwiperSlide key={`${newsItem.id}-${index}`}>
                 <Card isFooterBlurred radius="lg" className="border-none">
                   <Image
                     width={480}

From dbb2fbb46483bdc1a8089aedb56366720eb4297d Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Tue, 3 Jun 2025 14:58:43 +0700
Subject: [PATCH 7/8] feat:filter date top article dashboar, create magazine
 category

---
 .../form/magazine/create-magazine-form.tsx    |  60 +++++++++
 .../main/dashboard/dashboard-container.tsx    | 120 ++++++++++++++----
 2 files changed, 154 insertions(+), 26 deletions(-)

diff --git a/components/form/magazine/create-magazine-form.tsx b/components/form/magazine/create-magazine-form.tsx
index 6575916..9c510e6 100644
--- a/components/form/magazine/create-magazine-form.tsx
+++ b/components/form/magazine/create-magazine-form.tsx
@@ -81,6 +81,9 @@ const createArticleSchema = z.object({
       }),
     })
   ),
+  category: z.array(categorySchema).nonempty({
+    message: "Kategori harus memiliki setidaknya satu item",
+  }),
 });
 
 export default function NewCreateMagazineForm() {
@@ -90,6 +93,30 @@ export default function NewCreateMagazineForm() {
   const editor = useRef(null);
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
+  const [listCategory, setListCategory] = useState<CategoryType[]>([]);
+
+  useEffect(() => {
+    fetchCategory();
+  }, []);
+
+  const fetchCategory = async () => {
+    const res = await getArticleByCategory();
+    if (res?.data?.data) {
+      setupCategory(res?.data?.data);
+    }
+  };
+
+  const setupCategory = (data: any) => {
+    const temp = [];
+    for (const element of data) {
+      temp.push({
+        id: element.id,
+        label: element.title,
+        value: element.id,
+      });
+    }
+    setListCategory(temp);
+  };
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
@@ -153,6 +180,8 @@ export default function NewCreateMagazineForm() {
       typeId: 1,
       slug: values.slug,
       statusId: 1,
+      categoryIds: values.category.map((a) => a.id).join(","),
+
       //   description: htmlToString(removeImgTags(values.description)),
       description: values.description,
       // rows: values.rows,
@@ -385,6 +414,37 @@ export default function NewCreateMagazineForm() {
         {errors?.slug && (
           <p className="text-red-400 text-sm mb-3">{errors.slug?.message}</p>
         )}
+
+        <p className="text-sm mt-3">Kategori</p>
+        <Controller
+          control={control}
+          name="category"
+          render={({ field: { onChange, value } }) => (
+            <ReactSelect
+              className="basic-single text-black z-50"
+              classNames={{
+                control: (state: any) =>
+                  "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500",
+              }}
+              classNamePrefix="select"
+              onChange={onChange}
+              closeMenuOnSelect={false}
+              components={animatedComponents}
+              isClearable={true}
+              isSearchable={true}
+              isMulti={true}
+              placeholder="Kategori..."
+              name="sub-module"
+              options={listCategory}
+            />
+          )}
+        />
+        {errors?.category && (
+          <p className="text-red-400 text-sm mb-3">
+            {errors.category?.message}
+          </p>
+        )}
+
         <p className="text-sm mt-3">Thumbnail</p>
 
         {thumbnailImg.length > 0 ? (
diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx
index e216131..fc027bd 100644
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@@ -89,6 +89,15 @@ export default function DashboardContainer() {
     endDate: parseDate(convertDateFormatNoTimeV2(new Date())),
   });
 
+  const [topContentDate, setTopContentDate] = useState({
+    startDate: parseDate(
+      convertDateFormatNoTimeV2(
+        new Date(new Date().setDate(new Date().getDate() - 7))
+      )
+    ),
+    endDate: parseDate(convertDateFormatNoTimeV2(new Date())),
+  });
+
   const [typeDate, setTypeDate] = useState("monthly");
   const [summary, setSummary] = useState<any>();
 
@@ -122,7 +131,17 @@ export default function DashboardContainer() {
 
   useEffect(() => {
     fetchTopPages();
-  }, [topPagespage]);
+  }, [topPagespage, topContentDate]);
+
+  const getDate = (data: any) => {
+    if (data === null) {
+      return "";
+    } else {
+      return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${
+        data.day < 10 ? `0${data.day}` : data.day
+      }`;
+    }
+  };
 
   async function fetchTopPages() {
     const req = {
@@ -130,6 +149,8 @@ export default function DashboardContainer() {
       page: topPagespage,
       search: "",
       sort: "desc",
+      startDate: getDate(topContentDate.startDate),
+      endDate: getDate(topContentDate.endDate),
     };
     const res = await getTopArticles(req);
     setTopPages(getTableNumber(10, res.data?.data));
@@ -139,6 +160,7 @@ export default function DashboardContainer() {
   useEffect(() => {
     fetchPostCount();
   }, [postContentDate]);
+
   async function fetchPostCount() {
     const getDate = (data: any) => {
       return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${
@@ -432,14 +454,6 @@ export default function DashboardContainer() {
                   Mingguan
                 </Button>
                 <div className="w-[140px]">
-                  {/* <Datepicker
-                    value={startDateValue}
-                    displayFormat="DD/MM/YYYY"
-                    asSingle={true}
-                    useRange={false}
-                    onChange={(e: any) => setStartDateValue(e)}
-                    inputClassName="z-50 w-full text-xs lg:text-sm bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-sm lg:rounded-lg h-[30px] lg:h-[40px] text-gray-600 dark:text-gray-300"
-                  /> */}
                   <Popover
                     placement="bottom"
                     classNames={{ content: ["!bg-transparent", "p-0"] }}
@@ -472,12 +486,64 @@ export default function DashboardContainer() {
           <div className="flex flex-col w-full lg:w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8 text-xs lg:text-sm">
             <div className="flex justify-between font-semibold">
               <p>Top Pages</p>
+              <div className="w-[220px] flex flex-row gap-2 justify-between font-semibold">
+                <Popover
+                  placement="bottom"
+                  classNames={{ content: ["!bg-transparent", "p-0"] }}
+                >
+                  <PopoverTrigger>
+                    <a className="cursor-pointer">
+                      {convertDateFormatNoTime(topContentDate.startDate)}
+                    </a>
+                  </PopoverTrigger>
+                  <PopoverContent className="bg-transparent">
+                    <Calendar
+                      value={topContentDate.startDate}
+                      onChange={(e) =>
+                        setTopContentDate({
+                          startDate: e,
+                          endDate: topContentDate.endDate,
+                        })
+                      }
+                      maxValue={topContentDate.endDate}
+                    />
+                  </PopoverContent>
+                </Popover>
+                -
+                <Popover
+                  placement="bottom"
+                  classNames={{ content: ["!bg-transparent", "p-0"] }}
+                >
+                  <PopoverTrigger>
+                    <a className="cursor-pointer ">
+                      {convertDateFormatNoTime(topContentDate.endDate)}
+                    </a>
+                  </PopoverTrigger>
+                  <PopoverContent className="bg-transparent">
+                    <Calendar
+                      value={topContentDate.endDate}
+                      onChange={(e) =>
+                        setTopContentDate({
+                          startDate: topContentDate.startDate,
+                          endDate: e,
+                        })
+                      }
+                      minValue={topContentDate.startDate}
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
             </div>
             <div className="flex flex-row border-b-1">
               <div className="w-[5%]">No</div>
               <div className="w-[85%]">Title</div>
               <div className="w-[10%] text-center">Visits</div>
             </div>
+            {(!topPages || topPages?.length < 1) && (
+              <div className="flex justify-center items-center">
+                Tidak ada Data
+              </div>
+            )}
             {topPages?.map((list) => (
               <div key={list.id} className="flex flex-row border-b-1">
                 <div className="w-[5%]">{list?.no}</div>
@@ -485,23 +551,25 @@ export default function DashboardContainer() {
                 <div className="w-[10%] text-center">{list?.viewCount}</div>
               </div>
             ))}
-            <div className="my-2 w-full flex justify-center">
-              <Pagination
-                isCompact
-                showControls
-                showShadow
-                color="primary"
-                classNames={{
-                  base: "bg-transparent",
-                  wrapper: "bg-transparent",
-                  item: "w-fit px-3",
-                  cursor: "w-fit px-3",
-                }}
-                page={topPagespage}
-                total={topPagesTotalPage}
-                onChange={(page) => setTopPagesPage(page)}
-              />
-            </div>
+            {topPages?.length > 0 && (
+              <div className="my-2 w-full flex justify-center">
+                <Pagination
+                  isCompact
+                  showControls
+                  showShadow
+                  color="primary"
+                  classNames={{
+                    base: "bg-transparent",
+                    wrapper: "bg-transparent",
+                    item: "w-fit px-3",
+                    cursor: "w-fit px-3",
+                  }}
+                  page={topPagespage}
+                  total={topPagesTotalPage}
+                  onChange={(page) => setTopPagesPage(page)}
+                />
+              </div>
+            )}
           </div>
         </div>
       </div>

From a0ee6421d12a35d1e5d705ca72967380feb0c25c Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Mon, 9 Jun 2025 16:36:24 +0700
Subject: [PATCH 8/8] fix:disable create edit delete

---
 app/(admin)/admin/article/page.tsx                      | 4 +++-
 app/(admin)/admin/master-category/page.tsx              | 1 +
 components/main/dashboard/dashboard-container.tsx       | 3 ++-
 components/table/article-table.tsx                      | 2 +-
 components/table/master-categories/categories-table.tsx | 2 +-
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/(admin)/admin/article/page.tsx b/app/(admin)/admin/article/page.tsx
index a22e455..bc475e7 100644
--- a/app/(admin)/admin/article/page.tsx
+++ b/app/(admin)/admin/article/page.tsx
@@ -11,10 +11,12 @@ export default function BasicPage() {
     <div className="overflow-x-hidden overflow-y-scroll">
       <div className="px-2 md:px-4 md:py-4 w-full">
         <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
-          <Link href="/admin/article/create">
+          <Link href="#">
+            {/* <Link href="/admin/article/create"> */}
             <Button
               size="md"
               className="bg-[#F07C00] text-white w-full lg:w-fit"
+              isDisabled
             >
               Tambah Artikel
               <AddIcon />
diff --git a/app/(admin)/admin/master-category/page.tsx b/app/(admin)/admin/master-category/page.tsx
index 1090f1e..757cdff 100644
--- a/app/(admin)/admin/master-category/page.tsx
+++ b/app/(admin)/admin/master-category/page.tsx
@@ -174,6 +174,7 @@ export default function MasterCategoryTable() {
             size="md"
             className="bg-[#F07C00] text-white w-full lg:w-fit"
             onPress={onOpen}
+            isDisabled
           >
             Tambah Kategori
             <AddIcon />
diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx
index fc027bd..c712b38 100644
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@@ -351,7 +351,8 @@ export default function DashboardContainer() {
           <div className="flex flex-col w-full lg:w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8 text-sm">
             <div className="flex justify-between font-semibold">
               <p>Recent Article</p>
-              <Link href="/admin/article/create">
+              <Link href="#">
+                {/* <Link href="/admin/article/create"> */}
                 <Button color="primary" variant="bordered">
                   Buat Article
                 </Button>
diff --git a/components/table/article-table.tsx b/components/table/article-table.tsx
index 62e3c51..51cf490 100644
--- a/components/table/article-table.tsx
+++ b/components/table/article-table.tsx
@@ -321,7 +321,7 @@ export default function ArticleTable() {
                     <DotsYIcon className="text-default-300" />
                   </Button>
                 </DropdownTrigger>
-                <DropdownMenu>
+                <DropdownMenu disabledKeys={["edit", "delete"]}>
                   <DropdownItem
                     key="copy-article"
                     onPress={() => copyUrlArticle(article.id, article.slug)}
diff --git a/components/table/master-categories/categories-table.tsx b/components/table/master-categories/categories-table.tsx
index 92dded9..0797142 100644
--- a/components/table/master-categories/categories-table.tsx
+++ b/components/table/master-categories/categories-table.tsx
@@ -284,7 +284,7 @@ export default function CategoriesTable(props: { triggerRefresh: boolean }) {
                     <DotsYIcon className="text-default-300" />
                   </Button>
                 </DropdownTrigger>
-                <DropdownMenu>
+                <DropdownMenu disabledKeys={["Edit", "Delete"]}>
                   <DropdownItem
                     key="Detail"
                     onPress={() => openModal(category.id, true)}