fix:tambah tenaga ahli admin

app/[locale]/(protected)/admin/add-experts/component/column.tsx

@@ -10,27 +10,7 @@ import {
   DropdownMenuItem,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
+import { Link } from "@/components/navigation";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/utils/globals";
-import { Link, useRouter } from "@/i18n/routing";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -49,23 +29,37 @@ const columns: ColumnDef<any>[] = [
     header: "Wilayah",
     cell: ({ row }) => <span>{row.getValue("address")}</span>,
   },
-  {
-    accessorKey: "role.name",
-    header: "Bidang Keahlian",
-    cell: ({ row }) => <span>{row.original.role?.name ?? "-"}</span>,
-  },
-
-  {
-    accessorKey: "experience",
-    header: "Pengalaman",
-    cell: ({ row }) => <span>{row.getValue("experience")}</span>,
-  },
-
   {
     accessorKey: "experience",
     header: "Posisi",
     cell: ({ row }) => <span>{row.getValue("experience")}</span>,
   },
+  {
+    accessorKey: "role.name",
+    header: "Bidang Keahlian",
+    cell: ({ row }) => (
+      <span>
+        {row.original.userProfilesAdditional?.userCompetency?.name ?? "-"}
+      </span>
+    ),
+  },
+
+  {
+    accessorKey: "userExperienceId", // gunakan accessorKey berbeda agar tidak duplikat
+    header: "Pengalaman",
+    cell: ({ row }) => {
+      const experienceId =
+        row.original.userProfilesAdditional?.userExperienceId;
+
+      const experienceMap: Record<number, string> = {
+        1: "Akademisi",
+        2: "Praktisi",
+        3: "Akademisi + Praktisi",
+      };
+
+      return <span>{experienceMap[experienceId] ?? "-"}</span>;
+    },
+  },
 
   {
     id: "actions",
@@ -84,8 +78,25 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+            <Link href={`/admin/add-experts/detail/${row?.original?.id}`}>
-              <Link href="#">Detail</Link>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <Eye className="w-4 h-4 me-1.5" />
+                View
+              </DropdownMenuItem>
+            </Link>
+
+            <Link href={`/admin/add-experts/update/${row?.original?.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <SquarePen className="w-4 h-4 me-1.5" />
+                Edit
+              </DropdownMenuItem>
+            </Link>
+            <DropdownMenuItem
+              // onClick={() => handleDeleteMedia(row.original.id)}
+              className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
+            >
+              <Trash2 className="w-4 h-4 me-1.5" />
+              Delete
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

app/[locale]/(protected)/admin/add-experts/create/page.tsx

@@ -272,8 +272,9 @@ export default function AddExpertForm() {
               <FormItem>
                 <FormLabel>Username</FormLabel>
                 <Input
+                  type="text"
                   value={field.value}
-                  placeholder="Masukkan Username"
+                  placeholder="Masukkan"
                   onChange={field.onChange}
                 />
 
@@ -290,7 +291,7 @@ export default function AddExpertForm() {
                 <Input
                   type="number"
                   value={field.value}
-                  placeholder="Masukkan Nama Lengkap"
+                  placeholder="Masukkan No.Hp"
                   onChange={field.onChange}
                 />
                 <FormMessage />
@@ -306,7 +307,7 @@ export default function AddExpertForm() {
                 <Input
                   type="email"
                   value={field.value}
-                  placeholder="Masukkan Nama Lengkap"
+                  placeholder="Masukkan email"
                   onChange={field.onChange}
                 />
                 <FormMessage />

app/[locale]/(protected)/admin/add-experts/detail/[id]/page.tsx

@@ -0,0 +1,15 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormDetailExperts from "@/components/form/experts/experts-detail";
+
+const ExpertsDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormDetailExperts />
+      </div>
+    </div>
+  );
+};
+
+export default ExpertsDetailPage;

app/[locale]/(protected)/admin/add-experts/update/[id]/page.tsx

@@ -0,0 +1,597 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { useRouter } from "@/i18n/routing";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useEffect, useState } from "react";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListExperiences,
+  getUserById,
+  saveUserInternal,
+  saveUserRolePlacements,
+} from "@/service/management-user/management-user";
+import { loading } from "@/config/swal";
+import { Eye, EyeOff } from "lucide-react";
+import { useParams } from "next/navigation";
+
+const FormSchema = z.object({
+  name: z.string({
+    required_error: "Required",
+  }),
+  username: z.string({
+    required_error: "Required",
+  }),
+  password: z.string({
+    required_error: "Required",
+  }),
+  phoneNumber: z.string({
+    required_error: "Required",
+  }),
+  email: z.string({
+    required_error: "Required",
+  }),
+  skills: z.string({
+    required_error: "Required",
+  }),
+  experiences: z.string({
+    required_error: "Required",
+  }),
+  company: z.string({
+    required_error: "Required",
+  }),
+});
+
+export type Placements = {
+  index: number;
+  roleId?: string;
+  userLevelId?: number;
+};
+
+interface Detail {
+  id: string;
+  fullname: string;
+  username: string;
+  phoneNumber: string;
+  email: string;
+  birthPlace: string;
+  birthDate: string;
+  education: string;
+  career: string;
+  expertise: string;
+  experience: string;
+  position: string;
+  region: string;
+  cvUrl: string;
+  photoUrl: string;
+  isActive: boolean;
+  userProfilesAdditional?: {
+    companyName: string;
+    userExperienceId: any;
+    userCompetency?: {
+      id: number;
+      name: string;
+      isActive: boolean;
+      createdAt: string;
+    };
+  };
+}
+
+export default function UpdateExpertForm() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id;
+  const [detail, setDetail] = useState<Detail | null>(null);
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+  const [incrementId, setIncrementId] = useState(1);
+  const [placementRows, setPlacementRows] = useState<Placements[]>([
+    { index: 0, roleId: "", userLevelId: 0 },
+  ]);
+  const [userCompetencies, setUserCompetencies] = useState<any>();
+  const [userExperiences, setUserExperiences] = useState<any>();
+  const [userLevels, setUserLevels] = useState<any>();
+  const [passwordType, setPasswordType] = useState("password");
+  const [showPassword, setShowPassword] = useState(false);
+
+  useEffect(() => {
+    getDataAdditional();
+  }, []);
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await getUserById(String(id));
+        const details = response?.data?.data;
+        setDetail(details);
+      }
+      if (detail?.userProfilesAdditional?.companyName) {
+        form.setValue("company", detail.userProfilesAdditional.companyName);
+      }
+
+      if (detail?.userProfilesAdditional?.userCompetency?.id) {
+        form.setValue(
+          "skills",
+          String(detail.userProfilesAdditional.userCompetency.id)
+        );
+      }
+
+      if (detail?.userProfilesAdditional?.userExperienceId) {
+        form.setValue(
+          "experiences",
+          String(detail.userProfilesAdditional.userExperienceId)
+        );
+      }
+    }
+    initState();
+  }, [id]);
+
+  if (!detail) return <div>Loading...</div>;
+
+  const togglePasswordType = () => {
+    setPasswordType((prevType) =>
+      prevType === "password" ? "text" : "password"
+    );
+  };
+
+  const roleSelection = [
+    {
+      id: "11",
+      name: "Koor Kurator",
+    },
+    {
+      id: "12",
+      name: "Kurator",
+    },
+  ];
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    console.log("data", data);
+
+    const dataReq = {
+      id: detail?.id,
+      firstName: data.name,
+      username: data.username,
+      email: data.email,
+      password: data.password,
+      address: "",
+      roleId: "EXP-ID",
+      phoneNumber: data.phoneNumber,
+      userCompetencyId: data.skills,
+      userExperienceId: data.experiences,
+      companyName: data.company,
+    };
+
+    loading();
+    const res = await saveUserInternal(dataReq);
+    const resData = res?.data?.data;
+    const userProfileId = resData?.id;
+
+    var placementArr: any[] = [];
+    placementRows.forEach((row: any) => {
+      placementArr.push({
+        roleId: Number(row.roleId),
+        userLevelId: Number(row.userLevelId),
+        userProfileId: userProfileId,
+      });
+    });
+
+    const dataReq2 = {
+      userId: userProfileId,
+      placements: placementArr,
+    };
+    const res2 = await saveUserRolePlacements(dataReq2);
+    const resData2 = res2?.data?.data;
+
+    success("/admin/add-experts");
+  };
+
+  function success(redirect: string): void {
+    MySwal.fire({
+      title: '<p class="text-green-600 font-bold">Sukses</p>',
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: '<span class="text-white">OK</span>',
+      allowOutsideClick: false,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push(redirect);
+      }
+    });
+  }
+
+  async function getDataAdditional() {
+    const resCompetencies = await getListCompetencies();
+    setUserCompetencies(resCompetencies?.data?.data);
+
+    const resExperiences = await getListExperiences();
+    setUserExperiences(resExperiences?.data?.data);
+    console.log("experience", resExperiences?.data?.data);
+
+    const resUserLevels = await AdministrationLevelList();
+    const data = resUserLevels?.data?.data;
+    var levelsArr: any[] = [];
+    data.forEach((levels: any) => {
+      levelsArr.push({
+        id: levels.id,
+        label: levels.name,
+        name: levels.name,
+        value: String(levels.id),
+        levelNumber: levels.levelNumber,
+      });
+    });
+    setUserLevels(levelsArr);
+  }
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/add-experts");
+      }
+    });
+  }
+
+  const handleSelectionChange = (
+    index: number,
+    type: "roleId" | "userLevelId",
+    value: string
+  ) => {
+    setPlacementRows((prevRows) =>
+      prevRows.map((row) =>
+        row.index === index ? { ...row, [type]: value } : row
+      )
+    );
+  };
+
+  const handleRemoveRow = (index: number) => {
+    console.log(index);
+    console.log(placementRows);
+    const newPlacements = placementRows.filter((row) => row.index != index);
+    console.log(newPlacements);
+    setPlacementRows(newPlacements);
+  };
+
+  const handleAddRow = () => {
+    if (placementRows.length < 2) {
+      setPlacementRows((prevRows) => [
+        ...prevRows,
+        { index: incrementId, roleId: "", userLevelId: 0 },
+      ]);
+      setIncrementId((prevId) => prevId + 1);
+    }
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+
+      <Form {...form}>
+        {detail !== undefined ? (
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-3 bg-white rounded-sm p-4"
+          >
+            <p className="fonnt-semibold">Campaign</p>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nama Lengkap</FormLabel>
+                  <Input
+                    defaultValue={detail?.fullname}
+                    placeholder="Masukkan Nama Lengkap"
+                    onChange={field.onChange}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="username"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Username</FormLabel>
+                  <Input
+                    type="text"
+                    defaultValue={detail?.username}
+                    placeholder="Masukkan"
+                    onChange={field.onChange}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="phoneNumber"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>No. HP</FormLabel>
+                  <Input
+                    type="number"
+                    defaultValue={detail?.phoneNumber}
+                    placeholder="Masukkan No.Hp"
+                    onChange={field.onChange}
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <Input
+                    type="email"
+                    defaultValue={detail?.email}
+                    placeholder="Masukkan email"
+                    onChange={field.onChange}
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <div className="relative">
+                    <Input
+                      value={field.value}
+                      type={showPassword ? "text" : "password"}
+                      placeholder="Masukkan Password"
+                      onChange={field.onChange}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500 hover:text-default-700"
+                      tabIndex={-1}
+                    >
+                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                    </button>
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="skills"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Bidang Keahlian</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={
+                            detail?.userProfilesAdditional?.userCompetency?.name
+                              ? detail.userProfilesAdditional.userCompetency
+                                  .name
+                              : "Pilih Bidang Keahlian"
+                          }
+                        />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {userCompetencies?.map((item: any) => (
+                        <SelectItem key={item.id} value={String(item.id)}>
+                          {item.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="experiences"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Pengalaman</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={
+                            detail &&
+                            detail.userProfilesAdditional &&
+                            detail.userProfilesAdditional.userExperienceId
+                              ? userExperiences?.find(
+                                  (item: any) =>
+                                    item.id ===
+                                    detail.userProfilesAdditional!
+                                      .userExperienceId
+                                )?.name
+                              : "Pilih Pengalaman"
+                          }
+                        />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {userExperiences?.map((item: any) => (
+                        <SelectItem key={item.id} value={String(item.id)}>
+                          {item.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="company"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nama Institusi/Perusahaan</FormLabel>
+                  <Input
+                    type="text"
+                    value={detail?.userProfilesAdditional?.companyName || ""}
+                    placeholder="Nama Institusi/Perusahaan"
+                    onChange={field.onChange}
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-4">
+              <FormLabel>Posisi</FormLabel>
+              {placementRows?.map((row: any) => (
+                <div key={row.index} className="flex items-center gap-2 my-2">
+                  <Select
+                    onValueChange={(e) =>
+                      handleSelectionChange(row.index, "roleId", e)
+                    }
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Pilih Role" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {roleSelection?.map((item: any) => (
+                        <SelectItem key={item.id} value={String(item.id)}>
+                          {item.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {/* <Select
+                  onValueChange={(e) =>
+                    handleSelectionChange(row.index, "userLevelId", e)
+                  }
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih User Level" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {userLevels?.map((item: any) => (
+                      <SelectItem key={item.id} value={String(item.id)}>
+                        {item.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select> */}
+                  <Select
+                    onValueChange={(e) =>
+                      handleSelectionChange(row.index, "userLevelId", e)
+                    }
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Pilih User Level" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="216">MABES POLRI</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  {placementRows.length > 1 && (
+                    <Button
+                      type="button"
+                      size="md"
+                      color="destructive"
+                      onClick={() => handleRemoveRow(row.index)}
+                    >
+                      Hapus
+                    </Button>
+                  )}
+                </div>
+              ))}
+              <Button
+                type="button"
+                size="md"
+                onClick={handleAddRow}
+                disabled={placementRows.length >= 2} // optional: disable button if already 1 row added
+              >
+                Tambah
+              </Button>
+            </div>
+
+            <div className="flex flex-row justify-end gap-2 mt-4 pt-4">
+              <Button
+                size="md"
+                type="button"
+                variant="outline"
+                color="destructive"
+                className="text-xs"
+              >
+                Cancel
+              </Button>
+              <Button
+                size="md"
+                type="submit"
+                color="primary"
+                className="text-xs"
+              >
+                Submit
+              </Button>
+            </div>
+          </form>
+        ) : (
+          ""
+        )}
+      </Form>
+    </div>
+  );
+}

components/form/experts/experts-detail.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import { getUserById } from "@/service/management-user/management-user";
+import { Card } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { FileText } from "lucide-react";
+
+interface Detail {
+  fullname: string;
+  birthPlace: string;
+  birthDate: string;
+  education: string;
+  career: string;
+  expertise: string;
+  experience: string;
+  position: string;
+  region: string;
+  cvUrl: string;
+  photoUrl: string;
+  isActive: boolean;
+}
+
+export default function FormDetailExperts() {
+  const params = useParams();
+  const id = params?.id;
+  const [detail, setDetail] = useState<Detail | null>(null);
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await getUserById(String(id));
+        const details = response?.data?.data;
+        setDetail(details);
+      }
+    }
+    initState();
+  }, [id]);
+
+  if (!detail) return <div>Loading...</div>;
+
+  return (
+    <Card className="flex flex-col md:flex-row p-4 gap-6">
+      <div className="flex flex-col items-center">
+        <Image
+          src={"/assets/img/experts.png"}
+          alt="Profile Picture"
+          width={450}
+          height={850}
+          className="rounded-md object-cover"
+        />
+        <div className="flex items-start gap-2 mt-2">
+          <span className="text-sm">Not Active</span>
+          <Switch checked={detail.isActive} disabled />
+          <span className="text-sm">Active</span>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-y-2 w-full">
+        <div>
+          <strong>Nama:</strong> {detail?.fullname}
+        </div>
+        <div>
+          <strong>Tempat / Tanggal Lahir:</strong> {detail.birthPlace},{" "}
+          {detail.birthDate}
+        </div>
+        <div>
+          <strong>Pendidikan:</strong> {detail.education}
+        </div>
+        <div className="sm:col-span-2">
+          <strong>Karier:</strong>
+          <p className="whitespace-pre-line">{detail.career}</p>
+        </div>
+        <div>
+          <strong>Bidang Keahlian:</strong> {detail.expertise}
+        </div>
+        <div>
+          <strong>Pengalaman:</strong> {detail.experience}
+        </div>
+        <div>
+          <strong>Posisi:</strong> {detail.position}
+        </div>
+        <div>
+          <strong>Wilayah:</strong> {detail.region}
+        </div>
+        <div className="sm:col-span-2">
+          <strong>CV:</strong>
+          <div className="mt-1">
+            <Button variant="outline" asChild>
+              <a href={detail.cvUrl} target="_blank" rel="noopener noreferrer">
+                <FileText className="mr-2 h-4 w-4" /> Lihat CV
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

components/partials/auth/login-form.tsx

@@ -534,10 +534,10 @@ const LoginForm = () => {
               </div>
 
               <Button
-                type="button"
+                type="submit"
                 fullWidth
-                onClick={handleEmailValidation}
+                // onClick={handleEmailValidation}
-                disabled={isPending}
+                // disabled={isPending}
               >
                 Selanjutnya
               </Button>