merge:dev-restructure

app/(admin)/admin/article/page.tsx

@@ -15,6 +15,7 @@ export default function BasicPage() {
             <Button
               size="md"
               className="bg-[#F07C00] text-white w-full lg:w-fit"
+              isDisabled
             >
               Tambah Artikel
               <AddIcon />

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

app/(admin)/admin/master-category/page.tsx

@@ -180,6 +180,7 @@ export default function MasterCategoryTable() {
             size="md"
             className="bg-[#F07C00] text-white w-full lg:w-fit"
             onPress={onOpen}
+            isDisabled
           >
             Tambah Kategori
             <AddIcon />

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";
@@ -64,6 +66,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(
   () => {
@@ -116,6 +119,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");
@@ -128,11 +145,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">(
@@ -143,17 +165,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 = {
@@ -197,17 +239,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("");
@@ -297,9 +355,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,
@@ -316,6 +374,8 @@ export default function CreateArticleForm() {
       isPublish: status === "publish",
     };
 
+    console.log("formData", formData);
+
     const response = await createArticle(formData);
 
     if (response?.error) {
@@ -324,14 +384,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();
@@ -348,6 +418,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 = {
@@ -411,10 +491,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) => (
@@ -449,18 +537,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");
@@ -617,6 +743,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()} />
@@ -645,12 +778,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])}
@@ -662,7 +828,7 @@ export default function CreateArticleForm() {
                   variant="bordered"
                   size="sm"
                   color="danger"
-                onClick={() => setSelectedMainImage(null)}
+                  onPress={() => setSelectedMainImage(null)}
                 >
                   <TimesIcon />
                 </Button>
@@ -686,16 +852,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">
@@ -703,6 +866,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,12 +38,15 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Tab,
+  Tabs,
   useDisclosure,
 } from "@heroui/react";
 import GenerateSingleArticleForm from "./generate-ai-single-form";
 import {
   convertDateFormatNoTime,
   getUnixTimestamp,
+  formatMonthString,
   htmlToString,
 } from "@/utils/global";
 import { close, error, loading } from "@/config/swal";
@@ -51,6 +56,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(
   () => {
@@ -109,6 +115,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();
@@ -120,6 +140,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("");
@@ -138,20 +160,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: [] },
@@ -185,7 +227,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();
   }
@@ -362,12 +411,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}
@@ -391,13 +447,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",
@@ -563,14 +649,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} />
             ) : (
@@ -586,6 +664,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()} />
@@ -602,22 +688,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
@@ -646,6 +824,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                   ))}
                 </div>
               </>
+            )
           ) : (
             <p>Belum Ada File</p>
           )
@@ -657,6 +836,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}
@@ -666,6 +846,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}
@@ -739,7 +925,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                 variant="bordered"
                 size="sm"
                 color="danger"
-                onClick={() => setThumbnail("")}
+                onPress={() => setThumbnail("")}
               >
                 <TimesIcon />
               </Button>
@@ -758,7 +944,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                 variant="bordered"
                 size="sm"
                 color="danger"
