Adding validation in Contact number and adding trim functioanlity.

src/components/ServiceProject/ManageServiceProject.jsx

@@ -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>
@@ -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,6 +270,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
                 className="form-control"
                 //   maxLength={maxAddressLength}
                 {...register("address")}
+                placeholder="Enter Project Address.."
               //   onChange={(e) => {
               //     setAddressLength(e.target.value.length);
               //   }}

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) => {