added organization api in repo. and removed unuse files

src/components/Employee/DemoTable.jsx

@@ -1,172 +0,0 @@
-import React from "react";
-
-const DemoTable = () => {
-  return (
-    <div className="content-wrapper">
-      <div className="container-fluid">
-        <div className="card">
-          <div className="card-datatable table-responsive">
-            <table className="datatables-basic table border-top">
-              <thead>
-                <tr>
-                  <th></th>
-                  <th></th>
-                  <th>id</th>
-                  <th>Name</th>
-                  <th>Email</th>
-                  <th>Date</th>
-                  <th>Salary</th>
-                  <th>Status</th>
-                  <th>Action</th>
-                </tr>
-              </thead>
-            </table>
-          </div>
-        </div>
-        <div className="offcanvas offcanvas-end" id="add-new-record">
-          <div className="offcanvas-header border-bottom">
-            <h5 className="offcanvas-title" id="exampleModalLabel">
-              New Record
-            </h5>
-            <button
-              type="button"
-              className="btn-close text-reset"
-              data-bs-dismiss="offcanvas"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div className="offcanvas-body flex-grow-1">
-            <form
-              className="add-new-record pt-0 row g-2"
-              id="form-add-new-record"
-              onsubmit="return false"
-            >
-              <div className="col-sm-12">
-                <label className="form-label" for="basicFullname">
-                  Full Name
-                </label>
-                <div className="input-group input-group-merge">
-                  <span id="basicFullname2" className="input-group-text">
-                    <i className="bx bx-user"></i>
-                  </span>
-                  <input
-                    type="text"
-                    id="basicFullname"
-                    className="form-control dt-full-name"
-                    name="basicFullname"
-                    placeholder="John Doe"
-                    aria-label="John Doe"
-                    aria-describedby="basicFullname2"
-                  />
-                </div>
-              </div>
-              <div className="col-sm-12">
-                <label className="form-label" for="basicPost">
-                  Post
-                </label>
-                <div className="input-group input-group-merge">
-                  <span id="basicPost2" className="input-group-text">
-                    <i className="bx bxs-briefcase"></i>
-                  </span>
-                  <input
-                    type="text"
-                    id="basicPost"
-                    name="basicPost"
-                    className="form-control dt-post"
-                    placeholder="Web Developer"
-                    aria-label="Web Developer"
-                    aria-describedby="basicPost2"
-                  />
-                </div>
-              </div>
-              <div className="col-sm-12">
-                <label className="form-label" for="basicEmail">
-                  Email
-                </label>
-                <div className="input-group input-group-merge">
-                  <span className="input-group-text">
-                    <i className="bx bx-envelope"></i>
-                  </span>
-                  <input
-                    type="text"
-                    id="basicEmail"
-                    name="basicEmail"
-                    className="form-control dt-email"
-                    placeholder="john.doe@example.com"
-                    aria-label="john.doe@example.com"
-                  />
-                </div>
-                <div className="form-text">
-                  You can use letters, numbers & periods
-                </div>
-              </div>
-              <div className="col-sm-12">
-                <label className="form-label" for="basicDate">
-                  Joining Date
-                </label>
-                <div className="input-group input-group-merge">
-                  <span id="basicDate2" className="input-group-text">
-                    <i className="bx bx-calendar"></i>
-                  </span>
-                  <input
-                    type="text"
-                    className="form-control dt-date"
-                    id="basicDate"
-                    name="basicDate"
-                    aria-describedby="basicDate2"
-                    placeholder="MM/DD/YYYY"
-                    aria-label="MM/DD/YYYY"
-                  />
-                </div>
-              </div>
-              <div className="col-sm-12">
-                <label className="form-label" for="basicSalary">
-                  Salary
-                </label>
-                <div className="input-group input-group-merge">
-                  <span id="basicSalary2" className="input-group-text">
-                    <i className="bx bx-dollar"></i>
-                  </span>
-                  <input
-                    type="number"
-                    id="basicSalary"
-                    name="basicSalary"
-                    className="form-control dt-salary"
-                    placeholder="12000"
-                    aria-label="12000"
-                    aria-describedby="basicSalary2"
-                  />
-                </div>
-              </div>
-              <div className="col-sm-12">
-                <button
-                  type="submit"
-                  className="btn btn-primary data-submit me-sm-4 me-1"
-                >
-                  Submit
-                </button>
-                <button
-                  type="reset"
-                  className="btn btn-outline-secondary"
-                  data-bs-dismiss="offcanvas"
-                >
-                  Cancel
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-
-        <hr className="my-12" />
-
-        <hr className="my-12" />
-
-        <hr className="my-12" />
-      </div>
-
-      <div className="content-backdrop fade"></div>
-    </div>
-  );
-};
-
-export default DemoTable;

src/components/Employee/EmployeeList.jsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const EmployeeList = () => {
-  return <div>EmployeeList</div>;
-};
-
-export default EmployeeList;

src/components/Employee/EmployeeSchema.jsx

