fix: fixed api in detail rewrite

app/[locale]/(public)/content-management/download/page.tsx

@@ -12,7 +12,8 @@ import SidebarManagement from "@/components/landing-page/sidebar-management";
 import withReactContent from "sweetalert2-react-content";
 import { getCookiesDecrypt } from "@/lib/utils";
 import Swal from "sweetalert2";
-import { useToast } from "@/components/ui/use-toast";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Icon } from "@iconify/react/dist/iconify.js";
 
 const Galery = (props: any) => {
   const [profile, setProfile] = useState<any>();
@@ -282,6 +283,29 @@ const Galery = (props: any) => {
                           <Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
                             <img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
                             <div className="font-semibold p-4 text-white text-xs lg:text-sm  dark:text-black truncate w-full">{video?.mediaUpload?.title}</div>
+                            <DropdownMenu>
+                              <DropdownMenuTrigger className="flex items-center gap-1">
+                                <a>
+                                  <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                                </a>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent>
+                                <DropdownMenuItem>
+                                  <div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
+                                    <button onClick={() => copyToClip(video.mediaUpload?.slug)} className="w-full flex items-center gap-2">
+                                      <Icon icon="oi:share" fontSize={20} />
+                                      <p className="text-base  font-semibold">Bagikan</p>
+                                    </button>
+                                  </div>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem>
+                                  <a onClick={() => handleDelete(video?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
+                                    <Icon icon="fa:trash" fontSize={20} />
+                                    <p className="text-base  font-semibold">Hapus</p>
+                                  </a>
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
                           </Link>
                         </CardContent>
                       </Card>
@@ -296,11 +320,7 @@ const Galery = (props: any) => {
                 contentAudio?.length > 0 ? (
                   <div className=" grid grid-cols-1 gap-6 ">
                     {contentAudio?.map((audio: any) => (
-                      <Link
+                      <div key={audio?.id} className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
-                        href={`/audio/detail/${audio?.mediaUpload?.slug}`}
-                        key={audio?.id}
-                        className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
-                      >
                         <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
                           <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
                             <path
@@ -310,7 +330,9 @@ const Galery = (props: any) => {
                           </svg>
                         </div>
                         <div className="flex flex-col  flex-1">
-                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{audio?.mediaUpload?.title}</div>
+                          <Link href={`/audio/detail/${audio?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                            {audio?.mediaUpload?.title}
+                          </Link>
                         </div>
                         <div className="flex items-center justify-center gap-3">
                           <div className="mt-2">
@@ -327,7 +349,30 @@ const Galery = (props: any) => {
                             </svg>
                           </div>
                         </div>
-                      </Link>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger className="flex items-center gap-1">
+                            <a>
+                              <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                            </a>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent>
+                            <DropdownMenuItem>
+                              <div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
+                                <button onClick={() => copyToClip(audio?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
+                                  <Icon icon="oi:share" fontSize={20} />
+                                  <p className="text-base  font-semibold">Bagikan</p>
+                                </button>
+                              </div>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                              <a onClick={() => handleDelete(audio?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
+                                <Icon icon="fa:trash" fontSize={20} />
+                                <p className="text-base  font-semibold">Hapus</p>
+                              </a>
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
                     ))}
                   </div>
                 ) : (
@@ -346,6 +391,29 @@ const Galery = (props: any) => {
                             <div className="font-semibold p-4 text-white text-xs lg:text-sm  dark:text-black truncate w-full">{image?.mediaUpload?.title}</div>
                           </Link>
                         </CardContent>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger className="flex items-center gap-1">
+                            <a>
+                              <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                            </a>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent>
+                            <DropdownMenuItem>
+                              <div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
+                                <button onClick={() => copyToClip(image?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
+                                  <Icon icon="oi:share" fontSize={20} />
+                                  <p className="text-base  font-semibold">Bagikan</p>
+                                </button>
+                              </div>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                              <a onClick={() => handleDelete(image?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
+                                <Icon icon="fa:trash" fontSize={20} />
+                                <p className="text-base  font-semibold">Hapus</p>
+                              </a>
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
                       </Card>
                     ))}
                   </div>
@@ -357,7 +425,7 @@ const Galery = (props: any) => {
               ) : contentDocument.length > 0 ? (
                 <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
                   {contentDocument?.map((document: any) => (
-                    <Link href={`/document/detail/${document?.mediaUpload?.slug}`} key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                    <div key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
                       <div className="flex items-center justify-center rounded-lg w-16 h-16">
                         <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path
@@ -368,7 +436,9 @@ const Galery = (props: any) => {
                       </div>
 
                       <div className="flex flex-col flex-1 gap-2">
-                        <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.mediaUpload?.title}</div>
+                        <Link href={`/document/detail/${document?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                          {document?.mediaUpload?.title}
+                        </Link>
                         <div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
                           <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
                             <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
@@ -376,7 +446,30 @@ const Galery = (props: any) => {
                           Download Dokumen
                         </div>
                       </div>
-                    </Link>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger className="flex items-center gap-1">
+                          <a>
+                            <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                          </a>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                          <DropdownMenuItem>
+                            <div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
+                              <button onClick={() => copyToClip(document?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
+                                <Icon icon="oi:share" fontSize={20} />
+                                <p className="text-base  font-semibold">Bagikan</p>
+                              </button>
+                            </div>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            <a onClick={() => handleDelete(document?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
+                              <Icon icon="fa:trash" fontSize={20} />
+                              <p className="text-base  font-semibold">Hapus</p>
+                            </a>
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
                   ))}
                 </div>
               ) : (

app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx

@@ -255,7 +255,7 @@ const page = (props: { states?: any }) => {
     const maxRetries = 20;
 
     try {
-      const waitForStatusUpdate = async () => {
+      const waitForStatusUpdate: any = async () => {
         while (retryCount < maxRetries) {
           const res = await getDetailArticle(id);
           const articleData = res?.data?.data;
@@ -276,7 +276,7 @@ const page = (props: { states?: any }) => {
       const articleImagesData = articleData?.imagesUrl?.split(",");
       setValue("description", cleanArticleBody || "");
       setArticleBody(cleanArticleBody || "");
-      setDetailData(articleData);
+      setDetailArticle(articleData);
       setSelectedArticleId(id);
       setArticleImages(articleImagesData || []);
     } catch (error) {
@@ -404,7 +404,11 @@ const page = (props: { states?: any }) => {
                           {articleIds.map((id: any, index: any) => (
                             <p
                               key={index}
-                              className={`text-black m-1 ${selectedArticleId === id ? "bg-[#31ce36] cursor-pointer border border-[#31ce36]" : "bg-[#48abf7] cursor-pointer border border-[#48abf7]"}`}
+                              className={`text-black border border-black w-fit rounded-md p-3 m-1 ${
+                                selectedArticleId === id
+                                  ? "text-[#31ce36] w-fit p-3 hover:bg-[#31ce36] hover:text-white cursor-pointer border border-[#31ce36]"
+                                  : "text-[#48abf7] p-3 hover:text-white hover:bg-[#48abf7] w-fit cursor-pointer border border-[#48abf7]"
+                              }`}
                               onClick={() => handleArticleIdClick(id)}
                             >
                               {id}
@@ -429,7 +433,7 @@ const page = (props: { states?: any }) => {
                           )
                         }
                       />
-                      {articleBody === null || articleBody === "" ? <div className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</div> : ""}
+                      {articleBody === null || articleBody === "" ? <p className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</p> : ""}
                     </div>
                     <div className="flex flex-row gap-3">
                       <Button

app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx

@@ -4,7 +4,7 @@ import { close, error, loading } from "@/config/swal";
 import { useRouter } from "@/i18n/routing";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { getContentRewrite, getInfoProfile } from "@/service/landing/landing";
-import { useSearchParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
@@ -15,6 +15,8 @@ import { generateDataArticle } from "@/service/content/ai";
 import HeaderManagement from "@/components/landing-page/header-management";
 import SidebarManagement from "@/components/landing-page/sidebar-management";
 import { saveContentRewrite } from "@/service/content/content";
+import CustomEditor from "@/components/editor/custom-editor";
+import { Input } from "@/components/ui/input";
 
 const page = (props: any) => {
   const { states } = props;
@@ -23,7 +25,8 @@ const page = (props: any) => {
   const searchParams = useSearchParams();
   const router = useRouter();
   const [, setLoadingState] = useState(false);
-  const id: any = searchParams?.get("title");
+  const getParams = useParams();
+  const id: any = getParams?.id;
   const [content, setContent] = useState<any>([]);
   const [isFromSPIT, setIsFromSPIT] = useState(false);
   const [listSuggestion, setListSuggestion] = useState();
@@ -199,15 +202,15 @@ const page = (props: any) => {
             <div className="text-xl font-bold mb-5">Detail Content Rewrite</div>
             <div className="p-8 border border-black rounded-lg">
               <form method="POST" onSubmit={handleSubmit(onSubmit)}>
-                {/* {content && ( */}
+                {content && (
                   <>
                     <div className="w-full">
-                    <div className="mb-3">
+                      <div className="mb-1">
-                      <p className="font-semibold">Judul</p>
+                        <p className="font-bold text-base">Judul</p>
                       </div>
-                    <input
+                      <Input
                         type="text"
-                      className={`w-full p-2 border rounded-md mb-3 border-black ${errors.title ? "is-invalid" : ""}`}
+                        className={`w-full mb-3 ${errors.title ? "is-invalid" : ""}`}
                         {...register("title", {
                           value: content?.title,
                         })}
@@ -216,23 +219,22 @@ const page = (props: any) => {
                         // onChange={(e) => setSelectedTitle(e.target.value)}
                       />
                     </div>
-                  <div className="flex flex-col justify-between lg:flex-row">
+                    <div className="flex justify-between gap-3 lg:flex-row">
-                    <div className="w-50%">
+                      <div className="w-1/2">
-                      <div className="mb-3">
+                        <div className="mb-1">
                           <p className="font-semibold">Main Keyword</p>
                         </div>
                         <div>
-                        <input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} />
+                          <Input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} />
                         </div>
                       </div>
-                    <div className="w-50%">
+                      <div className="w-1/2">
-                      <div className="mb-3">
+                        <div className="mb-1">
                           <label htmlFor="title" className="font-semibold">
                             Additional Keyword{" "}
                           </label>
                         </div>
-
+                        <Input
-                      <input
                           className="border mb-3 rounded-md p-2 border-black"
                           type="text"
                           id="additionalKeyword"
@@ -246,12 +248,12 @@ const page = (props: any) => {
                       </div>
                     </div>
 
-                  <div className="flex flex-col justify-between lg:flex-row">
+                    <div className="flex gap-3 justify-between lg:flex-row">
-                    <div className="w-50%">
+                      <div className="w-1/2">
-                      <div className="font-semibold mb-3">
+                        <div className="font-semibold mb-1">
                           <label htmlFor="metaTitle">Meta Title</label>
                         </div>
-                      <input
+                        <Input
                           type="text"
                           className="border rounded-md mb-3 p-2 border-black"
                           id="metaTitle"
@@ -263,11 +265,11 @@ const page = (props: any) => {
                           defaultValue={content?.metaTitle}
                         />
                       </div>
-                    <div className="w-50%">
+                      <div className="w-1/2">
-                      <div className="font-semibold mb-3">
+                        <div className="font-semibold mb-1">
                           <label htmlFor="metaDescription">Meta Description</label>
                         </div>
-                      <input
+                        <Input
                           type="text"
                           className="border rounded-md mb-3 p-2 border-black"
                           id="metaDescription"
@@ -284,11 +286,11 @@ const page = (props: any) => {
                     <div className="w-full">
                       <div className="font-semibold mb-3">
                         <label htmlFor="description">Deskripsi Artikel</label>
+                        <CustomEditor onChange={(e: any) => {}} initialData={articleBody || ""} />
                       </div>
-                    {articleBody === null || articleBody === "" ? <div className="w-full px-0 text-sm">Deskripsi tidak boleh kosong</div> : ""}
                     </div>
                   </>
-                 {/* )}  */}
+                )}
               </form>
             </div>
           </div>

app/[locale]/auth/registration/page.tsx

@@ -0,0 +1,460 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { close, error, loading, registerConfirm } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+import { getDataByNIK, getDataByNRP, getDataJournalist, getDataPersonil, listCity, listDistricts, listInstitusi, listProvince, postRegistration, saveInstitutes } from "@/service/auth";
+import { verifyOTP } from "@/service/landing/landing";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useParams, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm, SubmitHandler } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import * as Yup from "yup";
+
+
+type Inputs = {
+  example: string;
+  exampleRequired: string;
+};
+
+const page = () => {
+  const params = useParams();
+  const [stepOneActive] = useState(true);
+  const [stepTwoActive, setStepTwoActive] = useState(false);
+  const [stepThreeActive, setStepThreeActive] = useState(false);
+  const [typePass, setTypePass] = useState("password");
+  const [typePassConf, setTypePassConf] = useState("password");
+  const searchParams = useSearchParams();
+  const [formProfile, setFormProfile] = useState(false);
+  const [journalistCertificate, setJournalistCertificate] = useState();
+  const [personilNRP, setPersonilNRP] = useState();
+  const [journalistData, setJournalistData] = useState<any>();
+  const [personilData, setPersonilData] = useState<any>();
+  const [userIdentity] = useState();
+  const [userIdentityValidate, setUserIdentityValidate] = useState("");
+  const [email, setEmail] = useState();
+  const [emailValidate, setEmailValidate] = useState("");
+  const [otpValidate, setOtpValidate] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordConf, setPasswordConf] = useState("");
+  const [city, setCity] = useState([]);
+  const [isValidPassword, setIsValidPassword] = useState(false);
+  const MySwal = withReactContent(Swal);
+  const [isCustomActive, setIsCustomActive] = useState(false);
+  const [institusi, setInstitusi] = useState();
+  const [customInstituteName, setCustomInstituteName] = useState("");
+  const [institusiAddress, setInstitusiAddress] = useState<any>();
+  const [institution, setInstitution] = useState<any>([]);
+  const [province, setProvince] = useState<any>([]);
+  const router = useRouter();
+  const category = searchParams?.get("category");
+  const [districts, setDistricts] = useState([]);
+
+  const [otp1, setOtp1] = useState();
+  const [otp2, setOtp2] = useState();
+  const [otp3, setOtp3] = useState();
+  const [otp4, setOtp4] = useState();
+  const [otp5, setOtp5] = useState();
+  const [otp6, setOtp6] = useState();
+
+  const nMinuteSeconds = 60;
+  const nSecondInMiliseconds = 1000;
+  const [, setRefreshTimer] = useState(false);
+
+  const validationSchema = Yup.object().shape({
+    firstName: Yup.string().required("Nama Lengkap tidak boleh kosong"),
+    username: Yup.string().required("Username tidak boleh kosong"),
+    phoneNumber: Yup.string().required("Nomor Telepon tidak boleh kosong"),
+    address: Yup.string().required("Alamat tidak boleh kosong"),
+    email: Yup.string().required("Email tidak boleh kosong"),
+    provinsi: Yup.string().required("Provinsi tidak boleh kosong"),
+    kota: Yup.string().required("Kota tidak boleh kosong"),
+    kecamatan: Yup.string().required("Kecamatan tidak boleh kosong"),
+    password: Yup.string().required("Kata Sandi tidak boleh kosong"),
+    passwordConf: Yup.string().required(
+      "Konfirmasi Kata Sandi tidak boleh kosong",
+    ),
+  });
+
+  const formOptions = {
+    resolver: yupResolver(validationSchema),
+  };
+
+  const { register, handleSubmit, formState, setValue } = useForm<any>(formOptions);
+
+  const convertMinutesToMiliseconds = (minute: any) =>
+    minute * nMinuteSeconds * nSecondInMiliseconds;
+
+  const convertMilisecondsToHour = (miliseconds: any) =>
+    new Date(miliseconds).toISOString().slice(17, -5);
+
+  let [timerCount, setTimerCount] = useState(convertMinutesToMiliseconds(1));
+  let interval;
+
+  const showPass = () => {
+    setTypePass("text");
+  };
+
+  const hidePass = () => {
+    setTypePass("password");
+  };
+
+  const showPassConf = () => {
+    setTypePassConf("text");
+  };
+
+  const hidePassConf = () => {
+    setTypePassConf("password");
+  };
+
+  const setValUsername = (e: any) => {
+    const uname = e.replaceAll(/[^\w.-]/g, "");
+    setValue("username", uname.toLowerCase());
+  };
+
+  const setValPassword = (e: any) => {
+    setValue("password", e);
+    setPassword(e);
+  };
+
+  const setValPasswordConf = (e: any) => {
+    setPasswordConf(e);
+  };
+
+  
+
+  async function save(data: any) {
+    // loading();
+    let institutionId = 1;
+
+    if (Number(category) == 6) {
+      const dataInstitution =
+        isCustomActive == true
+          ? {
+            name: customInstituteName,
+            address: institusiAddress,
+            categoryRoleId: Number(category),
+          }
+          : {
+            id: institusi,
+            address: institusiAddress,
+          };
+
+      console.log(dataInstitution);
+
+      const resInstitution = await saveInstitutes(dataInstitution);
+
+      institutionId = resInstitution?.data?.data?.id;
+      if (resInstitution?.error) {
+        error(resInstitution?.message);
+        return false;
+      }
+    }
+    
+    // const sanitizedFirstName = sanitizeHtml(data.firstName);
+
+//     if (sanitizedFirstName == "") {
+//       error("Invalid Name");
+//     } else {
+//       const datas = {
+//         firstName: sanitizedFirstName,
+//         lastName: "",
+//         username: data.username,
+//         phoneNumber: data.phoneNumber,
+//         email,
+//         address: data.address,
+//         memberIdentity: userIdentity,
+//         provinceId: Number(data.provinsi),
+//         cityId: Number(data.kota),
+//         districtId: Number(data.kecamatan),
+//         password: data.password,
+//         instituteId: Number(institutionId),
+//         roleId: Number(category),
+//       };
+
+//       const response = await postRegistration(datas);
+//       console.log(response);
+//       if (response?.error) {
+//         error(response?.message);
+//         return false;
+//       }
+
+//       registerConfirm();
+//       return false;
+//     }
+  }
+
+const handleJournalistCertificate = async () => {
+    const response = await getDataJournalist(journalistCertificate);
+    const data = response?.data?.data;
+    console.log(data);
+    if (data) {
+      setJournalistData(data[0]);
+    }
+
+    console.log("Data jurnalis:", data);
+    return data;
+  };
+
+  const handleDataNRP = async () => {
+    const response = await getDataPersonil(personilNRP);
+    const data = response?.data?.data;
+    setPersonilData(data);
+    console.log("Data personil:", data);
+    return data;
+  };
+
+  const handleInstituteOption = (e: any) => {
+    if (e.target.value == "0") {
+      setIsCustomActive(true);
+    } else {
+      setIsCustomActive(false);
+      setInstitusi(e.target.value);
+    }
+  };
+
+//   const {
+//     register,
+//     handleSubmit,
+//     watch,
+//     formState: { errors },
+//   } = useForm<Inputs>();
+//   const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
+//   console.log(watch("example"));
+
+function setDataToForm() {
+    if (Number(category) == 6 && journalistData) {
+      setValue("firstName", journalistData.journalistName);
+      setValue("memberIdentity", journalistData.certNumber);
+      const selectedProvince = province.find(
+        (o: any) => o.provName == journalistData.province?.toUpperCase(),
+      );
+
+      if (selectedProvince !== undefined) {
+        setValue("provinsi", selectedProvince.id);
+      }
+    } else if (Number(category) == 7 && personilData) {
+      setValue("firstName", personilData.lastName);
+      setValue("memberIdentity", personilData.nrp);
+    }
+  }
+
+
+  async function onSubmit(data: any) {
+
+    console.log("Submit");
+
+    if (isValidPassword) {
+      MySwal.fire({
+        title: "Buat akun",
+        text: "",
+        icon: "warning",
+        showCancelButton: true,
+        cancelButtonColor: "#d33",
+        confirmButtonColor: "#3085d6",
+        confirmButtonText: "Buat",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          save(data);
+        }
+      });
+    } else {
+      error("Kata Sandi harus sama");
+    }
+  }
+
+  const handleIdentity = async (e: any) => {
+    const id = e;
+    console.log(id);
+    await new Promise((resolve) => setTimeout(resolve, 2000)); // 2 sec
+    if (Number(category) == 5) {
+      const reqId =
+        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
+      const response = await getDataByNIK(reqId, id);
+      const data = response?.data?.data_return[0];
+
+      console.log(data);
+      if (data !== undefined) {
+        setValue("firstName", data.nama_lengkap);
+        setValue("address", data.alamat);
+        const selectedProvince = province.find(
+          (o: any) => o.provName == data.prov?.toUpperCase(),
+        );
+
+        if (selectedProvince !== undefined) {
+          setValue("provinsi", selectedProvince.id);
+        }
+
+        const selectedCity: any = city.find(
+          (o: any) => o.cityName == data.kab_kota?.toUpperCase(),
+        );
+
+        if (selectedCity !== undefined) {
+          setValue("kota", selectedCity?.id);
+        }
+
+        const selectedDistrict: any = districts.find(
+          (o: any) => o.disName == data.kec?.toUpperCase(),
+        );
+
+        if (selectedDistrict !== undefined) {
+          setValue("kecamatan", selectedDistrict?.id);
+        }
+      }
+    } else if (Number(category) == 7) {
+      const reqId =
+        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
+      const response = await getDataByNRP(reqId, id);
+      const data = response?.data?.data_return[0];
+
+      console.log("Data :", data);
+      if (data !== undefined) {
+        setValue("firstName", data.nama);
+        setValue("address", data.lokasi);
+      }
+    }
+  }; 
+
+  const getCity = async (e: any) => {
+    const res = await listCity(e);
+    setCity(res?.data.data);
+  };
+
+  const getDistricts = async (e: any) => {
+    const res = await listDistricts(e);
+    setDistricts(res?.data.data);
+  };
+
+  const handleVerifyOTP = async () => {
+    const otp = `${otp1}${otp2}${otp3}${otp4}${otp5}${otp6}`;
+
+    if (email != "" && otp.length == 6) {
+      console.log("verify otp");
+      loading();
+      // const response = {
+      //   message: "success",
+      // };
+
+      const response = await verifyOTP(email, otp);
+      if (response?.error) {
+        error(response?.message);
+        return false;
+      }
+      close();
+      // console.log(response);
+      if (response?.message == "success") {
+        console.log("success");
+        setStepThreeActive(true);
+        setFormProfile(true);
+        setOtpValidate("");
+        setValue("email", email);
+        setValue("memberIdentity", userIdentity);
+        handleIdentity(userIdentity);
+        setDataToForm();
+      } else {
+        setOtpValidate("Kode OTP Tidak Valid");
+      }
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (category != undefined) {
+        const resInstiution = await listInstitusi(category);
+        const res = await listProvince();
+        setInstitution(resInstiution?.data.data);
+        setProvince(res?.data.data);
+      }
+    }
+
+    initState();
+  }, [category]);
+
+  useEffect(() => {
+    function initState() {
+      for (const element of institution) {
+        const { id } = element;
+
+        if (id == institusi) {
+          setInstitusiAddress(element.address);
+        }
+      }
+    }
+
+    initState();
+  }, [institusi]);
+
+  useEffect(() => {
+    async function initState() {
+      if (category != undefined) {
+        const resInstiution = await listInstitusi(category);
+        const res = await listProvince();
+        setInstitution(resInstiution?.data.data);
+        setProvince(res?.data.data);
+      }
+    }
+
+    initState();
+  }, [category]);
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      style={
+        Number(category) < 5
+          ? {
+              display: "none",
+            }
+          : {}
+      }
+    >
+      <div className="flex gap-12 justify-center">
+        <div className="flex flex-row mt-4 mb-5">
+          <ul className="absolute border border-[#f32d2d] w-[235px]">
+            <li>
+              <div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepOneActive ? "active" : ""}`}>
+                <span>
+                  <b>1</b>
+                </span>
+              </div>
+            </li>
+            <li>
+              <div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepTwoActive ? "active" : ""}`}>
+                <span>
+                  <b>2</b>
+                </span>
+              </div>
+            </li>
+            <li>
+              <div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepThreeActive ? "active" : ""}`}>
+                <span>
+                  <b>3</b>
+                </span>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <div className="flex flex-row">
+            <div className="gap-12"
+            style={
+              stepTwoActive && !formProfile
+                ? {
+                  display: "none",
+                }
+                : {}
+            }>
+
+            </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default page;

components/landing-page/sidebar-management.tsx

@@ -94,7 +94,7 @@ const SidebarManagement = () => {
         </div>
       </div>
 
-      <div className="p-4">
+      <div className="p-4 gap-1">
         <Link href="/content-management/galery" className="mb-3">
           <div className={`${pathname?.includes("/content-management/galery") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
             <div className="flex items-center gap-2 text-lg">

service/auth.ts

@@ -1,19 +1,14 @@
 import qs from "qs";
 import { getAPIDummy } from "./http-config/axiosCustom";
 import { httpPost } from "./http-config/http-base-service";
-import {
+import { httpGetInterceptor, httpGetInterceptorWithToken, httpPostInterceptor } from "./http-config/http-interceptor-service";
-  httpGetInterceptor,
-  httpGetInterceptorWithToken,
-  httpPostInterceptor,
-} from "./http-config/http-interceptor-service";
 
 export async function login(data: any) {
   const pathUrl = "signin";
   const headers = {
-    'content-type': 'application/x-www-form-urlencoded',
+    "content-type": "application/x-www-form-urlencoded",
   };
   return httpPost(pathUrl, headers, qs.stringify(data));
-
 }
 
 export async function getProfile(token: any) {
@@ -35,4 +30,51 @@ export async function saveUser(data: any) {
   const url = "users/save";
   return httpPostInterceptor(url, data);
 }
+export async function saveInstitutes(data: any) {
+  const url = "public/users/save-institutes";
+  return httpPostInterceptor(url, data);
+}
+export async function postRegistration(data: any) {
+  const url = "public/users/save";
+  return httpPostInterceptor(url, data);
+}
 
+export async function getDataByNIK(reqid: any, nik: any) {
+  const url = `http://spitpolri.com/api/back_end/get_ktp?reqid=${reqid}&nik=${nik}`;
+  return getAPIDummy(url);
+}
+
+export async function listInstitusi(roleId: any) {
+  const url = `public/users/institutes?categoryRoleId=${roleId}`;
+  return httpGetInterceptor(url);
+}
+
+export async function listProvince() {
+  const url = "public/users/provinces";
+  return httpGetInterceptor(url);
+}
+
+export async function listCity(id: any) {
+  const url = `public/users/cities?provId=${id}`;
+  return httpGetInterceptor(url);
+}
+
+export async function listDistricts(id: any) {
+  const url = `public/users/districts?cityId=${id}`;
+  return httpGetInterceptor(url);
+}
+
+export async function getDataByNRP(reqid: any, nrp: any) {
+  const url = `http://spitpolri.com/api/back_end/get_nrp?reqid=${reqid}&nrp=${nrp}`;
+  return getAPIDummy(url);
+}
+
+export async function getDataJournalist(cert: any) {
+  const url = `public/users/search-journalist?cert=${cert}`;
+  return httpGetInterceptor({ url });
+}
+
+export async function getDataPersonil(nrp: any) {
+  const url = `public/users/search-personil?nrp=${nrp}`;
+  return httpGetInterceptor({ url });
+}

service/landing/landing.ts

@@ -113,3 +113,7 @@ export async function getPublicSuggestionList(id: any) {
   const url = `media/public/suggestion?mediaId=${id}`;
   return httpGetInterceptor(url);
 }
+export async function verifyOTP(email: any, otp: any) {
+  const url = `public/users/verify-otp?email=${email}&otp=${otp}`;
+  return httpPostInterceptor(url);
+}