feat(CreateCustomer): add password visibility toggle and enhance form handling

- Integrated EyeIcon for password visibility toggle in the CreateCustomer component.
- Updated useCreateCustomerPresenter to manage password visibility state.
- Improved form handling by adding showPassword and setShowPassword to the presenter.

src/components/forms/customers/CreateCustomer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { GlobeIcon } from "@/assets/icons";
+import { EyeIcon, GlobeIcon } from "@/assets/icons";
 import InputGroup from "@/components/FormElements/InputGroup";
 import MultiSelect from "@/components/FormElements/MultiSelect";
 import { Select } from "@/components/FormElements/select";
@@ -20,8 +20,16 @@ interface IProps {
 }
 
 const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
-  const { errors, handleSubmit, register, watch, onSubmit, companies, router } =
-    useCreateCustomerPresenter({ defaultValues, editMode, id });
+  const {
+    errors,
+    handleSubmit,
+    register,
+    watch,
+    onSubmit,
+    companies,
+    showPassword,
+    setShowPassword,
+  } = useCreateCustomerPresenter({ defaultValues, editMode, id });
 
   return (
     <form className="grid grid-cols-1 gap-9" onSubmit={handleSubmit(onSubmit)}>
@@ -120,8 +128,19 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
               })}
               disabled={editMode}
               name="password"
+              icon={
+                <span
+                  className="cursor-pointer"
+                  onClick={() => {
+                    setShowPassword(!showPassword);
+                  }}
+                >
+                  <EyeIcon />
+                </span>
+              }
+              iconPosition="right"
               label="Password"
-              type="password"
+              type={showPassword ? "text" : "password"}
               placeholder="Enter password"
               required={!editMode}
             />

src/components/forms/customers/useCreateCustomerPresenter.ts

@@ -7,7 +7,7 @@ import {
 } from "@/hooks/queries";
 import { CreateCustomerCredentials } from "@/lib/api";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 
 interface IProps {
@@ -33,6 +33,7 @@ const useCreateCustomerPresenter = ({
   });
 
   const router = useRouter();
+  const [showPassword, setShowPassword] = useState(false);
   const { mutate: createCustomer, isPending: isCreating } = useCreateCustomer();
   const { mutate: updateCustomer, isPending: isUpdating } = useUpdateCustomer(
     id as string,
@@ -69,6 +70,8 @@ const useCreateCustomerPresenter = ({
     onSubmit,
     companies: companies?.data.companies,
     router,
+    showPassword,
+    setShowPassword,
   };
 };