@@ -0,0 +1,124 @@
+import { z } from "zod"
+
+
+const mobileNumberRegex = /^[0-9]\d{9}$/;
+
+export  const employeeSchema = 
+     z.object({
+    firstName: z.string().min(1, { message: "First Name is required" }),
+    middleName: z.string().optional(),
+    lastName: z.string().min(1, { message: "Last Name is required" }),
+    email: z
+      .string()
+      .max(80, "Email cannot exceed 80 characters")
+      .optional()
+      .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
+        message: "Invalid email format",
+      })
+      .refine(
+        (val) => {
+          if (!val) return true;
+          const [local, domain] = val.split("@");
+          return (
+            val.length <= 320 && local?.length <= 64 && domain?.length <= 255
+          );
+        },
+        {
+          message: "Email local or domain part is too long",
+        }
+      ),
+    currentAddress: z
+      .string()
+      .min(1, { message: "Current Address is required" })
+      .max(500, { message: "Address cannot exceed 500 characters" }),
+    birthDate: z
+      .string()
+      .min(1, { message: "Birth Date is required" })
+      .refine(
+        (date, ctx) => {
+          return new Date(date) <= new Date();
+        },
+        {
+          message: "Birth date cannot be in the future",
+        }
+      ),
+    joiningDate: z
+      .string()
+      .min(1, { message: "Joining Date is required" })
+      .refine(
+        (date, ctx) => {
+          return new Date(date) <= new Date();
+        },
+        {
+          message: "Joining date cannot be in the future",
+        }
+      ),
+    emergencyPhoneNumber: z
+      .string()
+      .min(1, { message: "Phone Number is required" })
+      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
+    emergencyContactPerson: z
+      .string()
+      .min(1, { message: "Emergency Contact Person is required" })
+      .regex(/^[A-Za-z\s]+$/, {
+        message: "Emergency Contact Person must contain only letters",
+      }),
+    aadharNumber: z
+      .string()
+      .optional()
+      .refine((val) => !val || /^\d{12}$/.test(val), {
+        message: "Aadhar card must be exactly 12 digits long",
+      }),
+    gender: z
+      .string()
+      .min(1, { message: "Gender is required" })
+      .refine((val) => val !== "Select Gender", {
+        message: "Please select a gender",
+      }),
+    panNumber: z
+      .string()
+      .optional()
+      .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
+        message: "Invalid PAN number",
+      }),
+    permanentAddress: z
+      .string()
+      .min(1, { message: "Permanent Address is required" })
+      .max(500, { message: "Address cannot exceed 500 characters" }),
+    phoneNumber: z
+      .string()
+      .min(1, { message: "Phone Number is required" })
+      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
+    jobRoleId: z.string().min(1, { message: "Role is required" }),
+    organizationId:z.string().min(1,{message:"Organization is required"}),
+    hasApplicationAccess:z.boolean().default(false),
+  }).refine((data) => {
+  if (data.hasApplicationAccess) {
+    return data.email && data.email.trim() !== "";
+  }
+  return true; 
+}, {
+  message: "Email is required when employee has access",
+  path: ["email"], 
+});
+
+ 
+export const defatEmployeeObj = {
+      firstName:  "",
+      middleName: "",
+      lastName: "",
+      email:  "",
+      currentAddress: "",
+      birthDate:  "",
+      joiningDate: "",
+      emergencyPhoneNumber: "",
+      emergencyContactPerson:  "",
+      aadharNumber: "",
+      gender:  "",
+      panNumber: "",
+      permanentAddress:  "",
+      phoneNumber:  "",
+      jobRoleId: null,
+      organizationId:"",
+      hasApplicationAccess:false
+    }

src/components/Employee/ManageEmployee.jsx

@@ -1,36 +1,37 @@
 import React, { useEffect, useState } from "react";
-import showToast from "../../services/toastService";
-import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
+
 import useMaster from "../../hooks/masterHook/useMaster";
 import { useDispatch } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { formatDate } from "../../utils/dateUtils";
-import { useEmployeeProfile, useUpdateEmployee } from "../../hooks/useEmployees";
 import {
-  cacheData,
+  useEmployeeProfile,
-  clearCacheKey,
+  useUpdateEmployee,
-  getCachedData,
+} from "../../hooks/useEmployees";
-} from "../../slices/apiDataManager";
+
-import { clearApiCacheKey } from "../../slices/apiCacheSlice";
-import { useMutation } from "@tanstack/react-query";
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
-
+import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
-const mobileNumberRegex = /^[0-9]\d{9}$/;
+import { useOrganizationsList } from "../../hooks/useOrganization";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
 
 const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   const dispatch = useDispatch();
   const { mutate: updateEmployee, isPending } = useUpdateEmployee();
-
+  const {
+    data: organzationList,
+    isLoading,
+    isError,
+    error: EempError,
+  } = useOrganizationsList(ITEMS_PER_PAGE, 1, true);
   const {
     employee,
     error,
     loading: empLoading,
-    refetch
+    refetch,
   } = useEmployeeProfile(employeeId);
 
   useEffect(() => {
@@ -38,6 +39,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   }, [employeeId]);
 
   const [disabledEmail, setDisabledEmail] = useState(false);
