feat: fuctionality tweaks handling errors

components/providers/forms/EditForm.tsx

@@ -57,26 +57,33 @@ export const EditForm = ({
         title: "Success!",
         description: "The provider was updated successfully.",
       });
+      setIsOpen(false); // Close the modal on success
     }
   };
 
   return (
     <Form {...form}>
       <form
-        // action={onSubmitClient}
         onSubmit={form.handleSubmit(onSubmitClient)}
-        className="flex flex-col space-y-2 sm:px-0 px-4"
+        className="flex flex-col space-y-4"
       >
+        <div className="text-md">
+          Current alias: <span className="font-bold">{providerAlias}</span>
+        </div>
+        <div>
+          <CustomInput
+            control={form.control}
+            name="alias"
+            type="text"
+            label="Alias"
+            labelPlacement="inside"
+            placeholder={providerAlias}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.alias}
+          />
+        </div>
         <input type="hidden" name="providerId" value={providerId} />
-        <div>Current alias: {providerAlias}</div>
-
-        <CustomInput
-          control={form.control}
-          name="alias"
-          type="text"
-          label="Alias"
-          placeholder={providerAlias}
-        />
 
         <div className="w-full flex justify-center sm:space-x-6">
           <Button

components/ui/custom/CustomAlertModal.tsx

@@ -27,8 +27,8 @@ export const CustomAlertModal: React.FC<CustomAlertModalProps> = ({
         {(_onClose) => (
           <>
             <ModalHeader className="flex flex-col py-0">{title}</ModalHeader>
-            <ModalBody className="space-y-2">
-              <p>{description}</p>
+            <ModalBody>
+              {description}
               {children}
             </ModalBody>
           </>

components/ui/custom/CustomInput.tsx

@@ -11,10 +11,13 @@ interface CustomInputProps<T extends FieldValues> {
   control: Control<T>;
   name: FieldPath<T>;
   label?: string;
+  labelPlacement?: "inside" | "outside";
+  variant?: "flat" | "bordered" | "underlined" | "faded";
   type?: string;
   placeholder?: string;
-  isRequired?: boolean;
   password?: boolean;
+  isRequired?: boolean;
+  isInvalid?: boolean;
 }
 
 export const CustomInput = <T extends FieldValues>({
@@ -22,9 +25,12 @@ export const CustomInput = <T extends FieldValues>({
   name,
   type = "text",
   label = name,
+  labelPlacement = "inside",
   placeholder,
+  variant = "bordered",
   password = false,
   isRequired = true,
+  isInvalid,
 }: CustomInputProps<T>) => {
   const [isVisible, setIsVisible] = useState(false);
 
@@ -54,9 +60,11 @@ export const CustomInput = <T extends FieldValues>({
             <Input
               isRequired={inputIsRequired}
               label={inputLabel}
+              labelPlacement={labelPlacement}
               placeholder={inputPlaceholder}
               type={inputType}
-              variant="bordered"
+              variant={variant}
+              isInvalid={isInvalid}
               endContent={endContent}
               {...field}
             />