From a738e612770a3983a16ef1619e918257700ef025 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Wed, 22 Jan 2025 21:22:22 +0700
Subject: [PATCH] fix: landing magazine, article aiId, feat:setting form

---
 app/(admin)/admin/article/create/page.tsx     |   2 +-
 app/(admin)/admin/article/page.tsx            |  19 +-
 app/(admin)/admin/magazine/page.tsx           |  27 +-
 app/(admin)/admin/master-category/page.tsx    | 395 +++++++++---------
 app/(admin)/admin/master-role/page.tsx        |  14 +-
 app/(admin)/admin/master-user/page.tsx        |  14 +-
 app/(admin)/admin/static-page/page.tsx        |  10 +-
 app/(admin)/settings/layout.tsx               |  15 +
 app/(admin)/settings/page.tsx                 |  21 +
 app/e-majalah-polri/daftar-majalah/page.tsx   |  14 +-
 app/e-majalah-polri/detail/[id]/page.tsx      |  14 +-
 app/layout.tsx                                |   4 +-
 components/editor/custom-editor.js            |  22 +-
 .../form/article/create-article-form.tsx      | 106 +++--
 components/form/article/edit-article-form.tsx |  36 +-
 .../form/article/generate-ai-single-form.tsx  |  30 +-
 .../form/article/get-seo-score-form.tsx       | 182 ++++----
 components/form/login.tsx                     | 117 +-----
 .../form/magazine/create-magazine-form.tsx    |  20 +-
 .../form/magazine/edit-magazine-form.tsx      |  21 +-
 components/form/settings/password.tsx         | 108 +++++
 components/form/settings/profile.tsx          | 212 ++++++++++
 components/icons/globals.tsx                  |  46 ++
 components/landing/ENewsPolri.tsx             |  11 +-
 components/landing/SidebarNav.tsx             |   4 +-
 components/layout/admin-layout.tsx            |   4 +-
 components/layout/humas-layout.tsx            |   2 +-
 components/layout/sidebar/sidebar.tsx         | 109 +++--
 components/main/detail/e-magazine-detail.tsx  | 203 ++++++---
 components/table/master-role-table.tsx        |   2 +-
 components/table/master-user-table.tsx        |   2 +-
 components/table/static-page-table.tsx        |  30 +-
 components/table/tabel-emajalah-polri.tsx     | 227 +++++-----
 components/ui/breadcrumb.tsx                  |  20 +-
 public/files.png                              | Bin 0 -> 11483 bytes
 public/no-image.jpg                           | Bin 0 -> 13161 bytes
 service/master-user.ts                        |   4 +
 styles/globals.css                            |  15 +
 38 files changed, 1300 insertions(+), 782 deletions(-)
 create mode 100644 app/(admin)/settings/layout.tsx
 create mode 100644 app/(admin)/settings/page.tsx
 create mode 100644 components/form/settings/password.tsx
 create mode 100644 components/form/settings/profile.tsx
 create mode 100644 public/files.png
 create mode 100644 public/no-image.jpg

diff --git a/app/(admin)/admin/article/create/page.tsx b/app/(admin)/admin/article/create/page.tsx
index 3c625d1..a12f045 100644
--- a/app/(admin)/admin/article/create/page.tsx
+++ b/app/(admin)/admin/article/create/page.tsx
@@ -4,7 +4,7 @@ import { Card } from "@nextui-org/react";
 
 export default function CreateArticle() {
   return (
-    <div className="h-[96vh] bg-transparent p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
+    <div className="bg-transparent p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
       {/* <FormArticle /> */}
       <CreateArticleForm />
     </div>
diff --git a/app/(admin)/admin/article/page.tsx b/app/(admin)/admin/article/page.tsx
index b8ebefa..6ffff9f 100644
--- a/app/(admin)/admin/article/page.tsx
+++ b/app/(admin)/admin/article/page.tsx
@@ -22,25 +22,14 @@ 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 shadow-lg bg-white dark:bg-[#18181b] flex flex-row gap-3">
-          <Link href="/admin/article/create">
+      <div className="px-2 md:px-4 md:py-4 w-full">
+        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl py-3">
+          <Link href="/admin/article/create" className="mx-3">
             <Button size="md" className="bg-[#F07C00] text-white">
-              New Article
+              Tambah Artikel
               <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>
diff --git a/app/(admin)/admin/magazine/page.tsx b/app/(admin)/admin/magazine/page.tsx
index b95c09a..cf6a5d1 100644
--- a/app/(admin)/admin/magazine/page.tsx
+++ b/app/(admin)/admin/magazine/page.tsx
@@ -1,39 +1,20 @@
 "use client";
 import { AddIcon } from "@/components/icons";
-import ArticleTable from "@/components/table/article-table";
 import MagazineTable from "@/components/table/magazine/magazine-table";
-import generatedArticleIds from "@/store/generated-article-store";
-import { Button, Card } from "@nextui-org/react";
+import { Button } from "@nextui-org/react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 
 export default function MagazineTablePage() {
-  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">
+      <div className="px-2 md:px-4 md:py-4 w-full">
+        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl py-3">
+          <Link href="/admin/magazine/create" className="mx-3">
             <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">
           <MagazineTable />
         </div>
       </div>
diff --git a/app/(admin)/admin/master-category/page.tsx b/app/(admin)/admin/master-category/page.tsx
index 112951c..250292f 100644
--- a/app/(admin)/admin/master-category/page.tsx
+++ b/app/(admin)/admin/master-category/page.tsx
@@ -163,218 +163,209 @@ export default function MasterCategoryTable() {
 
   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">
+      <div className="px-2 md:px-4 md:py-4 w-full">
+        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl py-3">
           <Button
             size="md"
-            className="bg-[#F07C00] text-white"
+            className="bg-[#F07C00] text-white mx-3"
             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">Tag Terkait</p>
-                        <Controller
-                          control={control}
-                          name="tags"
-                          render={({ field: { onChange, value } }) => (
-                            <Input
-                              type="text"
-                              id="tags"
-                              placeholder=""
-                              label=""
-                              value={tag}
-                              onValueChange={setTag}
-                              startContent={
-                                <div className="flex flex-row gap-1">
-                                  {value.map((item, index) => (
-                                    <Chip
-                                      color="primary"
-                                      key={index}
-                                      className=""
-                                      onClose={() => {
-                                        const filteredTags = value.filter(
-                                          (tag) => tag !== item
-                                        );
-                                        if (filteredTags.length === 0) {
-                                          setError("tags", {
-                                            type: "manual",
-                                            message: "Tags tidak boleh kosong",
-                                          });
-                                        } else {
-                                          clearErrors("tags");
-                                          setValue(
-                                            "tags",
-                                            filteredTags as [
-                                              string,
-                                              ...string[]
-                                            ]
-                                          );
-                                        }
-                                      }}
-                                    >
-                                      {item}
-                                    </Chip>
-                                  ))}
-                                </div>
-                              }
-                              onKeyDown={(e) => {
-                                if (e.key === "Enter") {
-                                  if (tag.trim() !== "") {
-                                    setValue("tags", [...value, tag.trim()]);
-                                    setTag("");
-                                    e.preventDefault();
-                                  }
-                                }
-                              }}
-                              labelPlacement="outside"
-                              className="w-full h-fit"
-                              classNames={{
-                                inputWrapper: [
-                                  "border-1 rounded-lg",
-                                  "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
-                                ],
-                              }}
-                              variant="bordered"
-                            />
-                          )}
-                        />
-                      </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>
+      <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">Tag Terkait</p>
+                    <Controller
+                      control={control}
+                      name="tags"
+                      render={({ field: { onChange, value } }) => (
+                        <Input
+                          type="text"
+                          id="tags"
+                          placeholder=""
+                          label=""
+                          value={tag}
+                          onValueChange={setTag}
+                          startContent={
+                            <div className="flex flex-row gap-1">
+                              {value.map((item, index) => (
+                                <Chip
+                                  color="primary"
+                                  key={index}
+                                  className=""
+                                  onClose={() => {
+                                    const filteredTags = value.filter(
+                                      (tag) => tag !== item
+                                    );
+                                    if (filteredTags.length === 0) {
+                                      setError("tags", {
+                                        type: "manual",
+                                        message: "Tags tidak boleh kosong",
+                                      });
+                                    } else {
+                                      clearErrors("tags");
+                                      setValue(
+                                        "tags",
+                                        filteredTags as [string, ...string[]]
+                                      );
+                                    }
+                                  }}
+                                >
+                                  {item}
+                                </Chip>
+                              ))}
+                            </div>
+                          }
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              if (tag.trim() !== "") {
+                                setValue("tags", [...value, tag.trim()]);
+                                setTag("");
+                                e.preventDefault();
+                              }
+                            }
+                          }}
+                          labelPlacement="outside"
+                          className="w-full h-fit"
+                          classNames={{
+                            inputWrapper: [
+                              "border-1 rounded-lg",
+                              "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                            ],
+                          }}
+                          variant="bordered"
+                        />
+                      )}
+                    />
+                  </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>
   );
 }
diff --git a/app/(admin)/admin/master-role/page.tsx b/app/(admin)/admin/master-role/page.tsx
index 3c55da3..80f42b6 100644
--- a/app/(admin)/admin/master-role/page.tsx
+++ b/app/(admin)/admin/master-role/page.tsx
@@ -6,23 +6,21 @@ 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">
-      <div className="px-4">
-        <Card className="rounded-md my-5 pl-5 py-2">
-          <Link href="/admin/master-role/create">
+    <div className="overflow-x-hidden overflow-y-scroll">
+      <div className="px-2 md:px-4 md:py-4 w-full">
+        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl py-3">
+          <Link href="/admin/master-role/create" className="mx-3">
             <Button
               size="md"
               color="primary"
               className="bg-[#F07C00] text-white"
             >
+              Peran Baru
               <AddIcon />
-              New Role
             </Button>
           </Link>
-        </Card>
-        <Card className="rounded-md my-5">
           <MasterRoleTable />
-        </Card>
+        </div>
       </div>
     </div>
   );
diff --git a/app/(admin)/admin/master-user/page.tsx b/app/(admin)/admin/master-user/page.tsx
index 23531a4..e1316b9 100644
--- a/app/(admin)/admin/master-user/page.tsx
+++ b/app/(admin)/admin/master-user/page.tsx
@@ -6,23 +6,21 @@ 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">
-      <div className="px-4">
-        <Card className="rounded-md my-5 pl-5 py-2">
-          <Link href="/admin/master-user/create">
+    <div className="overflow-x-hidden overflow-y-scroll">
+      <div className="px-2 md:px-4 md:py-4 w-full">
+        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl py-3">
+          <Link href="/admin/master-user/create" className="mx-3">
             <Button
               size="md"
               color="primary"
               className="bg-[#F07C00] text-white"
             >
+              Pengguna Baru
               <AddIcon />
-              New User
             </Button>
           </Link>
-        </Card>
-        <Card className="rounded-md my-5">
           <MasterUserTable />
-        </Card>
+        </div>
       </div>
     </div>
   );