+
   const { data: job_role, loading } = useMaster();
   const [isloading, setLoading] = useState(false);
   const navigation = useNavigate();
@@ -45,98 +47,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   const [currentAddressLength, setCurrentAddressLength] = useState(0);
   const [permanentAddressLength, setPermanentAddressLength] = useState(0);
 
-  const userSchema = z.object({
-    ...(employeeId ? { id: z.string().optional() } : {}),
-    firstName: z.string().min(1, { message: "First Name is required" }),
-    middleName: z.string().optional(),
-    lastName: z.string().min(1, { message: "Last Name is required" }),
-    email: z
-      .string()
-      .max(80, "Email cannot exceed 80 characters")
-      .optional()
-      .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
-        message: "Invalid email format",
-      })
-      .refine(
-        (val) => {
-          if (!val) return true;
-          const [local, domain] = val.split("@");
-          return (
-            val.length <= 320 && local?.length <= 64 && domain?.length <= 255
-          );
-        },
-        {
-          message: "Email local or domain part is too long",
-        }
-      ),
-    currentAddress: z
-      .string()
-      .min(1, { message: "Current Address is required" })
-      .max(500, { message: "Address cannot exceed 500 characters" }),
-    birthDate: z
-      .string()
-      .min(1, { message: "Birth Date is required" })
-      .refine(
-        (date, ctx) => {
-          return new Date(date) <= new Date();
-        },
-        {
-          message: "Birth date cannot be in the future",
-        }
-      ),
-    joiningDate: z
-      .string()
-      .min(1, { message: "Joining Date is required" })
-      .refine(
-        (date, ctx) => {
-          return new Date(date) <= new Date();
-        },
-        {
-          message: "Joining date cannot be in the future",
-        }
-      ),
-    emergencyPhoneNumber: z
-      .string()
-      .min(1, { message: "Phone Number is required" })
-      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
-    emergencyContactPerson: z
-      .string()
-      .min(1, { message: "Emergency Contact Person is required" })
-      .regex(/^[A-Za-z\s]+$/, {
-        message: "Emergency Contact Person must contain only letters",
-      }),
-    aadharNumber: z
-      .string()
-      .optional()
-      .refine((val) => !val || /^\d{12}$/.test(val), {
-        message: "Aadhar card must be exactly 12 digits long",
-      }),
-    gender: z
-      .string()
-      .min(1, { message: "Gender is required" })
-      .refine((val) => val !== "Select Gender", {
-        message: "Please select a gender",
-      }),
-    panNumber: z
-      .string()
-      .optional()
-      .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
-        message: "Invalid PAN number",
-      }),
-    permanentAddress: z
-      .string()
-      .min(1, { message: "Permanent Address is required" })
-      .max(500, { message: "Address cannot exceed 500 characters" }),
-    phoneNumber: z
-      .string()
-      .min(1, { message: "Phone Number is required" })
-      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
-    jobRoleId: z.string().min(1, { message: "Role is required" }),
-  });
-
   useEffect(() => {
-    refetch()
+    refetch();
-  }, [])
+  }, []);
 
   const {
     register,
@@ -147,25 +60,8 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
     reset,
     getValues,
   } = useForm({
-    resolver: zodResolver(userSchema),
+    resolver: zodResolver(employeeSchema),
-    defaultValues: {
+    defaultValues: defatEmployeeObj,
-      id: currentEmployee?.id || null,
-      firstName: currentEmployee?.firstName || "",
-      middleName: currentEmployee?.middleName || "",
-      lastName: currentEmployee?.lastName || "",
-      email: currentEmployee?.email || "",
-      currentAddress: currentEmployee?.currentAddress || "",
-      birthDate: formatDate(currentEmployee?.birthDate) || "",
-      joiningDate: formatDate(currentEmployee?.joiningDate) || "",
-      emergencyPhoneNumber: currentEmployee?.emergencyPhoneNumber || "",
-      emergencyContactPerson: currentEmployee?.emergencyContactPerson || "",
-      aadharNumber: currentEmployee?.aadharNumber || "",
-      gender: currentEmployee?.gender || "",
-      panNumber: currentEmployee?.panNumber || "",
-      permanentAddress: currentEmployee?.permanentAddress || "",
-      phoneNumber: currentEmployee?.phoneNumber || "",
-      jobRoleId: currentEmployee?.jobRoleId.toString() || null,
-    },
     mode: "onChange",
   });
 
@@ -176,7 +72,13 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
       data.email = null;
     }
 
