feat:drone

2026-02-25 21:40:03 +07:00
4781 changed files with 19172 additions and 425651 deletions
--- a/.env
+++ b/.env
@ -1 +0,0 @@
-NEXT_PUBLIC_MAPS_API_KEY=AIzaSyCOkxoeKykE60L_nM4VS1JYJqBmqy2GA0Q
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -7,26 +7,23 @@ build-dev:
  when: on_success
  only:
    - main
-    - dev-restructure
-    - prod
-  image: docker:25.0.3-cli
+  image: docker:stable
  services:
-    - name: docker:25.0.3-dind
-      command: ["--insecure-registry=38.47.185.86:8900"]
+  - name: docker:dind
+    command: ["--insecure-registry=103.82.242.92:8900"]
  script:
    - docker logout
-    - docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 38.47.185.86:8900
-    - docker build -t 38.47.185.86:8900/humas/web-humas-fe:prod .
-    - docker push 38.47.185.86:8900/humas/web-humas-fe:prod
-# auto-deploy:
-#   stage: deploy
-#   when: on_success
-#   only:
-#     - main
-#     - dev-restructure
-#     - dev-main
-#   image: curlimages/curl:latest
-#   services:
-#     - docker:dind
-#   script:
-#     - curl --user admin:$JENKINS_PWD http://38.47.180.165:8080/job/autodeploy-humas/build?token=autodeployhumas
+    - docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 103.82.242.92:8900
+    - docker build -t 103.82.242.92:8900/humas/web-humas-fe:dev .
+    - docker push 103.82.242.92:8900/humas/web-humas-fe:dev
+
+auto-deploy:
+  stage: deploy
+  when: on_success
+  only:
+    - main
+  image: curlimages/curl:latest
+  services:
+    - docker:dind
+  script:
+    - curl --user cekmedsos:$JENKINS_PWD http://103.82.242.92:8080/job/autodeploy-humas/build?token=autodeployhumas
--- a/96
+++ b/96
@ -1,98 +1,24 @@
-# FROM node:23.5.0-alpine
+FROM node:21-alpine

-# ENV PORT 4000
-
-# # pnpm install globally
-# RUN npm install -g pnpm
-
-# # Create app directory
-# RUN mkdir -p /usr/src/app
-# WORKDIR /usr/src/app
-
-# # Installing dependencies
-# COPY package.json pnpm-lock.yaml ./
-
-# # Copy ckeditor5 to workdir
-# COPY vendor/ckeditor5 ./vendor/ckeditor5
-
-# # Install dependencies
-# RUN pnpm install --frozen-lockfile
-
-# # RUN npm install --force
-# # RUN npm install -g npm@latest
-# # RUN npm install
-
-# # Copying source files
-# COPY . .
-
-# # Building app
-# RUN pnpm run build
-
-# EXPOSE 4000
-
-# # Running the app
-# CMD ["pnpm", "run", "start"]
-
-# FROM node:23.5.0-alpine
-
-# ENV PORT 4000
-
-# # Install Yarn globally
-# # RUN npm install -g yarn
-
-# # Create app directory
-# RUN mkdir -p /usr/src/app
-# WORKDIR /usr/src/app
-
-# # Copy package.json and yarn.lock
-# COPY package.json yarn.lock ./
-
-# # Copy ckeditor5 to workdir
-# COPY vendor/ckeditor5 ./vendor/ckeditor5
-
-# # Install dependencies
-# RUN yarn install --frozen-lockfile
-
-# # Copying source files
-# COPY . .
-
-# # Building app
-# RUN yarn build
-
-# EXPOSE 4000
-
-# # Running the app
-# CMD ["yarn", "start"]
-
-# Gunakan image Node.js
-FROM node:23.5.0-alpine
-
-# Tentukan port yang akan digunakan
 ENV PORT 4000

-# Buat direktori aplikasi
+# Create app directory
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app

-# Salin file package.json dan lock file
-COPY package.json package-lock.json ./
+# Installing dependencies
+COPY package*.json /usr/src/app/

-# Salin ckeditor5 ke dalam workdir
-COPY vendor/ckeditor5 ./vendor/ckeditor5
-
-# Instal dependensi
+# RUN npm install --force
 RUN npm install -g npm@latest
-RUN npm install next --legacy-peer-deps
-# Salin semua file proyek
-# COPY . .
+RUN npm install
+
+# Copying source files
 COPY . /usr/src/app

-
-# Bangun aplikasi
+# Building app
 RUN npm run build
-
-# Ekspos port aplikasi
 EXPOSE 4000

-# Jalankan aplikasi
-CMD ["npm", "run", "start"]
+# Running the app
+CMD "npm" "run" "start"
--- a/app/(admin)/admin/advertise/page.tsx
+++ b/app/(admin)/admin/advertise/page.tsx
@ -1,316 +0,0 @@
-"use client";
-import { AddIcon, CloudUploadIcon, TimesIcon } from "@/components/icons";
-import AdvertiseTable from "@/components/table/advertise/advertise-table";
-
-import {
-  Button,
-  Card,
-  Chip,
-  Input,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  Radio,
-  RadioGroup,
-  Switch,
-  Textarea,
-  useDisclosure,
-} from "@heroui/react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import * as z from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Controller, useForm } from "react-hook-form";
-import { Fragment, useEffect, useState } from "react";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-
-import { useDropzone } from "react-dropzone";
-import { close, error, loading } from "@/config/swal";
-import Image from "next/image";
-import {
-  createAdvertise,
-  createMediaFileAdvertise,
-} from "@/services/advertisement";
-
-const createArticleSchema = z.object({
-  title: z.string().min(2, {
-    message: "Judul harus diisi",
-  }),
-  url: z.string().min(1, {
-    message: "Link harus diisi",
-  }),
-  description: z.string().min(2, {
-    message: "Deskripsi harus diisi",
-  }),
-});
-
-export default function AdvertisePage() {
-  const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
-  const MySwal = withReactContent(Swal);
-
-  const [refresh, setRefresh] = useState(false);
-  const [placement, setPlacement] = useState("banner");
-
-  const [files, setFiles] = useState<File[]>([]);
-
-  const formOptions = {
-    resolver: zodResolver(createArticleSchema),
-    defaultValues: { title: "", description: "", url: "" },
-  };
-
-  const { getRootProps, getInputProps } = useDropzone({
-    onDrop: (acceptedFiles) => {
-      setFiles(acceptedFiles.map((file) => Object.assign(file)));
-    },
-    maxFiles: 1,
-    accept:
-      placement === "banner"
-        ? {
-            "image/*": [],
-            "video/*": [],
-          }
-        : { "image/*": [] },
-  });
-  type UserSettingSchema = z.infer<typeof createArticleSchema>;
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<UserSettingSchema>(formOptions);
-
-  const onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
-    loading();
-    const formData = {
-      title: values.title,
-      description: values.description,
-      placement: placement,
-      redirectLink: values.url,
-    };
-    const res = await createAdvertise(formData);
-    if (res?.error) {
-      error(res?.message);
-      return false;
-    }
-
-    const idNow = res?.data?.data?.id;
-
-    if (files.length > 0) {
-      const formFiles = new FormData();
-      formFiles.append("file", files[0]);
-      const resFile = await createMediaFileAdvertise(idNow, formFiles);
-    }
-
-    close();
-    MySwal.fire({
-      title: "Sukses",
-      icon: "success",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "OK",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        setRefresh(!refresh);
-      }
-    });
-  };
-
-  const handleRemoveFile = (file: File) => {
-    const uploadedFiles = files;
-    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
-    setFiles([...filtered]);
-  };
-
-  return (
-    <div className="overflow-x-hidden overflow-y-scroll">
-      <div className="px-2 md:px-4 md:py-4 w-full">
-        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
-          <Button
-            size="md"
-            className="bg-[#F07C00] text-white w-full lg:w-fit"
-            onPress={onOpen}
-          >
-            Buat Baru
-            <AddIcon />
-          </Button>
-          <AdvertiseTable triggerRefresh={refresh} />
-        </div>
-      </div>
-      <Modal isOpen={isOpen} onOpenChange={onOpenChange} size="3xl">
-        <ModalContent>
-          {() => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">
-                Advertise
-              </ModalHeader>
-              <ModalBody>
-                <form
-                  onSubmit={handleSubmit(onSubmit)}
-                  className="flex flex-col gap-3"
-                >
-                  <div className="flex flex-col gap-1">
-                    <p className="text-sm">Judul</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?.description && (
-                      <p className="text-red-400 text-sm">
-                        {errors.description?.message}
-                      </p>
-                    )}
-                  </div>
-                  <div className="flex flex-col gap-1">
-                    <p className="text-sm">Link</p>
-                    <Controller
-                      control={control}
-                      name="url"
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          type="text"
-                          id="url"
-                          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?.url && (
-                      <p className="text-red-400 text-sm">
-                        {errors.url?.message}
-                      </p>
-                    )}
-                  </div>
-
-                  <p className="text-sm mt-3">Penempatan</p>
-                  <RadioGroup
-                    label=""
-                    orientation="horizontal"
-                    size="sm"
-                    value={placement}
-                    onValueChange={setPlacement}
-                  >
-                    <Radio value="banner">Banner</Radio>
-                    <Radio value="jumbotron">Jumbotron</Radio>
-                  </RadioGroup>
-                  <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">
-                        <Image
-                          src={URL.createObjectURL(files[0])}
-                          className="w-[30%]"
-                          alt="thumbnail"
-                          width={480}
-                          height={480}
-                        />
-                        <Button
-                          className=" border-none rounded-full"
-                          variant="bordered"
-                          onPress={() => handleRemoveFile(files[0])}
-                        >
-                          <TimesIcon />
-                        </Button>
-                      </div>
-                    )}
-                  </div>
-                  <ModalFooter className="self-end grow items-end">
-                    <Button
-                      color="primary"
-                      type="submit"
-                      // isDisabled={files.length < 1}
-                    >
-                      Simpan
-                    </Button>
-                    <Button color="danger" variant="light" onPress={onClose}>
-                      Tutup
-                    </Button>
-                  </ModalFooter>
-                </form>
-              </ModalBody>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </div>
-  );
-}
--- a/app/(admin)/admin/article/create/page.tsx
+++ b/app/(admin)/admin/article/create/page.tsx
@ -1,12 +1,10 @@
-import CreateArticleForm from "@/components/form/article/create-article-form";
-import FormArticle from "@/components/form/form-article";
-import { Card } from "@heroui/react";
+import FormArticle from '@/components/form/form-article'
+import { Card } from '@nextui-org/react'

 export default function CreateArticle() {
-  return (
-    <div className="bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
-      {/* <FormArticle /> */}
-      <CreateArticleForm />
-    </div>
-  );
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormArticle />
+        </Card>
+    )
 }
