feat:category, fix:thumbnail

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

@@ -23,7 +23,7 @@ export default function BasicPage() {
   return (
     <div className="overflow-x-hidden overflow-y-scroll">
       <div className="px-2 md:px-4 w-full">
-        <div className="rounded-md my-5 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3">
+        <div className="rounded-md my-5 px-5 py-2 shadow-lg bg-white dark:bg-[#18181b] flex flex-row gap-3">
           <Link href="/admin/article/create">
             <Button size="md" className="bg-[#F07C00] text-white">
               New Article
@@ -40,7 +40,7 @@ export default function BasicPage() {
             Generate Article
           </Button> */}
         </div>
-        <div className="bg-white dark:bg-[#18181b] rounded-xl p-2">
+        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-2">
           <ArticleTable />
         </div>
       </div>

app/(admin)/admin/e-magazine/page.tsx

@@ -1,10 +0,0 @@
-import MagazineTable from '@/components/table/magazine/magazine-table'
-import React from 'react'
-
-const AdminMagazine = () => {
-    return (
-        <div><MagazineTable /></div>
-    )
-}
-
-export default AdminMagazine

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

@@ -0,0 +1,41 @@
+"use client";
+import { AddIcon } from "@/components/icons";
+import ArticleTable from "@/components/table/article-table";
+import generatedArticleIds from "@/store/generated-article-store";
+import { Button, Card } from "@nextui-org/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function MagazineTable() {
+  const router = useRouter();
+  const setGeneratedArticleIdStore = generatedArticleIds(
+    (state) => state.setArticleIds
+  );
+
+  return (
+    <div className="overflow-x-hidden overflow-y-scroll">
+      <div className="px-2 md:px-4 w-full">
+        <div className="rounded-md my-5 px-5 py-2 shadow-lg bg-white dark:bg-[#18181b] flex flex-row gap-3">
+          <Link href="/admin/magazine/create">
+            <Button size="md" className="bg-[#F07C00] text-white">
+              Tambah Majalah
+              <AddIcon />
+            </Button>
+          </Link>
+          {/* <Button
+            size="md"
+            color="primary"
+            className="bg-[#F07C00] text-white"
+            onPress={goGenerate}
+          >
+            <AddIcon />
+            Generate Article
+          </Button> */}
+        </div>
+        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-2">
+          <ArticleTable />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,4 +1,339 @@
 "use client";
-export default function MasterCategory() {
+import { AddIcon, CloudUploadIcon, TimesIcon } from "@/components/icons";
-  return <div>master category</div>;
+import ArticleTable from "@/components/table/article-table";
+import CategoriesTable from "@/components/table/master-categories/categories-table";
+import generatedArticleIds from "@/store/generated-article-store";
+import {
+  Button,
+  Card,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Textarea,
+  useDisclosure,
+} from "@nextui-org/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+import { Fragment, useEffect, useState } from "react";
+import { getArticleByCategory } from "@/service/article";
+import ReactSelect from "react-select";
+import makeAnimated from "react-select/animated";
+import { useDropzone } from "react-dropzone";
+import { close, error, loading } from "@/config/swal";
+import {
+  createCategory,
+  uploadCategoryThumbnail,
+} from "@/service/master-categories";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+const categorySchema = z.object({
+  id: z.number(),
+  label: z.string(),
+  value: z.number(),
+});
+
+const createArticleSchema = z.object({
+  title: z.string().min(2, {
+    message: "Judul harus diisi",
+  }),
+  description: z.string().min(2, {
+    message: "Deskripsi harus diisi",
+  }),
+  category: z.array(categorySchema).nonempty({
+    message: "Kategori harus memiliki setidaknya satu item",
+  }),
+});
+
+interface CategoryType {
+  id: number;
+  label: string;
+  value: number;
+}
+
+export default function MasterCategoryTable() {
+  const router = useRouter();
+  const MySwal = withReactContent(Swal);
+
+  const animatedComponents = makeAnimated();
+  const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
+  const [listCategory, setListCategory] = useState<CategoryType[]>([]);
+  const [files, setFiles] = useState<File[]>([]);
+  const [refresh, setRefresh] = useState(false);
+
+  const formOptions = {
+    resolver: zodResolver(createArticleSchema),
+    defaultValues: { title: "", description: "", category: [], tags: [] },
+  };
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    maxFiles: 1,
+  });
+  type UserSettingSchema = z.infer<typeof createArticleSchema>;
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    getValues,
+    watch,
+    setError,
+    clearErrors,
+  } = useForm<UserSettingSchema>(formOptions);
+
+  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 onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
+    console.log("values,", values);
+    loading();
+    const formData = {
+      title: values.title,
+      statusId: 1,
+      parentId: values.category[0].id,
+      description: values.description,
+    };
+
+    const response = await createCategory(formData);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+    const categoryId = response?.data?.data?.id;
+    const formFiles = new FormData();
+
+    formFiles.append("file", files[0]);
+    const resFile = await uploadCategoryThumbnail(categoryId, formFiles);
+    if (resFile?.error) {
+      error(resFile.message);
+      return false;
+    }
+    close();
+    setRefresh(!refresh);
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+      }
+    });
+  };
+
+  const handleRemoveFile = (file: File) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  return (
+    <div className="overflow-x-hidden overflow-y-scroll">
+      <div className="px-2 md:px-4 w-full">
+        <div className="rounded-md my-5 px-5 py-2 shadow-lg bg-white dark:bg-[#18181b] flex flex-row gap-3">
+          <Button
+            size="md"
+            className="bg-[#F07C00] text-white"
+            onPress={onOpen}
+          >
+            Tambah Kategori
+            <AddIcon />
+          </Button>
+          <Modal isOpen={isOpen} onOpenChange={onOpenChange} size="3xl">
+            <ModalContent>
+              {() => (
+                <>
+                  <ModalHeader className="flex flex-col gap-1">
+                    Kategori Baru
+                  </ModalHeader>
+                  <ModalBody>
+                    <form
+                      onSubmit={handleSubmit(onSubmit)}
+                      className="flex flex-col gap-3"
+                    >
+                      <div className="flex flex-col gap-1">
+                        <p className="text-sm">Nama Kategori</p>
+                        <Controller
+                          control={control}
+                          name="title"
+                          render={({ field: { onChange, value } }) => (
+                            <Input
+                              type="text"
+                              id="title"
+                              placeholder=""
+                              label=""
+                              value={value}
+                              onChange={onChange}
+                              labelPlacement="outside"
+                              className="w-full "
+                              classNames={{
+                                inputWrapper: [
+                                  "border-1 rounded-lg",
+                                  "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                                ],
+                              }}
+                              variant="bordered"
+                            />
+                          )}
+                        />
+                        {errors?.title && (
+                          <p className="text-red-400 text-sm">
+                            {errors.title?.message}
+                          </p>
+                        )}
+                      </div>
+                      <div className="flex flex-col gap-1">
+                        <p className="text-sm">Deskripsi</p>
+                        <Controller
+                          control={control}
+                          name="description"
+                          render={({ field: { onChange, value } }) => (
+                            <Textarea
+                              type="text"
+                              id="description"
+                              placeholder=""
+                              label=""
+                              value={value}
+                              onChange={onChange}
+                              labelPlacement="outside"
+                              className="w-full "
+                              classNames={{
+                                inputWrapper: [
+                                  "border-1 rounded-lg",
+                                  "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                                ],
+                              }}
+                              variant="bordered"
+                            />
+                          )}
+                        />
+                        {errors?.title && (
+                          <p className="text-red-400 text-sm">
+                            {errors.title?.message}
+                          </p>
+                        )}
+                      </div>
+                      <div className="flex flex-col gap-1">
+                        <p className="text-sm mt-3">Kategori Terkait</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">
+                            {errors.category?.message}
+                          </p>
+                        )}
+                      </div>
+                      <div className="flex flex-col gap-1">
+                        <p className="text-sm mt-3">Thumbnail</p>
+                        {files.length < 1 && (
+                          <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 />
+                                <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                                  Tarik file disini atau klik untuk upload.
+                                </h4>
+                                <div className=" text-xs text-muted-foreground">
+                                  ( Upload file dengan format .jpg, .jpeg, atau
+                                  .png. Ukuran maksimal 100mb.)
+                                </div>
+                              </div>
+                            </div>
+                          </Fragment>
+                        )}
+
+                        {files.length > 0 && (
+                          <div className="flex flex-row gap-2">
+                            <img
+                              src={URL.createObjectURL(files[0])}
+                              className="w-[30%]"
+                              alt="thumbnail"
+                            />
+                            <Button
+                              className=" border-none rounded-full"
+                              variant="bordered"
+                              onClick={() => handleRemoveFile(files[0])}
+                            >
+                              <TimesIcon />
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                      <ModalFooter className="self-end grow items-end">
+                        <Button color="primary" type="submit">
+                          Simpan
+                        </Button>
+                        <Button
+                          color="danger"
+                          variant="light"
+                          onPress={onClose}
+                        >
+                          Tutup
+                        </Button>
+                      </ModalFooter>
+                    </form>
+                  </ModalBody>
+                </>
+              )}
+            </ModalContent>
+          </Modal>
+        </div>
+        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-2">
+          <CategoriesTable triggerRefresh={refresh} />
+        </div>
+      </div>
+    </div>
+  );
 }

app/(admin)/admin/master-role/create/page.tsx

@@ -3,7 +3,7 @@ import { Card } from "@nextui-org/react";
 
 export default function CreateMasterUserRolePage() {
   return (
-    <Card className="h-[96vh] rounded-md border bg-transparent">
+    <Card className="h-[96vh] rounded-md bg-transparent">
       <FormMasterUserRole />
     </Card>
   );

app/(admin)/admin/master-role/detail/[id]/page.tsx

@@ -1,10 +1,10 @@
-import FormDetailMasterUserRole from '@/components/form/form-detail-master-user-role'
+import FormDetailMasterUserRole from "@/components/form/form-detail-master-user-role";
-import { Card } from '@nextui-org/react'
+import { Card } from "@nextui-org/react";
 
 export default function DetailMasterRolePage() {
-    return (
+  return (
-        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+    <Card className="h-[96vh] rounded-md my- ml-3 bg-transparent">
-            <FormDetailMasterUserRole />
+      <FormDetailMasterUserRole />
-        </Card>
+    </Card>
-    )
+  );
 }

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

@@ -6,7 +6,7 @@ import Link from "next/link";
 
 export default function MasterRolePage() {
   return (
-    <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2">
+    <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg">
       <div className="px-4">
         <Card className="rounded-md my-5 pl-5 py-2">
           <Link href="/admin/master-role/create">

app/(admin)/admin/master-user/create/page.tsx

@@ -3,7 +3,7 @@ import { Card } from "@nextui-org/react";
 
 export default function CreateMasterUserPage() {
   return (
-    <Card className="h-[96vh] rounded-md border bg-transparent">
+    <Card className="h-[96vh] rounded-md bg-transparent">
       <FormMasterUser />
     </Card>
   );

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

@@ -6,7 +6,7 @@ import Link from "next/link";
 
 export default function MasterUserPage() {
   return (
-    <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2">
+    <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg">
       <div className="px-4">
         <Card className="rounded-md my-5 pl-5 py-2">
           <Link href="/admin/master-user/create">

app/(admin)/admin/static-page/create/page.tsx

@@ -3,8 +3,8 @@ import { Card } from "@nextui-org/react";
 
 export default function StaticPageGenerator() {
   return (
-    <Card className="rounded-md border bg-transparent p-4 overflow-auto">
+    <div className="bg-transparent p-4 overflow-auto">
       <StaticPageBuilder />
-    </Card>
+    </div>
   );
 }

app/(admin)/admin/static-page/edit/[id]/page.tsx

@@ -3,7 +3,7 @@ import { Card } from "@nextui-org/react";
 
 export default function StaticPageEdit() {
   return (
-    <Card className="rounded-md border bg-transparent p-4 overflow-auto">
+    <Card className="rounded-md bg-transparent p-4 overflow-auto">
       <StaticPageBuilderEdit />
     </Card>
   );

app/(admin)/admin/static-page/page.tsx

@@ -5,9 +5,9 @@ import Link from "next/link";
 
 export default function StaticPageGeneratorList() {
   return (
-    <div className="overflow-x-hidden overflow-y-scroll rounded-lg border-2">
+    <div className="overflow-x-hidden overflow-y-scroll rounded-lg">
       <div className="px-2 md:px-4 w-full">
-        <div className="rounded-md mt-4 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3">
+        <div className="rounded-md mt-4 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3 shadow-lg">
           <Link href="/admin/static-page/create">
             <Button
               size="md"
@@ -19,7 +19,7 @@ export default function StaticPageGeneratorList() {
             </Button>
           </Link>
         </div>
-        <div className="bg-white dark:bg-[#18181b] rounded-xl p-2">
+        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-2 mt-4">
           <StaticPageTable />
         </div>
       </div>

components/form/article/create-article-form.tsx

@@ -13,10 +13,15 @@ import { Button } from "@nextui-org/button";
 import { CloudUploadIcon, TimesIcon } from "@/components/icons";
 import Image from "next/image";
 import { Switch } from "@nextui-org/switch";
-import { createArticle, getArticleByCategory } from "@/service/article";
+import {
+  createArticle,
+  getArticleByCategory,
+  uploadArticleFile,
+  uploadArticleThumbnail,
+} from "@/service/article";
 import ReactSelect from "react-select";
 import makeAnimated from "react-select/animated";
-import { Chip } from "@nextui-org/react";
+import { Checkbox, Chip } from "@nextui-org/react";
 import GenerateSingleArticleForm from "./generate-ai-single-form";
 import { htmlToString } from "@/utils/global";
 import { close, error, loading } from "@/config/swal";
@@ -60,7 +65,7 @@ const createArticleSchema = z.object({
   }),
   tags: z.array(z.string()).nonempty({
     message: "Minimal 1 tag",
-  }), // Array berisi string
+  }),
 });
 
 export default function CreateArticleForm() {
@@ -72,11 +77,17 @@ export default function CreateArticleForm() {
   const [useAi, setUseAI] = useState(false);
   const [listCategory, setListCategory] = useState<CategoryType[]>([]);
   const [tag, setTag] = useState("");
+  const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
+  const [selectedMainImage, setSelectedMainImage] = useState<number>();
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
-      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+      setFiles((prevFiles) => [
+        ...prevFiles,
+        ...acceptedFiles.map((file) => Object.assign(file)),
+      ]);
     },
+    multiple: true,
   });
 
   const formOptions = {
@@ -150,7 +161,7 @@ export default function CreateArticleForm() {
       title: values.title,
       typeId: 1,
       slug: values.slug,
-      categoryId: values.category.map((item) => item.id).join(","),
+      categoryId: values.category[0].id,
       tags: values.tags.join(","),
       description: htmlToString(removeImgTags(values.description)),
       htmlDescription: removeImgTags(values.description),
@@ -162,6 +173,34 @@ export default function CreateArticleForm() {
       error(response.message);
       return false;
     }
+    const articleId = response?.data?.data?.id;
+    if (files?.length > 0) {
+      const formFiles = new FormData();
+
+      for (const element of files) {
+        formFiles.append("file", element);
+        const resFile = await uploadArticleFile(articleId, formFiles);
+      }
+    }
+
+    if (thumbnailImg?.length > 0 || files?.length > 0) {
+      const formFiles = new FormData();
+
+      formFiles.append("file", thumbnailImg[0]);
+      const resFile = await uploadArticleThumbnail(articleId, formFiles);
+    } else {
+      const formFiles = new FormData();
+
+      if (selectedMainImage) {
+        formFiles.append("file", files[selectedMainImage]);
+
+        const resFile = await uploadArticleThumbnail(articleId, formFiles);
+      } else {
+        formFiles.append("file", files[0]);
+        const resFile = await uploadArticleThumbnail(articleId, formFiles);
+      }
+    }
+
     close();
     successSubmit("/admin/article");
   };
@@ -214,7 +253,7 @@ export default function CreateArticleForm() {
     setFiles([...filtered]);
   };
 
-  const fileList = files.map((file) => (
+  const fileList = files.map((file, index) => (
     <div
       key={file.name}
       className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
@@ -231,11 +270,21 @@ export default function CreateArticleForm() {
             )}
             {" kb"}
           </div>
+          <Checkbox
+            id={String(index)}
+            value={String(index)}
+            size="sm"
+            isSelected={selectedMainImage === index}
+            onValueChange={() => setSelectedMainImage(index)}
+          >
+            <p className="text-black text-xs"> Jadikan Thumbnail</p>
+          </Checkbox>
         </div>
       </div>
 
       <Button
         className=" border-none rounded-full"
+        variant="bordered"
         onClick={() => handleRemoveFile(file)}
       >
         <TimesIcon />
@@ -243,6 +292,13 @@ export default function CreateArticleForm() {
     </div>
   ));
 
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = event.target.files;
+    if (selectedFiles) {
+      setThumbnailImg(Array.from(selectedFiles));
+    }
+  };
+
   return (
     <form
       className="flex flex-row gap-8 text-black"
@@ -360,7 +416,9 @@ export default function CreateArticleForm() {
                     <Switch defaultChecked color="primary" id="c2" />
                   </div>
                 </div> */}
-                <Button onPress={() => setFiles([])}>Remove All</Button>
+                <Button onPress={() => setFiles([])} size="sm">
+                  Hapus Semua
+                </Button>
               </div>
             </Fragment>
           ) : null}
@@ -369,9 +427,41 @@ export default function CreateArticleForm() {
       <div className="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>
-          <Button className="w-fit" color="primary" size="sm">
+
-            Upload Thumbnail
+          {thumbnailImg.length > 0 ? (
-          </Button>
+            <div className="flex flex-row">
+              <img
+                src={URL.createObjectURL(thumbnailImg[0])}
+                className="w-[30%]"
+                alt="thumbnail"
+              />
+              <Button
+                className=" border-none rounded-full"
+                variant="bordered"
+                size="sm"
+                color="danger"
+                onClick={() => setThumbnailImg([])}
+              >
+                <TimesIcon />
+              </Button>
+            </div>
+          ) : (
+            <>
+              <label htmlFor="file-upload">
+                <Button className="w-fit" color="primary" size="sm" as="span">
+                  Upload Thumbnail
+                </Button>
+              </label>{" "}
+              <input
+                id="file-upload"
+                type="file"
+                multiple
+                style={{ display: "none" }}
+                onChange={handleFileChange}
+              />
+            </>
+          )}
+
           <p className="text-sm mt-3">Kategori</p>
           <Controller
             control={control}

components/form/article/edit-article-form.tsx

@@ -15,9 +15,11 @@ import Image from "next/image";
 import { Switch } from "@nextui-org/switch";
 import {
   createArticle,
+  deleteArticleFiles,
   getArticleByCategory,
   getArticleById,
   updateArticle,
+  uploadArticleFile,
 } from "@/service/article";
 import ReactSelect from "react-select";
 import makeAnimated from "react-select/animated";
@@ -82,11 +84,17 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
   const [useAi, setUseAI] = useState(false);
   const [listCategory, setListCategory] = useState<CategoryType[]>([]);
   const [tag, setTag] = useState("");
+  const [detailfiles, setDetailFiles] = useState<any>([]);
+  const [mainImage, setMainImage] = useState(1);
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
-      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+      setFiles((prevFiles) => [
+        ...prevFiles,
+        ...acceptedFiles.map((file) => Object.assign(file)),
+      ]);
     },
+    multiple: true,
   });
 
   const formOptions = {
@@ -107,24 +115,25 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
   } = useForm<UserSettingSchema>(formOptions);
 
   useEffect(() => {
-    async function initState() {
-      const res = await getArticleById(id);
-      // setArticle(data);
-      const data = res.data?.data;
-      setValue("title", data?.title);
-      // setTypeId(String(data?.typeId));
-      setValue("slug", data?.slug);
-      setValue("description", data?.htmlDescription);
-      setValue("tags", data?.tags ? data.tags.split(",") : []);
-
-      setupInitCategory([data?.categoryId]);
-
-      console.log("Data Aritcle", data);
-    }
-
     initState();
   }, [listCategory]);
 
+  async function initState() {
+    const res = await getArticleById(id);
+    // setArticle(data);
+    const data = res.data?.data;
+    setValue("title", data?.title);
+    // setTypeId(String(data?.typeId));
+    setValue("slug", data?.slug);
+    setValue("description", data?.htmlDescription);
+    setValue("tags", data?.tags ? data.tags.split(",") : []);
+    setDetailFiles(data?.files);
+
+    setupInitCategory([data?.categoryId]);
+
+    console.log("Data Aritcle", data);
+  }
+
   const setupInitCategory = (data: number[]) => {
     const temp: CategoryType[] = [];
     for (let i = 0; i < data.length; i++) {
@@ -193,6 +202,16 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
       error(response.message);
       return false;
     }
+
+    const formFiles = new FormData();
+
+    if (files?.length > 0) {
+      for (const element of files) {
+        formFiles.append("file", element);
+        const resFile = await uploadArticleFile(String(id), formFiles);
+      }
+    }
+
     close();
     successSubmit("/admin/article");
   };
@@ -226,12 +245,10 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
   const renderFilePreview = (file: FileWithPreview) => {
     if (file.type.startsWith("image")) {
       return (
-        <Image
+        <img
-          width={48}
-          height={48}
           alt={file.name}
           src={URL.createObjectURL(file)}
-          className=" rounded border p-0.5"
+          className="h-[50px]"
         />
       );
     } else {
@@ -248,7 +265,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
   const fileList = files.map((file) => (
     <div
       key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+      className=" flex justify-between border px-3.5 py-3 rounded-md"
     >
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
@@ -267,6 +284,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
 
       <Button
         className=" border-none rounded-full"
+        variant="bordered"
         onClick={() => handleRemoveFile(file)}
       >
         <TimesIcon />
@@ -274,6 +292,43 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
     </div>
   ));
 
+  const handleDeleteFile = (id: number) => {
+    MySwal.fire({
+      title: "Hapus File",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Hapus",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        deleteFile(id);
+      }
+    });
+  };
+
+  const deleteFile = async (id: number) => {
+    loading();
+    const res = await deleteArticleFiles(id);
+
+    if (res?.error) {
+      error(res.message);
+      return false;
+    }
+    close();
+    initState();
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+      }
+    });
+  };
+
   return (
     <form
       className="flex flex-row gap-8 text-black"
@@ -358,6 +413,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
               ref={editor}
               value={value}
               onChange={onChange}
+              config={{ readonly: isDetail }}
               className="dark:text-black"
             />
           )}
@@ -369,42 +425,125 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
         )}
 
         <p className="text-sm mt-3">File Media</p>