-    updateEmployee({ ...data, IsAllEmployee }, {
+    const payload = { ...data, IsAllEmployee };
+
+    if (employeeId) {
+      payload.id = employeeId;
+    }
+
+    updateEmployee(payload, {
       onSuccess: () => {
         reset();
         onClosed();
@@ -184,7 +86,6 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
     });
   };
 
-
   useEffect(() => {
     if (!loading && !error && employee) {
       setCurrentEmployee(employee);
@@ -195,37 +96,47 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
     reset(
       currentEmployee
         ? {
-          id: currentEmployee.id || null,
+            id: currentEmployee.id || null,
-          firstName: currentEmployee.firstName || "",
+            firstName: currentEmployee.firstName || "",
-          middleName: currentEmployee.middleName || "",
+            middleName: currentEmployee.middleName || "",
-          lastName: currentEmployee.lastName || "",
+            lastName: currentEmployee.lastName || "",
-          email: currentEmployee.email || "",
+            email: currentEmployee.email || "",
-          currentAddress: currentEmployee.currentAddress || "",
+            currentAddress: currentEmployee.currentAddress || "",
-          birthDate: formatDate(currentEmployee.birthDate) || "",
+            birthDate: formatDate(currentEmployee.birthDate) || "",
-          joiningDate: formatDate(currentEmployee.joiningDate) || "",
+            joiningDate: formatDate(currentEmployee.joiningDate) || "",
-          emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
+            emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
-          emergencyContactPerson:
+            emergencyContactPerson:
-            currentEmployee.emergencyContactPerson || "",
+              currentEmployee.emergencyContactPerson || "",
-          aadharNumber: currentEmployee.aadharNumber || "",
+            aadharNumber: currentEmployee.aadharNumber || "",
-          gender: currentEmployee.gender || "",
+            gender: currentEmployee.gender || "",
-          panNumber: currentEmployee.panNumber || "",
+            panNumber: currentEmployee.panNumber || "",
-          permanentAddress: currentEmployee.permanentAddress || "",
+            permanentAddress: currentEmployee.permanentAddress || "",
-          phoneNumber: currentEmployee.phoneNumber || "",
+            phoneNumber: currentEmployee.phoneNumber || "",
-          jobRoleId: currentEmployee.jobRoleId?.toString() || "",
+            jobRoleId: currentEmployee.jobRoleId?.toString() || "",
-        }
+            organizationId: currentEmployee.organizationId || "",
+            hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
+          }
         : {}
     );
     setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
     setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
   }, [currentEmployee, reset]);
 
+  const hasAccessAplication = watch("hasApplicationAccess");
   return (
     <>
       <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
-        <div className="text-center"><p className="fs-5 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
+        <div className="text-center">
+          <p className="fs-5 fw-semibold">
+            {" "}
+            {employee ? "Update Employee" : "Create Employee"}
+          </p>{" "}
+        </div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>First Name</Label>
+            <Label className="form-text text-start" required>
+              First Name
+            </Label>
             <input
               type="text"
               name="firstName"
@@ -244,7 +155,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             />
             {errors.firstName && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.firstName.message}
               </div>
             )}
@@ -267,14 +181,18 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             />
             {errors.middleName && (
-              <div className="danger-text text-start " style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start "
+                style={{ fontSize: "12px" }}
+              >
                 {errors.middleName.message}
               </div>
             )}
           </div>
-
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>Last Name</Label>
+            <Label className="form-text text-start" required>
+              Last Name
+            </Label>
             <input
               type="text"
               {...register("lastName", {
@@ -291,16 +209,24 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             />
             {errors.lastName && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.lastName.message}
               </div>
             )}
           </div>
-
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">
-            <div className="form-text text-start">Email</div>
+            <Label
+              htmlFor="email"
+              className="text-start form-text"
+              required={hasAccessAplication}
+            >
+              Email
+            </Label>
             <input
               type="email"
               id="email"
@@ -321,7 +247,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             )}
           </div>
           <div className="col-sm-6">
-            <Label className="form-text text-start" required>Phone Number</Label>
+            <Label className="form-text text-start" required>
+              Phone Number
+            </Label>
             <input
               type="text"
               keyboardType="numeric"
@@ -345,7 +273,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
         <div className="row mb-3"></div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>Gender</Label>
+            <Label className="form-text text-start" required>
+              Gender
+            </Label>
 
             <div className="input-group">
               <select
@@ -387,7 +317,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             </div>
 
             {errors.birthDate && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.birthDate.message}
               </div>
             )}
@@ -408,7 +341,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             </div>
 
             {errors.joiningDate && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.joiningDate.message}
               </div>
             )}
@@ -416,7 +352,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">
-            <Label className="form-text text-start" required>Current Address</Label>
+            <Label className="form-text text-start" required>
+              Current Address
+            </Label>
 
             <textarea
               id="currentAddress"
@@ -428,15 +366,11 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               maxLength={500}
               onChange={(e) => {
                 setCurrentAddressLength(e.target.value.length);
-                // let react-hook-form still handle it
                 register("currentAddress").onChange(e);
               }}
             ></textarea>
             <div className="text-end muted">