-                onClick={() => setThumbnailImg([])}
+                onPress={() => setThumbnailImg([])}
               >
                 <TimesIcon />
               </Button>

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 ? (

components/landing/HeaderNews.tsx

@@ -6,6 +6,7 @@ import {
   CircularProgress,
   Image,
   ScrollShadow,
+  Skeleton,
 } from "@heroui/react";
 import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
 import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
@@ -81,7 +82,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">
-          {hotNews ? (
+          {banner.length > 0 ? (
             <Swiper
               centeredSlides={true}
               autoplay={{
@@ -147,7 +148,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">
@@ -156,22 +159,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}`}
@@ -197,10 +190,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"
@@ -212,8 +221,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]">
-          {hotNews ? (
+          {banner.length > 0 ? (
             <Swiper
               centeredSlides={true}
               autoplay={{
@@ -240,7 +249,7 @@ export default function HeaderNews() {
                 );
               }}
             >
-              {hotNews?.map((newsItem: any, index: number) => (
+              {banner.map((newsItem: any, index: number) => (
                 <SwiperSlide key={newsItem?.id} className="!w-full h-[50vh]">
                   <Card
                     isFooterBlurred
@@ -284,7 +293,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">
@@ -310,16 +321,14 @@ 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"
                     >
                       <Link href={`news/detail/${list?.id}`}>
-                      <p className="text-left font-semibold">
+                        <p className="text-left font-semibold">{list?.title}</p>
-                        {" "}
-                        {textEllipsis(list.title, 120)}
-                      </p>
                       </Link>
                       <div className="flex flex-row gap-1">
                         <p className="py-[2px] text-left text-xs">
@@ -331,7 +340,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,14 +12,7 @@ export default function NewsTicker() {
 
   useEffect(() => {
     async function getArticle() {
-      const req = {
+      const req = { page: 1, search: "", limit: "10", isPublish: true };
-        page: 1,
-        search: "",
-        limit: "10",
-        sortBy: "created_at",
-        isPublish: true,
-        sort: "desc",
-      };
       const response = await getListArticle(req);
       setArticle(response?.data?.data);
     }
@@ -58,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"
@@ -84,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;
 
   const [hasMounted, setHasMounted] = useState(false);
 

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/dashboard/dashboard-container.tsx

@@ -90,6 +90,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>();
 
@@ -124,7 +133,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 = {
@@ -134,6 +153,8 @@ export default function DashboardContainer() {
       sort: "desc",
       isPublish: true,
       timeStamp: getUnixTimestamp(),
+      startDate: getDate(topContentDate.startDate),
+      endDate: getDate(topContentDate.endDate),
     };
     const res = await getTopArticles(req);
     setTopPages(getTableNumber(10, res.data?.data));
@@ -143,6 +164,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}-${
@@ -334,7 +356,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>
@@ -367,6 +390,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}
@@ -435,14 +460,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"] }}
@@ -475,12 +492,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>
@@ -488,6 +557,7 @@ export default function DashboardContainer() {
                 <div className="w-[10%] text-center">{list?.viewCount}</div>
               </div>
             ))}
+            {topPages?.length > 0 && (
               <div className="my-2 w-full flex justify-center">
                 <Pagination
                   isCompact
@@ -497,12 +567,15 @@ 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}
                   onChange={(page) => setTopPagesPage(page)}
                 />
               </div>
+            )}
           </div>
         </div>
       </div>

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,25 +1,45 @@
 "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 { useCallback, 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,
@@ -27,6 +47,24 @@ import {
   useSearchParams,
 } from "next/navigation";
 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",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
 
 export default function ListNews() {
   const [article, setArticle] = useState<any>([]);
@@ -38,28 +76,85 @@ export default function ListNews() {
   const params = useParams();
   const category = params?.name;
   const searchParams = useSearchParams();
+  const categoryIds = searchParams.get("category_id");
+  const [categories, setCategories] = useState<any>([]);
+  const [searchValue, setSearchValue] = useState(
+    searchParams.get("search") || ""
+  );
+  const [categorySearch, setCategorySearch] = 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(() => {
     const search = searchParams.get("search");
-  const [searchValue, setSearchValue] = useState(search || "");
+    const category = searchParams.get("category_id");
+    if (searchParams.get("search")) {
+      setSearchValue(String(searchParams.get("search")));
+      getArticle({ title: String(search) });
+    }
+
+    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, category]);
+  }, [page, searchParams]);
 
-  async function getArticle() {
+  async function getArticle(props?: { title?: string; category?: any }) {
     loading();
-    topRef.current?.scrollIntoView({ behavior: "smooth" });
+    // topRef.current?.scrollIntoView({ behavior: "smooth" });
-
     const req = {
       page: page,
-      search: searchValue || "",
+      search: props?.title || searchValue || "",
       limit: "9",
-      // isPublish: pathname.includes("polda") ? false : true,
       isPublish: true,
       sort: "desc",
       categorySlug:
         pathname.includes("polda") || pathname.includes("satker")
           ? String(category)
           : "",
+      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))
+          : "",
+      endDate:
+        selectedDate && selectedMonth !== null
+          ? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
+          : "",
     };
     const response = await getListArticle(req);
     setArticle(response?.data?.data);
@@ -67,6 +162,52 @@ export default function ListNews() {
     close();
   }
 
+  const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  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">
@@ -77,39 +218,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="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="Search"
+              aria-label="Judul"
-            className="w-full"
+              className="w-full lg:w-[300px]"
               classNames={{
-              inputWrapper: "bg-white hover:!bg-gray-100 border-1",
+                inputWrapper: "bg-white hover:!bg-gray-100 border-1 rounded-md",
                 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"
             />
+            <AsyncSelect
+              isMulti
+              loadOptions={loadOptions}
+              defaultOptions
+              placeholder="Kategori"
+              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
+                      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>
+            <Button
+              onPress={() => getArticle()}
+              className="bg-red-600 text-white w-[80px] rounded-md"
+            >
+              Cari
+            </Button>
+            {/* </Link> */}
+          </div>
+        </div>
+        {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"
@@ -136,14 +347,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>
@@ -161,8 +372,18 @@ export default function ListNews() {
               ))}
             </section>
             <div className="flex justify-center mt-5">
-          <Pagination page={page} total={totalPage} onChange={setPage} />
+              <Pagination
+                page={page}
+                total={totalPage}
+                onChange={setPage}
+                classNames={{
+                  item: "w-fit px-3",
+                  cursor: "w-fit px-3",
+                }}
+              />
             </div>
+          </>
+        )}
       </div>
     </div>
   );

components/main/detail/new-detail.tsx

@@ -24,7 +24,6 @@ export default function NewsDetailPage(props: { datas: any }) {
   const [articles, setArticles] = useState<any>([]);
 
   useEffect(() => {
-    // initFetch();
     getArticles();
     sendActivity();
   }, []);
@@ -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");
@@ -157,7 +157,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",
@@ -167,9 +179,64 @@ 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.file_alt}
+                    {/* {`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)}
+                  >
+                    Buka 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
@@ -178,14 +245,14 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
                 className="cursor-pointer"
               >
                 <Image
-                alt="Sub 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)
@@ -197,7 +264,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>
@@ -205,8 +276,10 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
           ))}
         </div>
         <div className="flex flex-wrap gap-2">
-          {data?.tags?.split(",").map((tag: any) => (
+          {data?.tags?.split(",").map(
-            <Link href={""} key={tag} className="text-xs">
+            (tag: any) =>
+              tag !== "" && (
+                <Link href={``} key={tag} className="text-xs">
                   <Button
                     className="border-[#BE0106] px-2 py-2 rounded-md "
                     variant="bordered"
@@ -215,7 +288,8 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
                     {tag}
                   </Button>
                 </Link>
-          ))}
+              )
+          )}
         </div>
       </div>
       <div className="grid grid-cols-2  md:flex lg:justify-between gap-2 lg:gap-10 my-8">

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", isPublish: true };
+      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);
     }