--- a/app/(admin)/admin/article/detail/[id]/page.tsx
+++ b/app/(admin)/admin/article/detail/[id]/page.tsx
@ -1,10 +1,10 @@
-import EditArticleForm from "@/components/form/article/edit-article-form";
+import FormDetailArticle from '@/components/form/form-detail-article'
+import { Card } from '@nextui-org/react'

 export default function DetailArticlePage() {
-  return (
-    <div className="h-[96vh] bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
-      {/* <FormDetailArticle /> */}
-      <EditArticleForm isDetail={true} />
-    </div>
-  );
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormDetailArticle />
+        </Card>
+    )
 }
--- a/app/(admin)/admin/article/edit/[id]/page.tsx
+++ b/app/(admin)/admin/article/edit/[id]/page.tsx
@ -1,9 +1,10 @@
-import EditArticleForm from "@/components/form/article/edit-article-form";
+import FormUpdateArticle from '@/components/form/form-edit-article'
+import { Card } from '@nextui-org/react'

 export default function UpdateArticlePage() {
-  return (
-    <div className="h-[96vh] bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
-      <EditArticleForm isDetail={false} />
-    </div>
-  );
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormUpdateArticle />
+        </Card>
+    )
 }
--- a/app/(admin)/admin/article/generate/edit/[id]/page.tsx
+++ b/app/(admin)/admin/article/generate/edit/[id]/page.tsx
@ -1,27 +0,0 @@
-"use client";
-import EditGeneratedArticleChecker from "@/components/form/article/edit-generated-article-checker-form";
-import EditGeneratedArticleContent from "@/components/form/article/edit-generated-article-content-form";
-import { Card } from "@heroui/react";
-import { Tab, Tabs } from "@heroui/react";
-
-import { useParams } from "next/navigation";
-
-export default function EditGeneratedArticlePage() {
-  const params = useParams();
-  const id = String(params.id);
-
-  return (
-    <Card className="rounded-md border bg-transparent p-6 overflow-auto">
-      <div className="flex flex-col gap-2">
-        <Tabs aria-label="Options">
-          <Tab key="content" title="Content">
-            <EditGeneratedArticleContent id={id} />
-          </Tab>
-          <Tab key="checker" title="Checker">
-            <EditGeneratedArticleChecker id={id} />
-          </Tab>
-        </Tabs>
-      </div>
-    </Card>
-  );
-}
--- a/app/(admin)/admin/article/generate/page.tsx
+++ b/app/(admin)/admin/article/generate/page.tsx
@ -1,10 +0,0 @@
-import GenerateArticleForm from "@/components/form/article/generate-article-form";
-import { Card } from "@heroui/react";
-
-export default function GenerateArticle() {
-  return (
-    <Card className="rounded-md border bg-transparent">
-      <GenerateArticleForm />
-    </Card>
-  );
-}
--- a/app/(admin)/admin/article/page.tsx
+++ b/app/(admin)/admin/article/page.tsx
@ -1,29 +1,24 @@
-"use client";
+"use client"
 import { AddIcon } from "@/components/icons";
 import ArticleTable from "@/components/table/article-table";
-import generatedArticleIds from "@/store/generated-article-store";
-import { Button, Card } from "@heroui/react";
+import { Button, Card } from "@nextui-org/react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";

 export default function BasicPage() {
-  return (
-    <div className="overflow-x-hidden overflow-y-scroll">
-      <div className="px-2 md:px-4 md:py-4 w-full">
-        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
-          <Link href="/admin/article/create">
-            <Button
-              size="md"
-              className="bg-[#F07C00] text-white w-full lg:w-fit"
-            >
-              Tambah Artikel
-              <AddIcon />
-            </Button>
-          </Link>
-
-          <ArticleTable />
+    return (
+        <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2 ml-4">
+            <div className="px-4">
+                <Card className="rounded-md my-5 pl-5 py-2">
+                    <Link href="/admin/article/create">
+                        <Button size="md" color="primary" className="w-min">
+                            <AddIcon />New Article
+                        </Button>
+                    </Link>
+                </Card>
+                <Card className="rounded-md my-5">
+                    <ArticleTable />
+                </Card>
+            </div>
        </div>
-      </div>
-    </div>
-  );
+    );
 }
