feat:news all filter, document attach article

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

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) => {
+      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,14 +379,24 @@ 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();
 
+      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 (selectedFileType === "image") {
       if (thumbnailImg?.length > 0 || files?.length > 0) {
         if (thumbnailImg?.length > 0) {
           const formFiles = new FormData();
@@ -343,6 +413,16 @@ export default function CreateArticleForm() {
           }
         }
       }
+    }
+
+    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 = {
@@ -406,10 +486,18 @@ export default function CreateArticleForm() {
     }
   };
 
-  const handleRemoveFile = (file: FileWithPreview) => {
+  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,18 +532,56 @@ 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) {
+      if (type === "image") {
         setThumbnailImg(Array.from(selectedFiles));
       }
+      if (type === "document") {
+        setThumbnailDocumentImg(Array.from(selectedFiles));
+      }
+    }
   };
 
   const selectedCategory = watch("category");
@@ -612,6 +738,13 @@ export default function CreateArticleForm() {
         )}
 
         <p className="text-sm mt-3">File Media</p>
+        <Tabs
+          selectedKey={selectedFileType}
+          onSelectionChange={(e) => {
+            setSelectedFileType(String(e));
+          }}
+        >
+          <Tab key="image" title="Foto">
             <Fragment>
               <div {...getRootProps({ className: "dropzone" })}>
                 <input {...getInputProps()} />
@@ -640,12 +773,45 @@ export default function CreateArticleForm() {
             {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])}
@@ -657,7 +823,7 @@ export default function CreateArticleForm() {
                   variant="bordered"
                   size="sm"
                   color="danger"
-                onClick={() => setSelectedMainImage(null)}
+                  onPress={() => setSelectedMainImage(null)}
                 >
                   <TimesIcon />
                 </Button>
@@ -681,16 +847,13 @@ export default function CreateArticleForm() {
               </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, "image")}
                 />
                 {thumbnailValidation !== "" && (
                   <p className="text-red-400 text-sm mb-3">
@@ -698,6 +861,38 @@ export default function CreateArticleForm() {
                   </p>
                 )}
               </>
+            )
+          ) : thumbnailDocumentImg.length > 0 ? (
+            <div className="flex flex-row">
+              <img
+                src={URL.createObjectURL(thumbnailDocumentImg[0])}
+                className="w-[30%]"
+                alt="thumbnail"
+              />
+              <Button
+                className=" border-none rounded-full"
+                variant="bordered"
+                size="sm"
+                color="danger"
+                onPress={() => setThumbnailDocumentImg([])}
+              >
+                <TimesIcon />
+              </Button>
+            </div>
+          ) : (
+            <>
+              <input
+                id="file-upload"
+                type="file"
+                multiple
+                className="w-fit h-fit"
+                accept="image/*"
+                onChange={(e) => handleFileChange(e, "document")}
+              />
+              {thumbnailDocumentValidation !== "" && (
+                <p className="text-red-400 text-sm mb-3">Upload thumbnail</p>
+              )}
+            </>
           )}
 
           <p className="text-sm mt-3">Kategori</p>

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) => {
+      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 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,6 +663,14 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
 
         <p className="text-sm mt-3">File Media</p>
         {!isDetail && (
+          <Tabs
+            isDisabled
+            selectedKey={selectedFileType}
+            onSelectionChange={(e) => {
+              setSelectedFileType(String(e));
+            }}
+          >
+            <Tab key="image" title="Foto">
               <Fragment>
                 <div {...getRootProps({ className: "dropzone" })}>
                   <input {...getInputProps()} />
@@ -598,22 +687,114 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                 </div>
                 {files.length ? (
                   <Fragment>
-                <div className="flex flex-col">{fileList}</div>
+                    <div>{fileList}</div>
                     <div className=" flex justify-between gap-2">
-                  {/* <div className="flex flex-row items-center gap-3 py-3">
+                      <Button onPress={() => setFiles([])} size="sm">
-                  <Label>Gunakan Watermark</Label>
+                        Hapus Semua
-                  <div className="flex items-center gap-3">
+                      </Button>
-                    <Switch defaultChecked color="primary" id="c2" />
-                  </div>
-                </div> */}
                     </div>
                   </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 ? (
+            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>
+                    }
+                  >
+                    <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
@@ -642,6 +823,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                   ))}
                 </div>
               </>
+            )
           ) : (
             <p>Belum Ada File</p>
           )