-              <small>
+              <small> {500 - currentAddressLength} characters left</small>
-                {" "}
-                {500 - currentAddressLength} characters left
-              </small>
             </div>
             {errors.currentAddress && (
               <div
@@ -466,9 +400,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             ></textarea>
             <div className="text-end muted">
-              <small>
+              <small>{500 - permanentAddressLength} characters left</small>
-                {500 - permanentAddressLength} characters left
-              </small>
             </div>
             {errors.permanentAddress && (
               <div
@@ -480,6 +412,55 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             )}
           </div>
         </div>
+
+        {/* -------------- */}
+        <div className="row mb-3">
+          <div className="col-sm-6">
+            <Label className="form-text text-start" required>
+              Organization
+            </Label>
+            <div className="input-group">
+              <select
+                className="form-select form-select-sm"
+                {...register("organizationId")}
+                id="organizationId"
+                aria-label=""
+              >
+                <option disabled value="">
+                  Select Role
+                </option>
+                {organzationList?.data
+                  .sort((a, b) => a?.name?.localeCompare(b?.name))
+                  .map((item) => (
+                    <option value={item?.id} key={item?.id}>
+                      {item?.name}
+                    </option>
+                  ))}
+              </select>
+            </div>
+            {errors.organizationId && (
+              <div
+                className="danger-text text-start justify-content-center"
+                style={{ fontSize: "12px" }}
+              >
+                {errors.organizationId.message}
+              </div>
+            )}
+          </div>
+
+          <div className="col-sm-6 d-flex align-items-center mt-2">
+            <label className="form-check-label d-flex align-items-center">
+              <input
+                type="checkbox"
+                className="form-check-input me-2"
+                {...register("hasApplicationAccess")}
+              />
+              Has Application Access ?
+            </label>
+          </div>
+        </div>
+
+        {/* --------------- */}
         <div className="row mb-3">
           {" "}
           <div className="divider">
@@ -488,7 +469,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
         </div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>Official Designation</Label>
+            <Label className="form-text text-start" required>
+              Official Designation
+            </Label>
             <div className="input-group">
               <select
                 className="form-select form-select-sm"
@@ -601,15 +584,6 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             )}
           </div>
         </div>
-
-        {employeeId && (
-          <div className="row mb-3 d-none">
-            <div className="col-sm-12">
-              <input type="text" name="id" {...register("id")} />
-            </div>
-          </div>
-        )}
-
         <div className="row text-end">
           <div className="col-sm-12">
             <button
@@ -626,18 +600,11 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               className="btn btn-sm btn-primary"
               disabled={isPending}
             >
-              {isPending
+              {isPending ? "Please Wait..." : employeeId ? "Update" : "Create"}
-                ? "Please Wait..."
-                : employeeId
-                  ? "Update"
-                  : "Create"}
             </button>
-
-
           </div>
         </div>
       </form>
-
     </>
   );
 };

src/components/Organization/AssignOrg.jsx

@@ -93,8 +93,15 @@ const AssignOrg = ({ setStep }) => {
     <div className="row text-black text-start mb-3">
       {/* Organization Info Display */}
       <div className="col-12 mb-3">
-        <div className="d-flex justify-content-between align-items-center text-start mb-2">
+        <div className="d-flex justify-content-between align-items-center text-start mb-1">
-          <div className="fw-semibold text-wrap">{orgData.name}</div>
+          <div className="d-flex flex-row gap-2 align-items-center text-wrap">
+            <img
+                    src="/public/assets/img/orgLogo.png"
+                    alt="logo"
+                    width={40}
+                    height={40}
+                  />  <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
+          </div>
           <div className="text-end">
             <button
               type="button"
@@ -106,7 +113,7 @@ const AssignOrg = ({ setStep }) => {
           </div>
         </div>
       </div>
-
+      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
       {/* Contact Info */}
       <div className="col-md-6 mb-3">
         <div className="d-flex">
@@ -114,7 +121,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Contact Person :
+           <i className="bx bx-sm bx-user me-1" /> Contact Person :
           </label>
           <div className="text-muted">{orgData.contactPerson}</div>
         </div>
@@ -125,7 +132,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Contact Number :
+           <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
           </label>
           <div className="text-muted">{orgData.contactNumber}</div>
         </div>
@@ -136,7 +143,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Email Address :
+          <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
           </label>
           <div className="text-muted">{orgData.email}</div>
         </div>
@@ -147,7 +154,8 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ maxWidth: "130px" }}
           >
-            Service provider Id (SPRID) :
+          <i className="bx bx-sm me-1 bx-barcode"></i>
+  Service Provider Id (SPRID) :
           </label>
           <div className="text-muted">{orgData.sprid}</div>
         </div>
@@ -158,7 +166,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-1 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Address :
+           <i className='bx bx-sm me-1 bx-map'></i> Address :
           </label>
           <div className="text-muted text-start">{orgData.address}</div>
         </div>