--- a/app/(admin)/admin/comment/page.tsx
+++ b/app/(admin)/admin/comment/page.tsx
@ -1,13 +0,0 @@
-import CommentTable from "@/components/table/comment/comment-table";
-
-export default function AdvertisePage() {
-  return (
-    <div className="overflow-x-hidden overflow-y-scroll">
-      <div className="px-2 md:px-4 md:py-4 w-full">
-        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
-          <CommentTable />
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/app/(admin)/admin/comment/review/[id]/page.tsx
+++ b/app/(admin)/admin/comment/review/[id]/page.tsx
@ -1,247 +0,0 @@
-"use client";
-import { close, error, loading } from "@/config/swal";
-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 "@heroui/input";
-import { Button } from "@heroui/button";
-import { useParams, useRouter } from "next/navigation";
-import { getCommentById, saveCommentStatus } from "@/services/comment";
-import {
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  useDisclosure,
-} from "@heroui/react";
-import { getArticleById } from "@/services/article";
-import Link from "next/link";
-import { postArticleComment } from "@/services/master-user";
-import Cookies from "js-cookie";
-
-interface DetailComments {
-  id: number;
-  message: string;
-  articleId: number;
-  commentFromName: string;
-}
-
-export default function ReviewComment() {
-  const MySwal = withReactContent(Swal);
-  const { isOpen, onOpen, onOpenChange } = useDisclosure();
-
-  const params = useParams();
-  const id = Number(params?.id);
-  const router = useRouter();
-  const [replyValue, setReplyValue] = useState("");
-
-  const [detailData, setDetailData] = useState<DetailComments>();
-  const [detailArticle, setDetailArticle] = useState<{
-    id: number;
-    slug: string;
-    title: string;
-  }>();
-  useEffect(() => {
-    initFetch();
-  }, []);
-
-  const initFetch = async () => {
-    loading();
-    const res = await getCommentById(id);
-    setDetailData(res?.data?.data);
-    const resArticle = await getArticleById(res?.data?.data?.articleId);
-    setDetailArticle(resArticle?.data?.data);
-    close();
-  };
-
-  const handleCommentStatus = async (statusId: number) => {
-    MySwal.fire({
-      title: "Submit Data",
-      text: "",
-      icon: "warning",
-      showCancelButton: true,
-      cancelButtonColor: "#d33",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "Simpan",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        saveStatus(statusId);
-      }
-    });
-  };
-
-  const saveStatus = async (statusId: number) => {
-    const req = { id: id, statusId: statusId };
-    const res = await saveCommentStatus(req);
-    if (res?.error) {
-      error(res.message);
-      return false;
-    }
-    successSubmit("/admin/comment");
-  };
-
-  function successSubmit(redirect: string) {
-    MySwal.fire({
-      title: "Sukses",
-      icon: "success",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "OK",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        router.push(redirect);
-      }
-    });
-  }
-
-  const sendComment = async () => {
-    const data = {
-      commentFromEmail: "ppid@polri.go.id",
-      commentFromName: "Mabes Polri",
-      articleId: detailData?.articleId,
-      isPublic: true,
-      message: replyValue,
-      parentId: id,
-    };
-
-    const res = await postArticleComment(data);
-    if (res?.error) {
-      error(res?.message);
-      return false;
-    }
-    saveStatus(2);
-  };
-
-  return (
-    <div className="p-8">
-      <div className="bg-white text-black shadow-lg p-4 rounded-lg flex flex-col gap-3 text-sm w-full lg:w-1/2">
-        <div className="flex flex-col gap-1">
-          <p>Artikel</p>
-          <Link
-            target="_black"
-            className="text-primary hover:underline w-fit"
-            href={`/news/detail/${detailArticle?.id}-${detailArticle?.slug}`}
-          >
-            {detailArticle?.title}
-          </Link>
-        </div>
-        <div className="flex flex-col gap-1">
-          <p>Nama</p>
-          <Input
-            type="text"
-            id="username"
-            placeholder=""
-            label=""
-            isReadOnly
-            value={detailData?.commentFromName}
-            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"
-          />
-        </div>
-        <div className="flex flex-col gap-1">
-          <p>Komentar</p>
-          <Textarea
-            type="text"
-            id="address"
-            placeholder=""
-            label=""
-            value={detailData?.message}
-            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"
-          />
-        </div>
-        <div className="flex flex-col gap-1">
-          <p>Status</p>
-          <div className="flex flex-row gap-3">
-            <Button
-              onPress={() => handleCommentStatus(1)}
-              color="success"
-              className="w-fit text-white"
-            >
-              Setujui
-            </Button>
-            <Button onPress={onOpen} color="primary" className="w-fit">
-              Balas
-            </Button>
-            <Button
-              onPress={() => handleCommentStatus(3)}
-              color="danger"
-              className="w-fit"
-            >
-              Tolak
-            </Button>
-          </div>
-        </div>
-        <div className="w-full justify-end flex">
-          <Button
-            onPress={router.back}
-            color="danger"
-            variant="bordered"
-            className="w-fit"
-          >
-            Kembali
-          </Button>
-        </div>
-      </div>
-      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">
-                Komentar Balasan
-              </ModalHeader>
-              <ModalBody>
-                <Textarea
-                  type="text"
-                  id="address"
-                  placeholder=""
-                  label=""
-                  value={replyValue}
-                  onValueChange={setReplyValue}
-                  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"
-                />
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button
-                  isDisabled={replyValue.length < 2}
-                  color="primary"
-                  onPress={() => sendComment()}
-                >
-                  Submit
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </div>
-  );
-}
--- a/app/(admin)/admin/dashboard/page.tsx
+++ b/app/(admin)/admin/dashboard/page.tsx
@ -1,11 +1,11 @@
 import DashboardContainer from "@/components/main/dashboard/dashboard-container";

 export default function AdminPage() {
-  return (
-    <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid">
-      <div className="lg:px-4 !w-screen lg:!w-auto">
-        <DashboardContainer />
-      </div>
-    </div>
-  );
-}
+    return (
+        <div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
+            <div className="px-4">
+                <DashboardContainer />
+            </div>
+        </div>
+    )
+}
--- a/app/(admin)/admin/e-magazine/create/page.tsx
+++ b/app/(admin)/admin/e-magazine/create/page.tsx
@ -0,0 +1,11 @@
+import CreateMagazineForm from '@/components/form/magazine/magazine-form'
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import React from 'react'
+
+const AdminMagazineCreate = () => {
+    return (
+        <div><CreateMagazineForm /></div>
+    )
+}
+
+export default AdminMagazineCreate
--- a/app/(admin)/admin/e-magazine/detail/page.tsx
+++ b/app/(admin)/admin/e-magazine/detail/page.tsx
--- a/app/(admin)/admin/e-magazine/page.tsx
+++ b/app/(admin)/admin/e-magazine/page.tsx
@ -0,0 +1,10 @@
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import React from 'react'
+
+const AdminMagazine = () => {
+    return (
+        <div><MagazineTable /></div>
+    )
+}
+
+export default AdminMagazine
--- a/app/(admin)/admin/feedbacks/page.tsx
+++ b/app/(admin)/admin/feedbacks/page.tsx
@ -1,13 +0,0 @@
-import SuggestionsTable from "@/components/table/suggestions/suggestions-table";
-
-export default function SuggestionsPage() {
-  return (
-    <div className="overflow-x-hidden overflow-y-scroll">
-      <div className="px-2 md:px-4 md:py-4 w-full">
-        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
-          <SuggestionsTable />
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/app/(admin)/admin/magazine/create/page.tsx
+++ b/app/(admin)/admin/magazine/create/page.tsx
@ -1,13 +0,0 @@
-import NewCreateMagazineForm from "@/components/form/magazine/create-magazine-form";
-import CreateMagazineForm from "@/components/form/magazine/magazine-form";
-import React from "react";
-
-const AdminMagazineCreate = () => {
-  return (
-    <div className="h-[96vh] bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
-      <NewCreateMagazineForm />
-    </div>
-  );
-};
-
-export default AdminMagazineCreate;
--- a/app/(admin)/admin/magazine/detail/[id]/page.tsx
+++ b/app/(admin)/admin/magazine/detail/[id]/page.tsx
@ -1,9 +0,0 @@
-import EditMagazineForm from "@/components/form/magazine/edit-magazine-form";
-
-export default function DetailArticlePage() {
-  return (
-    <div className="h-[96vh] bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
-      <EditMagazineForm isDetail={true} />
-    </div>
-  );
-}
--- a/app/(admin)/admin/magazine/edit/[id]/page.tsx
+++ b/app/(admin)/admin/magazine/edit/[id]/page.tsx
@ -1,9 +0,0 @@
-import EditMagazineForm from "@/components/form/magazine/edit-magazine-form";
-
-export default function EditArticlePage() {
-  return (
-    <div className="h-[96vh] bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
-      <EditMagazineForm isDetail={false} />
-    </div>
-  );
-}
--- a/app/(admin)/admin/magazine/page.tsx
+++ b/app/(admin)/admin/magazine/page.tsx
@ -1,26 +0,0 @@
-"use client";
-import { AddIcon } from "@/components/icons";
-import MagazineTable from "@/components/table/magazine/magazine-table";
-import { Button } from "@heroui/react";
-import Link from "next/link";
-
-export default function MagazineTablePage() {
-  return (
-    <div className="overflow-x-hidden overflow-y-scroll">
-      <div className="px-2 md:px-4 md:py-4 w-full">
-        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
-          <Link href="/admin/magazine/create">
-            <Button
-              size="md"
-              className="bg-[#F07C00] text-white w-full lg:w-fit"
-            >
-              Tambah Majalah
-              <AddIcon />
-            </Button>
-          </Link>
-          <MagazineTable />
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/app/(admin)/admin/master-category/page.tsx
+++ b/app/(admin)/admin/master-category/page.tsx
@ -1,418 +0,0 @@
-"use client";
-import { AddIcon, CloudUploadIcon, TimesIcon } from "@/components/icons";
-import ArticleTable from "@/components/table/article-table";
-import CategoriesTable from "@/components/table/master-categories/categories-table";
-import generatedArticleIds from "@/store/generated-article-store";
-import {
-  Button,
-  Card,
-  Chip,
-  Input,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  Textarea,
-  useDisclosure,
-} from "@heroui/react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import * as z from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Controller, useForm } from "react-hook-form";
-import { Fragment, useEffect, useState } from "react";
-import { getArticleByCategory } from "@/services/article";
-import ReactSelect from "react-select";
-import makeAnimated from "react-select/animated";
-import { useDropzone } from "react-dropzone";
-import { close, error, loading } from "@/config/swal";
-import {
-  createCategory,
-  uploadCategoryThumbnail,
-} from "@/services/master-categories";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import Image from "next/image";
-import { getUnixTimestamp } from "@/utils/global";
-
-const categorySchema = z.object({
-  id: z.number(),
-  label: z.string(),
-  value: z.number(),
-});
-
-const createArticleSchema = z.object({
-  title: z.string().min(2, {
-    message: "Judul harus diisi",
-  }),
-  description: z.string().min(2, {
-    message: "Deskripsi harus diisi",
-  }),
-  tags: z.array(z.string()),
-  // parent: z.array(categorySchema).nonempty({
-  //   message: "Kategori harus memiliki setidaknya satu item",
-  // }),
-  // tags: z.array(z.string()).nonempty({
-  //   message: "Minimal 1 tag",
-  // }),
-});
-
-interface CategoryType {
-  id: number;
-  label: string;
-  value: number;
-}
-
-export default function MasterCategoryTable() {
-  const router = useRouter();
-  const MySwal = withReactContent(Swal);
-
-  const animatedComponents = makeAnimated();
-  const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
-  const [listCategory, setListCategory] = useState<CategoryType[]>([]);
-  const [files, setFiles] = useState<File[]>([]);
-  const [refresh, setRefresh] = useState(false);
-  const [tag, setTag] = useState("");
-  const [selectedParent, setSelectedParent] = useState<any>();
-  const [selectedParentValidation, setSelectedParentValidation] = useState("");
-
-  const formOptions = {
-    resolver: zodResolver(createArticleSchema),
-    defaultValues: { title: "", description: "", tags: [] },
-  };
-
-  const { getRootProps, getInputProps } = useDropzone({
-    onDrop: (acceptedFiles) => {
-      setFiles(acceptedFiles.map((file) => Object.assign(file)));
-    },
-    maxFiles: 1,
-  });
-  type UserSettingSchema = z.infer<typeof createArticleSchema>;
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    getValues,
-    watch,
-    setError,
-    clearErrors,
-  } = useForm<UserSettingSchema>(formOptions);
-
-  useEffect(() => {
-    fetchCategory();
-  }, []);
-
-  const fetchCategory = async () => {
-    const res = await getArticleByCategory(getUnixTimestamp());
-    if (res?.data?.data) {
-      setupCategory(res?.data?.data);
-    }
-  };
-
-  const setupCategory = (data: any) => {
-    const temp = [];
-    for (const element of data) {
-      temp.push({
-        id: element.id,
-        label: element.title,
-        value: element.id,
-      });
-    }
-    setListCategory(temp);
-  };
-
-  const onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
-    loading();
-    const formData = {
-      title: values.title,
-      statusId: 1,
-      parentId: selectedParent ? selectedParent.id : 0,
-      tags: values.tags.join(","),
-      description: values.description,
-    };
-
-    const response = await createCategory(formData);
-    if (response?.error) {
-      console.log();
-      if (
-        response.message?.messages[0]?.includes(
-          "article_categories_title_unique",
-        )
-      ) {
-        error("Judul sudah tersedia, silahkan buat dengan judul berbeda");
-      } else {
-        error(response.message?.messages);
-      }
-      return false;
-    }
-    const categoryId = response?.data?.data?.id;
-    const formFiles = new FormData();
-
-    formFiles.append("files", files[0]);
-    const resFile = await uploadCategoryThumbnail(categoryId, formFiles);
-    if (resFile?.error) {
-      error(resFile.message);
-      return false;
-    }
-    close();
-    setRefresh(!refresh);
-    MySwal.fire({
-      title: "Sukses",
-      icon: "success",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "OK",
-    }).then((result) => {
-      if (result.isConfirmed) {
-      }
-    });
-  };
-
-  const handleRemoveFile = (file: File) => {
-    const uploadedFiles = files;
-    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
-    setFiles([...filtered]);
-  };
-
-  return (
-    <div className="overflow-x-hidden overflow-y-scroll">
-      <div className="px-2 md:px-4 md:py-4 w-full">
-        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
-          <Button
-            size="md"
-            className="bg-[#F07C00] text-white w-full lg:w-fit"
-            onPress={onOpen}
-          >
-            Tambah Kategori
-            <AddIcon />
-          </Button>
-          <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",
-                            ],
-                            input: "outline-none",
-                          }}
-                          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",
-                            ],
-                            input: "outline-none",
-                          }}
-                          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">
-                      Parent Kategori <span>(Optional)</span>
-                    </p>
-
-                    <ReactSelect
-                      className="basic-single text-black z-50"
-                      classNames={{
-                        control: (state: any) =>
-                          "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500",
-                      }}
-                      classNamePrefix="select"
-                      onChange={setSelectedParent}
-                      closeMenuOnSelect={false}
-                      components={animatedComponents}
-                      isClearable={true}
-                      isSearchable={true}
-                      isMulti={false}
-                      placeholder="Kategori..."
-                      name="sub-module"
-                      options={listCategory}
-                    />
-                    {selectedParentValidation !== "" && !selectedParent && (
-                      <p className="text-red-400 text-sm">
-                        {selectedParentValidation}
-                      </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 outline-none",
-                            ],
-                            input: "outline-none",
-                          }}
-                          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">
-                        <Image
-                          src={URL.createObjectURL(files[0])}
-                          className="w-[30%]"
-                          alt="thumbnail"
-                          width={480}
-                          height={480}
-                        />
-                        <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>
-  );
-}
--- a/app/(admin)/admin/master-role/create/page.tsx
+++ b/app/(admin)/admin/master-role/create/page.tsx
@ -1,10 +1,10 @@
-import FormMasterUserRole from "@/components/form/form-master-user-role";
-import { Card } from "@heroui/react";
+import FormMasterUserRole from '@/components/form/form-master-user-role'
+import { Card } from '@nextui-org/react'

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

 export default function DetailMasterRolePage() {
-  return (
-    <Card className="h-[96vh] rounded-md my- ml-3 bg-transparent">
-      <FormDetailMasterUserRole />
-    </Card>
-  );
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormDetailMasterUserRole />
+        </Card>
+    )
 }
