Adding validation in Contact number and adding trim functioanlity.

src/components/ServiceProject/ManageServiceProject.jsx

@@ -59,7 +59,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
   const onSubmit = (formData) => {
 
     if (serviceProjectId) {
-    let existingServiceIds = projectdata?.services?.map((s) => s.id) || [];
+      let existingServiceIds = projectdata?.services?.map((s) => s.id) || [];
 
       const oldServices = projectdata.services.map((service) => ({
         serviceId: service.id,
@@ -110,10 +110,10 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
     <FormProvider {...methods}>
       <form className="px-3 py-2" onSubmit={handleSubmit(onSubmit)}>
         <div className=" text-center">
-          <h5>{serviceProjectId ? "Update Project":"Create Project"}</h5>
+          <h5>{serviceProjectId ? "Update Project" : "Create Project"}</h5>
         </div>
         <div className="row text-start">
-           <div className="col-12 mb-2">
+          <div className="col-12 mb-2">
             <Label htmlFor="name" required>
               Client
             </Label>
@@ -150,6 +150,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               type="text"
               className="form-control form-control-sm"
               {...register("name")}
+              placeholder="Enter Project Name.."
             />
             {errors?.name && (
               <span className="danger-text">{errors.name.message}</span>
@@ -163,6 +164,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               type="text"
               className="form-control form-control-sm"
               {...register("shortName")}
+              placeholder="Enter Project Short Name.."
             />
             {errors?.shortName && (
               <span className="danger-text">{errors.shortName.message}</span>
@@ -194,11 +196,11 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               valueKey="id"
               label="Select Service"
             />
-             {errors?.services && (
+            {errors?.services && (
               <span className="danger-text">{errors.services.message}</span>
             )}
           </div>
-          
+
           <div className="col-12 col-md-6 mb-2">
             <Label htmlFor="name" required>
               Contact Person
@@ -207,6 +209,10 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               type="text"
               className="form-control form-control-sm"
               {...register("contactName")}
+              placeholder="Enter Employee name.."
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^A-Za-z ]/g, "");
+              }}
             />
             {errors?.contactName && (
               <span className="danger-text">{errors.contactName.message}</span>
@@ -220,6 +226,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               type="text"
               className="form-control form-control-sm"
               {...register("contactEmail")}
+              placeholder="Enter Employee Email.."
             />
             {errors?.contactEmail && (
               <span className="danger-text">{errors.contactEmail.message}</span>
@@ -231,8 +238,13 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             </Label>
             <input
               type="text"
+              maxLength={10}
               className="form-control form-control-sm"
               {...register("contactPhone")}
+              placeholder="Enter Employee Contact.."
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^0-9]/g, "");
+              }}
             />
             {errors?.contactPhone && (
               <span className="danger-text">{errors.contactPhone.message}</span>
@@ -244,7 +256,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             </Label>
             <DatePicker
               name="assignedDate"
-              className="w-full"
+              className="w-100"
               control={control}
             />
           </div>
@@ -258,9 +270,10 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
                 className="form-control"
                 //   maxLength={maxAddressLength}
                 {...register("address")}
-                //   onChange={(e) => {
+                placeholder="Enter Project Address.."
-                //     setAddressLength(e.target.value.length);
+              //   onChange={(e) => {
-                //   }}
+              //     setAddressLength(e.target.value.length);
+              //   }}
               />
             </div>
 
@@ -290,8 +303,8 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             {isPending || isUpdating
               ? "Please wait..."
               : serviceProjectId
-              ? "Update"
+                ? "Update"
-              : "Submit"}
+                : "Submit"}
           </button>
         </div>
       </form>

src/components/ServiceProject/ServiceProjectSchema.jsx

@@ -3,21 +3,45 @@ import { PROJECT_STATUS } from "../../utils/constants";
 
 //#region  Service Project
 export const projectSchema = z.object({
-  name: z.string().min(1, "Name is required"),
+  name: z
-  shortName: z.string().min(1, "Short name is required"),
+    .string()
-  clientId: z.string().min(1, { message: "Client is required" }),
+    .trim()
+    .min(1, "Name is required"),
+
+  shortName: z
+    .string()
+    .trim()
+    .min(1, "Short name is required"),
+
+  clientId: z.string().trim().min(1, { message: "Client is required" }),
+
   services: z
     .array(z.string())
     .min(1, { message: "At least one service required" }),
-  address: z.string().min(1, "Address is required"),
+
-  assignedDate: z.string().min(1, { message: "Date is required" }),
+  address: z.string().trim().min(1, "Address is required"),
-  statusId: z.string().min(1, "Status is required"),
+
-  contactName: z.string().min(1, "Contact name is required"),
+  assignedDate: z.string().trim().min(1, { message: "Date is required" }),
+
+  statusId: z.string().trim().min(1, "Status is required"),
+
+  contactName: z
+    .string()
+    .trim()
+    .min(1, "Contact name is required")
+    .regex(/^[A-Za-z\s]+$/, "Contact name can contain only letters"),
+
   contactPhone: z
     .string()
+    .trim()
+    .regex(/^\d+$/, "Phone number must contain only digits")
     .min(7, "Invalid phone number")
     .max(15, "Phone number too long"),
-  contactEmail: z.string().email("Invalid email address"),
+
+  contactEmail: z
+    .string()
+    .trim()
+    .email("Invalid email address"),
 });
 
 export const defaultProjectValues = {

src/components/common/DatePicker.jsx

@@ -51,7 +51,7 @@ const DatePicker = ({
     <div className={`position-relative ${className} w-max `}>
       <input
         type="text"
-        className="form-control form-control"
+        className="form-control form-control form-control-sm"
         placeholder={placeholder}
         value={displayValue}
         onChange={(e) => {