@@ -233,11 +241,11 @@ const AssignOrg = ({ setStep }) => {
           <div className="d-flex justify-content-between mt-5">
             <button
               type="button"
-              className="btn btn-xs btn-outline-secondary"
+              className="btn btn-sm btn-outline-secondary"
               onClick={handleBack}
               disabled={isPending}
             >
-              <i className="bx bx-left-arrow-alt"></i> Back
+              <i className="bx bx-chevron-left"></i>Back
             </button>
             <button
               type="submit"
@@ -247,7 +255,7 @@ const AssignOrg = ({ setStep }) => {
               {isPending
                 ? "Please wait..."
                 : flowType === "default"
-                  ? "Assign Organization"
+                  ? "Assign to Organization"
                   : "Assign to Project"}
             </button>
           </div>

src/components/Organization/ManagOrg.jsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   useCreateOrganization,
+  useOrganization,
   useOrganizationModal,
   useUpdateOrganization,
 } from "../../hooks/useOrganization";
@@ -18,6 +19,7 @@ const ManagOrg = () => {
   const { data: service, isLoading } = useGlobalServices();
   const { flowType, orgData, startStep, onOpen, onClose, prevStep } =
     useOrganizationModal();
+  const {data:organization,isLoading:organizationLoading,isError,error} = useOrganization(orgData?.id);
 
   const method = useForm({
     resolver: zodResolver(organizationSchema),
@@ -45,7 +47,7 @@ const ManagOrg = () => {
       onOpen({ startStep: 1 });
       onClose();
     });
-
+console.log(organization)
   // Prefill form if editing
   useEffect(() => {
     if (orgData) {

src/components/Organization/OrgPickerFromSPId.jsx

@@ -78,7 +78,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
               <div className="d-flex flex-row gap-2 text-start text-black ">
                 <div className="mt-1">
                   <img
-                    src="/public/assets/img/SP-Placeholdeer.svg"
+                    src="/public/assets/img/orgLogo.png"
                     alt="logo"
                     width={50}
                     height={50}

src/components/Organization/OrganizationModal.jsx

@@ -19,6 +19,7 @@ import AssignOrg from "./AssignOrg";
 import ManagOrg from "./ManagOrg";
 import OrgPickerFromSPId from "./OrgPickerFromSPId";
 import OrgPickerfromTenant from "./OrgPickerfromTenant";
+import ViewOrganization from "./ViewOrganization";
 
 const OrganizationModal = () => {
   const { isOpen, orgData, startStep, onOpen, onClose, onToggle } =
@@ -53,7 +54,7 @@ const OrganizationModal = () => {
   };
 
   const RenderTitle = useMemo(() => {
-    if (orgData) {
+    if (orgData && startStep === 3 ) {
       return "Assign Organization";
     }
 
@@ -70,8 +71,11 @@ const OrganizationModal = () => {
     if (startStep === 3) {
       return "Assign Organization";
     }
+    if(startStep === 5){
+      return "Organization Details"
+    }
 
-    return "Manage Organization";
+    return  `${orgData ? "Update":"Create"} Organization`;
   }, [startStep, orgData]);
 
   const contentBody = (
@@ -94,6 +98,9 @@ const OrganizationModal = () => {
 
       {/* ---------- STEP 3: Add New Organization ---------- */}
       {startStep === 4 && <ManagOrg />}
+
+        {/* ---------- STEP 3: View Organization ---------- */}
+      {startStep === 5 && <ViewOrganization orgId={orgData}/>}
     </div>
   );
 

src/components/Organization/OrganizationSkeleton.jsx

@@ -42,3 +42,82 @@ export const OrgCardSkeleton = () => {
     </div>
   );
 };
+
+
+export const OrgDetailsSkeleton = () => {
+  return (
+    <div className="row text-start p-3">
+      {/* Header */}
+      <div className="col-12 mb-3">
+        <div className="d-flex justify-content-between align-items-center">
+          {/* Logo + Name */}
+          <div className="d-flex flex-row gap-2 align-items-center">
+            <SkeletonLine height={40} width={40} className="rounded-circle" />
+            <SkeletonLine height={18} width="180px" />
+          </div>
+
+          {/* Status Badge */}
+          <SkeletonLine height={20} width="70px" className="rounded-pill" />
+        </div>
+      </div>
+
+      {/* Section Title */}
+      <div className="d-flex text-secondary mb-2">
+        <SkeletonLine height={16} width="140px" />
+      </div>
+
+      {/* Contact Person */}
+      <div className="col-md-6 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="140px" />
+        </div>
+      </div>
+
+      {/* Contact Number */}
+      <div className="col-md-6 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="140px" />
+        </div>
+      </div>
+
+      {/* Email */}
+      <div className="col-md-12 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="220px" />
+        </div>
+      </div>
+
+      {/* SPRID */}
+      <div className="col-6 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="160px" />
+        </div>
+      </div>
+
+      {/* Employees */}
+      <div className="col-6 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="60px" />
+        </div>
+      </div>
+
+      {/* Address */}
+      <div className="col-12 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="100%" />
+        </div>
+      </div>
+
+      {/* Section Title 2 */}
+      <div className="d-flex text-secondary mb-2">
+        <SkeletonLine height={16} width="200px" />
+      </div>
+    </div>
+  );
+};

src/components/Organization/OrganizationsList.jsx

@@ -129,7 +129,7 @@ const OrganizationsList = ({searchText}) => {
                     ))}
                     <td className="sticky-action-column ">
                       <div className="d-flex justify-content-center gap-2">
-                        <i className="bx bx-show text-primary cursor-pointer" ></i>
+                        <i className="bx bx-show text-primary cursor-pointer"  onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
                         <i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
                         <i className="bx bx-trash text-danger cursor-pointer"></i>
                       </div>

src/components/Organization/ViewOrganization.jsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { useOrganization } from "../../hooks/useOrganization";
+import { OrgDetailsSkeleton } from "./OrganizationSkeleton";
+
+const VieworgDataanization = ({ orgId }) => {
+  const { data, isLoading, isError, error } = useOrganization(orgId);
+  if (isLoading) return <OrgDetailsSkeleton/>;
+  if (isError) return <div>{error.message}</div>;
+  return (
+    <div className="row text-black  text-black text-start ">
+      {/* Header */}
+     <div className="col-12 mb-3">
+        <div className="d-flex justify-content-between align-items-center text-start mb-1">
+          <div className="d-flex flex-row gap-2 align-items-center text-wrap">
+            <img
+                    src="/public/assets/img/orgLogo.png"
+                    alt="logo"
+                    width={40}
+                    height={40}
+                  />  <p className="fw-semibold fs-6 m-0">{data?.data?.name}</p>
+          </div>
+         <div className="text-end">
+           <span className={`badge bg-label-${data?.data.isActive ? "primary":"secondary"} `}>{data?.data.isActive ? "Active":"In-Active"} </span>
+          </div>
+        </div>
+      </div>
+      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
+      {/* Contact Info */}
+      <div className="col-md-6 mb-3">
+        <div className="d-flex">
+          <label
+            className="form-label me-2 mb-0 fw-semibold"
+            style={{ minWidth: "130px" }}
+          >
+           <i className="bx bx-sm bx-user me-1" /> Contact Person :
+          </label>
+          <div className="text-muted">{data?.data?.contactPerson}</div>
+        </div>
+      </div>
+      <div className="col-md-6 mb-3">
+        <div className="d-flex">
+          <label
+            className="form-label me-2 mb-0 fw-semibold"
+            style={{ minWidth: "130px" }}
+          >
+           <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
+          </label>
+          <div className="text-muted">{data?.data?.contactNumber}</div>
+        </div>
+      </div>
+      <div className="col-md-12 mb-3">
+        <div className="d-flex">
+          <label
+            className="form-label me-2 mb-0 fw-semibold"
+            style={{ minWidth: "130px" }}
+          >
+          <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
+          </label>
+          <div className="text-muted">{data?.data?.email}</div>
+        </div>
+      </div>
+      <div className="col-6 mb-3">
+        <div className="d-flex">
+          <label
+            className="form-label me-2 mb-0 fw-semibold"
+            style={{ maxWidth: "130px" }}
+          >
+          <i className="bx bx-sm me-1 bx-barcode"></i>
+  Service Provider Id (SPRID) :
+          </label>
+          <div className="text-muted">{data?.data?.sprid}</div>
+        </div>
+      </div>
+
+      <div className="col-6 mb-3">
+        <div className="d-flex">
+          <label
+            className="form-label me-2 mb-0 fw-semibold"
+            style={{ maxWidth: "130px" }}
+          >
+          <i className="bx bx-sm me-1 bx-group"></i>
+  Employees :
+          </label>
+          <div className="text-muted">{data?.data?.activeEmployeeCount}</div>
+        </div>
+      </div>
+      <div className="col-12 mb-3">
+        <div className="d-flex">
+          <label
+            className="form-label me-1 mb-0 fw-semibold"
+            style={{ minWidth: "130px" }}
+          >
+           <i className='bx bx-sm me-1 bx-map'></i> Address :
+          </label>
+          <div className="text-muted text-start">{data?.data?.address}</div>
+        </div>
+      </div>
+      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-briefcase me-1" /> Projects And Services</div>
+    </div>
+  )
+};
+
+export default VieworgDataanization;

src/components/common/DatePicker.jsx

@@ -1,14 +1,13 @@
 import { useEffect, useRef } from "react";
 import { useController } from "react-hook-form";
 
-
 const DatePicker = ({
   name,
   control,
   placeholder = "DD-MM-YYYY",
   className = "",
   allowText = false,
-  maxDate,   // removed default new Date()
+  maxDate,
   minDate,
   ...rest
 }) => {
@@ -22,43 +21,43 @@ const DatePicker = ({
   });
 
   useEffect(() => {
-    if (inputRef.current) {
+    if (!inputRef.current) return;
-      flatpickr(inputRef.current, {
+
-        dateFormat: "d-m-Y",
+    const fp = flatpickr(inputRef.current, {
-        allowInput: allowText,
+      dateFormat: "d-m-Y",
-        defaultDate: value
+      allowInput: allowText,
-          ? flatpickr.parseDate(value, "Y-m-d")
+      defaultDate: value ? new Date(value) : null, // safely convert to Date
-          : null,
+      maxDate: maxDate ? new Date(maxDate) : undefined,
-        maxDate: maxDate ?? undefined, // only applied if passed
+      minDate: minDate ? new Date(minDate) : undefined,
-        minDate: minDate ? new Date(minDate.split("T")[0]) : undefined,
+      onChange: (selectedDates) => {
-        onChange: function (selectedDates) {
+        if (selectedDates.length > 0) {
-          if (selectedDates.length > 0) {
+          onChange(flatpickr.formatDate(selectedDates[0], "Y-m-d"));
-            // store in YYYY-MM-DD
+        } else {
-            const formatted = flatpickr.formatDate(selectedDates[0], "Y-m-d");
+          onChange("");
-            onChange(formatted);
+        }
-          } else {
+      },
-            onChange("");
+      ...rest
-          }
+    });
-        },
+
-        ...rest
+    return () => {
-      });
+      fp.destroy(); // clean up on unmount
-    }
+    };
   }, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
 
+  const displayValue = value ? flatpickr.formatDate(new Date(value), "d-m-Y") : "";
+
   return (
-    <div className={` position-relative ${className}`}>
+    <div className={`position-relative ${className}`}>
       <input
         type="text"
-        className="form-control form-control-sm " 
+        className="form-control form-control-sm"
         placeholder={placeholder}
-        defaultValue={
+        value={displayValue}
-          value
+        onChange={(e) => {
-            ? flatpickr.formatDate(
+          if (allowText) {
-                flatpickr.parseDate(value, "Y-m-d"),
+            onChange(e.target.value); // allow manual typing if enabled
-                "d-m-Y"
+          }
-              )
+        }}
-            : ""
-        }
         ref={(el) => {
           inputRef.current = el;
           ref(el);
@@ -70,7 +69,7 @@ const DatePicker = ({
       <span
         className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
         onClick={() => {
-          if (inputRef.current && inputRef.current._flatpickr) {
+          if (inputRef.current?._flatpickr) {
             inputRef.current._flatpickr.open();
           }
         }}

src/hooks/useEmployees.js

@@ -221,7 +221,7 @@ export const useUpdateEmployee = () => {
     mutationFn: (employeeData) =>
       EmployeeRepository.manageEmployee(employeeData),
     onSuccess: (_, variables) => {
-      const id = variables.id || variables.employeeId;
+      const id = variables?.id || variables?.employeeId;
       const isAllEmployee = variables.IsAllEmployee;
 
       // Cache invalidation

src/hooks/useOrganization.js

@@ -37,6 +37,13 @@ export const useOrganizationModal = () => {
 
 // ================================Query=============================================================
 
+export const useOrganization=(id)=>{
+return useQuery({
+  queryKey:["organization",id],
+  queryFn:async()=> await OrganizationRepository.getOrganizaion(id),
+  enabled:!!id
+})
+}
 export const useOrganizationBySPRID = (sprid) => {
   return useQuery({
     queryKey: ["organization by", sprid],
@@ -167,11 +174,11 @@ export const useAssignOrgToTenant = (onSuccessCallback) => {
 export const useUpdateOrganization = () => {
   const useClient = useQueryClient();
   return useMutation({
-    mutationFn: async (payload) =>
+    mutationFn: async ({orgId,payload}) =>
-      await OrganizationRepository.assignOrganizationToProject(payload),
+      await OrganizationRepository.updateOrganizaion(orgId,payload),
     onSuccess: (_, variables) => {
-      // useClient.invalidateQueries({ queryKey: ["organizationList"] });
+      useClient.invalidateQueries({ queryKey: ["organizationList"] });
-      showToast("Organization  successfully", "success");
+      showToast("Organization Updated successfully", "success");
       if (onSuccessCallback) onSuccessCallback();
     },
     onError: (error) => {

src/pages/employee/EmployeeList.jsx

@@ -751,7 +751,6 @@ const EmployeeList = () => {
             </div>
           </div>
         ) : (
-          // </div>
           <div className="card">
             <div className="text-center">
               <i className="fa-solid fa-triangle-exclamation fs-5"></i>

src/repositories/OrganizationRespository.jsx

@@ -2,6 +2,8 @@ import { api } from "../utils/axiosClient";
 
 const OrganizationRepository = {
   createOrganization: (data) => api.post("/api/Organization/create", data),
+  updateOrganizaion:(id,data)=>api.put(`/api/Organization/edit/${id}`),
+  getOrganizaion:(id)=>api.get(`/api/Organization/details/${id}`),
   getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => {
     return api.get(
       `/api/Organization/list?pageSize=${pageSize}&pageNumber=${pageNumber}&active=${active}&${