--- a/app/(admin)/admin/master-role/page.tsx
+++ b/app/(admin)/admin/master-role/page.tsx
@ -1,27 +1,24 @@
-"use client";
+"use client"
 import { AddIcon } from "@/components/icons";
 import MasterRoleTable from "@/components/table/master-role-table";
-import { Button, Card } from "@heroui/react";
+import { Button, Card } from "@nextui-org/react";
 import Link from "next/link";

 export default function MasterRolePage() {
-  return (
-    <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 />
-            </Button>
-          </Link>
-          <MasterRoleTable />
+    return (
+        <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2 ml-4">
+            <div className="px-4">
+                <Card className="rounded-md my-5 pl-5 py-2">
+                    <Link href="/admin/master-role/create">
+                        <Button size="md" color="primary" className="w-min">
+                            <AddIcon />New Role
+                        </Button>
+                    </Link>
+                </Card>
+                <Card className="rounded-md my-5">
+                    <MasterRoleTable />
+                </Card>
+            </div>
        </div>
-      </div>
-    </div>
-  );
+    );
 }
--- a/app/(admin)/admin/master-user-level/page.tsx
+++ b/app/(admin)/admin/master-user-level/page.tsx
@ -1,36 +1,13 @@
-import { AddIcon } from "@/components/icons";
-import MappingUserLevel from "@/components/table/master/master-user-level/mapping-user-level";
-import MasterUserLevelTable from "@/components/table/master/master-user-level/master-user-level-table";
-import { Button } from "@heroui/button";
-import Link from "next/link";
-import React from "react";
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import MenuDataTable from '@/components/table/master/master-menu/menu-data/menu-data-table'
+import MasterModuleTable from '@/components/table/master/master-module/master-module-table'
+import MasterUserLevelTable from '@/components/table/master/master-user-level/master-user-level-table'
+import React from 'react'

 const AdminMasterUserLevel = () => {
-  return (
-    // <div>
-    //   <MasterUserLevelTable />
-    // </div>
-    // <div>
-    //   <MappingUserLevel />
-    // </div>
-    <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-level/create" className="mx-3">
-            <Button
-              size="md"
-              color="primary"
-              className="bg-[#F07C00] text-white"
-            >
-              Pengguna Baru
-              <AddIcon />
-            </Button>
-          </Link>
-          <MasterUserLevelTable />
-        </div>
-      </div>
-    </div>
-  );
-};
+    return (
+        <div><MasterUserLevelTable /></div>
+    )
+}

-export default AdminMasterUserLevel;
+export default AdminMasterUserLevel
--- a/app/(admin)/admin/master-user/create/page.tsx
+++ b/app/(admin)/admin/master-user/create/page.tsx
@ -1,10 +1,10 @@
-import FormMasterUser from "@/components/form/form-master-user";
-import { Card } from "@heroui/react";
+import FormMasterUser from '@/components/form/form-master-user'
+import { Card } from '@nextui-org/react'

 export default function CreateMasterUserPage() {
-  return (
-    <Card className="h-[96vh] rounded-md bg-transparent">
-      <FormMasterUser />
-    </Card>
-  );
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormMasterUser />
+        </Card>
+    )
 }
--- a/app/(admin)/admin/master-user/edit/[id]/page.tsx
+++ b/app/(admin)/admin/master-user/edit/[id]/page.tsx
@ -1,11 +0,0 @@
-import FormMasterUser from "@/components/form/form-master-user";
-import FormMasterUserEdit from "@/components/form/form-master-user-edit";
-import { Card } from "@heroui/react";
-
-export default function CreateMasterUserPage() {
-  return (
-    <Card className="h-[96vh] rounded-md bg-transparent">
-      <FormMasterUserEdit />
-    </Card>
-  );
-}
--- a/app/(admin)/admin/master-user/page.tsx
+++ b/app/(admin)/admin/master-user/page.tsx
@ -1,27 +1,24 @@
-"use client";
+"use client"
 import { AddIcon } from "@/components/icons";
 import MasterUserTable from "@/components/table/master-user-table";
-import { Button, Card } from "@heroui/react";
+import { Button, Card } from "@nextui-org/react";
 import Link from "next/link";

 export default function MasterUserPage() {
-  return (
-    <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 />
-            </Button>
-          </Link>
-          <MasterUserTable />
+    return (
+        <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2 ml-4">
+            <div className="px-4">
+                <Card className="rounded-md my-5 pl-5 py-2">
+                    <Link href="/admin/master-user/create">
+                        <Button size="md" color="primary" className="w-min">
+                            <AddIcon />New User
+                        </Button>
+                    </Link>
+                </Card>
+                <Card className="rounded-md my-5">
+                    <MasterUserTable />
+                </Card>
+            </div>
        </div>
-      </div>
-    </div>
-  );
+    );
 }