@@ -63,8 +72,8 @@ export default function RelatedNews() {
               );
             }}
           >
-            {article?.map((newsItem: any) => (
+            {article?.map((newsItem: any, index: number) => (
-              <SwiperSlide key={newsItem.id}>
+              <SwiperSlide key={`${newsItem.id}-${index}`}>
                 <Card isFooterBlurred radius="lg" className="border-none">
                   <Image
                     width={480}

components/page/sidebar-detail.tsx

@@ -8,38 +8,45 @@ 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>([]);
+  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,
       search: "",
       limit: "10",
       isPublish: true,
-      category: "1906",
+      category: "586",
     };
 
     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">
@@ -49,6 +56,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}
@@ -79,7 +91,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>
@@ -92,6 +106,7 @@ export default function SidebarDetail() {
                 </SwiperSlide>
               ))}
             </Swiper>
+          )}
         </div>
       </div>
       <div className="font-semibold flex flex-col items-center space-y-5">
@@ -101,6 +116,11 @@ export default function SidebarDetail() {
           </div>
         </div>
         <div className="w-full mt-3">
+          {articlePolda?.length < 1 ? (
+            <Skeleton className="rounded-lg">
+              <div className="h-[320px] rounded-lg bg-default-300" />
+            </Skeleton>
+          ) : (
             <Swiper
               centeredSlides={false}
               spaceBetween={10}
@@ -116,7 +136,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
@@ -131,7 +151,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>
@@ -144,6 +166,7 @@ export default function SidebarDetail() {
                 </SwiperSlide>
               ))}
             </Swiper>
+          )}
         </div>
       </div>
     </div>

