fix:sign-up section

components/form/sign-up.tsx

@@ -2,152 +2,103 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import Cookies from "js-cookie";
+// import { close, error, loading } from "@/config/swal";
 import { useRouter } from "next/navigation";
+
 import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
 import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import { Label } from "../ui/label";
+
+// import { saveActivity } from "@/service/activity-log";
+
+import Swal from "sweetalert2";
+import { error } from "console";
+import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
 import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
-import { requestOTP, createUser } from "@/service/auth";
+import { registerTenant } from "@/service/auth";
 
 export default function SignUp() {
   const router = useRouter();
+  const [isVisible, setIsVisible] = useState(false);
+  const [isVisibleSetup, setIsVisibleSetup] = useState([false, false]);
+  const [oldEmail, setOldEmail] = useState("");
+  const [newEmail, setNewEmail] = useState("");
+  const [passwordSetup, setPasswordSetup] = useState("");
+  const [confPasswordSetup, setConfPasswordSetup] = useState("");
+
+  const toggleVisibility = () => setIsVisible(!isVisible);
+  const [needOtp, setNeedOtp] = useState(false);
+  const [isFirstLogin, setFirstLogin] = useState(false);
+  const [otpValue, setOtpValue] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [accessData, setAccessData] = useState<any>();
+  const [profile, setProfile] = useState<any>();
+  const [isValidEmail, setIsValidEmail] = useState(false);
+  const [isResetPassword, setIsResetPassword] = useState(false);
+  const [checkUsernameValue, setCheckUsernameValue] = useState("");
   const MySwal = withReactContent(Swal);
-  const [step, setStep] = useState<"login" | "otp" | "form">("login");
+
-  const [role, setRole] = useState("umum");
+  const setValUsername = (e: any) => {
+    const uname = e.replaceAll(/[^\w.-]/g, "");
+    setUsername(uname.toLowerCase());
+  };
+
+  const onSubmit = () => {
+    // Simpan userId dummy ke cookie
+    Cookies.set("userId", "3");
+
+    // (Opsional) Simpan juga data lainnya jika dibutuhkan
+    // Cookies.set("username", username);
+
+    // Redirect ke halaman dashboard atau homepage
+    router.push("/"); // Ganti dengan path sesuai kebutuhan
+  };
+
+  const [step, setStep] = useState<"login" | "otp">("login");
   const [email, setEmail] = useState("");
+  const [role, setRole] = useState("umum");
   const [otp, setOtp] = useState(["", "", "", "", "", ""]);
-  const [membershipType, setMembershipType] = useState("");
+  const [membership, setMembership] = useState("");
   const [certNumber, setCertNumber] = useState("");
-  const [namaTenant, setNamaTenant] = useState("");
+  const [membershipType, setMembershipType] = useState("");
-  const [namaPerusahaan, setNamaPerusahaan] = useState("");
+  const [nrp, setNrp] = useState("");
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
-  const [fullname, setFullname] = useState("");
+  const [whatsapp, setWhatsapp] = useState("");
-  const [username, setUsername] = useState("");
+  const [namaTenant, setNamaTenant] = useState("");
-  const [phoneNumber, setPhoneNumber] = useState("");
+  const [tenantPassword, setTenantPassword] = useState("");
-  const [address, setAddress] = useState("");
+  const [confirmTenantPassword, setConfirmTenantPassword] = useState("");
-  const [dateOfBirth, setDateOfBirth] = useState("");
+  const [firstNameKontributor, setFirstNameKontributor] = useState("");
-  const [genderType, setGenderType] = useState("male");
+  const [lastNameKontributor, setLastNameKontributor] = useState("");
-  const [password, setPassword] = useState("");
+  const [whatsappKontributor, setWhatsappKontributor] = useState("");
-  const [workType, setWorkType] = useState("");
+  const [namaPerusahaan, setNamaPerusahaan] = useState("");
+  const [kategoriPerusahaan, setKategoriPerusahaan] = useState("");
+  const [kontributorPassword, setKontributorPassword] = useState("");
+  const [confirmKontributorPassword, setConfirmKontributorPassword] =
+    useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [formErrors, setFormErrors] = useState<any>({});
 
-  const handleSendOtp = async (e: React.FormEvent) => {
+  const handleSendOtp = (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (!email) {
+    // If role is tenant, handle tenant registration directly
-      if (!email) {
+    if (role === "tenant") {
-        MySwal.fire({
+      handleTenantRegistration(e);
-          icon: "error",
-          title: "Error",
-          text: "Email wajib diisi",
-        });
-        return;
-      }
       return;
     }
 
-    let name = "";
+    // For other roles, proceed with OTP flow
-    if (role === "tenant") name = namaTenant || `${firstName} ${lastName}`;
-    else if (role === "kontributor")
-      name = namaPerusahaan || `${firstName} ${lastName}`;
-    else if (role === "jurnalis") name = certNumber || "Jurnalis";
-    else name = fullname || email;
-
-    try {
-      const res = await requestOTP({ email, name });
-
-      if (!res?.error) {
-        MySwal.fire({
-          icon: "success",
-          title: "Sukses",
-          text: "OTP berhasil dikirim ke email anda",
-        });
     setStep("otp");
-      } else {
-        MySwal.fire({
-          icon: "error",
-          title: "Gagal",
-          text: res.message || "Gagal mengirim OTP",
-        });
-      }
-    } catch (err) {
-      console.error("Error send otp:", err);
-      MySwal.fire({
-        icon: "error",
-        title: "Terjadi kesalahan server",
-        text: "Gagal mengirim OTP",
-      });
-    }
   };
 
-  const handleVerifyOtp = async (e: React.FormEvent) => {
+  const handleVerifyOtp = (e: React.FormEvent) => {
     e.preventDefault();
     const code = otp.join("");
-    if (code.length !== 6) {
+    // Verifikasi kode OTP
-      MySwal.fire({
+    console.log("Kode OTP:", code);
-        icon: "error",
-        title: "OTP harus 6 digit",
-        text: "error",
-      });
-      return;
-    }
-    MySwal.fire({
-      icon: "success",
-      title: "Sukses",
-      text: "OTP diverifikasi!",
-    });
-    setStep("form");
-  };
-
-  const handleRegister = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    const payload = {
-      address,
-      clientId: "78356d32-52fa-4dfc-b836-6cebf4e3eead",
-      dateOfBirth,
-      email,
-      fullName: fullname,
-      genderType,
-      identityGroup: "",
-      identityGroupNumber: "",
-      identityNumber: "",
-      identityType: "",
-      lastEducation: "",
-      password,
-      phoneNumber,
-      userLevelId: 1,
-      userRoleId: 1,
-      username,
-      workType,
-    };
-
-    try {
-      const res = await createUser(payload);
-      if (!res?.error) {
-        MySwal.fire({
-          icon: "success",
-          title: "Sukses",
-          text: "Akun berhasil dibuat!",
-        });
-        router.push("/auth");
-      } else {
-        MySwal.fire({
-          icon: "error",
-          title: "Gagal",
-          text: res.message || "Gagal membuat akun",
-        });
-      }
-    } catch (err) {
-      console.error("Register error:", err);
-      MySwal.fire({
-        icon: "error",
-        title: "Gagal",
-        text: "Terjadi kesalahan server",
-      });
-    }
   };
 
   const handleOtpChange = (index: number, value: string) => {
@@ -155,28 +106,178 @@ export default function SignUp() {
     const newOtp = [...otp];
     newOtp[index] = value;
     setOtp(newOtp);
+    // Fokus otomatis ke input selanjutnya
     const nextInput = document.getElementById(`otp-${index + 1}`);
     if (value && nextInput) nextInput.focus();
   };
 
+  // Form validation functions
+  const validateEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const validatePhone = (phone: string) => {
+    const phoneRegex = /^[0-9+\-\s()]+$/;
+    return phoneRegex.test(phone) && phone.length >= 10;
+  };
+
+  const validatePassword = (password: string) => {
+    return password.length >= 8;
+  };
+
+  const validateTenantForm = () => {
+    const errors: any = {};
+
+    if (!firstName.trim()) {
+      errors.firstName = "First name is required";
+    }
+
+    if (!lastName.trim()) {
+      errors.lastName = "Last name is required";
+    }
+
+    if (!email.trim()) {
+      errors.email = "Email is required";
+    } else if (!validateEmail(email)) {
+      errors.email = "Please enter a valid email address";
+    }
+
+    if (!whatsapp.trim()) {
+      errors.whatsapp = "WhatsApp number is required";
+    } else if (!validatePhone(whatsapp)) {
+      errors.whatsapp = "Please enter a valid phone number";
+    }
+
+    if (!namaTenant.trim()) {
+      errors.namaTenant = "Tenant name is required";
+    }
+
+    if (!tenantPassword) {
+      errors.tenantPassword = "Password is required";
+    } else if (!validatePassword(tenantPassword)) {
+      errors.tenantPassword = "Password must be at least 8 characters";
+    }
+
+    if (!confirmTenantPassword) {
+      errors.confirmTenantPassword = "Please confirm your password";
+    } else if (tenantPassword !== confirmTenantPassword) {
+      errors.confirmTenantPassword = "Passwords do not match";
+    }
+
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleTenantRegistration = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateTenantForm()) {
+      return;
+    }
+
+    setIsLoading(true);
+    setFormErrors({});
+
+    try {
+      const registrationData = {
+        adminUser: {
+          address: "Jakarta", // Default address as per API requirement
+          email: email,
+          fullname: `${firstName} ${lastName}`,
+          password: tenantPassword,
+          phoneNumber: whatsapp,
+          username: `${firstName}-${lastName}`, // Using firstName + lastName as username
+        },
+        client: {
+          clientType: "sub_client", // Hardcoded as per API requirement
+          name: namaTenant,
+          parentClientId: "78356d32-52fa-4dfc-b836-6cebf4e3eead", // Hardcoded as per API requirement
+        },
+      };
+
+      const response = await registerTenant(registrationData);
+
+      if (response.error) {
+        MySwal.fire({
+          title: "Registration Failed",
+          text: response.message || "An error occurred during registration",
+          icon: "error",
+          confirmButtonText: "OK",
+        });
+      } else {
+        MySwal.fire({
+          title: "Registration Successful",
+          text: "Your tenant account has been created successfully!",
+          icon: "success",
+          confirmButtonText: "OK",
+        }).then(() => {
+          // Redirect to login page or dashboard
+          router.push("/auth");
+        });
+      }
+    } catch (error) {
+      console.error("Registration error:", error);
+      MySwal.fire({
+        title: "Registration Failed",
+        text: "An unexpected error occurred. Please try again.",
+        icon: "error",
+        confirmButtonText: "OK",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <div className="min-h-screen flex">
-      {/* Left Side */}
+      {/* Left Side - Logo Section */}
-      <div className="hidden lg:flex lg:w-1/2 bg-white items-center justify-center">
+      <div className="hidden lg:flex lg:w-1/2 bg-white relative overflow-hidden">
+        <div className="absolute inset-0 bg-white"></div>
+        <div className="relative z-10 flex items-center justify-center w-full p-12">
           <div className="text-center">
             <Link href={"/"}>
-            <img src="/Group.png" alt="Logo" className="max-w-2xl h-auto" />
+              <div>
-          </Link>
+                <img
-          <h2 className="text-2xl font-bold mt-4">Portal NetIdhub</h2>
+                  src="/Group.png"
+                  alt="Mikul News Logo"
+                  className="max-w-2xl h-auto drop-shadow-lg"
+                />
               </div>
+            </Link>
+            <div className="mt-8 text-white/90">
+              <h2 className="text-2xl font-bold mb-2">Portal NetIdhub</h2>
+              <p className="text-sm opacity-80">Platform beyond classic</p>
+            </div>
+          </div>
+        </div>
+        {/* Decorative elements */}
+        <div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full blur-xl"></div>
+        <div className="absolute bottom-20 right-20 w-32 h-32 bg-white/5 rounded-full blur-2xl"></div>
       </div>
 
-      {/* Right Side */}
+      {/* Right Side - Login Form */}
       <div className="w-full lg:w-1/2 flex items-center justify-center p-8">
         <div className="w-full max-w-md">
-          {/* Step 1: Pilih Role + Email */}
+          <div className=" ">
-          {step === "login" && (
+            <div className="text-center mb-8">
-            <form onSubmit={handleSendOtp} className="space-y-4">
+              <div className=" w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-8">
+                <img
+                  src="/logo-netidhub.png"
+                  alt="netidhub Logo"
+                  className="max-w-[150px] h-auto drop-shadow-lg"
+                />
+              </div>
+              <h2 className="text-lg font-bold text-gray-900 mb-2 mt-5">
+                MENYATUKAN INDONESIA
+              </h2>
+            </div>
+            {step === "login" ? (
+              <form
+                onSubmit={handleSendOtp}
+                className="w-full max-w-lg p-6 ml-0 md:ml-5"
+              >
+                {/* Radio Buttons */}
                 <RadioGroup
                   defaultValue="umum"
                   className="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-6"
@@ -200,81 +301,62 @@ export default function SignUp() {
                   </div>
                 </RadioGroup>
 
+                {/* Jurnalis: Select Keanggotaan */}
                 {role === "jurnalis" && (
-                <>
+                  <div className="mb-4 space-y-4">
                     <select
-                    className="w-full border rounded-md p-2"
+                      required
+                      className="w-full border border-gray-300 rounded-md p-2 text-sm"
                       value={membershipType}
                       onChange={(e) => setMembershipType(e.target.value)}
                     >
                       <option value="">Pilih jenis keanggotaan</option>
-                    <option value="pwi">PWI</option>
+                      <option value="pwi">
-                    <option value="ijti">IJTI</option>
+                        PWI (Persatuan Wartawan Indonesia)
-                    <option value="pfi">PFI</option>
+                      </option>
-                    <option value="aji">AJI</option>
+                      <option value="ijti">
-                    <option value="lainnya">Lainnya</option>
+                        IJTI (Ikatan Jurnalis Televisi Indonesia)
+                      </option>
+                      <option value="pfi">PFI (Pewarta Foto Indonesia)</option>
+                      <option value="aji">
+                        AJI (Asosiasi Jurnalis Indonesia)
+                      </option>
+                      <option value="lainnya">Identitas Lainnya</option>
                     </select>
+
+                    {/* Nomor Sertifikasi */}
                     <Input
                       type="text"
+                      required
                       placeholder="Nomor Sertifikasi Wartawan"
                       value={certNumber}
                       onChange={(e) => setCertNumber(e.target.value)}
                     />
-                </>
+                  </div>
-              )}
-
-              {role === "tenant" && (
-                <>
-                  <Input
-                    type="text"
-                    placeholder="Nama Tenant"
-                    value={namaTenant}
-                    onChange={(e) => setNamaTenant(e.target.value)}
-                  />
-                  <Input
-                    type="text"
-                    placeholder="First Name"
-                    value={firstName}
-                    onChange={(e) => setFirstName(e.target.value)}
-                  />
-                  <Input
-                    type="text"
-                    placeholder="Last Name"
-                    value={lastName}
-                    onChange={(e) => setLastName(e.target.value)}
-                  />
-                </>
                 )}
 
+                {/* Kontributor: Form Fields */}
                 {role === "kontributor" && (
-                <>
+                  <div className="mb-4 space-y-4">
-                  <Input
+                    <div className="grid grid-cols-2 gap-4">
-                    type="text"
-                    placeholder="Nama Perusahaan"
-                    value={namaPerusahaan}
-                    onChange={(e) => setNamaPerusahaan(e.target.value)}
-                  />
                       <Input
                         type="text"
+                        required
                         placeholder="First Name"
-                    value={firstName}
+                        value={firstNameKontributor}
-                    onChange={(e) => setFirstName(e.target.value)}
+                        onChange={(e) =>
+                          setFirstNameKontributor(e.target.value)
+                        }
                       />
                       <Input
                         type="text"
+                        required
                         placeholder="Last Name"
-                    value={lastName}
+                        value={lastNameKontributor}
-                    onChange={(e) => setLastName(e.target.value)}
+                        onChange={(e) => setLastNameKontributor(e.target.value)}
                       />
-                </>
+                    </div>
-              )}
 
-              <Input
-                type="text"
-                placeholder="Nama Lengkap"
-                value={fullname}
-                onChange={(e) => setFullname(e.target.value)}
-              />
                     <Input
                       type="email"
                       required
@@ -283,89 +365,340 @@ export default function SignUp() {
                       onChange={(e) => setEmail(e.target.value)}
                     />
 
-              <Button type="submit" className="w-full bg-[#B89445] text-white">
+                    <Input
-                Kirim OTP
+                      type="tel"
-              </Button>
+                      required
-            </form>
+                      placeholder="WhatsApp"
+                      value={whatsappKontributor}
+                      onChange={(e) => setWhatsappKontributor(e.target.value)}
+                    />
+
+                    <Input
+                      type="text"
+                      required
+                      placeholder="Nama Perusahaan"
+                      value={namaPerusahaan}
+                      onChange={(e) => setNamaPerusahaan(e.target.value)}
+                    />
+
+                    <select
+                      required
+                      className="w-full border border-gray-300 rounded-md p-2 text-sm"
+                      value={kategoriPerusahaan}
+                      onChange={(e) => setKategoriPerusahaan(e.target.value)}
+                    >
+                      <option value="">Pilih Kategori Perusahaan</option>
+                      <option value="kementerian">Kementerian</option>
+                      <option value="lembaga">Lembaga</option>
+                      <option value="pemerintah-daerah">
+                        Pemerintah Daerah
+                      </option>
+                      <option value="bumn">BUMN</option>
+                      <option value="lainnya">Lainnya</option>
+                    </select>
+
+                    <div className="relative">
+                      <Input
+                        type={isVisible ? "text" : "password"}
+                        required
+                        placeholder="Password"
+                        value={kontributorPassword}
+                        onChange={(e) => setKontributorPassword(e.target.value)}
+                        className="pr-10"
+                      />
+                      <button
+                        type="button"
+                        onClick={toggleVisibility}
+                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                      >
+                        {isVisible ? (
+                          <EyeSlashFilledIcon className="h-4 w-4" />
+                        ) : (
+                          <EyeFilledIcon className="h-4 w-4" />
+                        )}
+                      </button>
+                    </div>
+
+                    <div className="relative">
+                      <Input
+                        type={isVisibleSetup[1] ? "text" : "password"}
+                        required
+                        placeholder="Konfirmasi Password"
+                        value={confirmKontributorPassword}
+                        onChange={(e) =>
+                          setConfirmKontributorPassword(e.target.value)
+                        }
+                        className="pr-10"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => {
+                          const newVisibility = [...isVisibleSetup];
+                          newVisibility[1] = !newVisibility[1];
+                          setIsVisibleSetup(newVisibility);
+                        }}
+                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                      >
+                        {isVisibleSetup[1] ? (
+                          <EyeSlashFilledIcon className="h-4 w-4" />
+                        ) : (
+                          <EyeFilledIcon className="h-4 w-4" />
+                        )}
+                      </button>
+                    </div>
+                  </div>
                 )}
 
-          {/* Step 2: OTP */}
+                {/* Tenant: Form Fields */}
-          {step === "otp" && (
+                {role === "tenant" && (
-            <form onSubmit={handleVerifyOtp} className="space-y-4 text-center">
+                  <div className="mb-4 space-y-4">
-              <h3 className="text-base font-semibold">Masukkan OTP</h3>
+                    <div className="grid grid-cols-2 gap-4">
-              <div className="flex justify-between">
+                      <div>
+                        <Input
+                          type="text"
+                          required
+                          placeholder="First Name"
+                          value={firstName}
+                          onChange={(e) => setFirstName(e.target.value)}
+                          className={
+                            formErrors.firstName ? "border-red-500" : ""
+                          }
+                        />
+                        {formErrors.firstName && (
+                          <p className="text-red-500 text-xs mt-1">
+                            {formErrors.firstName}
+                          </p>
+                        )}
+                      </div>
+                      <div>
+                        <Input
+                          type="text"
+                          required
+                          placeholder="Last Name"
+                          value={lastName}
+                          onChange={(e) => setLastName(e.target.value)}
+                          className={
+                            formErrors.lastName ? "border-red-500" : ""
+                          }
+                        />
+                        {formErrors.lastName && (
+                          <p className="text-red-500 text-xs mt-1">
+                            {formErrors.lastName}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+
+                    <div>
+                      <Input
+                        type="email"
+                        required
+                        placeholder="Email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className={formErrors.email ? "border-red-500" : ""}
+                      />
+                      {formErrors.email && (
+                        <p className="text-red-500 text-xs mt-1">
+                          {formErrors.email}
+                        </p>
+                      )}
+                    </div>
+
+                    <div>
+                      <Input
+                        type="tel"
+                        required
+                        placeholder="WhatsApp"
+                        value={whatsapp}
+                        onChange={(e) => setWhatsapp(e.target.value)}
+                        className={formErrors.whatsapp ? "border-red-500" : ""}
+                      />
+                      {formErrors.whatsapp && (
+                        <p className="text-red-500 text-xs mt-1">
+                          {formErrors.whatsapp}
+                        </p>
+                      )}
+                    </div>
+
+                    <div>
+                      <Input
+                        type="text"
+                        required
+                        placeholder="Nama Tenant"
+                        value={namaTenant}
+                        onChange={(e) => setNamaTenant(e.target.value)}
+                        className={
+                          formErrors.namaTenant ? "border-red-500" : ""
+                        }
+                      />
+                      {formErrors.namaTenant && (
+                        <p className="text-red-500 text-xs mt-1">
+                          {formErrors.namaTenant}
+                        </p>
+                      )}
+                    </div>
+
+                    <div className="relative">
+                      <Input
+                        type={isVisible ? "text" : "password"}
+                        required
+                        placeholder="Password"
+                        value={tenantPassword}
+                        onChange={(e) => setTenantPassword(e.target.value)}
+                        className={`pr-10 ${
+                          formErrors.tenantPassword ? "border-red-500" : ""
+                        }`}
+                      />
+                      <button
+                        type="button"
+                        onClick={toggleVisibility}
+                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                      >
+                        {isVisible ? (
+                          <EyeSlashFilledIcon className="h-4 w-4" />
+                        ) : (
+                          <EyeFilledIcon className="h-4 w-4" />
+                        )}
+                      </button>
+                      {formErrors.tenantPassword && (
+                        <p className="text-red-500 text-xs mt-1">
+                          {formErrors.tenantPassword}
+                        </p>
+                      )}
+                    </div>
+
+                    <div className="relative">
+                      <Input
+                        type={isVisibleSetup[1] ? "text" : "password"}
+                        required
+                        placeholder="Konfirmasi Password"
+                        value={confirmTenantPassword}
+                        onChange={(e) =>
+                          setConfirmTenantPassword(e.target.value)
+                        }
+                        className={`pr-10 ${
+                          formErrors.confirmTenantPassword
+                            ? "border-red-500"
+                            : ""
+                        }`}
+                      />
+                      <button
+                        type="button"
+                        onClick={() => {
+                          const newVisibility = [...isVisibleSetup];
+                          newVisibility[1] = !newVisibility[1];
+                          setIsVisibleSetup(newVisibility);
+                        }}
+                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                      >
+                        {isVisibleSetup[1] ? (
+                          <EyeSlashFilledIcon className="h-4 w-4" />
+                        ) : (
+                          <EyeFilledIcon className="h-4 w-4" />
+                        )}
+                      </button>
+                      {formErrors.confirmTenantPassword && (
+                        <p className="text-red-500 text-xs mt-1">
+                          {formErrors.confirmTenantPassword}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Email Field (Selalu Ada, tapi posisi bergantung role) */}
+                {role !== "tenant" && role !== "kontributor" && (
+                  <Input
+                    type="email"
+                    required
+                    placeholder="Email"
+                    className="mb-4"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                  />
+                )}
+
+                {/* Note */}
+                <p className="text-xs text-gray-500 mb-4">
+                  Dengan mendaftar, saya telah menyetujui{" "}
+                  <a href="#" className="text-blue-600 underline">
+                    Syarat dan Ketentuan
+                  </a>{" "}
+                  serta{" "}
+                  <a href="#" className="text-blue-600 underline">
+                    Kebijakan Privasi
+                  </a>
+                </p>
+
+                {/* Submit */}
+                <Button
+                  type="submit"
+                  className="w-full bg-[#B89445] hover:bg-[#a1813d] text-white py-2 rounded-md text-base font-semibold"
+                  disabled={isLoading}
+                >
+                  {isLoading ? (
+                    <div className="flex items-center justify-center">
+                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                      {role === "tenant" ? "Mendaftar..." : "Mengirim..."}
+                    </div>
+                  ) : role === "tenant" ? (
+                    "Daftar Tenant"
+                  ) : (
+                    "Kirim OTP"
+                  )}
+                </Button>
+
+                {/* Link Login */}
+                <p className="text-center text-sm mt-4">
+                  Sudah punya akun?{" "}
+                  <a href="/login" className="text-[#007AFF] hover:underline">
+                    Login
+                  </a>
+                </p>
+              </form>
+            ) : (
+              <form
+                onSubmit={handleVerifyOtp}
+                className="w-full max-w-sm p-6 text-center ml-5 space-y-4"
+              >
+                <h3 className="text-base font-semibold text-gray-800">
+                  Masukkan Kode OTP
+                </h3>
+                <p className="text-sm text-gray-500">
+                  Silahkan cek inbox atau kotak spam pada email Anda.
+                </p>
+
+                <div className="flex justify-between mb-4">
                   {otp.map((value, index) => (
                     <input
                       key={index}
                       id={`otp-${index}`}
                       type="text"
+                      inputMode="numeric"
                       maxLength={1}
                       value={value}
                       onChange={(e) => handleOtpChange(index, e.target.value)}
-                    className="w-10 h-12 text-center border rounded-md"
+                      className="w-10 h-12 text-center border border-gray-300 rounded-md text-lg focus:outline-none focus:ring-2 focus:ring-[#B89445]"
                     />
                   ))}
                 </div>
-              <Button type="submit" className="w-full bg-[#B89445] text-white">
+
+                <Button
+                  type="submit"
+                  className="w-full bg-[#B89445] hover:bg-[#a1813d] text-white py-2 rounded-md text-base font-semibold"
+                >
                   Lanjut
                 </Button>
-            </form>
-          )}
 
-          {/* Step 3: Form Lengkap */}
+                <p className="text-sm text-black mt-4 cursor-pointer hover:underline">
-          {step === "form" && (
+                  Kirim Ulang OTP
-            <form onSubmit={handleRegister} className="space-y-4">
+                </p>
-              <Input
-                type="text"
-                placeholder="Username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-              />
-              <Input
-                type="text"
-                placeholder="Nomor HP"
-                value={phoneNumber}
-                onChange={(e) => setPhoneNumber(e.target.value)}
-              />
-              <Input
-                type="text"
-                placeholder="Alamat"
-                value={address}
-                onChange={(e) => setAddress(e.target.value)}
-              />
-              <Input
-                type="date"
-                placeholder="Tanggal Lahir"
-                value={dateOfBirth}
-                onChange={(e) => setDateOfBirth(e.target.value)}
-              />
-              <select
-                value={genderType}
-                onChange={(e) => setGenderType(e.target.value)}
-                className="w-full border rounded-md p-2"
-              >
-                <option value="male">Laki-laki</option>
-                <option value="female">Perempuan</option>
-              </select>
-              <Input
-                type="password"
-                placeholder="Password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-              <Input
-                type="text"
-                placeholder="Jenis Pekerjaan"
-                value={workType}
-                onChange={(e) => setWorkType(e.target.value)}
-              />
-              <Button type="submit" className="w-full bg-green-600 text-white">
-                Daftar
-              </Button>
               </form>
             )}
           </div>
         </div>
       </div>
+    </div>
   );
 }

service/auth.ts

@@ -214,3 +214,4 @@ export async function registerTenant(data: any) {
   const url = "clients/with-user";
   return httpPost(url, data);
 }
+