--- a/app/(admin)/admin/static-page/create/page.tsx
+++ b/app/(admin)/admin/static-page/create/page.tsx
@ -1,10 +0,0 @@
-import StaticPageBuilder from "@/components/main/static-page/static-page-main";
-import { Card } from "@heroui/react";
-
-export default function StaticPageGenerator() {
-  return (
-    <div className="bg-transparent p-4 overflow-auto">
-      <StaticPageBuilder />
-    </div>
-  );
-}
--- a/app/(admin)/admin/static-page/edit/[id]/page.tsx
+++ b/app/(admin)/admin/static-page/edit/[id]/page.tsx
@ -1,10 +0,0 @@
-import StaticPageBuilderEdit from "@/components/form/static-page/static-page-edit-form";
-import { Card } from "@heroui/react";
-
-export default function StaticPageEdit() {
-  return (
-    <Card className="rounded-md bg-transparent p-4 overflow-auto">
-      <StaticPageBuilderEdit />
-    </Card>
-  );
-}
--- a/app/(admin)/admin/static-page/page.tsx
+++ b/app/(admin)/admin/static-page/page.tsx
@ -1,26 +0,0 @@
-import { AddIcon } from "@/components/icons";
-import StaticPageTable from "@/components/table/static-page-table";
-import { Button, Card } from "@heroui/react";
-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 md:py-4 w-full">
-        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
-          <Link href="/admin/static-page/create">
-            <Button
-              size="md"
-              color="primary"
-              className="bg-[#F07C00] text-white w-full lg:w-fit"
-            >
-              Tambah Halaman
-              <AddIcon />
-            </Button>
-          </Link>
-          <StaticPageTable />
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/app/(admin)/admin/user-level/create/page.tsx
+++ b/app/(admin)/admin/user-level/create/page.tsx
@ -1,12 +0,0 @@
-import CreateMasterUserLevelForm from "@/components/form/master/master-user-level/master-user-level-form";
-import React from "react";
-
-const AdminMasterUserLevelCreate = () => {
-  return (
-    <div>
-      <CreateMasterUserLevelForm />
-    </div>
-  );
-};
-
-export default AdminMasterUserLevelCreate;
--- a/app/(admin)/admin/user-level/edit/[id]/page.tsx
+++ b/app/(admin)/admin/user-level/edit/[id]/page.tsx
@ -1,8 +0,0 @@
-import EditUserLevelForm from "@/components/form/master/master-user-level/edit-user-level-form";
-import React from "react";
-
-const AdminMasterUserLevelCreate = () => {
-  return <EditUserLevelForm />;
-};
-
-export default AdminMasterUserLevelCreate;
--- a/app/(admin)/admin/user-level/page.tsx
+++ b/app/(admin)/admin/user-level/page.tsx
@ -1,30 +0,0 @@
-import { AddIcon } from "@/components/icons";
-import MappingUserLevel from "@/components/table/master/master-user-level/mapping-user-level";
-import MasterUserLevelTable from "@/components/table/master/master-user-level/master-user-level-table";
-import { Button } from "@heroui/button";
-import Link from "next/link";
-import React from "react";
-
-const AdminMasterUserLevel = () => {
-  return (
-    <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/user-level/create" className="mx-3">
-            <Button
-              size="md"
-              color="primary"
-              className="bg-[#F07C00] text-white"
-            >
-              Level Baru
-              <AddIcon />
-            </Button>
-          </Link>
-          <MasterUserLevelTable />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AdminMasterUserLevel;
--- a/app/(admin)/settings/layout.tsx
+++ b/app/(admin)/settings/layout.tsx
@ -1,15 +0,0 @@
-"use client";
-
-import { AdminLayout } from "@/components/layout/admin-layout";
-
-export default function AdminPageLayout({
-    children,
-}: {
-    children: React.ReactNode;
-}) {
-    return (
-        <AdminLayout>
-            {children}
-        </AdminLayout>
-    );
-}
--- a/app/(admin)/settings/page.tsx
+++ b/app/(admin)/settings/page.tsx
@ -1,40 +0,0 @@
-"use client";
-import PasswordForm from "@/components/form/settings/password";
-import ProfileForm from "@/components/form/settings/profile";
-import { close, loading } from "@/config/swal";
-import { getDetailMasterUsers, getProfile } from "@/services/master-user";
-import { getCookiesDecrypt } from "@/utils/global";
-import { Tab, Tabs } from "@heroui/react";
-import Cookies from "js-cookie";
-import { useEffect, useState } from "react";
-
-export default function Settings() {
-  const [profile, setProfile] = useState<any>();
-  const uid = getCookiesDecrypt("uie");
-  useEffect(() => {
-    if (!profile) {
-      initFetch();
-    }
-  }, [profile]);
-  const initFetch = async () => {
-    loading();
-    // const profile = await getDetailMasterUsers(String(uid));
-    const profile = await getProfile();
-    setProfile(profile?.data?.data);
-    close();
-  };
-  return (
-    <div className="w-full lg:w-[60%] p-3">
-      <div className="flex flex-col bg-gray-50 shadow-md 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 profile={profile} doFetch={() => initFetch()} />
-          </Tab>
-          <Tab key="music" title="Password">
-            <PasswordForm doFetch={() => initFetch()} />
-          </Tab>
-        </Tabs>
-      </div>
-    </div>
-  );
-}
--- a/app/auth/layout.tsx
+++ b/app/auth/layout.tsx
@ -1,7 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
 export default function AuthLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }) {
-  return <> {children}</>;
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
 }
--- a/app/auth/page.tsx
+++ b/app/auth/page.tsx
@ -1,5 +1,8 @@
-import Login from "@/components/form/login";
+import Login from '@/components/form/login'
+import React from 'react'

 export default function AuthPage() {
-  return <Login />;
+    return (
+        <Login />
+    )
 }
--- a/app/detail/page.tsx
+++ b/app/detail/page.tsx
@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Page() {
+    return (
+        <div>page</div>
+    )
+}
--- a/app/docs/layout.tsx
+++ b/app/docs/layout.tsx
@ -1,11 +1,15 @@
-"use client";
+'use client'

-import HumasLayout from "@/components/layout/humas-layout";
+import { HumasLayout } from "@/components/layout/HumasLayout";

 export default function DocsLayout({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) {
-  return <HumasLayout>{children}</HumasLayout>;
+	return (
+		<HumasLayout>
+			{children}
+		</HumasLayout>
+	);
 }
--- a/app/e-majalah-polri/daftar-majalah/layout.tsx
+++ b/app/e-majalah-polri/daftar-majalah/layout.tsx
@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function EMajalahLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}
--- a/app/e-majalah-polri/daftar-majalah/page.tsx
+++ b/app/e-majalah-polri/daftar-majalah/page.tsx
@ -1,10 +1,8 @@
-import HumasLayout from "@/components/layout/humas-layout";
-import ListEnewsPolri from "@/components/table/tabel-emajalah-polri";
+import ListEnewsPolri from '@/components/table/tabel-emajalah-polri'
+import React from 'react'

 export default function ListEnewsPage() {
-  return (
-    <HumasLayout>
-      <ListEnewsPolri />
-    </HumasLayout>
-  );
+    return (
+        <ListEnewsPolri />
+    )
 }
--- a/app/e-majalah-polri/detail/[id]/layout.tsx
+++ b/app/e-majalah-polri/detail/[id]/layout.tsx
@ -1,9 +1,13 @@
-import HumasLayout from "@/components/layout/humas-layout";
+import { HumasLayout } from "@/components/layout/HumasLayout";

 export default function DetailEMajalahLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }) {
-  return <>{children}</>;
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
 }
--- a/app/e-majalah-polri/detail/[id]/page.tsx
+++ b/app/e-majalah-polri/detail/[id]/page.tsx
@ -1,22 +1,8 @@
-"use client";
-import HumasLayout from "@/components/layout/humas-layout";
-import EMagazineDetail from "@/components/main/detail/e-magazine-detail";
-import React, { Suspense, useEffect, useState } from "react";
+import EMagazineDetail from '@/components/detail/E-MagazineDetail'
+import React from 'react'

 export default function EnewsDetailPage() {
-  const [hasMounted, setHasMounted] = useState(false);
-
-  useEffect(() => {
-    setHasMounted(true);
-  }, []);
-
-  // Render
-  if (!hasMounted) return null;
-  return (
-    <HumasLayout>
-      <Suspense>
+    return (
        <EMagazineDetail />
-      </Suspense>
-    </HumasLayout>
-  );
+    )
 }
--- a/app/form-permohonan-informasi/layout.tsx
+++ b/app/form-permohonan-informasi/layout.tsx
@ -1,10 +1,13 @@
-"use client";
-import HumasLayout from "@/components/layout/humas-layout";
+import { HumasLayout } from "@/components/layout/HumasLayout";

 export default function ApplicationLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }) {
-  return <HumasLayout>{children}</HumasLayout>;
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
 }
--- a/app/form-permohonan-informasi/page.tsx
+++ b/app/form-permohonan-informasi/page.tsx
@ -1,8 +1,7 @@
-import FormApplication from "@/components/form/form-permohonan-informasi";
+import FormApplication from '@/components/form/form-permohonan-informasi'

 export default function ApplicationPage() {
-  return (
-    <div></div>
-    // <FormApplication />
-  );
+    return (
+        <FormApplication />
+    )
 }
--- a/app/kontak-kami/layout.tsx
+++ b/app/kontak-kami/layout.tsx
@ -1,10 +1,13 @@
-"use client";
-import HumasLayout from "@/components/layout/humas-layout";
+import { HumasLayout } from "@/components/layout/HumasLayout";

 export default function KontakLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }) {
-  return <HumasLayout>{children}</HumasLayout>;
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
 }
--- a/app/kontak-kami/page.tsx
+++ b/app/kontak-kami/page.tsx
@ -1,10 +1,7 @@
-import Contact from "@/components/main/detail/contact";
-import { Suspense } from "react";
+import Contact from '@/components/detail/Contact'

 export default function VisiMisiPage() {
-  return (
-    <Suspense>
-      <Contact />
-    </Suspense>
-  );
+    return (
+        <Contact />
+    )
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,71 +1,47 @@
-// RootLayout.tsx
 import { fontSans } from "@/config/fonts";
 import { siteConfig } from "@/config/site";
-import { Inter } from "next/font/google";
-
 import "@/styles/globals.css";
 import clsx from "clsx";
 import { Metadata } from "next";
 import { Providers } from "./providers";
-import { type ReactNode } from "react";
-import LoadTawk from "@/components/ui/tawkto/load-tawk";
-import LoadScript from "@/utils/loadsripct";
-const inter = Inter({ subsets: ["latin"] });
-
-// const Tawkto = dynamic(
-//   () => {
-//     return import("@/components/ui/tawkto/tawkto");
-//   },
-//   { ssr: true }
-// );

 export const metadata: Metadata = {
-  title: {
-    default: siteConfig.name,
-    template: `%s - ${siteConfig.name}`,
-  },
-  description: siteConfig.description,
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "white" },
-    { media: "(prefers-color-scheme: dark)", color: "black" },
-  ],
-  icons: {
-    icon: "/logohumas.ico",
-    shortcut: "/favicon-16x16.png",
-    apple: "/apple-touch-icon.png",
-  },
+	title: {
+		default: siteConfig.name,
+		template: `%s - ${siteConfig.name}`,
+	},
+	description: siteConfig.description,
+	themeColor: [
+		{ media: "(prefers-color-scheme: light)", color: "white" },
+		{ media: "(prefers-color-scheme: dark)", color: "black" },
+	],
+	icons: {
+		icon: "/logohumas.ico",
+		shortcut: "/favicon-16x16.png",
+		apple: "/apple-touch-icon.png",
+	},
 };