diff --git a/app/(admin)/admin/static-page/page.tsx b/app/(admin)/admin/static-page/page.tsx
index 2bbb449..9a24892 100644
--- a/app/(admin)/admin/static-page/page.tsx
+++ b/app/(admin)/admin/static-page/page.tsx
@@ -6,20 +6,18 @@ import Link from "next/link";
 export default function StaticPageGeneratorList() {
   return (
     <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 shadow-lg">
-          <Link href="/admin/static-page/create">
+      <div className="px-2 md:px-4 md:py-4 w-full">
+        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl py-3">
+          <Link href="/admin/static-page/create" className="mx-3">
             <Button
               size="md"
               color="primary"
               className="bg-[#F07C00] text-white"
             >
+              Tambah Halaman
               <AddIcon />
-              Create Page
             </Button>
           </Link>
-        </div>
-        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-2 mt-4">
           <StaticPageTable />
         </div>
       </div>
diff --git a/app/(admin)/settings/layout.tsx b/app/(admin)/settings/layout.tsx
new file mode 100644
index 0000000..4205ed4
--- /dev/null
+++ b/app/(admin)/settings/layout.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { AdminLayout } from "@/components/layout/admin-layout";
+
+export default function AdminPageLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <AdminLayout>
+            {children}
+        </AdminLayout>
+    );
+}
diff --git a/app/(admin)/settings/page.tsx b/app/(admin)/settings/page.tsx
new file mode 100644
index 0000000..1223af6
--- /dev/null
+++ b/app/(admin)/settings/page.tsx
@@ -0,0 +1,21 @@
+"use client";
+import PasswordForm from "@/components/form/settings/password";
+import ProfileForm from "@/components/form/settings/profile";
+import { Tab, Tabs } from "@nextui-org/react";
+
+export default function Settings() {
+  return (
+    <div className="w-full lg:w-[60%] p-5">
+      <div className="flex flex-col bg-gray-100 dark:bg-stone-900 text-black dark:text-white rounded-md p-5">
+        <Tabs aria-label="Tabs radius" radius="sm">
+          <Tab key="profile" title="Profile">
+            <ProfileForm />
+          </Tab>
+          <Tab key="music" title="Password">
+            <PasswordForm />
+          </Tab>
+        </Tabs>
+      </div>
+    </div>
+  );
+}
diff --git a/app/e-majalah-polri/daftar-majalah/page.tsx b/app/e-majalah-polri/daftar-majalah/page.tsx
index d209c33..305d694 100644
--- a/app/e-majalah-polri/daftar-majalah/page.tsx
+++ b/app/e-majalah-polri/daftar-majalah/page.tsx
@@ -1,12 +1,22 @@
 "use client";
 import { HumasLayout } from "@/components/layout/humas-layout";
 import ListEnewsPolri from "@/components/table/tabel-emajalah-polri";
-import React from "react";
+import React, { Suspense, useEffect, useState } from "react";
 
 export default function ListEnewsPage() {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
   return (
     <HumasLayout>
-      <ListEnewsPolri />
+      <Suspense>
+        <ListEnewsPolri />
+      </Suspense>
     </HumasLayout>
   );
 }
diff --git a/app/e-majalah-polri/detail/[id]/page.tsx b/app/e-majalah-polri/detail/[id]/page.tsx
index 3dbe87b..bd5d0bb 100644
--- a/app/e-majalah-polri/detail/[id]/page.tsx
+++ b/app/e-majalah-polri/detail/[id]/page.tsx
@@ -1,12 +1,22 @@
 "use client";
 import { HumasLayout } from "@/components/layout/humas-layout";
 import EMagazineDetail from "@/components/main/detail/e-magazine-detail";
-import React from "react";
+import React, { Suspense, useEffect, useState } from "react";
 
 export default function EnewsDetailPage() {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
   return (
     <HumasLayout>
-      <EMagazineDetail />
+      <Suspense>
+        <EMagazineDetail />
+      </Suspense>
     </HumasLayout>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 0e3d497..db3f8a7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -64,13 +64,13 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       </head>
       <body
         className={clsx(
-          "bg-background font-sans antialiased",
+          "bg-background font-sans antialiased overflow-hidden",
           fontSans.variable
         )}
       >
         <NextIntlClientProvider locale={localeNow} messages={messages}>
           <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
-            <main className="">{children}</main>
+            <main className="overflow-y-auto">{children}</main>
           </Providers>
         </NextIntlClientProvider>
       </body>
diff --git a/components/editor/custom-editor.js b/components/editor/custom-editor.js
index d3e7a7d..f28746b 100644
--- a/components/editor/custom-editor.js
+++ b/components/editor/custom-editor.js
@@ -15,13 +15,27 @@ function CustomEditor(props) {
         props.onChange(data);
       }}
       config={{
-        toolbar: [ 'heading', 'fontsize', 'bold', 'italic', 'link', 'numberedList', 'bulletedList', 'undo', 'redo', 'alignment', 'outdent', 'indent', 'blockQuote', 'insertTable', 'codeBlock', 'sourceEditing']
+        toolbar: [
+          "heading",
+          "fontsize",
+          "bold",
+          "italic",
+          "link",
+          "numberedList",
+          "bulletedList",
+          "undo",
+          "redo",
+          "alignment",
+          "outdent",
+          "indent",
+          "blockQuote",
+          "insertTable",
+          "codeBlock",
+          "sourceEditing",
+        ],
       }}
     />
   );
 }
 
 export default CustomEditor;
