feat: update sign-up

components/form/sign-up.tsx

@@ -63,6 +63,12 @@ export default function SignUp() {
   const [certNumber, setCertNumber] = useState("");
   const [membershipType, setMembershipType] = useState("");
   const [nrp, setNrp] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [whatsapp, setWhatsapp] = useState("");
+  const [namaTenant, setNamaTenant] = useState("");
+  const [tenantPassword, setTenantPassword] = useState("");
+  const [confirmTenantPassword, setConfirmTenantPassword] = useState("");
 
   const handleSendOtp = (e: React.FormEvent) => {
     e.preventDefault();
@@ -154,8 +160,8 @@ export default function SignUp() {
                     <Label htmlFor="polri">POLRI</Label>
                   </div>
                   <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="kpu" id="kpu" />
-                    <Label htmlFor="kpu">KPU</Label>
+                    <RadioGroupItem value="tenant" id="tenant" />
+                    <Label htmlFor="tenant">Tenant</Label>
                   </div>
                 </RadioGroup>
 
@@ -206,15 +212,111 @@ export default function SignUp() {
                   </div>
                 )}
 
+                {/* Tenant: Form Fields */}
+                {role === "tenant" && (
+                  <div className="mb-4 space-y-4">
+                    <div className="grid grid-cols-2 gap-4">
+                      <Input
+                        type="text"
+                        required
+                        placeholder="First Name"
+                        value={firstName}
+                        onChange={(e) => setFirstName(e.target.value)}
+                      />
+                      <Input
+                        type="text"
+                        required
+                        placeholder="Last Name"
+                        value={lastName}
+                        onChange={(e) => setLastName(e.target.value)}
+                      />
+                    </div>
+                    
+                    <Input
+                      type="email"
+                      required
+                      placeholder="Email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                    />
+                    
+                    <Input
+                      type="tel"
+                      required
+                      placeholder="WhatsApp"
+                      value={whatsapp}
+                      onChange={(e) => setWhatsapp(e.target.value)}
+                    />
+                    
+                    <Input
+                      type="text"
+                      required
+                      placeholder="Nama Tenant"
+                      value={namaTenant}
+                      onChange={(e) => setNamaTenant(e.target.value)}
+                    />
+                    
+                    <div className="relative">
+                      <Input
+                        type={isVisible ? "text" : "password"}
+                        required
+                        placeholder="Password"
+                        value={tenantPassword}
+                        onChange={(e) => setTenantPassword(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={confirmTenantPassword}
+                        onChange={(e) => setConfirmTenantPassword(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>
+                )}
+
                 {/* Email Field (Selalu Ada, tapi posisi bergantung role) */}
-                <Input
-                  type="email"
-                  required
-                  placeholder="Email"
-                  className="mb-4"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                />
+                {role !== "tenant" && (
+                  <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">