-        <Fragment>
+        {!isDetail && (
-          <div {...getRootProps({ className: "dropzone" })}>
+          <Fragment>
-            <input {...getInputProps()} />
+            <div {...getRootProps({ className: "dropzone" })}>
-            <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">
+              <input {...getInputProps()} />
-              <CloudUploadIcon size={50} className="text-gray-300" />
+              <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">
-              <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                <CloudUploadIcon size={50} className="text-gray-300" />
-                Tarik file disini atau klik untuk upload.
+                <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
-              </h4>
+                  Tarik file disini atau klik untuk upload.
-              <div className=" text-xs text-muted-foreground">
+                </h4>
-                ( Upload file dengan format .jpg, .jpeg, atau .png. Ukuran
+                <div className=" text-xs text-muted-foreground">
-                maksimal 100mb.)
+                  ( Upload file dengan format .jpg, .jpeg, atau .png. Ukuran
+                  maksimal 100mb.)
+                </div>
               </div>
             </div>
-          </div>
+            {files.length ? (
-          {files.length ? (
+              <Fragment>
-            <Fragment>
+                <div className="flex flex-col">{fileList}</div>
-              <div>{fileList}</div>
+                <div className=" flex justify-between gap-2">
-              <div className=" flex justify-between gap-2">
+                  {/* <div className="flex flex-row items-center gap-3 py-3">
-                {/* <div className="flex flex-row items-center gap-3 py-3">
                   <Label>Gunakan Watermark</Label>
                   <div className="flex items-center gap-3">
                     <Switch defaultChecked color="primary" id="c2" />
                   </div>
                 </div> */}
-                <Button onPress={() => setFiles([])}>Remove All</Button>
+                </div>
+              </Fragment>
+            ) : null}
+          </Fragment>
+        )}
+
+        {isDetail ? (
+          detailfiles ? (
+            <>
+              <div>
+                <img
+                  src={`http://38.47.180.165:8802${detailfiles[mainImage]?.file_url}`}
+                  className="w-[75%] mx-auto"
+                />
               </div>
-            </Fragment>
+              <div className="flex flex-row gap-2">
-          ) : null}
+                {detailfiles?.map(
-        </Fragment>
+                  (file: any, index: number) =>
+                    index > 0 && (
+                      <a
+                        key={index}
+                        onClick={() => setMainImage(index)}
+                        className="cursor-pointer"
+                      >
+                        <img
+                          src={`http://38.47.180.165:8802${file.file_url}`}
+                          className="h-[100px] object-cover w-[150px]"
+                        />
+                      </a>
+                    )
+                )}
+              </div>
+            </>
+          ) : (
+            <p>Belum Ada File</p>
+          )
+        ) : (
+          <div className="flex flex-col">
+            {detailfiles?.map(
+              (file: any, index: number) =>
+                index > 0 && (
+                  <div
+                    key={file?.file_name + index}
+                    className=" flex justify-between border px-3.5 py-3 rounded-md"
+                  >
+                    <div className="flex gap-3 items-center">
+                      <div className="file-preview">
+                        <img
+                          src={`http://38.47.180.165:8802${file?.file_url}`}
+                          className="h-[50px] object-cover"
+                        />
+                      </div>
+                      <div>
+                        <div className=" text-sm  text-card-foreground">
+                          {file?.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"
+                      onClick={() => handleDeleteFile(file?.id)}
+                    >
+                      <TimesIcon />
+                    </Button>
+                  </div>
+                )
+            )}
+          </div>
+        )}
       </div>
       <div className="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>
-          <Button className="w-fit" color="primary" size="sm">
+          <img
-            Upload Thumbnail
+            src={`http://38.47.180.165:8802/articles/thumbnail/viewer/${id}`}
-          </Button>
+            className="w-[30%]"
+            alt="thumbnail"
+          />
           <p className="text-sm mt-3">Kategori</p>
           <Controller
             control={control}
@@ -423,6 +562,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                 components={animatedComponents}
                 isClearable={true}
                 isSearchable={true}
+                isDisabled={isDetail}
                 isMulti={true}
                 placeholder="Kategori..."
                 name="sub-module"
@@ -447,6 +587,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                 placeholder=""
                 label=""
                 value={tag}
+                isReadOnly={isDetail}
                 onValueChange={setTag}
                 startContent={
                   <div className="flex flex-wrap gap-1">

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

@@ -0,0 +1,659 @@
+"use client";
+import {
+  CloudUploadIcon,
+  CreateIconIon,
+  DeleteIcon,
+  DotsYIcon,
+  EyeIconMdi,
+  SearchIcon,
+  TimesIcon,
+} from "@/components/icons";
+import {
+  deleteArticle,
+  getArticleByCategory,
+  getCategoryPagination,
+  getListArticle,
+} from "@/service/article";
+import {
+  deleteCategory,
+  getCategoryById,
+  updateCategory,
+  uploadCategoryThumbnail,
+} from "@/service/master-categories";
+import { Article } from "@/types/globals";
+import { convertDateFormat } from "@/utils/global";
+import { Button } from "@nextui-org/button";
+import {
+  Chip,
+  ChipProps,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Pagination,
+  Select,
+  SelectItem,
+  Spinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Textarea,
+  useDisclosure,
+} from "@nextui-org/react";
+import Link from "next/link";
+import { Fragment, Key, useCallback, useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Datepicker from "react-tailwindcss-datepicker";
+import ReactSelect from "react-select";
+import makeAnimated from "react-select/animated";
+import { useDropzone } from "react-dropzone";
+import { close, error, loading, success } from "@/config/swal";
+
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const columns = [
+  { name: "No", uid: "no" },
+  { name: "Kategori", uid: "title" },
+  { name: "Deskripsi", uid: "description" },
+  { name: "Kategori Terkait", uid: "parentId" },
+  { name: "Dibuat ", uid: "createdAt" },
+
+  { name: "Aksi", uid: "actions" },
+];
+
+interface CategoryType {
+  id: number;
+  label: string;
+  value: number;
+}
+type ArticleData = Article & {
+  no: number;
+  createdAt: string;
+};
+
+const categorySchema = z.object({
+  id: z.number(),
+  label: z.string(),
+  value: z.number(),
+});
+
+const createArticleSchema = z.object({
+  id: z.string().min(1, {
+    message: "Id harus valid",
+  }),
+  title: z.string().min(2, {
+    message: "Judul harus diisi",
+  }),
+  description: z.string().min(2, {
+    message: "Deskripsi harus diisi",
+  }),
+  category: z.array(categorySchema).nonempty({
+    message: "Kategori harus memiliki setidaknya satu item",
+  }),
+  file: z.string(),
+});
+
+export default function CategoriesTable(props: { triggerRefresh: boolean }) {
+  const MySwal = withReactContent(Swal);
+  const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
+  const animatedComponents = makeAnimated();
+
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+  const [categories, setCategories] = useState<ArticleData[]>([]);
+  const [showData, setShowData] = useState("10");
+  const [search, setSearch] = useState("");
+  const [listCategory, setListCategory] = useState<CategoryType[]>([]);
+  const [files, setFiles] = useState<File[]>([]);
+  const [isDetail, setIsDetail] = useState(false);
+
+  const formOptions = {
+    resolver: zodResolver(createArticleSchema),
+    defaultValues: { title: "", description: "", category: [], tags: [] },
+  };
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    maxFiles: 1,
+  });
+  type UserSettingSchema = z.infer<typeof createArticleSchema>;
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    getValues,
+    watch,
+    setError,
+    clearErrors,
+  } = useForm<UserSettingSchema>(formOptions);
+
+  useEffect(() => {
+    initState();
+  }, [page, showData, props.triggerRefresh]);
+
+  async function initState() {
+    const req = {
+      limit: showData,
+      page: page,
+      search: search,
+    };
+    const res = await getCategoryPagination(req);
+    getTableNumber(parseInt(showData), res.data?.data);
+    setTotalPage(res?.data?.meta?.totalPage);
+  }
+
+  const getTableNumber = (limit: number, data: Article[]) => {
+    if (data) {
+      const startIndex = limit * (page - 1);
+      let iterate = 0;
+      const newData = data.map((value: any) => {
+        iterate++;
+        value.no = startIndex + iterate;
+        return value;
+      });
+      console.log("daata", data);
+      setCategories(newData);
+    }
+  };
+
+  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);
+  };
+
+  async function doDelete(id: number) {
+    // loading();
+    const resDelete = await deleteCategory(id);
+
+    if (resDelete?.error) {
+      error(resDelete.message);
+      return false;
+    }
+    close();
+    success("Berhasil Hapus");
+    initState();
+  }
+
+  const handleDelete = (id: number) => {
+    MySwal.fire({
+      title: "Hapus Data",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#3085d6",
+      confirmButtonColor: "#d33",
+      confirmButtonText: "Hapus",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        doDelete(id);
+      }
+    });
+  };
+
+  const openModal = async (id: number | string, detail: boolean) => {
+    setIsDetail(detail);
+    const res = await getCategoryById(Number(id));
+    const data = res?.data?.data;
+    setValue("id", String(data?.id));
+    setValue("title", data?.title);
+    setValue("description", data?.description);
+    setValue("file", data?.thumbnailUrl);
+    setupInitCategory([data?.parentId]);
+
+    onOpen();
+  };
+
+  const setupInitCategory = (data: number[]) => {
+    const temp: CategoryType[] = [];
+    for (let i = 0; i < data.length; i++) {
+      const datas = listCategory.filter((a) => a.id == data[i]);
+
+      temp.push(datas[0]);
+    }
+    setValue("category", temp as [CategoryType, ...CategoryType[]]);
+    console.log("temp", temp);
+  };
+
+  const renderCell = useCallback(
+    (category: ArticleData, columnKey: Key) => {
+      const cellValue = category[columnKey as keyof ArticleData];
+      const statusColorMap: Record<string, ChipProps["color"]> = {
+        active: "primary",
+        cancel: "danger",
+        pending: "success",
+      };
+
+      const findRelated = (parent: number | string) => {
+        const filter = listCategory?.filter((a) => a.id == parent);
+        console.log("filter", filter[0]?.label);
+        return filter[0]?.label;
+      };
+
+      switch (columnKey) {
+        case "parentId":
+          return <p>{cellValue === 0 ? "-" : findRelated(cellValue)}</p>;
+        case "createdAt":
+          return <p>{convertDateFormat(category.createdAt)}</p>;
+
+        case "actions":
+          return (
+            <div className="relative flex justify-star items-center gap-2">
+              <Dropdown className="lg:min-w-[150px] bg-black text-white shadow border ">
+                <DropdownTrigger>
+                  <Button isIconOnly size="lg" variant="light">
+                    <DotsYIcon className="text-default-300" />
+                  </Button>
+                </DropdownTrigger>
+                <DropdownMenu>
+                  <DropdownItem onClick={() => openModal(category.id, true)}>
+                    <EyeIconMdi className="inline mr-2 mb-1" />
+                    Detail
+                  </DropdownItem>
+                  <DropdownItem onClick={() => openModal(category.id, false)}>
+                    <CreateIconIon className="inline mr-2 mb-1" />
+                    Edit
+                  </DropdownItem>
+                  <DropdownItem onClick={() => handleDelete(category.id)}>
+                    <DeleteIcon
+                      color="red"
+                      size={20}
+                      className="inline mr-3 mb-1"
+                    />
+                    Delete
+                  </DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+            </div>
+          );
+
+        default:
+          return cellValue;
+      }
+    },
+    [listCategory]
+  );
+
+  let typingTimer: NodeJS.Timeout;
+  const doneTypingInterval = 1500;
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  async function doneTyping() {
+    initState();
+  }
+
+  const onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
+    loading();
+    const formData = {
+      id: Number(values.id),
+      title: values.title,
+      statusId: 1,
+      parentId: values.category[0].id,
+      description: values.description,
+    };
+
+    const response = await updateCategory(values.id, formData);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+    if (files?.length > 0) {
+      const formFiles = new FormData();
+
+      formFiles.append("file", files[0]);
+      const resFile = await uploadCategoryThumbnail(values.id, formFiles);
+      if (resFile?.error) {
+        error(resFile.message);
+        return false;
+      }
+    }
+    setFiles([]);
+    close();
+    initState();
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+      }
+    });
+  };
+
+  const handleRemoveFile = (file: File) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  return (
+    <>
+      <div className="p-3">
+        <div className="flex flex-col items-start rounded-2xl gap-3">
+          <div className="flex flex-col md:flex-row gap-3 w-full">
+            <div className="flex flex-col gap-1 w-1/3">
+              <p className="font-semibold text-sm">Pencarian</p>
+              <Input
+                aria-label="Search"
+                classNames={{
+                  inputWrapper: "bg-default-100",
+                  input: "text-sm",
+                }}
+                labelPlacement="outside"
+                startContent={
+                  <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
+                }
+                type="text"
+                onChange={(e) => setSearch(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+              />
+            </div>
+            <div className="flex flex-col gap-1 w-[72px]">
+              <p className="font-semibold text-sm">Data</p>
+              <Select
+                label=""
+                variant="bordered"
+                labelPlacement="outside"
+                placeholder="Select"
+                selectedKeys={[showData]}
+                className="w-full"
+                classNames={{ trigger: "border-1" }}
+                onChange={(e) =>
+                  e.target.value === "" ? "" : setShowData(e.target.value)
+                }
+              >
+                <SelectItem key="5" value="5">
+                  5
+                </SelectItem>
+                <SelectItem key="10" value="10">
+                  10
+                </SelectItem>
+              </Select>
+            </div>
+          </div>
+          <Table
+            aria-label="micro issue table"
+            className="rounded-3xl"
+            classNames={{
+              th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
+              base: "bg-white dark:bg-black border",
+              wrapper:
+                "min-h-[50px] bg-transpararent text-black dark:text-white ",
+            }}
+          >
+            <TableHeader columns={columns}>
+              {(column) => (
+                <TableColumn key={column.uid}>{column.name}</TableColumn>
+              )}
+            </TableHeader>
+            <TableBody
+              items={categories}
+              emptyContent={"No data to display."}
+              loadingContent={<Spinner label="Loading..." />}
+            >
+              {(item) => (
+                <TableRow key={item.id}>
+                  {(columnKey) => (
+                    <TableCell>{renderCell(item, columnKey)}</TableCell>
+                  )}
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+          <div className="my-2 w-full flex justify-center">
+            <Pagination
+              isCompact
+              showControls
+              showShadow
+              color="primary"
+              classNames={{
+                base: "bg-transparent",
+                wrapper: "bg-transparent",
+              }}
+              page={page}
+              total={totalPage}
+              onChange={(page) => setPage(page)}
+            />
+          </div>
+        </div>
+      </div>
+      <Modal isOpen={isOpen} onOpenChange={onOpenChange} size="3xl">
+        <ModalContent>
+          {() => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">
+                Kategori Baru
+              </ModalHeader>
+              <ModalBody>
+                <form
+                  onSubmit={handleSubmit(onSubmit)}
+                  className="flex flex-col gap-3"
+                >
+                  <div className="flex flex-col gap-1">
+                    <p className="text-sm">Nama Kategori</p>
+                    <Controller
+                      control={control}
+                      name="title"
+                      render={({ field: { onChange, value } }) => (
+                        <Input
+                          type="text"
+                          id="title"
+                          placeholder=""
+                          label=""
+                          value={value}
+                          isReadOnly={isDetail}
+                          onChange={onChange}
+                          labelPlacement="outside"
+                          className="w-full "
+                          classNames={{
+                            inputWrapper: [
+                              "border-1 rounded-lg",
+                              "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                            ],
+                          }}
+                          variant="bordered"
+                        />
+                      )}
+                    />
+                    {errors?.title && (
+                      <p className="text-red-400 text-sm">
+                        {errors.title?.message}
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <p className="text-sm">Deskripsi</p>
+                    <Controller
+                      control={control}
+                      name="description"
+                      render={({ field: { onChange, value } }) => (
+                        <Textarea
+                          type="text"
+                          id="description"
+                          placeholder=""
+                          label=""
+                          isReadOnly={isDetail}
+                          value={value}
+                          onChange={onChange}
+                          labelPlacement="outside"
+                          className="w-full "
+                          classNames={{
+                            inputWrapper: [
+                              "border-1 rounded-lg",
+                              "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                            ],
+                          }}
+                          variant="bordered"
+                        />
+                      )}
+                    />
+                    {errors?.title && (
+                      <p className="text-red-400 text-sm">
+                        {errors.title?.message}
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <p className="text-sm mt-3">Kategori Terkait</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"
+                          value={value}
+                          isDisabled={isDetail}
+                          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">
+                        {errors.category?.message}
+                      </p>
+                    )}
+                  </div>
+                  {isDetail ? (
+                    <img
+                      src={`http://38.47.180.165:8802${getValues("file")}`}
+                      className="w-[30%]"
+                      alt="thumbnail"
+                    />
+                  ) : (
+                    <Controller
+                      control={control}
+                      name="file"
+                      render={({ field: { onChange, value } }) => (
+                        <div className="flex flex-col gap-1">
+                          <p className="text-sm mt-3">Thumbnail</p>
+
+                          {files.length < 1 && value === "" && (
+                            <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 />
+                                  <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                                    Tarik file disini atau klik untuk upload.
+                                  </h4>
+                                  <div className=" text-xs text-muted-foreground">
+                                    ( Upload file dengan format .jpg, .jpeg,
+                                    atau .png. Ukuran maksimal 100mb.)
+                                  </div>
+                                </div>
+                              </div>
+                            </Fragment>
+                          )}
+                          {value !== "" && (
+                            <div className="flex flex-row gap-2">
+                              <img
+                                src={`http://38.47.180.165:8802${value}`}
+                                className="w-[30%]"
+                                alt="thumbnail"
+                              />
+                              <Button
+                                onClick={() => setValue("file", "")}
+                                variant="bordered"
+                                size="sm"
+                                className="cursor-pointer text-black border-none"
+                              >
+                                <TimesIcon />
+                              </Button>
+                            </div>
+                          )}
+                          {files.length > 0 && (
+                            <div className="flex flex-row gap-2">
+                              <img
+                                src={URL.createObjectURL(files[0])}
+                                className="w-[30%]"
+                                alt="thumbnail"
+                              />
+                              <Button
+                                className=" border-none rounded-full"
+                                variant="bordered"
+                                onClick={() => handleRemoveFile(files[0])}
+                              >
+                                <TimesIcon />
+                              </Button>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    />
+                  )}
+
+                  <ModalFooter className="self-end grow items-end">
+                    {!isDetail && (
+                      <Button color="primary" type="submit">
+                        Simpan
+                      </Button>
+                    )}
+
+                    <Button color="danger" variant="light" onPress={onClose}>
+                      Tutup
+                    </Button>
+                  </ModalFooter>
+                </form>
+              </ModalBody>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

service/article.ts

@@ -55,3 +55,29 @@ export async function getArticleByCategory() {
   };
   return await httpGet(`/article-categories?limit=50`, headers);
 }
+export async function getCategoryPagination(data: any) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(
+    `/article-categories?limit=${data?.limit}&page=${data?.page}&title=${data?.search}`,
+    headers
+  );
+}
+
+export async function uploadArticleFile(id: string, data: any) {
+  const headers = {
+    "content-type": "multipart/form-data",
+  };
+  return await httpPost(`/article-files/${id}`, headers, data);
+}
+export async function uploadArticleThumbnail(id: string, data: any) {
+  const headers = {
+    "content-type": "multipart/form-data",
+  };
+  return await httpPost(`/articles/thumbnail/${id}`, headers, data);
+}
+
+export async function deleteArticleFiles(id: number) {
+  return await httpDeleteInterceptor(`article-files/${id}`);
+}

service/master-categories.tsx

@@ -0,0 +1,44 @@
+import {
+  httpDeleteInterceptor,
+  httpGet,
+  httpPost,
+  httpPut,
+} from "./http-config/axios-base-service";
+import Cookies from "js-cookie";
+
+const token = Cookies.get("access_token");
+
+export async function createCategory(data: any) {
+  const headers = {
+    "content-type": "application/json",
+    Authorization: `Bearer ${token}`,
+  };
+  const pathUrl = `/article-categories`;
+  return await httpPost(pathUrl, headers, data);
+}
+
+export async function updateCategory(id: string, data: any) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  const pathUrl = `/article-categories/${id}`;
+  return await httpPut(pathUrl, headers, data);
+}
+
+export async function getCategoryById(id: number) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(`/article-categories/${id}`, headers);
+}
+
+export async function deleteCategory(id: number) {
+  return await httpDeleteInterceptor(`article-categories/${id}`);
+}
+
+export async function uploadCategoryThumbnail(id: string, data: any) {
+  const headers = {
+    "content-type": "multipart/form-data",
+  };
+  return await httpPost(`/article-categories/thumbnail/${id}`, headers, data);
+}