-export default function RootLayout({ children }: { children: ReactNode }) {
-  return (
-    <html suppressHydrationWarning className="scroll-smooth">
-      <head>
-        <meta
-          name="theme-color"
-          content="white"
-          media="(prefers-color-scheme: light)"
-        />
-        <link rel="icon" href="/logohumas.png" />
-        <meta
-          name="theme-color"
-          content="black"
-          media="(prefers-color-scheme: dark)"
-        />
-        <meta property="og:image" content="/logohumas.png" />
-        <link rel="manifest" href="/manifest.json" />
-        <link rel="apple-touch-icon" href="divhumas.png" />
-        <meta name="theme-color" content="#000000" />
-
-        <LoadScript />
-      </head>
-      <body
-        className={clsx("bg-background font-sans antialiased", inter.className)}
-      >
-        <Providers themeProps={{ attribute: "class", defaultTheme: "light" }}>
-          <main className="">{children}</main>
-        </Providers>
-        <LoadTawk />
-      </body>
-    </html>
-  );
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en" suppressHydrationWarning className="scroll-smooth">
+			<head />
+			<body
+				className={clsx(
+					"bg-background font-sans antialiased",
+					fontSans.variable
+				)}
+			>
+				<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
+					<main className="">
+						{children}
+					</main>
+				</Providers>
+			</body>
+		</html>
+	);
 }
--- a/app/manifest.ts
+++ b/app/manifest.ts
@ -1,26 +0,0 @@
-import type { MetadataRoute } from "next";
-
-export default function manifest(): MetadataRoute.Manifest {
-  return {
-    name: "Konten Humas",
-    short_name: "PWA",
-    description:
-      "DIVISI HUMAS POLRI - Pengelola Informasi dan Dokumentasi Polri.",
-    start_url: "/",
-    display: "standalone",
-    background_color: "#ffffff",
-    theme_color: "#000000",
-    icons: [
-      {
-        src: "/divhumas.png",
-        sizes: "192x192",
-        type: "image/png",
-      },
-      {
-        src: "/divhumas.png",
-        sizes: "512x512",
-        type: "image/png",
-      },
-    ],
-  };
-}
--- a/app/news/[polda-name]/layout.tsx
+++ b/app/news/[polda-name]/layout.tsx
@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function PoldaNewsLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}
--- a/app/news/[polda-name]/page.tsx
+++ b/app/news/[polda-name]/page.tsx
@ -0,0 +1,8 @@
+import ListNews from '@/components/detail/ListNews'
+import React from 'react'
+
+export default function PoldaNewsPage() {
+    return (
+        <ListNews />
+    )
+}
--- a/app/news/all/layout.tsx
+++ b/app/news/all/layout.tsx
@ -1,9 +1,13 @@
-"use client";
+import { HumasLayout } from "@/components/layout/HumasLayout";

 export default function AllNewsLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }) {
-  return <>{children}</>;
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
 }
--- a/app/news/all/page.tsx
+++ b/app/news/all/page.tsx
@ -1,20 +1,8 @@
-"use client";
-import ListNews from "@/components/main/detail/list-news";
-import React, { useEffect, useState } from "react";
-import HumasLayout from "@/components/layout/humas-layout";
+import ListNews from '@/components/detail/ListNews'
+import React from 'react'

 export default function ListNewsPage() {
-  const [hasMounted, setHasMounted] = useState(false);
-
-  useEffect(() => {
-    setHasMounted(true);
-  }, []);
-
-  // Render
-  if (!hasMounted) return null;
-  return (
-    <HumasLayout>
-      <ListNews />
-    </HumasLayout>
-  );
+    return (
+        <ListNews />
+    )
 }
--- a/app/news/detail/[id]/layout.tsx
+++ b/app/news/detail/[id]/layout.tsx
@ -1,7 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
 export default function NewsLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }) {
-  return <>{children}</>;
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
 }
--- a/app/news/detail/[id]/page.tsx
+++ b/app/news/detail/[id]/page.tsx
@ -1,51 +1,8 @@
-import HumasLayout from "@/components/layout/humas-layout";
-import DetailPage from "@/components/main/detail/new-detail";
-import { getArticleById } from "@/services/article";
-import { Metadata } from "next";
+import DetailPage from '@/components/detail/DetailPage'
+import React from 'react'

-type Props = {
-  params: { id: string };
-};
-
-export async function generateMetadata({ params }: any): Promise<Metadata> {
-  // const params = await props.params;
-  const { id } = await params;
-
-  const res = await getArticleById(id?.split("-")[0]);
-  const article = res?.data?.data;
-  if (article) {
-    return {
-      title: article.title,
-      description: article.description,
-      openGraph: {
-        title: article.title,
-        description: article.description,
-        images: [`${article.thumbnailUrl}`],
-      },
-    };
-  } else {
-    return {
-      title: "",
-      description: "",
-      openGraph: {
-        title: "",
-        description: "",
-        images: [``],
-      },
-    };
-  }
-}
-
-export default async function NewsPage({ params }: any) {
-  // const params = await props.params;
-  const { id } = await params;
-
-  const articleId = id?.split("-")[0];
-  const res = await getArticleById(articleId);
-  const article = res?.data?.data;
-  return (
-    <HumasLayout>
-      <DetailPage datas={article} />
-    </HumasLayout>
-  );
+export default function NewsPage() {
+    return (
+        <DetailPage />
+    )
 }
--- a/app/news/polda/[name]/layout.tsx
+++ b/app/news/polda/[name]/layout.tsx
@ -1,7 +0,0 @@
-export default function PoldaNewsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <>{children}</>;
-}
--- a/app/news/polda/[name]/page.tsx
+++ b/app/news/polda/[name]/page.tsx
@ -1,12 +0,0 @@
-import ListNews from "@/components/main/detail/list-news";
-import React from "react";
-import HumasLayout from "@/components/layout/humas-layout";
-
-export default function PoldaNewsPage() {
-  // return <ListNews />;
-  return (
-    <HumasLayout>
-      <ListNews />
-    </HumasLayout>
-  );
-}
--- a/app/news/satker/[name]/layout.tsx
+++ b/app/news/satker/[name]/layout.tsx
@ -1,7 +0,0 @@
-export default function PoldaNewsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <>{children}</>;
-}
--- a/app/news/satker/[name]/page.tsx
+++ b/app/news/satker/[name]/page.tsx
@ -1,12 +0,0 @@
-import ListNews from "@/components/main/detail/list-news";
-import React from "react";
-import HumasLayout from "@/components/layout/humas-layout";
-
-export default function PoldaNewsPage() {
-  // return <ListNews />;
-  return (
-    <HumasLayout>
-      <ListNews />
-    </HumasLayout>
-  );
-}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,36 +1,27 @@
-"use client";
-import InstallPrompt from "@/components/install-promp";
-import BannerHumasNew from "@/components/landing/banner-new";
-import BodyLayout from "@/components/landing/BodyLayout";
-import AnalyticDrawer from "@/components/landing/drawer";
-import FooterNew from "@/components/landing/footer-new";
-import HeaderNews from "@/components/landing/HeaderNews";
-import NewsTicker from "@/components/landing/NewsTicker";
-import dynamic from "next/dynamic";
-import { Suspense } from "react";
-
-const TawktoEmbed = dynamic(
-  () => {
-    return import("@/components/ui/tawkto/tawkto");
-  },
-  { ssr: true }
-);
+'use client'
+import BannerHumas from "@/components/Landing Page/BannerHumas";
+import BodyLayout from "@/components/Landing Page/BodyLayout";
+import HeaderNews from "@/components/Landing Page/HeaderNews";
+import { HumasLayout } from "@/components/layout/HumasLayout";
+import { useEffect, useState } from "react";

 export default function Home() {
-  return (
-    <>
-      {/* <TawktoEmbed /> */}
-      <section className="flex flex-col">
-        {/* <InstallPrompt /> */}
-        <NewsTicker />
-        <AnalyticDrawer />
-        <BannerHumasNew />
-        <HeaderNews />
-        <BodyLayout />
-        <Suspense>
-          <FooterNew margin={true} />
-        </Suspense>
-      </section>
-    </>
-  );
+	const [hasMounted, setHasMounted] = useState(false);
+
+	useEffect(() => {
+		setHasMounted(true);
+	}, []);
+
+	// Render
+	if (!hasMounted) return null;
+
+	return (
+		<>
+			<HumasLayout>
+				<BannerHumas />
+				<HeaderNews />
+				<BodyLayout />
+			</HumasLayout>
+		</>
+	);
 }
--- a/app/portal-ppid/admin/layout.tsx
+++ b/app/portal-ppid/admin/layout.tsx
@ -1,9 +1,13 @@
-import { PPIDAdminLayout } from "@/components/layout/ppid-admin-layout";
+import { PPIDAdminLayout } from "@/components/layout/PPIDAdminLayout";

 export default function LayoutAdmin({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }) {
-  return <PPIDAdminLayout>{children}</PPIDAdminLayout>;
+    return (
+        <PPIDAdminLayout >
+            {children}
+        </PPIDAdminLayout>
+    );
 }
--- a/app/portal-ppid/e-ppid-polda/layout.tsx
+++ b/app/portal-ppid/e-ppid-polda/layout.tsx
@ -1,14 +1,19 @@
-"use client";
-import { PPIDLayout } from "@/components/layout/ppid-layout";
-import { usePathname } from "next/navigation";
-import React, { Children } from "react";
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'

 export default function EPPIDPoldaLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode
 }) {
-  const pathname = usePathname();
+    const pathname = usePathname();
+    console.log(pathname)

-  return <PPIDLayout>{children}</PPIDLayout>;
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
 }
--- a/app/portal-ppid/e-ppid-polda/page.tsx
+++ b/app/portal-ppid/e-ppid-polda/page.tsx
@ -1,5 +1,7 @@
-import PPIDPolda from "@/components/layout/portal-ppid/PPIDPolda";
+import PPIDPolda from '@/components/Portal PPID/PPIDPolda'

 export default function PPIDSakterPage() {
-  return <PPIDPolda />;
+    return (
+        <PPIDPolda />
+    )
 }
--- a/app/portal-ppid/e-ppid-satker/layout.tsx
+++ b/app/portal-ppid/e-ppid-satker/layout.tsx
@ -1,14 +1,19 @@
-"use client";
-import { PPIDLayout } from "@/components/layout/ppid-layout";
-import { usePathname } from "next/navigation";
-import React, { Children } from "react";
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'

 export default function EPPIDSatkerLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode
 }) {
-  const pathname = usePathname();
+    const pathname = usePathname();
+    console.log(pathname)

-  return <PPIDLayout>{children}</PPIDLayout>;
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
 }
