fix:landing footer link, admin create user form

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_MAPS_API_KEY=AIzaSyCOkxoeKykE60L_nM4VS1JYJqBmqy2GA0Q

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

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

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

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { AddIcon } from "@/components/icons";
 import MasterUserTable from "@/components/table/master-user-table";
 import { Button, Card } from "@nextui-org/react";
@@ -6,12 +6,13 @@ import Link from "next/link";
 
 export default function MasterUserPage() {
   return (
-        <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2 ml-4">
+    <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2">
-            <div className="px-4">
+      <div className="">
         <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
+              <AddIcon />
+              New User
             </Button>
           </Link>
         </Card>

app/kontak-kami/page.tsx

@@ -1,5 +1,10 @@
 import Contact from "@/components/main/detail/contact";
+import { Suspense } from "react";
 
 export default function VisiMisiPage() {
-  return <Contact />;
+  return (
+    <Suspense>
+      <Contact />
+    </Suspense>
+  );
 }

components/form/form-master-user.tsx

@@ -1,56 +1,48 @@
-'use client'
+"use client";
-import { error } from '@/config/swal';
+import { error } from "@/config/swal";
-import { createMasterUser } from '@/service/master-user';
+import { createMasterUser } from "@/service/master-user";
-import { MasterUser } from '@/types/globals';
+import { MasterUser } from "@/types/globals";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Card, Input, Radio, RadioGroup, Select, SelectItem, Selection, Textarea } from '@nextui-org/react'
+import {
-import Link from 'next/link';
+  Button,
-import { useRouter } from 'next/navigation';
+  Card,
-import React, { useState } from 'react'
+  Input,
-import { useForm } from 'react-hook-form';
+  Radio,
-import Swal from 'sweetalert2';
+  RadioGroup,
-import withReactContent from 'sweetalert2-react-content';
+  Select,
-import { z } from 'zod';
+  SelectItem,
+  Selection,
+  Textarea,
+} from "@nextui-org/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Datepicker from "react-tailwindcss-datepicker";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
 
 const masterUserSchema = z.object({
   fullname: z.string().min(1, { message: "Required" }),
   username: z.string().min(1, { message: "Required" }),
+  password: z.string().min(1, { message: "Required" }),
   email: z.string().min(1, { message: "Required" }),
   identityType: z.string().min(1, { message: "Required" }),
+  identityNumber: z.string().min(1, { message: "Required" }),
   lastEducation: z.string().min(1, { message: "Required" }),
+  genderType: z.string().min(1, { message: "Required" }),
   phoneNumber: z.string().min(1, { message: "Required" }),
-    workingType: z.string().min(1, { message: "Required" }),
+  workType: z.string().min(1, { message: "Required" }),
+  address: z.string().min(1, { message: "Required" }),
+  birthDate: z.object({
+    startDate: z.string().min(1, { message: "Required" }),
+    endDate: z.string().min(1, { message: "Required" }),
+  }),
 });
 
-export default function FormMasterUser() {
+const typeIdentity = [
-    const router = useRouter();
-    const MySwal = withReactContent(Swal);
-    const [address, setAddress] = useState<string>();
-    const [dateOfBirt, setDateOfBirt] = useState<string>("13-april-1995");
-    const [email, setEmail] = useState<string>();
-    const [fullName, setFullname] = useState<string>();
-    const [genderType, setGenderType] = React.useState("");
-    const [identityNumber, setIdentityNumber] = useState<string>();
-    const [lastEducation, setLastEducation] = useState<any>([]);
-    const [phoneNumber, setPhoneNumber] = useState<string>();
-    const [userLevelsId, setUserLevelsId] = useState<number>(1);
-    const [userRoleId, setUserRoleId] = useState<number>(1);
-    const [username, setUsername] = useState<string>();
-    const [workType, setWorkType] = useState<string>("Tets");
-    const [identityType, setIdentityType] = useState<any>([])
-    const [showNumberInput, setShowNumberInput] = useState(false);
-
-    const formOptions = { resolver: zodResolver(masterUserSchema) };
-    type MicroIssueSchema = z.infer<typeof masterUserSchema>;
-    const {
-        register,
-        control,
-        handleSubmit,
-        setValue,
-        formState: { errors },
-    } = useForm<MicroIssueSchema>(formOptions);
-
-    const typeIdentity = [
   {
     id: 1,
     value: "KTP",
@@ -63,9 +55,9 @@ export default function FormMasterUser() {
     id: 3,
     value: "Passport",
   },
-    ]
+];
 
-    const workingBackground = [
+const workingBackground = [
   {
     id: 1,
     value: "Pegawai Negri Sipil",
@@ -82,9 +74,9 @@ export default function FormMasterUser() {
     id: 4,
     value: "Dokter",
   },
-    ]
+];
 
-    const educationGrade = [
+const educationGrade = [
   {
     id: 1,
     value: "SMA / Sederajat",
@@ -117,27 +109,46 @@ export default function FormMasterUser() {
     id: 8,
     value: "S3",
   },
-    ]
+];
 
+export default function FormMasterUser() {
+  const router = useRouter();
+  const MySwal = withReactContent(Swal);
+  const [isVisible, setIsVisible] = useState(false);
+  const toggleVisibility = () => setIsVisible(!isVisible);
 
-    async function save(data: any) {
+  const formOptions = {
+    resolver: zodResolver(masterUserSchema),
+    defaultValues: {
+      identityType: "KTP",
+      birthDate: { stardDate: "", endDate: "" },
+    },
+  };
+  type MicroIssueSchema = z.infer<typeof masterUserSchema>;
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<MicroIssueSchema>(formOptions);
+
+  async function save(data: z.infer<typeof masterUserSchema>) {
     const formData = {
-            address: address,
+      address: data.address,
-            dateOfBirt: dateOfBirt,
+      dateOfBirt: data.birthDate,
-            email: email,
+      password: data.password,
-            fullName: fullName,
+      email: data.email,
-            genderType: genderType,
+      fullname: data.fullname,
-            identityNumber: identityNumber,
+      genderType: data.genderType,
-            identityType: identityType.anchorKey,
+      identityNumber: data.identityNumber,
-            lastEducation: Array.from(lastEducation)[0],
+      identityType: data.identityType,
-            phoneNumber: phoneNumber,
+      lastEducation: data.lastEducation,
-            userLevelsId: userLevelsId,
+      phoneNumber: data.phoneNumber,
-            userRoleId: userRoleId,
+      userLevelId: 2,
-            username: username,
+      userRoleId: 2,
-            workType: workType,
+      username: data.username,
+      workType: data.workType,
     };
 
-        console.log("Form MasterUser:", formData);
     const response = await createMasterUser(formData);
 
     if (response?.error) {
@@ -146,7 +157,7 @@ export default function FormMasterUser() {
     }
 
     successSubmit("/admin/article");
-    };
+  }
 
   function successSubmit(redirect: any) {
     MySwal.fire({
@@ -161,7 +172,7 @@ export default function FormMasterUser() {
     });
   }
 
-    async function onSubmit(data: any) {
+  async function onSubmit(data: z.infer<typeof masterUserSchema>) {
     MySwal.fire({
       title: "Simpan Data",
       text: "",
@@ -178,134 +189,246 @@ export default function FormMasterUser() {
   }
 
   return (
-        <div className='mx-5 my-5 overflow-y-auto'>
+    <div className="mx-5 my-5 overflow-y-auto">
       <form method="POST" onSubmit={handleSubmit(onSubmit)}>
-                <Card className='rounded-md p-5 space-y-5'>
+        <Card className="rounded-md p-5 flex flex-col gap-3">
-                    <div>
+          <Controller
+            control={control}
+            name="fullname"
+            render={({ field: { onChange, value } }) => (
               <Input
                 type="text"
-                            {...register("fullname")}
+                id="title"
+                placeholder="Fullname..."
                 label="Fullname"
-                            variant='bordered'
+                value={value}
-                            placeholder="Enter Text"
+                onChange={onChange}
-                            labelPlacement='outside'
+                labelPlacement="outside"
-                            value={fullName}
+                className="w-full"
-                            onChange={(e) => setFullname(e.target.value)}
+                variant="bordered"
               />
-                        {errors.fullname?.message}
+            )}
-                    </div>
+          />
-                    <div>
+          {errors.fullname?.message && (
+            <p className="text-red-400 text-sm">{errors.fullname?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="username"
+            render={({ field: { onChange, value } }) => (
               <Input
                 type="text"
-                            {...register("username")}
+                id="username"
+                placeholder="Username..."
                 label="Username"
-                            variant='bordered'
+                value={value}
-                            placeholder="Enter Text"
+                onChange={onChange}
-                            labelPlacement='outside'
+                labelPlacement="outside"
-                            value={username}
+                className="w-full"
-                            onChange={(e) => setUsername(e.target.value)}
+                variant="bordered"
-
               />
-                        {errors.username?.message}
+            )}
-                    </div>
+          />
-                    <div>
+          {errors.username?.message && (
+            <p className="text-red-400 text-sm">{errors.username?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="password"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type={isVisible ? "text" : "password"}
+                id="password"
+                placeholder="Password..."
+                label="Password"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+                endContent={
+                  <button
+                    className="focus:outline-none"
+                    type="button"
+                    onClick={toggleVisibility}
+                  >
+                    {isVisible ? (
+                      <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+                    ) : (
+                      <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+                    )}
+                  </button>
+                }
+              />
+            )}
+          />
+          {errors.password?.message && (
+            <p className="text-red-400 text-sm">{errors.password?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="email"
+            render={({ field: { onChange, value } }) => (
               <Input
                 type="email"
-                            {...register("email")}
+                id="email"
+                placeholder="Email..."
                 label="Email"
-                            variant='bordered'
+                value={value}
-                            placeholder="Enter Text"
+                onChange={onChange}
-                            labelPlacement='outside'
+                labelPlacement="outside"
-                            value={email}
+                className="w-full"
-                            onChange={(e) => setEmail(e.target.value)}
+                variant="bordered"
               />
-                        {errors.email?.message}
+            )}
-                    </div>
+          />
-                    <div>
+          {errors.email?.message && (
+            <p className="text-red-400 text-sm">{errors.email?.message}</p>
+          )}
+
+          <Controller
+            control={control}
+            name="identityType"
+            render={({ field: { onChange, value } }) => (
               <Select
-                            variant='bordered'
+                variant="bordered"
-                            {...register("identityType")}
+                labelPlacement="outside"
-                            labelPlacement='outside'
                 label="Identity Type"
                 placeholder="Select"
                 className="max-w-xs"
-                            selectedKeys={identityType}
+                selectedKeys={[value]}
-                            onSelectionChange={setIdentityType}
+                onChange={onChange}
               >
                 {typeIdentity.map((type) => (
-                                <SelectItem key={type.value}>
+                  <SelectItem key={type.value}>{type.value}</SelectItem>
-                                    {type.value}
-                                </SelectItem>
                 ))}
               </Select>
-                        {/* <p>selected : {identityType}</p> */}
+            )}
-                        {errors.identityType?.message}
-                        {/* {showNumberInput && ( */}
-                        <Input
-                            type="text"
-                            className='pt-2'
-                            variant='bordered'
-                            placeholder="Enter Identity Number"
-                            labelPlacement='outside'
-                            value={identityNumber}
-                            onChange={(e) => setIdentityNumber(e.target.value)}
           />
-                        {/* )} */}
+          {errors.identityType?.message && (
-                    </div>
+            <p className="text-red-400 text-sm">
-                    <div>
+              {errors.identityType?.message}
+            </p>
+          )}
+          <Controller
+            control={control}
+            name="identityNumber"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type="number"
+                id="identityNumber"
+                placeholder="Identity Number..."
+                label="Identity Number"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.identityNumber?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.identityNumber?.message}
+            </p>
+          )}
+
+          <Controller
+            control={control}
+            name="genderType"
+            render={({ field: { onChange, value } }) => (
               <RadioGroup
-                            orientation='horizontal'
+                orientation="horizontal"
-                            label="Select your favorite city"
+                label="Gender"
-                            value={genderType}
+                value={value}
-                            onValueChange={setGenderType}
+                onValueChange={onChange}
               >
-                            <Radio value="laki-laki">Laki-laki</Radio>
+                <Radio value="male">Laki-laki</Radio>
-                            <Radio value="perempuan">Perempuan</Radio>
+                <Radio value="female">Perempuan</Radio>
               </RadioGroup>
-                        <p className="text-default-500 text-small">Selected: {genderType}</p>
+            )}
-                    </div>
+          />
-                    <div>
+          {errors.genderType?.message && (
+            <p className="text-red-400 text-sm">{errors.genderType?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="birthDate"
+            render={({ field: { onChange, value } }) => (
+              <Datepicker
+                useRange={false}
+                asSingle={true}
+                value={value}
+                displayFormat="DD/MM/YYYY"
+                onChange={onChange}
+                popoverDirection="down"
+                inputClassName="w-full bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl "
+              />
+            )}
+          />
+          {errors.birthDate?.startDate?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.birthDate?.startDate?.message}
+            </p>
+          )}
+          <Controller
+            control={control}
+            name="lastEducation"
+            render={({ field: { onChange, value } }) => (
               <Select
-                            variant='bordered'
+                variant="bordered"
-                            {...register("lastEducation")}
+                labelPlacement="outside"
-                            labelPlacement='outside'
                 label="Last Education"
-                            selectedKeys={lastEducation}
+                selectedKeys={[value]}
-                            onSelectionChange={setLastEducation}
+                onChange={onChange}
                 placeholder="Select"
                 className="max-w-xs"
               >
                 {educationGrade.map((grade) => (
-                                <SelectItem key={grade.value}>
+                  <SelectItem key={grade.value}>{grade.value}</SelectItem>
-                                    {grade.value}
-                                </SelectItem>
                 ))}
               </Select>
-                        <p className="text-default-500 text-small">Selected: {lastEducation}</p>
+            )}
-                        {errors.lastEducation?.message}
-                    </div>
-                    <div>
-                        <Input
-                            type="text"
-                            {...register("phoneNumber")}
-                            label="Phone Number"
-                            className='pt-2'
-                            variant='bordered'
-                            placeholder="Enter Number"
-                            labelPlacement='outside'
-                            value={phoneNumber}
-                            onChange={(e) => setPhoneNumber(e.target.value)}
           />
+          {errors.lastEducation?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.lastEducation?.message}
+            </p>
+          )}
+          <Controller
+            control={control}
+            name="phoneNumber"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type="number"
+                id="identityNumber"
+                placeholder="08*********"
+                label="No. Handphone"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.phoneNumber?.message && (
+            <p className="text-red-400 text-sm">
               {errors.phoneNumber?.message}
-                    </div>
+            </p>
-                    <div>
+          )}
+          <Controller
+            control={control}
+            name="workType"
+            render={({ field: { onChange, value } }) => (
               <Select
-                            variant='bordered'
+                variant="bordered"
-                            {...register("workingType")}
+                labelPlacement="outside"
-                            labelPlacement='outside'
                 label="Working Type"
                 placeholder="Select"
                 className="max-w-xs"
+                selectedKeys={[value]}
+                onChange={onChange}
               >
                 {workingBackground.map((type) => (
                   <SelectItem key={type.id} value={type.id}>
@@ -313,36 +436,39 @@ export default function FormMasterUser() {
                   </SelectItem>
                 ))}
               </Select>
-                        {errors.workingType?.message}
+            )}
-                    </div>
+          />
-                    <div>
+          {errors.workType?.message && (
+            <p className="text-red-400 text-sm">{errors.workType?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="address"
+            render={({ field: { onChange, value } }) => (
               <Textarea
                 label="Address"
                 labelPlacement="outside"
                 placeholder="Enter Text"
-                            value={address}
+                value={value}
-                            onValueChange={setAddress}
+                onValueChange={onChange}
               />
-                    </div>
+            )}
-                    <div className='flex justify-end gap-3'>
+          />
+          {errors.address?.message && (
+            <p className="text-red-400 text-sm">{errors.address?.message}</p>
+          )}
+          <div className="flex justify-end gap-3">
             <Link href={`/admin/master-user`}>
-                            <Button
+              <Button color="danger" variant="ghost">
-                                color='danger'
-                                variant="ghost"
-                            >
                 Cancel
               </Button>
             </Link>
-                        <Button
+            <Button type="submit" color="primary" variant="solid">
-                            type="submit"
-                            color='primary'
-                            variant="solid"
-                        >
               Save
             </Button>
           </div>
         </Card>
       </form>
-        </div >
+    </div>
-    )
+  );
 }

components/landing/Footer.tsx

@@ -1,76 +1,141 @@
-import { Button } from '@nextui-org/button'
+import { Button } from "@nextui-org/button";
-import { Input } from '@nextui-org/input'
+import { Input } from "@nextui-org/input";
-import { MailIcon, SendIcon } from '../icons'
+import { MailIcon, SendIcon } from "../icons";
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Footer() {
   return (
-        <div className='relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold '>
+    <div className="relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold ">
-            <div className='h-[650px] md:h-[720px] lg:h-auto  bg-black'>
+      <div className="h-[650px] md:h-[720px] lg:h-auto  bg-black">
-                <img src="/assets/Footer.jpg" alt="" className='w-full h-full object-cover object-left-top opacity-80' />
+        <img
+          src="/assets/Footer.jpg"
+          alt=""
+          className="w-full h-full object-cover object-left-top opacity-80"
+        />
       </div>
       <div className="absolute top-0 left-0 w-full grid grid-cols-3 md:grid-cols-3 lg:grid-cols-7 gap-5 md:gap-4 px-1 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
-                <div className='pb-2 md:pb-0'>
+        <div className="pb-2 md:pb-0 flex flex-col gap-2">
-                    <p>Berita Terkini</p>
+          <Link href="/">Berita Terkini</Link>
-                    <p>Info Komnas Anak</p>
+          <Link href="https://www.kpai.go.id/" target="_blank">
-                    <p>Info Komnas Perempuan</p>
+            Info Komnas Anak
-                    <p>Kontak</p>
+          </Link>
+          <Link href="https://komnasperempuan.go.id/" target="_blank">
+            Info Komnas Perempuan
+          </Link>
+          <Link href="/kontak-kami">Kontak</Link>
         </div>
-                <div className='pb-2 md:pb-0'>
+        <div className="pb-2 md:pb-0 flex flex-col gap-2">
-                    <p>Tentang PPID</p>
+          <Link href="/static/humas-polri">Tentang PPID</Link>
-                    <p>Profil Pimpinan Polri</p>
+          <Link href="/static/profile-kapolri">Profil Pimpinan Polri</Link>
-                    <p>Struktur Organisasi</p>
+          <Link href="/static/struktur-mabes">Struktur Organisasi</Link>
-                    <p>Visi & Misi</p>
+          <Link href="/static/visi-misi-polri">Visi & Misi</Link>
-                    <p>Logo</p>
+          <Link href="/static/logo">Logo</Link>
         </div>
-                <div className='pb-2 md:pb-0'>
+        <div className="pb-2 md:pb-0 flex flex-col gap-2">
-                    <p>Informasi Berkala</p>
+          <Link
-                    <p>Informasi Serta Merta</p>
+            href="https://siberpresisi.com/informasi-publik/informasi-berkala"
-                    <p>Informasi Setiap Saat</p>
+            target="_blank"
-                    <p>Informasi Dikecualikan</p>
+          >
-                    <p>UU & Peraturan</p>
+            Informasi Berkala
-                    <p>Penerangan Satuan</p>
+          </Link>
+          <Link
+            href="https://siberpresisi.com/informasi-publik/informasi-serta-merta"
+            target="_blank"
+          >
+            Informasi Serta Merta
+          </Link>
+          <Link
+            href="https://siberpresisi.com/informasi-publik/informasi-setiap-saat"
+            target="_blank"
+          >
+            Informasi Setiap Saat
+          </Link>
+          <Link
+            href="https://siberpresisi.com/informasi-publik/informasi-dikecualikan"
+            target="_blank"
+          >
+            Informasi Dikecualikan
+          </Link>
+          <Link
+            href="https://sisdivkum.id/library/peraturan-kepolisian"
+            target="_blank"
+          >
+            UU & Peraturan
+          </Link>
+          {/* <Link href="#">Penerangan Satuan</Link> */}
         </div>
-                <div className='pb-2 md:pb-0'>
+        <div className="pb-2 md:pb-0 flex flex-col gap-2">
-                    <p>SP2HP</p>
+          <Link href="https://sp2hp.bareskrim.polri.go.id/" target="_blank">
-                    <p>Formulir Permohonan Informasi</p>
+            SP2HP
-                    <p>Pelayanan SIM</p>
+          </Link>
-                    <p>Pelayanan E-Rikkes SIM</p>
+          <Link href="/form-permohonan-informasi">
-                    <p>Pelayana Test Psikologi SIM</p>
+            Formulir Permohonan Informasi
-                    <p>Pelayanan E-Avis</p>
+          </Link>
-                    <p>Pelayanan STNK & BPKP</p>
+          <Link href="https://www.digitalkorlantas.id/sim/" target="_blank">
-                    <p>Pelayanan SKCK</p>
+            Pelayanan SIM
-                    <p>Pelayanan Karantina Presisi</p>
+          </Link>
-                    <p>Pelayanan Propam Presisi</p>
+          <Link href="https://erikkes.id/" target="_blank">
-                    <p>Pelayanan Dumas Presisi</p>
+            Pelayanan E-Rikkes SIM
-                    <p>Pelayanan Polisiku</p>
+          </Link>
-                    <p>Pelayanan BINMAS</p>
+          <Link href="https://eppsi.id/" target="_blank">
+            Pelayana Test Psikologi SIM
+          </Link>
+          <Link href="https://e-avis.korlantas.polri.go.id/" target="_blank">
+            Pelayanan E-Avis
+          </Link>
+          <Link href="https://samsatdigital.id/" target="_blank">
+            Pelayanan STNK & BPKP
+          </Link>
+          <Link href="https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US">
+            Pelayanan SKCK
+          </Link>
+          {/* <Link href="#">Pelayanan Karantina Presisi</Link> */}
+          <Link
+            href="https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
+            target="_blank"
+          >
+            Pelayanan Propam Presisi
+          </Link>
+          <Link href="https://dumaspresisi.polri.go.id/" target="_blank">
+            Pelayanan Dumas Presisi
+          </Link>
+          <Link href="https://polisiku.co.id/" target="_blank">
+            Pelayanan Polisiku
+          </Link>
+          <Link href="https://bos.polri.go.id/login" target="_blank">
+            Pelayanan BINMAS
+          </Link>
         </div>
-                <div className='w-min lg:w-max'>
+        <div className="w-min lg:w-max">
-                    <p className='text-xl font-bold'>Subscribe</p>
+          <p className="text-xl font-bold">Subscribe</p>
           <p>Dapatkan info & event terupdate dari kami.</p>
-                    <div className='flex '>
+          <div className="flex ">
             <Input
               label="Email"
               placeholder="Email Anda"
-                            className='pt- rounded-none'
+              className="pt- rounded-none"
               classNames={{
-                                inputWrapper: "rounded-none rounded-l-lg"
+                inputWrapper: "rounded-none rounded-l-lg",
               }}
               startContent={
                 <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
               }
             />
-                        <div className='bg-[#C3160F] flex items-center justify-center w-16 rounded-r-lg cursor-pointer'><SendIcon /></div>
+            <div className="bg-[#C3160F] flex items-center justify-center w-16 rounded-r-lg cursor-pointer">
+              <SendIcon />
+            </div>
           </div>
           <Link href={`/auth`}>
-                        <Button className='mt-1 bg-[#DD8306]'>
+            <Button className="mt-1 bg-[#DD8306] text-white">
               Kontributor Wilayah
             </Button>
           </Link>
         </div>
       </div>
-            <div className='dark:bg-black text-black dark:text-white text-center py-3 text-xs md:text-medium flex justify-center font-normal'>&copy; Copyright Humas<p className='text-red-700'>&nbsp; POLRI &reg;</p>&nbsp; All Rights Reserved</div>
+      <div className="dark:bg-black text-black dark:text-white text-center py-3 text-xs md:text-medium flex justify-center font-normal">
+        &copy; Copyright Humas<p className="text-red-700">&nbsp; POLRI &reg;</p>
+        &nbsp; All Rights Reserved
       </div>
-    )
+    </div>
+  );
 }

components/landing/HeaderNews.tsx

@@ -19,7 +19,6 @@ export default function HeaderNews() {
     async function getArticle() {
       const req = { page: 1, search: "", limit: "10" };
       const response = await getListArticle(req);
-      console.log("res", response?.data?.data);
       setArticle(response?.data?.data);
     }
     getArticle();

components/landing/MedolUpdate.tsx

@@ -58,7 +58,7 @@ export default function MedolUpdate() {
 
   async function getDataImage(data: any) {
     let temp = data;
-    for (let i = 0; i < data.length; i++) {
+    for (let i = 0; i < data?.length; i++) {
       const res = await getImageInp(temp[i].id);
       const data = res?.data[0]?.guid?.rendered;
       temp[i].image = data;

components/main/detail/contact.tsx

@@ -3,7 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@nextui-org/button";
 import { Input, Textarea } from "@nextui-org/input";
 import { Select, SelectItem, SelectSection } from "@nextui-org/react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import {
@@ -126,8 +126,17 @@ const Contact: React.FC = () => {
               <div>Hari Senin - Jumat | 08:00 - 15:00 WIB</div>
             </div>
           </div>
-          <div className="flex justify-center border-2 border-red-500 h-[280px] pt-2">
+          <div className="flex justify-center border-2 border-red-500 h-[280px]">
-            {/* <Image height={100} width={100} src="/maps.png" alt="maps" className="" /> */}
+            {/* <iframe
+              src={`https://www.google.com/maps/embed/v1/place?key=${process.env.NEXT_PUBLIC_MAPS_API_KEY}&q=-6.2389608,106.7955078`}
+            ></iframe> */}
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11218.073168001461!2d106.7955078024133!3d-6.238960764805329!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f169ccddedf3%3A0xb6702055b4d182f6!2sMarkas%20Besar%20Kepolisian%20Negara%20Republik%20Indonesia%20(MABES%20POLRI)!5e0!3m2!1sen!2sus!4v1733122332539!5m2!1sen!2sus"
+              width="800"
+              height="275"
+              style={{ border: 0 }}
+              loading="lazy"
+            ></iframe>{" "}
           </div>
         </div>
         <div className="w-auto lg:w-2/3 relative p-2 md:p-5 space-y-3 pr-2 md:pr-28">
@@ -245,7 +254,7 @@ const Contact: React.FC = () => {
           </div>
           <div className="flex justify-center md:justify-end">
             <Button
-              className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg"
+              className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg text-white"
               size="md"
             >
               Kirim Pesan

components/table/master-role-table.tsx

@@ -3,7 +3,7 @@ import {
   CreateIconIon,
   DeleteIcon,
   DotsYIcon,
-    EyeIconMdi
+  EyeIconMdi,
 } from "@/components/icons";
 import { error } from "@/config/swal";
 import { deleteMasterUser } from "@/service/master-user";
@@ -17,13 +17,14 @@ import {
   DropdownItem,
   DropdownMenu,
   DropdownTrigger,
+  Pagination,
   Spinner,
   Table,
   TableBody,
   TableCell,
   TableColumn,
   TableHeader,
-    TableRow
+  TableRow,
 } from "@nextui-org/react";
 import Link from "next/link";
 import { Key, useCallback, useEffect, useState } from "react";
@@ -44,28 +45,36 @@ const statusColorMap = {
   vacation: "warning",
 };
 
-
 export default function MasterRoleTable() {
   const MySwal = withReactContent(Swal);
   const [role, setRole] = useState<MasterUserRole[]>([]);
-
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
 
   useEffect(() => {
     initState();
-    }, []);
+  }, [page]);
 
   async function initState() {
-        const res = await listUserRole();
+    const res = await listUserRole({ page: page, limit: 10 });
-        setRole(res.data?.data);
+    getTableNumber(10, res?.data?.data);
-
+    setTotalPage(res?.data?.meta?.totalPage);
-        console.log("List Users", res.data.data);
   }
 
-    type TableRow = (typeof usersTable)[0];
+  const getTableNumber = (limit: number, data?: any) => {
-
+    if (data) {
+      const startIndex = limit * (page - 1);
+      let iterate = 0;
+      const newData = data.map((value: any) => {
+        iterate++;
+        value.no = startIndex + iterate;
+        return value;
+      });
+      setRole(newData);
+    }
+  };
   const columns = [
-
+    { name: "No", uid: "no" },
-        { name: "No", uid: "id" },
     { name: "Role", uid: "name" },
     { name: "Description", uid: "description" },
     { name: "Code", uid: "code" },
@@ -74,7 +83,6 @@ export default function MasterRoleTable() {
     { name: "Aksi", uid: "actions" },
   ];
 
-
   async function doDelete(id: any) {
     // loading();
     const resDelete = await deleteMasterUserRole(id);
@@ -110,7 +118,7 @@ export default function MasterRoleTable() {
       confirmButtonText: "OK",
     }).then((result) => {
       if (result.isConfirmed) {
-                initState()
+        initState();
       }
     });
   }
@@ -127,42 +135,44 @@ export default function MasterRoleTable() {
       user: "Olivia Rhya",
       status: "active",
       projectName: "Xtreme admin",
-            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
+      avatar:
+        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
     },
     {
       id: 2,
       user: "Barbara Steele",
       status: "cancel",
       projectName: "Adminpro admin",
-            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181661.png",
+      avatar:
+        "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181661.png",
     },
     {
       id: 3,
       user: "Leonardo Gordon",
       status: "pending",
       projectName: "Monster admin",
-            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181657.png",
+      avatar:
+        "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181657.png",
     },
     {
       id: 4,
       user: "Evelyn Pope",
       status: "cancel",
       projectName: "Materialpro admin",
-            avatar: "https://cdn.icon-icons.com/icons2/3708/PNG/512/man_person_people_avatar_icon_230017.png",
+      avatar:
+        "https://cdn.icon-icons.com/icons2/3708/PNG/512/man_person_people_avatar_icon_230017.png",
     },
     {
       id: 5,
       user: "Tommy Garza",
       status: "cancel",
       projectName: "Elegant admin",
-            avatar: "https://cdn.icon-icons.com/icons2/1736/PNG/512/4043275-avatar-man-person-punk_113271.png",
+      avatar:
+        "https://cdn.icon-icons.com/icons2/1736/PNG/512/4043275-avatar-man-person-punk_113271.png",
     },
-
-
   ];
 
-    const renderCell = useCallback(
+  const renderCell = useCallback((role: MasterUserRole, columnKey: Key) => {
-        (role: MasterUserRole, columnKey: Key) => {
     const cellValue = role[columnKey as keyof MasterUserRole];
     const statusColorMap: Record<string, ChipProps["color"]> = {
       active: "primary",
@@ -172,9 +182,7 @@ export default function MasterRoleTable() {
 
     switch (columnKey) {
       case "id":
-                    return (
+        return <div>{role.id}</div>;
-                        <div>{role.id}</div>
-                    )
 
       case "status":
         return (
@@ -200,35 +208,19 @@ export default function MasterRoleTable() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu>
-                                    <DropdownItem
+                <DropdownItem>
-
+                  <Link href={`/admin/master-role/detail/${role.id}`}>
-                                    >
-
-                                        <Link
-                                            href={`/admin/master-role/detail/${role.id}`}
-                                        >
                     <EyeIconMdi className="inline mr-2 mb-1" />
                     Detail
                   </Link>
-
                 </DropdownItem>
-                                    <DropdownItem
+                <DropdownItem>
-
+                  <Link href={`/admin/master-role/edit/${role.id}`}>
-                                    >
-
-                                        <Link
-                                            href={`/admin/master-role/edit/${role.id}`}
-
-                                        >
                     <CreateIconIon className="inline mr-2 mb-1" />
                     Edit
                   </Link>
-
                 </DropdownItem>
-                                    <DropdownItem
+                <DropdownItem onClick={() => handleDelete(role.id)}>
-                                        onClick={() => handleDelete(role.id)}
-                                    >
-
                   <DeleteIcon
                     color="red"
                     width={20}
@@ -236,9 +228,7 @@ export default function MasterRoleTable() {
                     className="inline mr-2 mb-1"
                   />
                   Delete
-
                 </DropdownItem>
-
               </DropdownMenu>
             </Dropdown>
           </div>
@@ -251,7 +241,6 @@ export default function MasterRoleTable() {
 
   return (
     <>
-
       <div className="mx-5 my-5">
         <div className="flex flex-col items-center rounded-2xl">
           <Table
@@ -261,7 +250,8 @@ export default function MasterRoleTable() {
             classNames={{
               th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
               base: "bg-white dark:bg-black border",
-                            wrapper: "min-h-[50px] bg-transpararent text-black dark:text-white ",
+              wrapper:
+                "min-h-[50px] bg-transpararent text-black dark:text-white ",
             }}
           >
             <TableHeader columns={columns}>
@@ -283,9 +273,23 @@ export default function MasterRoleTable() {
               )}
             </TableBody>
           </Table>
+          <div className="my-2 w-full flex justify-center">
+            <Pagination
+              isCompact
+              showControls
+              showShadow
+              color="primary"
+              classNames={{
+                base: "bg-transparent",
+                wrapper: "bg-transparent",
+              }}
+              page={page}
+              total={totalPage}
+              onChange={(page) => setPage(page)}
+            />
+          </div>
         </div>
       </div>
-
     </>
   );
 }

components/table/master-user-table.tsx

@@ -3,9 +3,9 @@ import {
   CreateIconIon,
   DeleteIcon,
   DotsYIcon,
-    EyeIconMdi
+  EyeIconMdi,
 } from "@/components/icons";
-import { error, success, } from "@/config/swal";
+import { error, success } from "@/config/swal";
 import { deleteArticle, getListArticle } from "@/service/article";
 import { deleteMasterUser, listMasterUsers } from "@/service/master-user";
 import { Article, MasterUser } from "@/types/globals";
@@ -17,68 +17,59 @@ import {
   DropdownItem,
   DropdownMenu,
   DropdownTrigger,
+  Pagination,
   Spinner,
   Table,
   TableBody,
   TableCell,
   TableColumn,
   TableHeader,
-    TableRow
+  TableRow,
 } from "@nextui-org/react";
 import Link from "next/link";
 import { Key, useCallback, useEffect, useState } from "react";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 
-type UserObject = {
+const columns = [
-    id: number;
+  { name: "No", uid: "no" },
-    user: string;
+  { name: "Username", uid: "username" },
-    status: string;
+  { name: "Fullname", uid: "fullname" },
-    projectName: string;
+  { name: "Email", uid: "email" },
-    avatar: string;
+  { name: "Identity Type", uid: "identityType" },
-};
+  { name: "Identity Number", uid: "identityNumber" },
-
+  // { name: "Users", uid: "users" },
-const statusColorMap = {
+  // { name: "Status", uid: "status" },
-    active: "success",
+  { name: "Aksi", uid: "actions" },
-    paused: "danger",
+];
-    vacation: "warning",
-};
-
 
 export default function MasterUserTable() {
   const MySwal = withReactContent(Swal);
   const [user, setUser] = useState<MasterUser[]>([]);
-
+  const [page, setPage] = useState(1);
-
+  const [totalPage, setTotalPage] = useState(1);
 
   useEffect(() => {
     initState();
-    }, []);
+  }, [page]);
 
   async function initState() {
-        const res = await listMasterUsers();
+    const res = await listMasterUsers({ page: page, limit: 10 });
-        setUser(res.data?.data);
+    getTableNumber(10, res?.data?.data);
-
+    setTotalPage(res?.data?.meta?.totalPage);
-        console.log("List Users", res.data.data);
   }
-
+  const getTableNumber = (limit: number, data?: any) => {
-    type TableRow = (typeof usersTable)[0];
+    if (data) {
-
+      const startIndex = limit * (page - 1);
-    const columns = [
+      let iterate = 0;
-
+      const newData = data.map((value: any) => {
-        { name: "No", uid: "id" },
+        iterate++;
-        { name: "Username", uid: "username" },
+        value.no = startIndex + iterate;
-        { name: "Fullname", uid: "fullname" },
+        return value;
-        { name: "Email", uid: "email" },
+      });
-        { name: "Gender", uid: "gender_type" },
+      setUser(newData);
-        { name: "Identity Type", uid: "identity_type" },
+    }
-        { name: "Identity Number", uid: "identity_number" },
+  };
-        { name: "Phone Number", uid: "phone_number" },
-        // { name: "Users", uid: "users" },
-        // { name: "Status", uid: "status" },
-        { name: "Aksi", uid: "actions" },
-    ];
-
 
   async function doDelete(id: any) {
     // loading();
@@ -115,59 +106,12 @@ export default function MasterUserTable() {
       confirmButtonText: "OK",
     }).then((result) => {
       if (result.isConfirmed) {
-                initState()
+        initState();
       }
     });
   }
 
-    // const statusOptions = [
+  const renderCell = useCallback((user: MasterUser, columnKey: Key) => {
-    //     { name: "Active", uid: "active" },
-    //     { name: "Paused", uid: "paused" },
-    //     { name: "Vacation", uid: "vacation" },
-    // ];
-
-    const usersTable = [
-        {
-            id: 1,
-            user: "Olivia Rhya",
-            status: "active",
-            projectName: "Xtreme admin",
-            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
-        },
-        {
-            id: 2,
-            user: "Barbara Steele",
-            status: "cancel",
-            projectName: "Adminpro admin",
-            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181661.png",
-        },
-        {
-            id: 3,
-            user: "Leonardo Gordon",
-            status: "pending",
-            projectName: "Monster admin",
-            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181657.png",
-        },
-        {
-            id: 4,
-            user: "Evelyn Pope",
-            status: "cancel",
-            projectName: "Materialpro admin",
-            avatar: "https://cdn.icon-icons.com/icons2/3708/PNG/512/man_person_people_avatar_icon_230017.png",
-        },
-        {
-            id: 5,
-            user: "Tommy Garza",
-            status: "cancel",
-            projectName: "Elegant admin",
-            avatar: "https://cdn.icon-icons.com/icons2/1736/PNG/512/4043275-avatar-man-person-punk_113271.png",
-        },
-
-
-    ];
-
-    const renderCell = useCallback(
-        (user: MasterUser, columnKey: Key) => {
     const cellValue = user[columnKey as keyof MasterUser];
     const statusColorMap: Record<string, ChipProps["color"]> = {
       active: "primary",
@@ -177,9 +121,7 @@ export default function MasterUserTable() {
 
     switch (columnKey) {
       case "id":
-                    return (
+        return <div>{user.id}</div>;
-                        <div>{user.id}</div>
-                    )
 
       case "status":
         return (
@@ -205,35 +147,13 @@ export default function MasterUserTable() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu>
-                                    <DropdownItem
+                <DropdownItem>
-
+                  <Link href={`/admin/master-user/edit/${user.id}`}>
-                                    >
-
-                                        <Link
-                                            href={`/admin/article/detail/${user.id}`}
-                                        >
-                                            <EyeIconMdi className="inline mr-2 mb-1" />
-                                            Detail
-                                        </Link>
-
-                                    </DropdownItem>
-                                    <DropdownItem
-
-                                    >
-
-                                        <Link
-                                            href={`/admin/article/edit/${user.id}`}
-
-                                        >
                     <CreateIconIon className="inline mr-2 mb-1" />
                     Edit
                   </Link>
-
                 </DropdownItem>
-                                    <DropdownItem
+                <DropdownItem onClick={() => handleDelete(user.id)}>
-                                        onClick={() => handleDelete(user.id)}
-                                    >
-
                   <DeleteIcon
                     color="red"
                     width={20}
@@ -241,9 +161,7 @@ export default function MasterUserTable() {
                     className="inline mr-2 mb-1"
                   />
                   Delete
-
                 </DropdownItem>
-
               </DropdownMenu>
             </Dropdown>
           </div>
@@ -256,7 +174,6 @@ export default function MasterUserTable() {
 
   return (
     <>
-
       <div className="mx-5 my-5">
         <div className="flex flex-col items-center rounded-2xl">
           <Table
@@ -266,7 +183,8 @@ export default function MasterUserTable() {
             classNames={{
               th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
               base: "bg-white dark:bg-black border",
-                            wrapper: "min-h-[50px] bg-transpararent text-black dark:text-white ",
+              wrapper:
+                "min-h-[50px] bg-transpararent text-black dark:text-white ",
             }}
           >
             <TableHeader columns={columns}>
@@ -288,9 +206,23 @@ export default function MasterUserTable() {
               )}
             </TableBody>
           </Table>
+          <div className="my-2 w-full flex justify-center">
+            <Pagination
+              isCompact
+              showControls
+              showShadow
+              color="primary"
+              classNames={{
+                base: "bg-transparent",
+                wrapper: "bg-transparent",
+              }}
+              page={page}
+              total={totalPage}
+              onChange={(page) => setPage(page)}
+            />
+          </div>
         </div>
       </div>
-
     </>
   );
 }

service/master-user-role.ts

@@ -1,10 +1,17 @@
-import { httpDeleteInterceptor, httpGet, httpPost } from "./http-config/axios-base-service";
+import {
+  httpDeleteInterceptor,
+  httpGet,
+  httpPost,
+} from "./http-config/axios-base-service";
 
-export async function listUserRole() {
+export async function listUserRole(data: any) {
   const headers = {
     "content-type": "application/json",
   };
-    return await httpGet(`/user-roles`, headers);
+  return await httpGet(
+    `/user-roles?limit=${data.limit}&page=${data.page}`,
+    headers
+  );
 }
 
 export async function createMasterUserRole(data: any) {

service/master-user.ts

@@ -4,11 +4,11 @@ import {
   httpPost,
 } from "./http-config/axios-base-service";
 
-export async function listMasterUsers() {
+export async function listMasterUsers(data: any) {
   const headers = {
     "content-type": "application/json",
   };
-  return await httpGet(`/users`, headers);
+  return await httpGet(`/users?page=${data.page}&limit=${data.limit}`, headers);
 }
 
 export async function createMasterUser(data: any) {