@@ -653,6 +835,7 @@ 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">
+                  {selectedFileType === "image" ? (
                     <div className="file-preview">
                       <Image
                         width={480}
@@ -662,6 +845,12 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                         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>

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);
+      // 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);
       // if (response?.error) {
       //   error("Username / Password Tidak Sesuai");
-      // } else {
+      //   return false;
-      //   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();
       // }
+
+      // 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();
+      }
     }
   };
 

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,22 +162,12 @@ export default function HeaderNews() {
             Hot Topik
           </p>
           <ScrollShadow hideScrollBar className="h-[29vh] lg:h-[400px] ">
-            {hotNews?.map((data: any, index: number) => (
+            {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}
                 >
-                {/* <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}`}
@@ -200,10 +193,26 @@ export default function HeaderNews() {
                     </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]">
+        <div className="hidden lg:block w-full lg:w-[50%] h-[500px]">
-          {banner ? (
+          {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,7 +326,8 @@ export default function HeaderNews() {
                 </a>
               </div>
               <ScrollShadow hideScrollBar className="h-[39vh] lg:h-[400px]">
-                {article?.map((list: any, index: number) => (
+                {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"
@@ -333,7 +345,23 @@ export default function HeaderNews() {
                         </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

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

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

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" />
       }

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

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 {
-import { formatMonthString, htmlToString, textEllipsis } from "@/utils/global";
+  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();
+    loading();
-    topRef.current?.scrollIntoView({ behavior: "smooth" });
+    // 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) => {
+            // onKeyDown={(event) => {
-              if (event.key === "Enter") {
+            //   if (event.key === "Enter") {
-                router.push(pathname + `?search=${searchValue}`);
+            //     router.push(pathname + `?search=${searchValue}`);
-                getArticle();
+            //     getArticle();
-              }
+            //   }
-            }}
+            // }}
             labelPlacement="outside"
-            placeholder="Search..."
+            placeholder="Judul..."
-            value={searchValue || ""}
+            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>

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 />

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,7 +153,19 @@ 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.thumbnailUrl}
+            className="object-cover w-[100%] rounded-md"
+          />
+        ) : (
+          data?.files?.length > 0 && (
             <Image
               classNames={{
                 wrapper: "!w-full !max-w-full",
@@ -163,9 +175,63 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
               src={data?.files[imageNow]?.file_url}
               className="object-cover w-[100%] rounded-md"
             />
+          )
         )}
       </div>
-      {data?.files?.length > 0 && (
+      {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
@@ -181,7 +247,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
               </a>
             ))}
           </div>
-      )}
+        ))}
       <div
         dangerouslySetInnerHTML={removeImgTags(
           formatTextToHtmlTag(data?.htmlDescription)

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);
     }

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(() => {
+    getArticle();
+    getArticleMabes();
+  }, []);
+
   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);
   }
-    getArticle();
+
-  }, []);
+  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,6 +49,11 @@ export default function SidebarDetail() {
           </div>
         </div>
         <div className="w-full mt-3">
+          {articleMabes?.length < 1 ? (
+            <Skeleton className="rounded-lg">
+              <div className="h-[320px] rounded-lg bg-default-300" />
+            </Skeleton>
+          ) : (
             <Swiper
               centeredSlides={false}
               spaceBetween={10}
@@ -48,7 +69,7 @@ export default function SidebarDetail() {
               className="mySwiper"
               slidesPerView={1}
             >
-            {article?.map((newsItem: any) => (
+              {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
@@ -63,7 +84,9 @@ export default function SidebarDetail() {
                       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}`}>
+                      <Link
+                        href={`/news/detail/${newsItem.id}-${newsItem.slug}`}
+                      >
                         <p className="text-left font-bold text-sm">
                           {textEllipsis(newsItem.title, 45)}
                         </p>
@@ -76,6 +99,7 @@ export default function SidebarDetail() {
                 </SwiperSlide>
               ))}
             </Swiper>
+          )}
         </div>
       </div>
       <div className="font-semibold flex flex-col items-center space-y-5">
@@ -85,6 +109,11 @@ export default function SidebarDetail() {
           </div>
         </div>
         <div className="w-full mt-3">
+          {article?.length < 1 ? (
+            <Skeleton className="rounded-lg">
+              <div className="h-[320px] rounded-lg bg-default-300" />
+            </Skeleton>
+          ) : (
             <Swiper
               centeredSlides={false}
               spaceBetween={10}
@@ -115,7 +144,9 @@ export default function SidebarDetail() {
                       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}`}>
+                      <Link
+                        href={`/news/detail/${newsItem.id}-${newsItem.slug}`}
+                      >
                         <p className="text-left font-bold text-sm">
                           {textEllipsis(newsItem.title, 45)}
                         </p>
@@ -128,6 +159,7 @@ export default function SidebarDetail() {
                 </SwiperSlide>
               ))}
             </Swiper>
+          )}
         </div>
       </div>
     </div>

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

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>

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
+  );
+}