components/table/article-table.tsx

@@ -328,7 +328,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)}
@@ -671,6 +671,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}

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",
@@ -340,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}

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}

components/table/magazine/magazine-table.tsx

@@ -341,6 +341,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}

components/table/master-categories/categories-table.tsx

@@ -285,7 +285,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)}
@@ -468,6 +468,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}

components/table/master-role-table.tsx

@@ -250,6 +250,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}

components/table/master-user-table.tsx

@@ -308,6 +308,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}

components/table/master/master-user-level/master-user-level-table.tsx

@@ -381,6 +381,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}

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}

components/table/suggestions/suggestions-table.tsx

@@ -665,6 +665,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}

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

@@ -24,21 +24,21 @@ export async function getListArticle(props: PaginationRequest) {
     isBanner,
     categoryIds,
     createdByIds,
-    timeStamp,
+    isPolda,
   } = props;
   const headers = {
     "content-type": "application/json",
   };
   return await httpGet(
-    `/articles/public?sort=desc&sortBy=created_at&limit=${limit}&page=${page}&isPublish=${
+    `/articles/public?limit=${limit}&page=${page}&isPublish=${
       isPublish === undefined ? "" : isPublish
     }&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 || ""}&timeStamp=${timeStamp || ""}`,
+    }&createdByIds=${createdByIds || ""}&isPolda=${isPolda || ""}`,
     headers
   );
 }
@@ -241,32 +241,15 @@ export async function updateIsBannerArticle(id: number, status: boolean) {
   return await httpPut(pathUrl, headers);
 }
 
-export async function httpGetHumas(pathUrl: any, headers: any) {
+export async function getArticleByCategoryLanding(props: {
-  const response = await axiosInterceptorInstanceHumas
+  limit: string;
-    .get(pathUrl, { headers })
+  title: string;
-    .catch(function (error: any) {
+}) {
-      console.log(error);
-      return error.response;
-    });
-  console.log("Response base svc : ", response);
-  if (response?.status == 200 || response?.status == 201) {
-    return {
-      error: false,
-      message: "success",
-      data: response?.data,
-    };
-  } else {
-    return {
-      error: true,
-      message: response?.data?.message || response?.data || null,
-      data: null,
-    };
-  }
-}
-
-export async function getArticleByIdHumas(id: any) {
   const headers = {
     "content-type": "application/json",
   };
-  return await httpGetHumas(`/articles/${id}`, headers);
+  return await httpGet(
+    `/article-categories?limit=${props.limit}&title=${props.title}`,
+    headers
+  );
 }

types/globals.tsx

@@ -69,5 +69,5 @@ export type PaginationRequest = {
   isBanner?: boolean;
   categoryIds?: string;
   createdByIds?: string;
-  timeStamp?: number;
+  isPolda?: boolean;
 };