--- a/app/portal-ppid/e-ppid-satker/page.tsx
+++ b/app/portal-ppid/e-ppid-satker/page.tsx
@ -1,5 +1,7 @@
-import PPIDSatker from "@/components/layout/portal-ppid/PPIDSatker";
+import PPIDSatker from '@/components/Portal PPID/PPIDSatker'

 export default function PPIDSakterPage() {
-  return <PPIDSatker />;
+    return (
+        <PPIDSatker />
+    )
 }
--- a/app/portal-ppid/informasi-publik/informasi-berkala/page.tsx
+++ b/app/portal-ppid/informasi-publik/informasi-berkala/page.tsx
@ -1,5 +1,7 @@
-import InformasiBerkala from "@/components/table/informasi-berkala-table";
+import InformasiBerkala from '@/components/table/informasi-berkala'

 export default function InformasiSMPage() {
-  return <InformasiBerkala />;
+    return (
+        <InformasiBerkala />
+    )
 }
--- a/app/portal-ppid/informasi-publik/layout.tsx
+++ b/app/portal-ppid/informasi-publik/layout.tsx
@ -1,14 +1,19 @@
-"use client";
-import { PPIDLayout } from "@/components/layout/ppid-layout";
-import { usePathname } from "next/navigation";
-import React, { Children } from "react";
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'

 export default function InfoPublicLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode
 }) {
-  const pathname = usePathname();
+    const pathname = usePathname();
+    console.log(pathname)

-  return <PPIDLayout>{children}</PPIDLayout>;
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
 }
--- a/app/portal-ppid/layanan-informasi/layout.tsx
+++ b/app/portal-ppid/layanan-informasi/layout.tsx
@ -1,14 +1,19 @@
-"use client";
-import { PPIDLayout } from "@/components/layout/ppid-layout";
-import { usePathname } from "next/navigation";
-import React, { Children } from "react";
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'

 export default function LayananInformasiLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode
 }) {
-  const pathname = usePathname();
+    const pathname = usePathname();
+    console.log(pathname)

-  return <PPIDLayout>{children}</PPIDLayout>;
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
 }
--- a/app/portal-ppid/layanan-informasi/permohonan-keberatan/page.tsx
+++ b/app/portal-ppid/layanan-informasi/permohonan-keberatan/page.tsx
@ -1,9 +1,8 @@
-import FormObjectionRequest from "@/components/form/form-permohonan-keberatan";
-import React from "react";
+import FormObjectionRequest from '@/components/form/form-permohonan-keberatan'
+import React from 'react'

 export default function PermohonanKeberanatan() {
-  return (
-    <div></div>
-    // <FormObjectionRequest />
-  );
+    return (
+        <FormObjectionRequest />
+    )
 }
--- a/app/portal-ppid/layanan-informasi/registrasi-permohonan/page.tsx
+++ b/app/portal-ppid/layanan-informasi/registrasi-permohonan/page.tsx
@ -1,9 +1,8 @@
-import FormApplication from "@/components/form/form-permohonan-informasi";
-import React from "react";
+import FormApplication from '@/components/form/form-permohonan-informasi'
+import React from 'react'

 export default function RegistrasiPage() {
-  return (
-    <div></div>
-    // <FormApplication />
-  );
+    return (
+        <FormApplication />
+    )
 }
--- a/app/portal-ppid/layanan-informasi/statistik-rekapitulasi/page.tsx
+++ b/app/portal-ppid/layanan-informasi/statistik-rekapitulasi/page.tsx
@ -1,6 +1,8 @@
-import StatiticAndRecap from "@/components/main/detail/statistic-recap";
-import React from "react";
+import StatiticAndRecap from '@/components/detail/StatistikRekapitulas'
+import React from 'react'

 export default function StatisticPage() {
-  return <StatiticAndRecap />;
+    return (
+        <StatiticAndRecap />
+    )
 }
--- a/app/portal-ppid/page.tsx
+++ b/app/portal-ppid/page.tsx
@ -1,21 +1,23 @@
-"use client";
+'use client'
+import FooterPPID from '@/components/Portal PPID/FooterPPID';
+import PPIDbody from '@/components/Portal PPID/PpidMain';
+import PPIDBanner from '@/components/Portal PPID/ppid-banner';
+import NavbarPPID from '@/components/navbar/NavbarPPID';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+