-
-
-
diff --git a/components/form/article/create-article-form.tsx b/components/form/article/create-article-form.tsx
index f7ad9f4..2aa72f1 100644
--- a/components/form/article/create-article-form.tsx
+++ b/components/form/article/create-article-form.tsx
@@ -28,7 +28,10 @@ import { close, error, loading } from "@/config/swal";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { getCategoryById } from "@/service/master-categories";
-import { saveManualContext } from "@/service/generate-article";
+import {
+  saveManualContext,
+  updateManualArticle,
+} from "@/service/generate-article";
 
 const CustomEditor = dynamic(
   () => {
@@ -52,6 +55,17 @@ const categorySchema = z.object({
   value: z.number(),
 });
 
+interface DiseData {
+  id: number;
+  articleBody: string;
+  title: string;
+  metaTitle: string;
+  description: string;
+  metaDescription: string;
+  mainKeyword: string;
+  additionalKeywords: string;
+}
+
 const createArticleSchema = z.object({
   title: z.string().min(2, {
     message: "Judul harus diisi",
@@ -81,6 +95,7 @@ export default function CreateArticleForm() {
   const [tag, setTag] = useState("");
   const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
   const [selectedMainImage, setSelectedMainImage] = useState<number>();
+  const [diseData, setDiseData] = useState<DiseData>();
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
@@ -148,6 +163,12 @@ export default function CreateArticleForm() {
     });
   };
 
+  useEffect(() => {
+    if (useAi === false) {
+      setValue("description", "");
+    }
+  }, [useAi]);
+
   function removeImgTags(htmlString: string) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(String(htmlString), "text/html");
@@ -160,26 +181,50 @@ export default function CreateArticleForm() {
   const saveArticleToDise = async (
     values: z.infer<typeof createArticleSchema>
   ) => {
-    const request = {
-      title: values.title,
-      articleBody: removeImgTags(values.description),
-      metaDescription: values.title,
-      metaTitle: values.title,
-      mainKeyword: values.title,
-      additionalKeywords: values.title,
-      createdBy: "345",
-      style: "Informational",
-      projectId: 2,
-      clientId: "humasClientIdtest",
-      lang: "id",
-    };
+    if (useAi) {
+      const request = {
+        id: diseData?.id,
+        title: values.title,
+        articleBody: removeImgTags(values.description),
+        metaDescription: diseData?.metaDescription,
+        metaTitle: diseData?.metaTitle,
+        mainKeyword: diseData?.mainKeyword,
+        additionalKeywords: diseData?.additionalKeywords,
+        createdBy: "345",
+        style: "Informational",
+        projectId: 2,
+        clientId: "humasClientIdtest",
+        lang: "id",
+      };
+      const res = await updateManualArticle(request);
+      if (res.error) {
+        error(res.message);
+        return false;
+      }
 
-    const res = await saveManualContext(request);
-    if (res.error) {
-      res.message;
-      return 0;
+      return diseData?.id;
+    } else {
+      const request = {
+        title: values.title,
+        articleBody: removeImgTags(values.description),
+        metaDescription: values.title,
+        metaTitle: values.title,
+        mainKeyword: values.title,
+        additionalKeywords: values.title,
+        createdBy: "345",
+        style: "Informational",
+        projectId: 2,
+        clientId: "humasClientIdtest",
+        lang: "id",
+      };
+
+      const res = await saveManualContext(request);
+      if (res.error) {
+        res.message;
+        return 0;
+      }
+      return res?.data?.data?.id;
     }
-    return res?.data?.data?.id;
   };
 
   const save = async (values: z.infer<typeof createArticleSchema>) => {
@@ -192,7 +237,7 @@ export default function CreateArticleForm() {
       tags: values.tags.join(","),
       description: htmlToString(removeImgTags(values.description)),
       htmlDescription: removeImgTags(values.description),
-      // aiArticleId: saveArticleToDise(values),
+      aiArticleId: await saveArticleToDise(values),
     };
 
     const response = await createArticle(formData);
@@ -418,7 +463,13 @@ export default function CreateArticleForm() {
 
         {useAi && (
           <GenerateSingleArticleForm
-            content={(data) => setValue("description", data)}
+            content={(data) => {
+              setDiseData(data);
+              setValue(
+                "description",
+                data?.articleBody ? data?.articleBody : ""
+              );
+            }}
           />
         )}
 
@@ -427,18 +478,7 @@ export default function CreateArticleForm() {
           control={control}
           name="description"
           render={({ field: { onChange, value } }) => (
-            // <CustomEditor onChange={onChange} initialData={value} />
-            // <JoditEditor
-            //   ref={editor}
-            //   value={value}
-            //   onChange={onChange}
-            //   className="dark:text-black"
-            // />
-            <CustomEditor
-              onChange={onChange}
-              initialData={value}
-            />
-
+            <CustomEditor onChange={onChange} initialData={value} />
           )}
         />
         {errors?.description && (
diff --git a/components/form/article/edit-article-form.tsx b/components/form/article/edit-article-form.tsx
index 81ac866..7bbbca3 100644
--- a/components/form/article/edit-article-form.tsx
+++ b/components/form/article/edit-article-form.tsx
@@ -79,6 +79,17 @@ const createArticleSchema = z.object({
   }), // Array berisi string
 });
 
+interface DiseData {
+  id: number;
+  articleBody: string;
+  title: string;
+  metaTitle: string;
+  description: string;
+  metaDescription: string;
+  mainKeyword: string;
+  additionalKeywords: string;
+}
+
 export default function EditArticleForm(props: { isDetail: boolean }) {
   const { isDetail } = props;
   const params = useParams();
@@ -94,6 +105,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
   const [detailfiles, setDetailFiles] = useState<any>([]);
   const [mainImage, setMainImage] = useState(0);
   const [thumbnail, setThumbnail] = useState("");
+  const [diseId, setDiseId] = useState(0);
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
@@ -137,6 +149,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
     setValue("description", data?.htmlDescription);
     setValue("tags", data?.tags ? data.tags.split(",") : []);
     setThumbnail(data?.thumbnailUrl);
+    setDiseId(data?.aiArticleId);
     setDetailFiles(data?.files);
 
     setupInitCategory(data?.categories);
@@ -205,7 +218,6 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
       description: htmlToString(values.description),
       htmlDescription: values.description,
     };
-    console.log("vals", formData);
     const response = await updateArticle(String(id), formData);
 
     if (response?.error) {
@@ -345,7 +357,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
       onSubmit={handleSubmit(onSubmit)}
     >
       <div className="w-[65%] bg-white rounded-lg p-8 flex flex-col gap-1">
-        {isDetail && <GetSeoScore id="1961" />}
+        {isDetail && <GetSeoScore id={String(diseId)} />}
         <p className="text-sm">Judul</p>
         <Controller
           control={control}
@@ -409,7 +421,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
 
         {useAi && (
           <GenerateSingleArticleForm
-            content={(data) => setValue("description", data)}
+            content={(data) => setValue("description", data?.articleBody)}
           />
         )}
 
@@ -417,7 +429,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
         <Controller
           control={control}
           name="description"
-          render={({ field: { onChange, value } }) => (
+          render={({ field: { onChange, value } }) =>
             // <CustomEditor onChange={onChange} initialData={value} />
             // <JoditEditor
             //   ref={editor}
@@ -426,16 +438,12 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
             //   config={{ readonly: isDetail }}
             //   className="dark:text-black"
             // />
-            isDetail ?
-              <ViewEditor 
-                initialData={value}
-              />
-            : 
-              <CustomEditor 
-                onChange={onChange}
-                initialData={value}
-              />
-          )}
+            isDetail ? (
+              <ViewEditor initialData={value} />
+            ) : (
+              <CustomEditor onChange={onChange} initialData={value} />
+            )
+          }
         />
         {errors?.description && (
           <p className="text-red-400 text-sm mb-3">
diff --git a/components/form/article/generate-ai-single-form.tsx b/components/form/article/generate-ai-single-form.tsx
index be082c7..c3289b2 100644
--- a/components/form/article/generate-ai-single-form.tsx
+++ b/components/form/article/generate-ai-single-form.tsx
@@ -60,8 +60,19 @@ const articleSize = [
   },
 ];
 
+interface DiseData {
+  id: number;
+  articleBody: string;
+  title: string;
+  metaTitle: string;
+  description: string;
+  metaDescription: string;
+  mainKeyword: string;
+  additionalKeywords: string;
+}
+
 export default function GenerateSingleArticleForm(props: {
-  content: (data: string) => void;
+  content: (data: DiseData) => void;
 }) {
   const [selectedWritingSyle, setSelectedWritingStyle] =
     useState("Informational");
@@ -162,14 +173,23 @@ export default function GenerateSingleArticleForm(props: {
   const getArticleDetail = async () => {
     if (selectedId) {
       const res = await getDetailArticle(selectedId);
-      const data = res?.data?.data?.articleBody;
-      checkArticleStatus(data);
-      if (data !== null) {
+      const data = res?.data?.data;
+      checkArticleStatus(data?.articleBody);
+      if (data?.articleBody !== null) {
         setIsLoading(false);
         props.content(data);
       } else {
         setIsLoading(true);
-        props.content("");
+        props.content({
+          id: data?.id,
+          articleBody: "",
+          title: "",
+          metaTitle: "",
+          description: "",
+          metaDescription: "",
+          additionalKeywords: "",
+          mainKeyword: "",
+        });
       }
     }
   };
diff --git a/components/form/article/get-seo-score-form.tsx b/components/form/article/get-seo-score-form.tsx
index 471caca..b6fec83 100644
--- a/components/form/article/get-seo-score-form.tsx
+++ b/components/form/article/get-seo-score-form.tsx
@@ -8,7 +8,7 @@ import { useEffect, useRef, useState } from "react";
 export default function GetSeoScore(props: { id: string }) {
   useEffect(() => {
     fetchSeoScore();
-  }, []);
+  }, [props.id]);
 
   const [totalScoreSEO, setTotalScoreSEO] = useState();
   const [errorSEO, setErrorSEO] = useState<any>([]);
@@ -16,9 +16,9 @@ export default function GetSeoScore(props: { id: string }) {
   const [optimizedSEO, setOptimizedSEO] = useState<any>([]);
 
   const fetchSeoScore = async () => {
-    const res = await getSeoScore("1931");
+    const res = await getSeoScore(props?.id);
     if (res.error) {
-      error(res.message);
+      // error(res.message);
       return false;
     }
     setTotalScoreSEO(res.data.data?.seo_analysis?.score || 0);
@@ -42,97 +42,103 @@ export default function GetSeoScore(props: { id: string }) {
     <div className="overflow-y-auto my-2">
       <div className="text-black flex flex-col rounded-md gap-3">
         <p className="font-semibold text-lg"> SEO Score</p>
-        <div className="flex flex-row gap-5 w-full">
-          <CircularProgress
-            aria-label=""
-            color="warning"
-            showValueLabel={true}
-            size="lg"
-            value={Number(totalScoreSEO) * 100}
-          />
-          <div>
-            {/* <ApexChartDonut value={Number(totalScoreSEO) * 100} /> */}
-          </div>
-          <div className="flex flex-row gap-5">
-            <div className="px-2 py-1 border radius-md flex flex-row gap-2 items-center border-red-500 rounded-lg">
-              {/* <TimesIcon size={15} className="text-danger" /> */}
-              Error : {errorSEO.length || 0}
+        {totalScoreSEO ? (
+          <div className="flex flex-row gap-5 w-full">
+            <CircularProgress
+              aria-label=""
+              color="warning"
+              showValueLabel={true}
+              size="lg"
+              value={Number(totalScoreSEO) * 100}
+            />
+            <div>
+              {/* <ApexChartDonut value={Number(totalScoreSEO) * 100} /> */}
             </div>
-            <div className="px-2 py-1 border radius-md flex flex-row gap-2 items-center border-yellow-500 rounded-lg">
-              {/* <p className="text-warning w-[15px] h-[15px] text-center mt-[-10px]">
+            <div className="flex flex-row gap-5">
+              <div className="px-2 py-1 border radius-md flex flex-row gap-2 items-center border-red-500 rounded-lg">
+                {/* <TimesIcon size={15} className="text-danger" /> */}
+                Error : {errorSEO.length || 0}
+              </div>
+              <div className="px-2 py-1 border radius-md flex flex-row gap-2 items-center border-yellow-500 rounded-lg">
+                {/* <p className="text-warning w-[15px] h-[15px] text-center mt-[-10px]">
               !
             </p> */}
-              Warning : {warningSEO.length || 0}
-            </div>
-            <div className="px-2 py-1 border radius-md flex flex-row gap-2 items-center border-green-500 rounded-lg">
-              {/* <CheckIcon size={15} className="text-success" /> */}
-              Optimize : {optimizedSEO.length || 0}
+                Warning : {warningSEO.length || 0}
+              </div>
+              <div className="px-2 py-1 border radius-md flex flex-row gap-2 items-center border-green-500 rounded-lg">
+                {/* <CheckIcon size={15} className="text-success" /> */}
+                Optimize : {optimizedSEO.length || 0}
+              </div>
             </div>
           </div>
-        </div>
-        <Accordion
-          variant="splitted"
-          itemClasses={{
-            base: "!bg-transparent",
-            title: "text-black",
-          }}
-        >
-          <AccordionItem
-            key="1"
-            aria-label="Error"
-            // startContent={<TimesIcon size={20} className="text-danger" />}
-            title={`${errorSEO?.length || 0} Errors`}
+        ) : (
+          "Belum ada Data"
+        )}
+        {totalScoreSEO && (
+          <Accordion
+            variant="splitted"
+            itemClasses={{
+              base: "!bg-transparent",
+              title: "text-black",
+            }}
           >
-            <div className="flex flex-col gap-2">
-              {errorSEO?.map((item: any) => (
-                <p
-                  key={item}
-                  className="w-full border border-red-500 rounded-md h-[40px] text-left flex flex-col justify-center px-3"
-                >
-                  {item}
-                </p>
-              ))}
-            </div>
-          </AccordionItem>
-          <AccordionItem
-            key="2"
-            aria-label="Warning"
-            // startContent={
-            //   <p className="text-warning w-[20px] h-[20px] text-center mt-[-10px]">
-            //     !
-            //   </p>
-            // }
-            title={`${warningSEO?.length || 0} Warnings`}
-          >
-            <div className="flex flex-col gap-2">
-              {warningSEO?.map((item: any) => (
-                <p
-                  key={item}
-                  className="w-full border border-yellow-500 rounded-md h-[40px] text-left flex flex-col justify-center px-3"
-                >
-                  {item}
-                </p>
-              ))}
-            </div>
-          </AccordionItem>
-          <AccordionItem
-            key="3"
-            aria-label="Optimized"
-            // startContent={<CheckIcon size={20} className="text-success" />}
-            title={`${optimizedSEO?.length || 0} Optimized`}
-          >
-            <div className="flex flex-col gap-2">
-              {optimizedSEO?.map((item: any) => (
-                <p
-                  key={item}
-                  className="w-full border border-green-500 rounded-md h-[40px] text-left flex flex-col justify-center px-3"
-                >
-                  {item}
-                </p>
-              ))}
-            </div>
-          </AccordionItem>
-        </Accordion>
+            <AccordionItem
+              key="1"
+              aria-label="Error"
+              // startContent={<TimesIcon size={20} className="text-danger" />}
+              title={`${errorSEO?.length || 0} Errors`}
+            >
+              <div className="flex flex-col gap-2">
+                {errorSEO?.map((item: any) => (
+                  <p
+                    key={item}
+                    className="w-full border border-red-500 rounded-md h-[40px] text-left flex flex-col justify-center px-3"
+                  >
+                    {item}
+                  </p>
+                ))}
+              </div>
+            </AccordionItem>
+            <AccordionItem
+              key="2"
+              aria-label="Warning"
+              // startContent={
+              //   <p className="text-warning w-[20px] h-[20px] text-center mt-[-10px]">
+              //     !
+              //   </p>
+              // }
+              title={`${warningSEO?.length || 0} Warnings`}
+            >
+              <div className="flex flex-col gap-2">
+                {warningSEO?.map((item: any) => (
+                  <p
+                    key={item}
+                    className="w-full border border-yellow-500 rounded-md h-[40px] text-left flex flex-col justify-center px-3"
+                  >
+                    {item}
+                  </p>
+                ))}
+              </div>
+            </AccordionItem>
+            <AccordionItem
+              key="3"
+              aria-label="Optimized"
+              // startContent={<CheckIcon size={20} className="text-success" />}
+              title={`${optimizedSEO?.length || 0} Optimized`}
+            >
+              <div className="flex flex-col gap-2">
+                {optimizedSEO?.map((item: any) => (
+                  <p
+                    key={item}
+                    className="w-full border border-green-500 rounded-md h-[40px] text-left flex flex-col justify-center px-3"
+                  >
+                    {item}
+                  </p>
+                ))}
+              </div>
+            </AccordionItem>
+          </Accordion>
+        )}
       </div>
     </div>
   );
diff --git a/components/form/login.tsx b/components/form/login.tsx
index d7304e4..4f44062 100644
--- a/components/form/login.tsx
+++ b/components/form/login.tsx
@@ -101,116 +101,7 @@ export default function Login() {
   };
 
   return (
-    // <HumasLayout>
-    //   <div className="bg-white text-black md:flex px-0 md:px-2 lg:px-5">
-    //     <div className="w-auto md:w-1/2 p-2 md:p-5 lg:p-10 space-y-5">
-    //       <div className="text-xl font-bold">
-    //         Selamat Datang di Portal Resmi Humas Polri
-    //       </div>
-    //       <div>
-    //         <Input
-    //           classNames={{
-    //             input: ["w-full", "bg-transparent", "!text-black"],
-    //             mainWrapper: ["w-full", "bg-transparent"],
-    //             innerWrapper: ["bg-transparent"],
-    //             label: ["!text-black", "font-semibold"],
-    //             inputWrapper: [
-    //               "bg-transparent",
-    //               "dark:bg-transparent",
-    //               "hover:bg-transparent",
-    //               "dark:hover:bg-transparent",
-    //               "group-data-[focused=true]:bg-transparent",
-    //               "dark:group-data-[focused=true]:bg-transaparent",
-    //               "group-data-[focused=false]:bg-transparent",
-    //               "focus-within:!bg-transparent",
-    //             ],
-    //           }}
-    //           isRequired
-    //           type="text"
-    //           label="Username"
-    //           placeholder="Masukkan username anda!"
-    //           variant="underlined"
-    //           onChange={(e: any) => {
-    //             setValUsername(e.target.value.trim());
-    //           }}
-    //           onPaste={(e: any) => {
-    //             setValUsername(e.target.value.trim());
-    //           }}
-    //           onCopy={(e: any) => {
-    //             setValUsername(e.target.value.trim());
-    //           }}
-    //         />
-    //       </div>
-    //       <div>
-    //         <Input
-    //           classNames={{
-    //             input: ["w-full", "bg-transparent", "!text-black"],
-    //             mainWrapper: ["w-full", "bg-transparent"],
-    //             innerWrapper: ["bg-transparent"],
-    //             label: ["!text-black", "font-semibold"],
-    //             inputWrapper: [
-    //               "bg-transparent",
-    //               "dark:bg-transparent",
-    //               "hover:bg-transparent",
-    //               "dark:hover:bg-transparent",
-    //               "group-data-[focused=true]:bg-transparent",
-    //               "dark:group-data-[focused=true]:bg-transaparent",
-    //               "group-data-[focused=false]:bg-transparent",
-    //               "focus-within:!bg-transparent",
-    //             ],
-    //           }}
-    //           isRequired
-    //           endContent={
-    //             <button
-    //               className="focus:outline-none"
-    //               type="button"
-    //               onClick={toggleVisibility}
-    //             >
-    //               {isVisible ? (
-    //                 <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
-    //               ) : (
-    //                 <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
-    //               )}
-    //             </button>
-    //           }
-    //           type={isVisible ? "text" : "password"}
-    //           label="Password"
-    //           placeholder="Masukkan password anda"
-    //           variant="underlined"
-    //           onChange={(event) => setPassword(event.target.value)}
-    //         />
-    //       </div>
-
-    //       <div>
-    //         <Button
-    //           size="lg"
-    //           className="w-full bg-[#DD8306] rounded-md font-semibold"
-    //           onPress={onSubmit}
-    //         >
-    //           Login
-    //         </Button>
-    //       </div>
-    //       <div className="flex justify-center text-xs font-medium  py-3">
-    //         Don&apos;t have account? Register Now
-    //       </div>
-    //       <div>
-    //         <Link href={`/form-permohonan-informasi`}>
-    //           <Button
-    //             size="lg"
-    //             variant="bordered"
-    //             className="w-full text-[#DD8306] borde-2 border-[#DD8306]  rounded-md font-semibold"
-    //           >
-    //             Register
-    //           </Button>
-    //         </Link>
-    //       </div>
-    //     </div>
-    //     <div className="hidden sm:flex w-1/2   items-center justify-center p-10">
-    //       <img src="/login.png" alt="logo" />
-    //     </div>
-    //   </div>
-    // </HumasLayout>
-    <div className="flex flex-row">
+    <div className="flex flex-row h-screen">
       <div
         style={{
           backgroundImage: "url(headerbanner1.png)",
@@ -220,9 +111,11 @@ export default function Login() {
         }}
         className="h-screen hidden md:block md:w-3/5"
       >
-        <img src="divhumas.png" className="w-[120px]" />
+        <Link href="/">
+          <img src="divhumas.png" className="w-[120px]" />
+        </Link>
       </div>
-      <div className="bg-[#1F1A17] w-2/5 md:px-24 md:py-36 flex flex-col">
+      <div className="bg-[#1F1A17] w-full md:w-2/5 p-8  md:px-24 md:py-36 flex flex-col">
         <p className="text-[72px] text-[#DD8306] font-semibold mb-10">Login</p>
         <p className="my-2 text-white">Username</p>
         <Input
diff --git a/components/form/magazine/create-magazine-form.tsx b/components/form/magazine/create-magazine-form.tsx
index c077722..b28414b 100644
--- a/components/form/magazine/create-magazine-form.tsx
+++ b/components/form/magazine/create-magazine-form.tsx
@@ -35,12 +35,12 @@ import {
 } from "@/components/icons/globals";
 import { createMagazine, uploadMagazineFile } from "@/service/magazine";
 
-// const CustomEditor = dynamic(
-//   () => {
-//     return import("@/components/editor/custom-editor");
-//   },
-//   { ssr: false }
-// );
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
 
 interface FileWithPreview extends File {
   preview: string;
@@ -375,13 +375,7 @@ export default function NewCreateMagazineForm() {
           control={control}
           name="description"
           render={({ field: { onChange, value } }) => (
-            // <CustomEditor onChange={onChange} initialData={value} />
-            <JoditEditor
-              ref={editor}
-              value={value}
-              onChange={onChange}
-              className="dark:text-black"
-            />
+            <CustomEditor onChange={onChange} initialData={value} />
           )}
         />
         {errors?.description && (
diff --git a/components/form/magazine/edit-magazine-form.tsx b/components/form/magazine/edit-magazine-form.tsx
index fcbdbec..e7fb650 100644
--- a/components/form/magazine/edit-magazine-form.tsx
+++ b/components/form/magazine/edit-magazine-form.tsx
@@ -42,12 +42,12 @@ import {
   uploadMagazineFile,
 } from "@/service/magazine";
 
-// const CustomEditor = dynamic(
-//   () => {
-//     return import("@/components/editor/custom-editor");
-//   },
-//   { ssr: false }
-// );
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
 
 interface FileWithPreview extends File {
   preview: string;
@@ -445,14 +445,7 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
           control={control}
           name="description"
           render={({ field: { onChange, value } }) => (
-            // <CustomEditor onChange={onChange} initialData={value} />
-            <JoditEditor
-              ref={editor}
-              value={value}
-              config={{ readonly: isDetail }}
-              onChange={onChange}
-              className="dark:text-black"
-            />
+            <CustomEditor onChange={onChange} initialData={value} />
           )}
         />
         {errors?.description && (
diff --git a/components/form/settings/password.tsx b/components/form/settings/password.tsx
new file mode 100644
index 0000000..a8c1be9
--- /dev/null
+++ b/components/form/settings/password.tsx
@@ -0,0 +1,108 @@
+"use client";
+import { FormEvent, Fragment, useEffect, useRef, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { Input, Textarea } from "@nextui-org/input";
+
+const formSchema = z.object({
+  password: z.string().min(2, {
+    message: "Judul harus diisi",
+  }),
+  passwordConf: z.string().min(2, {
+    message: "Slug harus diisi",
+  }),
+});
+
+export default function PasswordForm() {
+  const MySwal = withReactContent(Swal);
+
+  const formOptions = {
+    resolver: zodResolver(formSchema),
+  };
+  type UserSettingSchema = z.infer<typeof formSchema>;
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    getValues,
+    watch,
+    setError,
+    clearErrors,
+  } = useForm<UserSettingSchema>(formOptions);
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    console.log("values");
+  };
+
+  return (
+    <form className="flex flex-col gap-3 " onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col gap-1">
+        <p className="text-sm">Password</p>
+        <Controller
+          control={control}
+          name="password"
+          render={({ field: { onChange, value } }) => (
+            <Input
+              type="text"
+              id="password"
+              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?.password && (
+          <p className="text-red-400 text-sm mb-3">
+            {errors.password?.message}
+          </p>
+        )}
+      </div>
+      <div className="flex flex-col gap-1">
+        <p className="text-sm">Konfirmasi Password</p>
+        <Controller
+          control={control}
+          name="passwordConf"
+          render={({ field: { onChange, value } }) => (
+            <Input
+              type="text"
+              id="passwordConf"
+              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?.passwordConf && (
+          <p className="text-red-400 text-sm mb-3">
+            {errors.passwordConf?.message}
+          </p>
+        )}
+      </div>
+    </form>
+  );
+}
diff --git a/components/form/settings/profile.tsx b/components/form/settings/profile.tsx
new file mode 100644
index 0000000..60ed39a
--- /dev/null
+++ b/components/form/settings/profile.tsx
@@ -0,0 +1,212 @@
+"use client";
+import { FormEvent, Fragment, useEffect, useRef, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { Input, Textarea } from "@nextui-org/input";
+import { Button } from "@nextui-org/button";
+import { Radio, RadioGroup } from "@nextui-org/react";
+
+const formSchema = z.object({
+  fullname: z.string().min(1, {
+    message: "Harus diisi",
+  }),
+  username: z.string().min(1, {
+    message: "Harus diisi",
+  }),
+  email: z
+    .string()
+    .email({
+      message: "Email tidak valid",
+    })
+    .min(2, {
+      message: "Harus diisi",
+    }),
+  nrp: z.string().min(1, {
+    message: "Harus diisi",
+  }),
+  gender: z.string().min(1, {
+    message: "Harus diisi",
+  }),
+  phoneNumber: z.string().min(1, {
+    message: "Harus diisi",
+  }),
+});
+
+export default function ProfileForm() {
+  const MySwal = withReactContent(Swal);
+
+  const formOptions = {
+    resolver: zodResolver(formSchema),
+  };
+  type UserSettingSchema = z.infer<typeof formSchema>;
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    getValues,
+    watch,
+    setError,
+    clearErrors,
+  } = useForm<UserSettingSchema>(formOptions);
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    console.log("values");
+  };
+
+  return (
+    <form className="flex flex-col gap-3 " onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col gap-1">
+        <p className="text-sm">Nama Lengkap</p>
+        <Controller
+          control={control}
+          name="fullname"
+          render={({ field: { onChange, value } }) => (
+            <Input
+              type="text"
+              id="fullname"
+              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?.fullname && (
+          <p className="text-red-400 text-sm mb-3">
+            {errors.fullname?.message}
+          </p>
+        )}
+      </div>
+      <div className="flex flex-col gap-1">
+        <p className="text-sm">Username</p>
+        <Controller
+          control={control}
+          name="username"
+          render={({ field: { onChange, value } }) => (
+            <Input
+              type="text"
+              id="username"
+              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?.username && (
+          <p className="text-red-400 text-sm mb-3">
+            {errors.username?.message}
+          </p>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <p className="text-sm">Email</p>
+        <Controller
+          control={control}
+          name="email"
+          render={({ field: { onChange, value } }) => (
+            <Input
+              type="email"
+              id="email"
+              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?.email && (
+          <p className="text-red-400 text-sm mb-3">{errors.email?.message}</p>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <p className="text-sm">NRP</p>
+        <Controller
+          control={control}
+          name="nrp"
+          render={({ field: { onChange, value } }) => (
+            <Input
+              type="number"
+              id="nrp"
+              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?.nrp && (
+          <p className="text-red-400 text-sm mb-3">{errors.nrp?.message}</p>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <p className="text-sm">Gender</p>
+        <Controller
+          control={control}
+          name="gender"
+          render={({ field: { onChange, value } }) => (
+            <RadioGroup
+              label=""
+              value={value}
+              onValueChange={onChange}
+              orientation="horizontal"
+            >
+              <Radio value="male">Laki-laki</Radio>
+              <Radio value="female">Perempuan</Radio>
+            </RadioGroup>
+          )}
+        />
+        {errors?.gender && (
+          <p className="text-red-400 text-sm mb-3">{errors.gender?.message}</p>
+        )}
+      </div>
+      <Button color="primary" type="submit">
+        Simpan
+      </Button>
+    </form>
+  );
+}
diff --git a/components/icons/globals.tsx b/components/icons/globals.tsx
index f90059a..0d11c16 100644
--- a/components/icons/globals.tsx
+++ b/components/icons/globals.tsx
@@ -148,3 +148,49 @@ export const FileIcon = ({
     />
   </svg>
 );
+export const UserProfileIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    {...props}
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="currentColor"
+      d="M11 7c0 1.66-1.34 3-3 3S5 8.66 5 7s1.34-3 3-3s3 1.34 3 3"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M16 8c0 4.42-3.58 8-8 8s-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8M4 13.75C4.16 13.484 5.71 11 7.99 11c2.27 0 3.83 2.49 3.99 2.75A6.98 6.98 0 0 0 14.99 8c0-3.87-3.13-7-7-7s-7 3.13-7 7c0 2.38 1.19 4.49 3.01 5.75"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export const SettingsIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    {...props}
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="m9.25 22l-.4-3.2q-.325-.125-.612-.3t-.563-.375L4.7 19.375l-2.75-4.75l2.575-1.95Q4.5 12.5 4.5 12.338v-.675q0-.163.025-.338L1.95 9.375l2.75-4.75l2.975 1.25q.275-.2.575-.375t.6-.3l.4-3.2h5.5l.4 3.2q.325.125.613.3t.562.375l2.975-1.25l2.75 4.75l-2.575 1.95q.025.175.025.338v.674q0 .163-.05.338l2.575 1.95l-2.75 4.75l-2.95-1.25q-.275.2-.575.375t-.6.3l-.4 3.2zm2.8-6.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12t1.013 2.475T12.05 15.5"
+    />
+  </svg>
+);
diff --git a/components/landing/ENewsPolri.tsx b/components/landing/ENewsPolri.tsx
index 00e0d9b..a8200bb 100644
--- a/components/landing/ENewsPolri.tsx
+++ b/components/landing/ENewsPolri.tsx
@@ -12,6 +12,7 @@ import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/effect-fade";
 import "swiper/css/navigation";
+import { getListMagazine } from "@/service/magazine";
 
 export default function ENewsPolri() {
   const [article, setArticle] = useState<any>([]);
@@ -20,7 +21,7 @@ export default function ENewsPolri() {
     async function getArticle() {
       const req = { page: 1, search: "", limit: "10" };
 
-      const response = await getListArticle(req);
+      const response = await getListMagazine(req);
       setArticle(response?.data?.data);
     }
     getArticle();
@@ -68,13 +69,13 @@ export default function ENewsPolri() {
               <SwiperSlide key={newsItem.id}>
                 <Card isFooterBlurred radius="lg" className="border-none">
                   <img
-                    alt="headernews"
-                    src="/headernews.png"
-                    className="h-[25vh] object-cover rounded-none"
+                    alt="thumbnail"
+                    src={newsItem?.thumbnailUrl ? "" : "/no-image.jpg"}
+                    className="!h-[25vh] object-cover rounded-none"
                   />
                   <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
                     <div className="text-white">
-                      <Link href={`news/detail/${newsItem.id}`}>
+                      <Link href={`/e-majalah-polri/detail/${newsItem.id}`}>
                         <p className="text-left font-semibold text-sm">
                           {textEllipsis(newsItem.title, 40)}
                         </p>
diff --git a/components/landing/SidebarNav.tsx b/components/landing/SidebarNav.tsx
index 17aa68f..4159c61 100644
--- a/components/landing/SidebarNav.tsx
+++ b/components/landing/SidebarNav.tsx
@@ -30,7 +30,7 @@ export default function SidebarNav() {
             onClick={() => setSelectedTab("media")}
             className={
               selectedTab === "media"
-                ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
+                ? "text-black dark:text-white border-b-3 border-red-400 cursor-pointer py-2"
                 : "text-slate-300 cursor-pointer py-2"
             }
           >
@@ -40,7 +40,7 @@ export default function SidebarNav() {
             onClick={() => setSelectedTab("video")}
             className={
               selectedTab === "video"
-                ? "text-black  border-b-3 border-red-400 cursor-pointer py-2"
+                ? "text-black dark:text-white  border-b-3 border-red-400 cursor-pointer py-2"
                 : "text-slate-300 cursor-pointer py-2"
             }
           >
diff --git a/components/layout/admin-layout.tsx b/components/layout/admin-layout.tsx
index 836ad50..fe4f828 100644
--- a/components/layout/admin-layout.tsx
+++ b/components/layout/admin-layout.tsx
@@ -27,9 +27,9 @@ export const AdminLayout = ({ children }: Props) => {
 
   return (
     <SidebarProvider>
-      <div className="h-screen flex items-center flex-row">
+      <div className="!h-screen flex items-center flex-row !overflow-y-hidden">
         <Sidebar sidebarData={isOpen} updateSidebarData={updateSidebarData} />
-        <div className={`w-full h-full flex flex-col`}>
+        <div className={`w-full h-full flex flex-col  overflow-hidden`}>
           <Breadcrumb />
           {children}
         </div>
diff --git a/components/layout/humas-layout.tsx b/components/layout/humas-layout.tsx
index bf79e01..68f821a 100644
--- a/components/layout/humas-layout.tsx
+++ b/components/layout/humas-layout.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 export const HumasLayout = ({ children }: Props) => {
   return (
-    <section className="flex flex-col">
+    <section className="flex flex-col overflow-auto">
       <NavbarHumas size="sm" />
       <NavbarHumas size="lg" />
       <NewsTicker />
diff --git a/components/layout/sidebar/sidebar.tsx b/components/layout/sidebar/sidebar.tsx
index 091a748..832875a 100644
--- a/components/layout/sidebar/sidebar.tsx
+++ b/components/layout/sidebar/sidebar.tsx
@@ -32,6 +32,7 @@ import { useSidebar } from "./sidebar-context";
 import { SidebarMenu } from "./sidebar-menu";
 import Image from "next/image";
 import Cookies from "js-cookie";
+import { SettingsIcon, UserProfileIcon } from "@/components/icons/globals";
 
 interface SubMenuItems {
   id: number;
@@ -114,13 +115,13 @@ const sideBarDummyData = [
     childModule: null,
   },
   {
-    id: 4,
-    name: "Majalah",
-    moduleId: 652,
-    moduleName: "Apps",
-    modulePathUrl: "/admin/magazine",
+    id: 30,
+    name: "Category",
+    moduleId: 654,
+    moduleName: "Master",
+    modulePathUrl: "/admin/master-category",
     parentId: -1,
-    icon: <MagazineIcon />,
+    icon: <MasterCategoryIcon size={22} />,
     position: 1,
     statusId: 1,
     childMenu: [],
@@ -128,19 +129,20 @@ const sideBarDummyData = [
     childModule: null,
   },
   {
-    id: 11,
-    name: "Static Page",
+    id: 4,
+    name: "Majalah",
     moduleId: 652,
-    moduleName: "Dashboard",
-    modulePathUrl: "/admin/static-page",
+    moduleName: "Apps",
+    modulePathUrl: "/admin/magazine",
     parentId: -1,
-    icon: <StaticPageIcon />,
+    icon: <MagazineIcon size={23} />,
     position: 1,
     statusId: 1,
     childMenu: [],
     statusName: "Active",
     childModule: null,
   },
+
   // {
   //     id: 4,
   //     name: "E-Magazine",
@@ -199,13 +201,13 @@ const sideBarDummyData = [
   //     childModule: null,
   // },
   {
-    id: 30,
-    name: "Master Category",
-    moduleId: 654,
-    moduleName: "Master",
-    modulePathUrl: "/admin/master-category",
+    id: 11,
+    name: "Master Static Page",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/static-page",
     parentId: -1,
-    icon: <MasterCategoryIcon />,
+    icon: <StaticPageIcon size={24} />,
     position: 1,
     statusId: 1,
     childMenu: [],
@@ -249,6 +251,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
   const [sidebarMenu, setSidebarMenu] = useState<SidebarMenuTask[]>();
   const { isOpen, toggleSidebar } = useSidebar();
   const token = Cookies.get("access_token");
+  const fullname = Cookies.get("ufne");
   const isAuthenticated = Cookies.get("is_authenticated");
 
   useEffect(() => {
@@ -270,12 +273,12 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
 
   return (
     <div
-      className={`hidden md:flex h-full flex-grow ${
+      className={`hidden md:flex h-screen flex-grow ${
         isOpen ? "min-w-[240px]" : "min-w-[80px]"
       }`}
     >
       <div
-        className={` flex h-full flex-col rounded-lg p-4 mb-0 bg-gray-100 dark:bg-stone-900 z-40 transition-width !ease-in-out justify-between ${
+        className={` flex h-full flex-col p-4 mb-0 bg-gray-950 z-40 transition-width !ease-in-out justify-between ${
           isOpen ? "w-[238px]" : "w-[80px]"
         }`}
       >
@@ -304,7 +307,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
             </Link>
             {isOpen && (
               <button
-                className="w-5 h-5 text-zinc-400 dark:text-zinc-400 z-50 border-1 border-zinc-400 rounded-full flex justify-center items-center"
+                className="w-5 h-5 text-zinc-400 z-50 border-1 border-zinc-400 rounded-full flex justify-center items-center"
                 onClick={toggleSidebar}
               >
                 <ChevronLeftIcon />
@@ -318,7 +321,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                   list.isGroup ? (
                     <p
                       key={list}
-                      className={`font-bold mr-4 ${
+                      className={`font-bold mr-4 text-white ${
                         !isOpen ? "text-center" : ""
                       }`}
                     >
@@ -338,8 +341,8 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                           <div
                             className={`px-3.5 py-2 mr-4 rounded-lg  flex flex-row gap-2 ${
                               pathname.includes(list.modulePathUrl)
-                                ? "bg-black dark:bg-white text-white dark:text-black font-bold"
-                                : "text-black dark:text-white hover:bg-stone-900 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black"
+                                ? "bg-white text-black font-bold"
+                                : "text-white hover:bg-gray-200 hover:text-black"
                             }`}
                           >
                             {list.icon} {isOpen && list.name}
@@ -356,8 +359,8 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                             <div
                               className={`py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row justify-center gap-1 ${
                                 pathname.includes(list.modulePathUrl)
-                                  ? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold"
-                                  : "text-zinc-600 dark:text-zinc-400"
+                                  ? "bg-zinc-300 text-zinc-500 font-bold hover:text-black"
+                                  : "text-zinc-400 hover:text-black"
                               }`}
                             >
                               {list.icon} {isOpen && list.name}
@@ -399,23 +402,50 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
         >
           <div className="flex flex-col gap-4">
             <div
-              className={`cursor-pointer flex flex-row ${
+              className={`flex flex-row ${
                 isOpen ? "justify-start" : "justify-center"
-              } gap-2  items-center text-zinc-600 dark:text-zinc-400 hover:font-semibold hover:text-zinc-700 dark:hover:text-zinc-300`}
+              } gap-2  items-center text-white `}
             >
               <ThemeSwitch />
               {isOpen && "Theme"}
             </div>
             {isOpen ? (
-              <div className="flex flex-row gap-3">
-                <Image
-                  src="/pengaduan.png"
-                  width={72}
-                  height={72}
-                  alt="profile"
-                />
-                <div className="flex flex-col">
-                  <a className="cursor-pointer">Nama User</a>
+              <Link href="/settings">
+                <div
+                  className={`py-2 mr-4 rounded-lg  flex flex-row gap-2 ${
+                    pathname.includes("/settings")
+                      ? "bg-white text-black font-bold px-2"
+                      : "text-white  "
+                  }`}
+                >
+                  <SettingsIcon /> {isOpen && "Settings"}
+                </div>
+              </Link>
+            ) : (
+              <Tooltip
+                content="Setting"
+                placement="right"
+                delay={0}
+                closeDelay={0}
+              >
+                <Link href="/settings">
+                  <div
+                    className={`py-2 rounded-lg hover:text-zinc-600 flex flex-row justify-center gap-1 ${
+                      pathname.includes("/settings")
+                        ? "bg-zinc-300 text-zinc-500 font-bold "
+                        : "text-zinc-400 "
+                    }`}
+                  >
+                    <SettingsIcon /> {isOpen && "Settings"}
+                  </div>
+                </Link>
+              </Tooltip>
+            )}
+            {isOpen ? (
+              <div className="flex flex-row gap-3 items-center text-white">
+                <UserProfileIcon size={36} />
+                <div className="flex flex-col ">
+                  <a className="cursor-pointer ">{fullname}</a>
                   <a
                     className="hover:text-red-600 underline text-sm cursor-pointer"
                     onClick={() => onLogout()}
@@ -437,12 +467,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                   } gap-2  items-center text-zinc-600 dark:text-zinc-400 hover:font-semibold hover:text-zinc-700 dark:hover:text-zinc-300`}
                   onClick={toggleSidebar}
                 >
-                  <Image
-                    src="/pengaduan.png"
-                    width={48}
-                    height={48}
-                    alt="profile"
-                  />
+                  <UserProfileIcon size={28} />
                 </a>
               </Tooltip>
             )}
diff --git a/components/main/detail/e-magazine-detail.tsx b/components/main/detail/e-magazine-detail.tsx
index 91259bb..ecd275c 100644
--- a/components/main/detail/e-magazine-detail.tsx
+++ b/components/main/detail/e-magazine-detail.tsx
@@ -1,60 +1,151 @@
-'use client'
-import { BreadcrumbItem, Breadcrumbs } from '@nextui-org/breadcrumbs'
-import { Button } from '@nextui-org/button'
-import React from 'react'
+"use client";
+import { ChevronRightIcon } from "@/components/icons";
+import { getMagazineById } from "@/service/magazine";
+import {
+  convertDateFormat,
+  formatMonthString,
+  formatTextToHtmlTag,
+} from "@/utils/global";
+import { BreadcrumbItem, Breadcrumbs } from "@nextui-org/breadcrumbs";
+import { Button } from "@nextui-org/button";
+import { Accordion, AccordionItem } from "@nextui-org/react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
 
 export default function EMagazineDetail() {
-    return (
-        <div className='w-auto bg-[#E2E2E2] text-black'>
-            <div className='p-1 md:p-5 lg:px-8'>
-                <div className='font-bold text-xl'>E-Majalah Polri</div>
-                <div className="pt-2">
-                    <Breadcrumbs color='primary'>
-                        <BreadcrumbItem href='/'>Beranda</BreadcrumbItem>
-                        <BreadcrumbItem href='/e-majalah-polri/daftar-majalah'>E-Majalah Polri</BreadcrumbItem>
-                        <BreadcrumbItem>Judul</BreadcrumbItem>
-                    </Breadcrumbs>
-                </div>
-                <div className='pt-5 space-y-4'>
-                    <div className='font-semibold border-b-4 border-red-700 leading-loose'>MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023</div>
-                    <div className='bg-[#FFFFFF] rounded-lg h-[380px] flex items-center justify-center'>
-                        <img src="/emagazine.jpeg" alt="emagazine" className='h-[380px] rounded-md py-1' />
-                    </div>
-                    <div>
-                        <Button
-                            className='w-full bg-[#DD8306] text-sm font-semibold'
-                        >
-                            Download
-                        </Button>
-                    </div>
-                    <div className='bg-[#FFFFFF] rounded-md text-sm font-medium'>
-                        <div className='flex justify-between text-white border-t-2 border-l border-r rounded-t-md border-gray-300 p-3 bg-[#9D9D9D]'>
-                            <div className='w-5/6'>Judul</div>
-                            <div className='w-1/6 text-center border-l border-gray-300'>Keterangan</div>
-                        </div>
-                        <div className='flex justify-between border border-gray-300 p-3'>
-                            <div className='w-5/6'>Download</div>
-                            <div className='w-1/6 text-center border-l border-gray-300'>51</div>
-                        </div>
-                        <div className='flex justify-between border border-gray-300 p-3'>
-                            <div className='w-5/6'>File Size</div>
-                            <div className='w-1/6 text-center border-l border-gray-300'>12,.58MB</div>
-                        </div>
-                        <div className='flex justify-between border border-gray-300 p-3'>
-                            <div className='w-5/6'>Download</div>
-                            <div className='w-1/6 text-center border-l border-gray-300'>10</div>
-                        </div>
-                        <div className='flex justify-between border border-gray-300 p-3'>
-                            <div className='w-5/6'>Created Date</div>
-                            <div className='w-1/6 text-center border-l border-gray-300'>1 Oktober 2024</div>
-                        </div>
-                        <div className='flex justify-between border border-b border-gray-300 p-3 rounded-b-md'>
-                            <div className='w-5/6'>Last Update</div>
-                            <div className='w-1/6 text-center border-l border-gray-300'>1 Oktober 2024</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  const params = useParams();
+  const id = params?.id;
+  const [detailData, setDetailData] = useState<any>();
+  const [detailFiles, setDetailFiles] = useState<any>([]);
+
+  useEffect(() => {
+    initFetch();
+  }, [id]);
+
+  const initFetch = async () => {
+    const res = await getMagazineById(String(id));
+    const data = res?.data?.data;
+    setDetailData(data);
+    setDetailFiles(data?.files);
+  };
+
+  const doDownload = async (fileName: string, title: string): Promise<void> => {
+    try {
+      const response = await fetch(
+        `http://38.47.180.165:8802/magazine-files/viewer/${fileName}`
+      );
+
+      if (!response.ok) {
+        throw new Error("File not found or server error");
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+
+      anchor.href = url;
+      anchor.download = title === "" ? fileName : title;
+      document.body.appendChild(anchor);
+      anchor.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(anchor);
+    } catch (error) {
+      console.error("Download failed:", error);
+    }
+  };
+  return (
+    <div className="w-auto bg-[#E2E2E2] text-black">
+      <div className="p-1 md:p-5 lg:px-36">
+        <div className="flex flex-row gap-4 items-end text-black">
+          <Link href="/" className=" font-semibold text-lg">
+            Beranda
+          </Link>
+          <ChevronRightIcon />
+          <Link
+            href="/e-majalah-polri/daftar-majalah"
+            className=" font-semibold text-lg"
+          >
+            E-Majalah Polri
+          </Link>
         </div>
-    )
+        <div className="pt-5 space-y-4">
+          <div className="font-semibold border-b-4 border-red-700 leading-loose">
+            {detailData?.title}
+          </div>
+          <div className="rounded-lg h-[380px] flex items-center justify-center">
+            <img
+              src="/emagazine.jpeg"
+              alt="emagazine"
+              className="h-[380px] rounded-md py-1"
+            />
+          </div>
+          <div
+            dangerouslySetInnerHTML={formatTextToHtmlTag(
+              detailData?.description
+            )}
+            className="text-sm lg:text-xl lg:leading-8 justify-center flex"
+          />
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {detailFiles?.map((file: any, index: number) => (
+              <Accordion key={file?.id} variant="splitted">
+                <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?.title === "" ? `File ${index + 1}` : file?.title}
+                    </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?.fileName}
+                      </div>
+                    </div>
+                    <div className="flex justify-between border items-center border-gray-300 p-3">
+                      <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="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">
+                      <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)}
+                      </div>
+                    </div>
+                  </div>
+                  <Button
+                    className="w-full bg-[#DD8306] text-sm font-semibold text-white mt-2"
+                    radius="sm"
+                    onPress={() => doDownload(file?.fileName, file?.title)}
+                  >
+                    Download
+                  </Button>
+                </AccordionItem>
+              </Accordion>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/components/table/master-role-table.tsx b/components/table/master-role-table.tsx
index 09e89a9..4f5bc3e 100644
--- a/components/table/master-role-table.tsx
+++ b/components/table/master-role-table.tsx
@@ -241,7 +241,7 @@ export default function MasterRoleTable() {
 
   return (
     <>
-      <div className="mx-5 my-5">
+      <div className="mx-3 my-5">
         <div className="flex flex-col items-center rounded-2xl">
           <Table
             // selectionMode="multiple"
diff --git a/components/table/master-user-table.tsx b/components/table/master-user-table.tsx
index 443bd53..e988b0e 100644
--- a/components/table/master-user-table.tsx
+++ b/components/table/master-user-table.tsx
@@ -174,7 +174,7 @@ export default function MasterUserTable() {
 
   return (
     <>
-      <div className="mx-5 my-5">
+      <div className="mx-3 my-5">
         <div className="flex flex-col items-center rounded-2xl">
           <Table
             // selectionMode="multiple"
diff --git a/components/table/static-page-table.tsx b/components/table/static-page-table.tsx
index ee039b1..d578ea2 100644
--- a/components/table/static-page-table.tsx
+++ b/components/table/static-page-table.tsx
@@ -204,9 +204,9 @@ export default function StaticPageTable() {
         <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">Search</p>
+              <p className="font-semibold text-sm">Pencarian</p>
               <Input
-                aria-label="Search"
+                aria-label="Pencarian..."
                 classNames={{
                   inputWrapper: "bg-default-100",
                   input: "text-sm",
@@ -222,7 +222,7 @@ export default function StaticPageTable() {
               />
             </div>
             <div className="flex flex-col gap-1 w-[72px]">
-              <p className="font-semibold text-sm">Show</p>
+              <p className="font-semibold text-sm">Data</p>
               <Select
                 label=""
                 variant="bordered"
@@ -242,29 +242,9 @@ export default function StaticPageTable() {
                 </SelectItem>
               </Select>
             </div>
-            <div className="flex flex-col gap-1 w-[170px]">
-              <p className="font-semibold text-sm">Category</p>
-              <Select
-                label=""
-                variant="bordered"
-                labelPlacement="outside"
-                placeholder="Select"
-                selectedKeys={[showData]}
-                className="w-full"
-                onChange={(e) =>
-                  e.target.value === "" ? "" : setShowData(e.target.value)
-                }
-              >
-                <SelectItem key="10" value="10">
-                  Polda Metro Jaya
-                </SelectItem>
-                <SelectItem key="5" value="5">
-                  Polda Sumatera Utara
-                </SelectItem>
-              </Select>
-            </div>
+
             <div className="flex flex-col gap-1 w-full md:w-[340px]">
-              <p className="font-semibold text-sm">Date</p>
+              <p className="font-semibold text-sm">Tanggal</p>
               <Datepicker
                 value={startDateValue}
                 displayFormat="DD/MM/YYYY"
diff --git a/components/table/tabel-emajalah-polri.tsx b/components/table/tabel-emajalah-polri.tsx
index d64bfff..b39bc55 100644
--- a/components/table/tabel-emajalah-polri.tsx
+++ b/components/table/tabel-emajalah-polri.tsx
@@ -4,6 +4,7 @@ import {
   Breadcrumbs,
   Button,
   Input,
+  Pagination,
   Select,
   SelectItem,
   SelectSection,
@@ -16,7 +17,21 @@ import {
 } from "@nextui-org/react";
 import Link from "next/link";
 import SidebarNav from "../landing/SidebarNav";
-import { EyeFilledIcon, SearchIcon } from "../icons";
+import { ChevronRightIcon, EyeFilledIcon, SearchIcon } from "../icons";
+import { getListMagazine } from "@/service/magazine";
+import { useEffect, useState } from "react";
+import Datepicker from "react-tailwindcss-datepicker";
+
+const header = [
+  {
+    key: "title",
+    label: "Daftar E-Majalah Polri",
+  },
+  {
+    key: "icon",
+    label: "",
+  },
+];
 
 export default function ListEnewsPolri() {
   const searchInput = (
@@ -57,68 +72,92 @@ export default function ListEnewsPolri() {
     />
   );
 
-  const tableData = [
-    {
-      key: "1",
-      tahun: "MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023",
-      icon: <EyeFilledIcon color="#DD8306" />,
-    },
-    {
-      key: "2",
-      tahun: "Tribrata Edisi 1 2023",
-      icon: <EyeFilledIcon color="#DD8306" />,
-    },
-    {
-      key: "3",
-      tahun: "MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023",
-      icon: <EyeFilledIcon color="#DD8306" />,
-    },
-    {
-      key: "4",
-      tahun: "MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023",
-      icon: <EyeFilledIcon color="#DD8306" />,
-    },
-    {
-      key: "5",
-      tahun: "MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023",
-      icon: <EyeFilledIcon color="#DD8306" />,
-    },
-  ];
+  const [magazines, setMagazines] = useState<any>([]);
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState("");
+  const [totalPage, setTotalPage] = useState(1);
 
-  const header = [
-    {
-      key: "tahun",
-      label: "Daftar E-Majalah Polri",
-    },
-    {
-      key: "icon",
-      label: "",
-    },
-  ];
+  const [startDateValue, setStartDateValue] = useState({
+    startDate: null,
+    endDate: null,
+  });
+
+  useEffect(() => {
+    getMagazines();
+  }, [page, startDateValue]);
+
+  async function getMagazines() {
+    const req = {
+      page: page,
+      search: search,
+      limit: "10",
+      startDate:
+        startDateValue.startDate === null ? "" : startDateValue.startDate,
+      endDate: startDateValue.endDate === null ? "" : startDateValue.endDate,
+    };
+
+    const response = await getListMagazine(req);
+    setMagazines(response?.data?.data);
+    setTotalPage(response?.data?.meta?.totalPage);
+  }
 
-  const category = [
-    { label: "Title", value: "title" },
-    { label: "Date", value: "date" },
-    { label: "Created At", value: "createdAt" },
-  ];
   return (
     <div className="md:flex ">
       <div className="w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[75%] text-black">
-        <div className="p-1 md:p-5 lg:p-8">
-          <div className="font-bold text-xl">E-Majalah Polri</div>
-          <div className="pt-2">
-            <Breadcrumbs color="primary">
-              <BreadcrumbItem href="/">Beranda</BreadcrumbItem>
-              <BreadcrumbItem>E-Majalah Polri</BreadcrumbItem>
-            </Breadcrumbs>
+        <div className="p-1 md:py-5 lg:px-36">
+          <div className="flex flex-row gap-4 items-end text-black">
+            <Link href="/" className=" font-semibold text-lg">
+              Beranda
+            </Link>
+            <ChevronRightIcon />
+            <p className=" font-semibold text-lg">E-Majalah Polri</p>
           </div>
-          <div className="pt-4 space-y-5">
-            <div className="font-semibold text-lg border-b-4 border-red-700 leading-loose">
+          <div className="pt-4 space-y-5 ">
+            {/* <div className="font-semibold text-lg border-b-4 border-red-700 leading-loose">
               E-majalah Polri
-            </div>
-            <div className="flex items-center gap-3">
-              {searchInput}
-              <Select
+            </div> */}
+            <div className="flex items-end gap-3 flex-col md:flex-row">
+              <Input
+                aria-label="Search"
+                classNames={{
+                  input: [
+                    "w-full",
+                    "bg-transparent",
+                    "h-[20px]",
+                    "!text-black",
+                  ],
+                  mainWrapper: ["w-full", "bg-transparent"],
+                  innerWrapper: ["bg-transparent", "h-[20px]"],
+                  inputWrapper: [
+                    "bg-white",
+                    "dark:bg-white",
+                    "hover:!bg-gray-300",
+                    "dark:hover:bg-gray-300",
+                    "group-data-[focused=true]:bg-transparent",
+                    "dark:group-data-[focused=true]:bg-transaparent",
+                    "group-data-[focused=false]:bg-transparent",
+                    "focus-within:!bg-transparent",
+                    "h-[20px]",
+                    "dark:focus-within:!bg-gray-100",
+                  ],
+                }}
+                labelPlacement="outside"
+                type="text"
+                onChange={(e) => setSearch(e.target.value)}
+                startContent={
+                  <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
+                }
+                endContent={
+                  <Button
+                    size="sm"
+                    className="bg-[#DD8306] font-semibold text-white"
+                    onPress={getMagazines}
+                  >
+                    Cari
+                  </Button>
+                }
+              />
+              {/* <Select
                 label="Sort By"
                 size="sm"
                 className="w-1/5"
@@ -147,44 +186,25 @@ export default function ListEnewsPolri() {
                     <SelectItem key={list.id}>{list.label}</SelectItem>
                   ))}
                 </SelectSection>
-              </Select>
-              <Select
-                label="Tanggal Publikasi"
-                size="sm"
-                className="w-1/4"
-                classNames={{
-                  // base: "bg-red-500",
-                  // mainWrapper: "border-2 border-red-500",
-                  label: "text-black",
-                  value: "!text-black",
-                  trigger: "bg-white hover:!bg-gray-100",
-                  // innerWrapper: "bg-red-500"
-                  // selectorIcon: "bg-red-500"
-                  // listboxWrapper: "bg-red-500"
-                  // listbox: "bg-red-500"
-                  popoverContent: "bg-white",
-                }}
-                listboxProps={{
-                  itemClasses: {
-                    base: "text-black",
-                    wrapper: "!bg-white ",
-                  },
-                }}
-                // onChange={onChangeFilterEnterprising}
-              >
-                <SelectSection>
-                  {category.map((list: any) => (
-                    <SelectItem key={list.id}>{list.label}</SelectItem>
-                  ))}
-                </SelectSection>
-              </Select>
+              </Select> */}
+              <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
+                  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
                   color="warning"
-                  selectionMode="single"
-                  defaultSelectedKeys={["1"]}
                   aria-label="Example static collection table"
                   classNames={{
                     wrapper: "bg-white",
@@ -203,19 +223,38 @@ export default function ListEnewsPolri() {
                       </TableColumn>
                     )}
                   </TableHeader>
-                  <TableBody items={tableData}>
-                    {(item) => (
-                      <TableRow key={item.key}>
-                        <TableCell>{item.tahun}</TableCell>
+                  <TableBody items={magazines}>
+                    {(item: any) => (
+                      <TableRow key={item.id}>
+                        <TableCell>
+                          <Link href={`/e-majalah-polri/detail/${item.id}`}>
+                            {item.title}
+                          </Link>
+                        </TableCell>
                         <TableCell>
                           <Link href={`/e-majalah-polri/detail/${item.key}`}>
-                            {item.icon}
+                            <EyeFilledIcon color="#DD8306" />
                           </Link>
                         </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>
           </div>
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
index 6d20b08..ca188a8 100644
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -6,6 +6,15 @@ import { BreadcrumbItem, Breadcrumbs } from "@nextui-org/react";
 import { usePathname, useRouter } from "next/navigation";
 import { Image } from "@nextui-org/react";
 import { FormLayoutIcon } from "../icons";
+import {
+  ArticleIcon,
+  DashboardIcon,
+  MagazineIcon,
+  MasterCategoryIcon,
+  MasterRoleIcon,
+  MasterUsersIcon,
+  StaticPageIcon,
+} from "../icons/sidebar-icon";
 
 export const Breadcrumb = () => {
   const [currentPage, setCurrentPage] = useState<React.Key>("");
@@ -58,7 +67,16 @@ export const Breadcrumb = () => {
               )}
             </Breadcrumbs>
           </div>
-          <FormLayoutIcon width={50} height={50} />
+          {pathname.includes("dashboard") && <DashboardIcon size={50} />}
+          {pathname.includes("article") && <ArticleIcon size={50} />}
+          {pathname.includes("master-category") && (
+            <MasterCategoryIcon size={50} />
+          )}
+          {pathname.includes("magazine") && <MagazineIcon size={50} />}
+          {pathname.includes("static-page") && <StaticPageIcon size={50} />}
+          {pathname.includes("master-user") && <MasterUsersIcon size={50} />}
+          {pathname.includes("master-role") && <MasterRoleIcon size={50} />}
+          {/* <FormLayoutIcon width={50} height={50} /> */}
         </div>
       </div>
     </div>
diff --git a/public/files.png b/public/files.png
new file mode 100644
index 0000000000000000000000000000000000000000..707e82b3d0987f247ec96f063f7633463073854b
GIT binary patch
literal 11483
zcmeHNc~n!^w?4T93}BT(!3n_uQ4w)?GDCtBRRl!1pk)YFt5rd;K$%H!qG|z0r~-nv
z0$vcXqRh#4L`4RRDF_HrL^KFQAR#0qdFLi7{k^{R{(o!n7p&~_o%8K)?=#%9&xx(B
zPTy$E(f|N_v+3LQ+W<h|zX+hH!9T;1FU0T<DRi6DT2NR&=K}ynVAFa>&q)8iSBz)E
zIKSpkmh)F6Y%wr0+S0nr=gC!yS?#@V)@B;b*1nMLZf0iIbf%WRWY7IQIT!O6-7ZMY
z=N??R=tKLeUE0e`Z(j9sG4P?5Tr?H^UOqFk)5^T6yu3(a(=a4rv1)qastlVqQX7Wi
zVv}nmx6IvAdTU0@22bI$5c5LJ4a3~3WDTqHc{9=5(t$R4+pWK?ay+ymv++udcMTP=
zCdFSfHwxL9P?P!TcJ**z0^J{_he)&1P>#o*(8v+}Ma3I%XN)J+7qY4{HFdOre#tYn
z;2$Jed^(C26<`e*mU1v;kJG{sZ<2P1w{>U4FHB%{G-~YBSUo1jF!Asw9gw45H6$)o
ziPc#VH1thJ5%{tAk4H{pE~vl{70jN^p5$Z_f-&6?*XhGjZ4yaqrvY_%6cyY+1=d~0
zKueU(q=e|E>S}@78-EBA;y0kxS1^AMwBM^2wTY$C$mFd_Rh7)d;a7dJJ&Bru@@w+a
zLWFxFfTC4a1fkZc+7McBwa;-b9c8dES!7!TmrG8bu0^Vej=3$NP=I&Ww1kv=tkhqA
zf#vZ|<c~Cw*W)Eg=Aw92{IK)BpZ=ixpwz8sR{Ptk<V^u<NZQ4%8;@r?fyq81*Wi(%
zd>-^=rET5n<G3eDdqwz=W>qk$7}vRE@H!k71l84lEF*jA@l#Z9Kn)$zK^eDOt)tZx
z<4KUvq=hT|a1&BfFg~+`4Xjk6o6=$((dzp(GMCbx76bBnTB4a><4jdt)oiuM>#{#O
zAY2f2<laVIr7TmREQ#)=aaT-GPFs=ef&5e}OJ$Ntqce>>-0I!dq`|zCZ~KwkmL+5e
zb{4%mM$zJLV%ml%f>hpjDv)|FLUP3+UfU?73PvE=(ok>`33yQvEZD<9(du064ujWh
zj*#mY7$Nmt4sTFZ{FgPIA6y(f(V~i`2=O9>ES#oAirIfjFposyuClv?2j^jo6URZq
z4^YBY`DGbLD9qZI-IoX6W}%$D{nm}k5VEVD7Rf|+7C!_+9PGAnL-Tn-+bLSxx6#PU
z%2O{V>HzzZR67CtI_BogV!k9(G8P&ku5X6wM#yAlB|jv=yZ~b-9R&&9s_XGV)9>U=
zBtU9l5Opsr59=`;J?wu9B-m<-mK=`A8A?iLf{>~G>UKp~yv8IFa)TVJ)41R7fPoh%
zxSbMu`5g>{ZG99da$(|`kaA{A>^TrJsb77p3lj&<AyZ1Ae`d`;cdXN74vC8fd4@iy
zyooBQd}@<%<TK)3{5kMjr6iF()aiqEo;nN?gvk7CsYXhS3c|JOy+Hpk;K>>AA7$2W
zG+M~dEp!+azia#$nlzo%b2eC5fn>kDx3)$~hf~yoNhjy12R7hTca+h8ucM4oR(xzx
zM>6;}Pk3qc0LJSS*!<a~)8fMISiP0}apV52`Xo~04<6;AtUs`LE6a}Eh_j~M*v!R9
zs{e)ieP%{LsMlvXa0=rE3vKV{>b7j)o@t<I7i;FvGa!>;YW>h4;-CVvmuV|9@jsCi
z;pAzg+QQnqFsLAAzc53fpU+DX*j0GwTJ7M*LuAOR8>D<q3X@}bp4zz%6<}kvk*bKZ
zhTY$g&$9AWiLK5w@X`2XM7=G>vmCK!ozu12#C0T)Iz_?$JGhQ%jP6^uZ4L<456!A-
zSnNS5(Jgxd!6iQVDxK@Oi_+waLStR%2~&sdD<F6WH>UwF%EzdogZVes1W0NQ`+tWH
z`1Edf4Ly&$n9JRJKH1bjLS1#$Z)}j#C^hlIfXr&^CsUBp@-f@03~fyf3R5-h&9{l_
z?Lw%_6rUvh&6@4P!Q6&jvQG%YjSMX+OUC^!C(IAXlv+PgM<U9{OsX=1{kGD;va)GT
zHe0xb1pStiRa-Z63)86Kb3;?~wLndJ%)@Z9Yn0kaX1MVE!U!#^?!nI2-LbWY5hUR5
zHLJgNBDoGK8}Oa^gKJ|nGonXF98#jjna0>bn~fywtPkbmq0!(^Ke56bNu*-#wmBbG
zBveB-+~NySSE|Xvim{l?nv5=0GXCkE{~?0}`z(TKwat@n$ik{I%SdbbpV>^XJ!DC8
z*l&1;f+?@6@j4Pimw7aFNye$_KwEKreCFGgWSum_NOPDt2k5SqMKm6iMfmF6K2pMq
z?x}M)k54lJ<?gJuwML^b8_Wvv_H~QQ<-Q#M0belOn%2~BdO99D9XIkrYcleomfhu^
zq@hk>Y8BixBPT~fi=Ow+j(I6%V?&-X)w@0qg1Zx=4|Hs4bL8gLvhTYmQNChg6`1eq
z=cQDQg+h$S7tC`7Mz+P)k^8=uanC*Oz_&DTG$1KxUP$uZY|4*^)-0Ew?kO8fD{AdE
z&|vyYerk<VtrtMnlK$r<wv>!s7?C`d@j@f8w)oK<Evp_P&&uYf#XJu6m(`+uf_gHo
zD9*Z%h4d(0+Sh7Eu8$iHKIBQC1vk5S+jsd;3it{co^~7jbgY&Ug;jT)0q<{{=f3g|
zxBywSL=@$`q6J*2WgPikeD;fW0oN1+e^}mg+SE^0>)t1D{W4U(J&Zg{vZik(*{gCa
zHM|OLm>un=g$s(`KzaqC)aBxZrv9>1YIJ^``sdUw5JL`$ehKB~CA{ve$}?S^<zGO9
z3Xt3K!G)%D*(oxe@A4HSQ-F>|nU{#Wvq~Z8=4VjjYZ&ss%gyz}&rV5`U&ZxfSAWS_
zVj^&hO;`3DtMHXs&$gCjYJ8qsnTjbA6RK_UA#BtfiM?w%59s-xTwt)Mv5%Nom9x_1
zYhNvwcL%=}MJxu%mLn&7DPcr#!~5NO&xKWu-MFi7SM@nnY0Xd|tB)sr`!&O>$I=Lw
zE`DJ*s$l12=Jwa<U@7#d@e8?ESqY31jMcm1#xDQ&@bGXJi<Yl6w;Vw$=(6(kwt-Ad
zrgWJL&m=@0W=`WkhuNVw&ShiHGz*8L;KwREC+ZIFHp0KR`746)Yre85h%xwr*`&b8
zG6fIP!bTf3UWy*7(z?2>#ZQnlVp%kypRiW3@ssJ(Z*&V>yoQoc!S62hOTndOPggEL
zpg5MQqNkWxm>z%VTv5zkwEBhN<n{=k%;oX{3}crLw57PT)r;S?4988<WX9RM^cpvQ
zm>D^HM;5t#<AL|hKUa()MxmQjX^%KB<`UhNPM=OHojzMA$Xw0_k9}Q9rw^^Uok+{w
z%k^8o0rz`xJk~9@)*P%#+Xi;~y7bK>dh>RNXRvZjIm<PT4t6j99Xu|()VeOaX*GWu
zw4CfX79Xs{Y#qm7c@!&@e~-m(>edGrYfZqa!W^O2`{Bv$>paOHuSCvUZQ~bDI$a)y
z7<KL6KQ+O%0k4Jx{Lj|)gef?`B!A@`bMhq9eocBkFKkqm_U^1Y^Vj_A_GBA-l@Yz^
zq?l6{>CGPoHJQ)4b-+w-j~Gf=wA!Ne8)$29KY6AkeBmqM6~;@EZGWC>=u`BxYP_d&
zSLYjDuYCVe2{<zjFk6cJb?;Q&fC4Z``8srp)^w87V)MaSN*!m7>*#)UK6mkl)ofR#
zCL6{z`2%XQO|qqkqo8Z7{gv)qI7+e}RU}YqGG|<q&|gk6L-P!WFDZx77$2q_s#X5>
zeo>pEvmdm+c6Qmrlbqo}9d1=ZkbginK!|1WP;UfOIH0GSo}&8|RcN#n@oKr}y7xWw
z6nAxIJeV;KTzYkWzy+6#$YesEjIxiC*vhX8g&4bQ7yo6^ADK!R+YddNDzX?y?uW?R
zN$rDn1evn#pMpi*2>19_*2np(Fn->?Ov?5{rj~XdgjNU3Uiidc1ZBp*nX?xY34y-e
zfMe-Vc)3!R-Q%)cfSx>UD{pwIv;>S>IMBkI9sOWbY4IJmOu0Hg`+jO+LyJPNhvUg2
z)ViTVa<NcG<=Q`gmvWbEpdAScS0v<>@r1Nr&-ieDe!!<BrRCy3Ez~h+d3{4^IrATu
zL1=kir?i~-r^QeTEqD8rmV|#=1{j;Qi(Axe6?4UI+?lyoQ{tedQBP^H`ln^8!!=4|
z@$-4~=L%0RjHiZBtNP`V4R~F~Rl3q!^gnE)gzd(B`bz@$c>3b6VGNl1ye)HZD$1E1
zJYrVM5C}WbV1L<pRM|<=KP9V{E-^Pl$avoXuEJgi>`uRTr5l0%2k+9Cucv{6n~$AO
z0+Lpl2V%thuDcYhD#)>b-%-8Gc-!XF0J;A>pk!+>Cu7%x$YlJx{EDL#EqLfQ21p)a
zbY%bj+3+mWfmJxcqeS}>k``?`nCa=!Mxij*cyp`~GL7r1&IA~EoPDWvBOI*~E7Udu
zNW^A9-l|Gd<Giqdhp0X@{MRoOmV#AzId=#GMVJqn0?+C?faFO!?YQQ45)-_?iMjp@
zpIwJx&i`uq<1I|iXq@uDwRQ+=<Sh7~zR}XrxE4q6<bM$f@)BrI@>}ySUrKgxexDom
z@LzH??m<WF-|zq52A(^VZMxxKN?GJba~-`;01_WZU&%CKr0Nb18W@&6(I1_K=r1(_
z%MaW%T~ENSdwX-zkx<<QrMDc;&zSSu5*USzceF*%Elk22(>1D!vCGj-=2K$*(t8-W
zVu3o1n<F+OVn?R@I-Rdh3lP8{D-_l-THys1@G}1#$E74>mnwOp!GsRVc|D=Sgbowy
zLtf6rIytdlOl*t$C$@u$?O<X%nAi>`J|8B&lHgbW|Nrd(R>ZOB{d-E_m$B9i6Mi`=
zIAYKt=(3qJDE<{Ox>X?eM6=G$41$i5AE{SmV;!$v`@sv%)Ye$CCn_(&98B*AD2=h-
zqtZZw{m+8{n0$hG3y>IL23Gm-rh#A#^WHmSi!qIfFHV^1$?2*bd$|-|u%>4sT-$tJ
z?dr+!cu5O5k29`gJz-HbaNO&zB>oyyaD4I+1u<j(E>v)J`M`Ft+k&$M_`{;(xt%L6
z021;$nZ?HZpLfGc?PobQs(5Y1*o6zvFvVa8k>CQ%{AJL0k*C395TU`$^^>3AxJJyo
zwZ=nT%P8a$E~LwR$R#4qhbse}q{n{OBfL0!-#$v;!UPH0NCQhu=CZ@1aus~CKp;YA
z2)w;n*6Vf>9&e<K<zvx1b0gqALK{yHunVzxyDz5LCQfB++*e!rJ>iIVX-d)9d>ZV!
zO*4=o4VD~W2F0s0pJ6s?IK2>~o_(!wNZ*Vf3hSZ?JTEqxw#UyvB|xI?6<izg+h&M7
zr6<Zq1rJ|!Tmg>*3w8m!n^-&xyPPp^C834BDPI*8{C#ks&;tZgi}y(Gt}%!Y+8dX5
z-_h{UBeoaHD1KdTa1plb(Ggw5qTiMKkDYJsn+9YCOb?5=TLZ7+e|hNU#nC+|>}J8c
zFr-VBRe;^0uH*ElfyV^}UBRUGb0Q%oemeOS5tg#W30d&T#dVDSQB(-Y9>`ST>SDZV
zRB(QBlA^(kgia5XQQBLn4KCJ&Phq;eosI36IGHJRaMBl*qJpt{ctv=tx}Q`mb(6Q{
zg0@@|tj@z+angu&MWtK!!rR`L{v)8plU0SWR^Q)6i2t2t)$drmb8ke5U}X{1g0F)F
zNYX)DC#6NU2bPp6T1I?lq;0D7WxU9(mktMDIa8P}?@GNm)N=8rgp`IA7YRXsMmoPk
z8GpXIZrF{(Mh~6UnJ#-JJ!Wj%`@0q6s0Xrp<Wb&?tz!8d8$sL@Q<&0Ke}I;wvTbPG
zzT;0l5m+$S5~ZNG<A&ujz1-@%^HlL~PWSVT)AT@FFe#8dy;z#6VD#G}K0BWWBjk}b
z{799yCmps(|4ZnNFsiW2>GM_-A#~OVG#p{W%J%LjO_?E!Ng+tbuGn5<HC*^J^#&%3
zLhaYw-$M{f)s6H+gXHVQ52bL1#n0l-Y94rq3Q{p~*_!08X;6S))T^#wtmPKcXGd&R
znOSO)?`j8&(-<8b>fulKo2leonI6{auqUCmi0Un$@>Cz?q>s!jeK!rtU3*QYhu^>L
zAmnx4l}Vb}mZ|RlMbN9!9BanJW0<(PhCO_<XfasTp^F5ZljLFITc`k?xlu8%@^E&U
z%v_#jKa4gEe~%ccP>n(Vhq#@nRDeZ)f4qs%?13t4gqN5tO~Ay*M5bng2vq-<eWc<g
ztUOG%6SZHkj#ymD^N}|CP@8ODXYi>l^vFE$c-h|XLEzc8&dDwDwgHk&hh<p6yMr*4
zcswHKirq%pd)a5=7Qty%n4^Z<*X8=@3xo}msMhNOiSGKB@$X<_u{xu1;O0>>o;lF4
zE52(OlqKGh{)`JFeuT<jK7Yl6aMe<;MJ66>_Ln-c4J$uI`118Nn9qJHWt6<X^6Y)8
zM;40G-BF(zLGt5@;96}CkVK4?rikU6(dwZ*{XV`8^vF01w08<T@_F5;;3Ot~hPB2w
zo+h%h#e++wOW(2viZGaxZTUR?kvZ{8Zox@(4&m-8G-OC44wlY{+<{8}Opi-1g3AV;
zs2(U+WlJ;8_OXXc<zq1pQ}y1%$m`)pMqWxy?@(9spJCC_sJ%oiuab6_$^+#LxA!u&
z%q)0Itsa|=#l!U}2a`z_$Zkp5)g!JRi42ciz`q5K)4hVTpvPn(d|D&f;ShVa6M<zk
zI6X*+Ev#8*8X2zKNR*1;0uB-~;qABUX&BUfgrJn&@KMDhjtNn$flDeazyw}{>;B;e
zR-Go+bS4enb?^3#LtrV75S9EhtTEd<ipdl33F-dNw8{1WRaIEWrJXHtycmqf_~^i)
z!E}2zO>_nm=Ufc7A1Sm|#dEzml|M~eq)TiUSCQaCtgqBd+UgF$cBNQHWmk+Pv5k?V
zVHpO$3{MAechX1HHWHbMx56c-ILnn(TrKSz;biHBtT;=w{d+nr>%0onWD-xSCe8VE
zA(8aqL`lH%6~ax#coF3P`C~AA>!fKlV-qo9dg0?6{9uJDUh2v5{udlY1zYjE-$F;U
zwtK_x$e)|cz-3>QN=Mx$Z&!A3fat&<cCeAJf(oKYnhO;3$^||XY;mpuqBoehpLy&I
zvBMSTz*@-1Yr8<8T<f$Ud{s1=@GQU`Hr>9Z2DHrR*nwtg^FR9qCwD?-*f-3ga`6#n
zFeUOcUpT>W*9tW}*Nej#|FP;i=6|c>W^`8G0T9RwzK(ed-$g_dyvq`pZr~s@tj+wx
z9Jp75f$LaGMPIs5Krm|D44wL$V+|~l;qT3AzMtiTi$s9_D;2IaDmaG<jxv*!{Erj-
zuf%}Bg`MswUAuUtG6GtVslD%75W5zwF2yeE@Rh&Uo5O;cZP`)KvYqvb$B2r<YZOXa
zv59WD+Ys(1R3OYZoHl%wc}6inh(DBq&pr=Yek9%zvc!&#4H{N66@lu3dXOZ}8qA~~
zxFsiJ;@_ATl%Tl~6v8e6Ex-7?qn-N2s}!u@gFt}vr_BJf&rzq%C|gEI&D{cX2r#ab
zirs^<kiaZ85iDwvkZK}Z7->+REEUmROdLeAR0NT01$!=Ly#+004i#9(c9cyG*t?Ke
zMduKm*Qd<|Bah*UOLi|@i##Jqk$KtBH==Zy)L-h&@xgdqD#?oUrMW_-15H%%M<Z33
z*a;QntE4IoaK$D2=ED3Dz36pA{B`*MrQk1wFSsP>e?Nd}Q92^Mgo&F_fvHNN0s}Ws
zB!F5w)#cJGFaqwdjrpyZ_&64Q5N}p0>_-C`2SwVtIg@bv(<WY=G%rrGzkKTza9b&v
z6Nwb!R8}LlAn{+@xD{f}D94Z`9#Oe$z_(D0e$bqs)7yEcS{flvmcR^`(3AE3<sSFU
z+2Xy&7}d70sz*Zh>cY|-(;u`?7VJO;PkW6-AF=4a>R5H&iu2$UNOIBxr(`Wq>J%4?
z#{DHQoYgMla)ntvc5mdeUwhg6LL?tpM~GQGcL`BkeIqA%b=}{8vb3%UzE%dCHn^@Y
JTpMuszX8ansv`gZ

literal 0
HcmV?d00001

diff --git a/public/no-image.jpg b/public/no-image.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d84a9b47a785bbbe139b1b194eb4c9317878e47c
GIT binary patch
literal 13161
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
J5)kKK{|!ToFERiC

literal 0
HcmV?d00001

diff --git a/service/master-user.ts b/service/master-user.ts
index 629635a..ea711a3 100644
--- a/service/master-user.ts
+++ b/service/master-user.ts
@@ -3,6 +3,9 @@ import {
   httpGet,
   httpPost,
 } from "./http-config/axios-base-service";
+import Cookies from "js-cookie";
+
+const token = Cookies.get("access_token");
 
 export async function listMasterUsers(data: any) {
   const headers = {
@@ -34,6 +37,7 @@ export async function postSignIn(data: any) {
 export async function getProfile() {
   const headers = {
     "content-type": "application/json",
+    Authorization: `Bearer ${token}`,
   };
   return await httpGet(`/users/info`, headers);
 }
diff --git a/styles/globals.css b/styles/globals.css
index 315d878..e91db55 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -77,3 +77,18 @@
     clip-path: polygon(0 0, 100% 50%, 0 100%);
   }
 }
+
+.ck-editor__editable_inline:not(.ck-comment__input *) {
+  height: 300px;
+  overflow-y: auto;
+}
+
+body {
+  height: 100%; /* Pastikan tinggi body penuh */
+  overflow: hidden; /* Nonaktifkan scrolling global */
+}
+
+main {
+  height: 100vh; /* Pastikan tinggi main sesuai viewport */
+  overflow-y: auto; /* Aktifkan scrolling hanya di elemen main */
+}