-import NavbarPPID from "@/components/layout/navbar/NavbarPPID";
-import FooterPPID from "@/components/layout/portal-ppid/FooterPPID";
-import PPIDBanner from "@/components/layout/portal-ppid/ppid-banner";
-import PPIDbody from "@/components/layout/portal-ppid/PpidMain";
-import { usePathname } from "next/navigation";
-import React from "react";

 export default function PortalPPID(url: any) {
-  const pathname = usePathname();
+    const pathname = usePathname();
+    console.log(pathname)

-  return (
-    <>
-      <NavbarPPID />
-      <PPIDBanner url={url} />
-      <PPIDbody />
-      <FooterPPID />
-    </>
-  );
+    return (
+        <>
+            <NavbarPPID />
+            <PPIDBanner url={url} />
+            <PPIDbody />
+            <FooterPPID />
+        </>
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/informasi-publik/informasi-berkala/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/informasi-publik/informasi-berkala/page.tsx
@ -1,5 +1,7 @@
-import InformasiBerkala from "@/components/table/informasi-berkala-table";
+import InformasiBerkala from '@/components/table/informasi-berkala'

 export default function InformasiSMPage() {
-  return <InformasiBerkala />;
+    return (
+        <InformasiBerkala />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/informasi-publik/layout.tsx
+++ b/app/portal-ppid/polda/[polda-name]/informasi-publik/layout.tsx
@ -1,12 +1,19 @@
-"use client";
-import { SatkerLayout } from "@/components/layout/satker-layout";
-import { usePathname } from "next/navigation";
-import React from "react";
+'use client'
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React from 'react';

 export default function DinamicSatkerLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode
 }) {
-  return <SatkerLayout>{children}</SatkerLayout>;
+    // const pathname = usePathname();
+    // console.log(pathname)
+
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/layanan-informasi/layout.tsx
+++ b/app/portal-ppid/polda/[polda-name]/layanan-informasi/layout.tsx
@ -1,14 +1,19 @@
-"use client";
-import { SatkerLayout } from "@/components/layout/satker-layout";
-import { usePathname } from "next/navigation";
-import React from "react";
+'use client'
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React from 'react';

 export default function LayananInformasiLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode
 }) {
-  const pathname = usePathname();
+    const pathname = usePathname();
+    console.log(pathname)

-  return <SatkerLayout>{children}</SatkerLayout>;
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/layanan-informasi/statistik-rekapitulasi/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/layanan-informasi/statistik-rekapitulasi/page.tsx
@ -1,6 +1,8 @@
-import StatiticAndRecap from "@/components/main/detail/statistic-recap";
-import React from "react";
+import StatiticAndRecap from '@/components/detail/StatistikRekapitulas'
+import React from 'react'

 export default function StatisticPage() {
-  return <StatiticAndRecap />;
+    return (
+        <StatiticAndRecap />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/page.tsx
@ -1,27 +1,24 @@
-"use client";
-
-import FooterSatker from "@/components/layout/navbar/FooterSatker";
-import NavbarSatker from "@/components/layout/navbar/NavbarSatker";
-import PPIDBanner from "@/components/layout/portal-ppid/ppid-banner";
-import PPIDSatkerMain from "@/components/layout/portal-ppid/PPIDMainSatker";
-import { usePathname } from "next/navigation";
-import React from "react";
+'use client'
+import PPIDSatkerMain from '@/components/Portal PPID/PPIDMainSatker';
+import PPIDBanner from '@/components/Portal PPID/ppid-banner';
+import FooterSatker from '@/components/navbar/FooterSatker';
+import NavbarSatker from '@/components/navbar/NavbarSatker';
+import { usePathname } from 'next/navigation';
+import React from 'react'

 export default function PoldaPage() {
-  const pathname = usePathname();
-  const url: string = pathname
-    .split("polda/")[1]
-    .replace(/-/g, " ")
-    .toUpperCase();
+    const pathname = usePathname();
+    const url: string = pathname.split('polda/')[1].replace(/-/g, ' ').toUpperCase();

-  return (
-    <div className="text-black">
-      <div className="text-black">
-        <NavbarSatker />
-        <PPIDBanner url={url} />
-        <PPIDSatkerMain />
-        <FooterSatker />
-      </div>
-    </div>
-  );
+
+    return (
+        <div className='text-black'>
+            <div className='text-black'>
+                <NavbarSatker />
+                <PPIDBanner url={url} />
+                <PPIDSatkerMain />
+                <FooterSatker />
+            </div>
+        </div>
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/profile/layout.tsx
+++ b/app/portal-ppid/polda/[polda-name]/profile/layout.tsx
@ -1,12 +1,19 @@
-"use client";
-import { SatkerLayout } from "@/components/layout/satker-layout";
-import { usePathname } from "next/navigation";
-import React from "react";
+'use client'
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React from 'react';

 export default function DinamicSatkerLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode
 }) {
-  return <SatkerLayout>{children}</SatkerLayout>;
+    // const pathname = usePathname();
+    // console.log(pathname)
+
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/profile/profile-singkat-ppid/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/profile/profile-singkat-ppid/page.tsx
@ -1,6 +1,8 @@
-import About from "@/components/main/detail/about";
-import React from "react";
+import About from '@/components/detail/About'
+import React from 'react'

 export default function PPIDProfile() {
-  return <About />;
+    return (
+        <About />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/profile/sejarah-ppid-polri/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/profile/sejarah-ppid-polri/page.tsx
@ -1,6 +1,8 @@
-import HistoryPPID from "@/components/page/history-ppid";
-import React from "react";
+import HistoryPPID from '@/components/page/HistoryPPID'
+import React from 'react'

 export default function PPIDProfilePage() {
-  return <HistoryPPID />;
+    return (
+        <HistoryPPID />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/profile/struktur-ppid/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/profile/struktur-ppid/page.tsx
@ -1,5 +1,7 @@
-import StrukturOrganisasi from "@/components/main/detail/structure";
+import StrukturOrganisasi from "@/components/detail/StrukturOrganisasi";

 export default function StructurePPID() {
-  return <StrukturOrganisasi />;
-}
+    return (
+        <StrukturOrganisasi />
+    )
+}
--- a/app/portal-ppid/polda/[polda-name]/profile/tugas-dan-fungsi-ppid/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/profile/tugas-dan-fungsi-ppid/page.tsx
@ -1,5 +1,9 @@
-import Task from "@/components/main/detail/task-detail";
+import Task from "@/components/detail/TaskDetail";
+
+

 export default function PPIDTask() {
-  return <Task />;
+    return (
+        <Task />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/profile/visi-dan-misi-ppid/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/profile/visi-dan-misi-ppid/page.tsx
@ -1,6 +1,8 @@
-import VisiMisi from "@/components/main/detail/visi-misi";
-import React from "react";
+import VisiMisi from '@/components/detail/VisiMisi'
+import React from 'react'

 export default function VMPPID() {
-  return <VisiMisi />;
+    return (
+        <VisiMisi />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/regulasi/layout.tsx
+++ b/app/portal-ppid/polda/[polda-name]/regulasi/layout.tsx
@ -1,14 +1,19 @@
-"use client";
-import { SatkerLayout } from "@/components/layout/satker-layout";
-import { usePathname } from "next/navigation";
-import React from "react";
+'use client'
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React from 'react';

 export default function RegulasiLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode
 }) {
-  const pathname = usePathname();
+    const pathname = usePathname();
+    console.log(pathname)

-  return <SatkerLayout>{children}</SatkerLayout>;
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/regulasi/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/regulasi/page.tsx
@ -1,15 +1,15 @@
-import PPIDSidebar from "@/components/layout/portal-ppid/PPIDSidebar";
-import RegulationTable from "@/components/table/tabel-regulasi";
+import PPIDSidebar from '@/components/Portal PPID/PPIDSidebar'
+import RegulationTable from '@/components/table/tabel-regulasi'

 export default function RegulasiPage() {
-  return (
-    <div className="md:flex">
-      <div className="w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[75%] px-2 md:px-0 lg:px-5">
-        <RegulationTable />
-      </div>
-      <div className="w-auto md:w-1/3 lg:w-[25%]">
-        <PPIDSidebar />
-      </div>
-    </div>
-  );
+    return (
+        <div className='md:flex'>
+            <div className='w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[75%] px-2 md:px-0 lg:px-5'>
+                <RegulationTable />
+            </div>
+            <div className='w-auto md:w-1/3 lg:w-[25%]'>
+                <PPIDSidebar />
+            </div>
+        </div>
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/standar-layanan/alur-pelayanan-informasi-publik/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/standar-layanan/alur-pelayanan-informasi-publik/page.tsx
@ -1,6 +1,8 @@
-import ServiceFlow from "@/components/main/detail/service-flow";
-import React from "react";
+import ServiceFlow from '@/components/detail/ServiceFlow'
+import React from 'react'

 export default function ServiceFlowPage() {
-  return <ServiceFlow />;
+    return (
+        <ServiceFlow />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/standar-layanan/layout.tsx
+++ b/app/portal-ppid/polda/[polda-name]/standar-layanan/layout.tsx
@ -1,15 +1,20 @@
-"use client";
-import { PPIDLayout } from "@/components/layout/ppid-layout";
-import { SatkerLayout } from "@/components/layout/satker-layout";
-import { usePathname } from "next/navigation";
-import React, { Children } from "react";
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'

 export default function StandarLayananLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode
 }) {
-  const pathname = usePathname();
+    const pathname = usePathname();
+    console.log(pathname)

-  return <SatkerLayout>{children}</SatkerLayout>;
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/standar-layanan/maklumat-pelayanan/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/standar-layanan/maklumat-pelayanan/page.tsx
@ -1,6 +1,8 @@
-import ServiceAnnouncement from "@/components/main/detail/service-announcement";
-import React from "react";
+import ServiceAnnouncement from '@/components/detail/ServiceAnnouncement'
+import React from 'react'

 export default function ServiceAnnouncePage() {
-  return <ServiceAnnouncement />;
+    return (
+        <ServiceAnnouncement />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/standar-layanan/mekanisme-keberatan/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/standar-layanan/mekanisme-keberatan/page.tsx
@ -1,6 +1,8 @@
-import ObjectionMecanism from "@/components/main/detail/objection-mecanism";
-import React from "react";
+import ObjectionMecanism from '@/components/detail/ObjectionMecanism'
+import React from 'react'

 export default function ObjectionMecanismPage() {
-  return <ObjectionMecanism />;
+    return (
+        <ObjectionMecanism />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/standar-layanan/mekanisme-permohonan-penyelesaian-sengketa/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/standar-layanan/mekanisme-permohonan-penyelesaian-sengketa/page.tsx
@ -1,6 +1,8 @@
-import RequestDispute from "@/components/main/detail/reqeust-dispute";
-import React from "react";
+import RequestDispute from '@/components/detail/RequestDispute'
+import React from 'react'

 export default function RequestDisputePage() {
-  return <RequestDispute />;
+    return (
+        <RequestDispute />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/standar-layanan/standar-biaya-pelayanan/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/standar-layanan/standar-biaya-pelayanan/page.tsx
@ -1,6 +1,8 @@
-import ServiceFee from "@/components/main/detail/service-fee";
-import React from "react";
+import ServiceFee from '@/components/detail/ServiceFee'
+import React from 'react'

 export default function ServiceFeePage() {
-  return <ServiceFee />;
+    return (
+        <ServiceFee />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/standar-layanan/tata-cara-permohonan-informasi/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/standar-layanan/tata-cara-permohonan-informasi/page.tsx
@ -1,6 +1,8 @@
-import RequestInformation from "@/components/main/detail/request-information";
-import React from "react";
+import RequestInformation from '@/components/detail/RequestInformation'
+import React from 'react'

 export default function RequestInformationPage() {
-  return <RequestInformation />;
+    return (
+        <RequestInformation />
+    )
 }
--- a/app/portal-ppid/polda/[polda-name]/standar-layanan/waktu-pelayanan/page.tsx
+++ b/app/portal-ppid/polda/[polda-name]/standar-layanan/waktu-pelayanan/page.tsx
@ -1,6 +1,8 @@
-import ServiceTime from "@/components/main/detail/serive-time";
-import React from "react";
+import ServiceTime from '@/components/detail/ServiceTime'
+import React from 'react'

 export default function ServiceTimePage() {
-  return <ServiceTime />;
+    return (
+        <ServiceTime />
+    )
 }
--- a/app/portal-ppid/profile/layout.tsx
+++ b/app/portal-ppid/profile/layout.tsx
@ -1,14 +1,19 @@
-"use client";
-import { PPIDLayout } from "@/components/layout/ppid-layout";
-import { usePathname } from "next/navigation";
-import React, { Children } from "react";
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'

 export default function PPIDProfileLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode
 }) {
-  const pathname = usePathname();
+    const pathname = usePathname();
+    console.log(pathname)

-  return <PPIDLayout>{children}</PPIDLayout>;
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
 }
--- a/app/portal-ppid/profile/profile-singkat-ppid/page.tsx
+++ b/app/portal-ppid/profile/profile-singkat-ppid/page.tsx
@ -1,6 +1,8 @@
-import About from "@/components/main/detail/about";
-import React from "react";
+import About from '@/components/detail/About'
+import React from 'react'

 export default function PPIDProfile() {
-  return <About />;
+    return (
+        <About />
+    )
 }
--- a/app/portal-ppid/profile/sejarah-ppid-polri/page.tsx
+++ b/app/portal-ppid/profile/sejarah-ppid-polri/page.tsx
@ -1,6 +1,8 @@
-import HistoryPPID from "@/components/page/history-ppid";
-import React from "react";
+import HistoryPPID from '@/components/page/HistoryPPID'
+import React from 'react'

 export default function PPIDProfilePage() {
-  return <HistoryPPID />;
+    return (
+        <HistoryPPID />
+    )
 }
--- a/app/portal-ppid/profile/struktur-ppid/page.tsx
+++ b/app/portal-ppid/profile/struktur-ppid/page.tsx
@ -1,5 +1,7 @@
-import StrukturOrganisasi from "@/components/main/detail/structure";
+import StrukturOrganisasi from "@/components/detail/StrukturOrganisasi";

 export default function StructurePPID() {
-  return <StrukturOrganisasi />;
-}
+    return (
+        <StrukturOrganisasi />
+    )
+}
--- a/app/portal-ppid/profile/tugas-dan-fungsi-ppid/page.tsx
+++ b/app/portal-ppid/profile/tugas-dan-fungsi-ppid/page.tsx
@ -1,5 +1,9 @@
-import Task from "@/components/main/detail/task-detail";
+import Task from "@/components/detail/TaskDetail";
+
+

 export default function PPIDTask() {
-  return <Task />;
+    return (
+        <Task />
+    )
 }
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`NEXT_PUBLIC_MAPS_API_KEY=AIzaSyCOkxoeKykE60L_nM4VS1JYJqBmqy2GA0Q`