src/components/Employee/ManageEmployee.jsx

@@ -15,17 +15,19 @@ import { clearApiCacheKey } from "../../slices/apiCacheSlice";
 
 const mobileNumberRegex = /^[7-9]\d{9}$/;
 
-const ManageEmployee = () => {
+const ManageEmployee = ({ employeeId, onClosed }) => {
   const dispatch = useDispatch();
 
-  const { employeeId } = useParams();
+  // const { employeeId } = useParams();
   const {
     employee,
     error,
     loading: empLoading,
   } = useEmployeeProfile(employeeId);
 
-  dispatch(changeMaster("Job Role"));
+  useEffect(() => {
+    dispatch(changeMaster("Job Role"));
+  }, [employeeId]);
 
   const [disabledEmail, setDisabledEmail] = useState(false);
   const { data: job_role, loading } = useMaster();
@@ -36,11 +38,11 @@ const ManageEmployee = () => {
   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
+    ...(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()
@@ -59,11 +61,11 @@ const ManageEmployee = () => {
           message: "Email local or domain part is too long",
         }
       ),
-    CurrentAddress: z
+    currentAddress: z
       .string()
       .min(1, { message: "Current Address is required" })
       .max(500, { message: "Address cannot exceed 500 characters" }),
-    BirthDate: z
+    birthDate: z
       .string()
       .min(1, { message: "Birth Date is required" })
       .refine(
@@ -74,7 +76,7 @@ const ManageEmployee = () => {
           message: "Birth date cannot be in the future",
         }
       ),
-    JoiningDate: z
+    joiningDate: z
       .string()
       .min(1, { message: "Joining Date is required" })
       .refine(
@@ -85,43 +87,43 @@ const ManageEmployee = () => {
           message: "Joining date cannot be in the future",
         }
       ),
-    EmergencyPhoneNumber: z
+    emergencyPhoneNumber: z
       .string()
       .min(1, { message: "Phone Number is required" })
       .regex(mobileNumberRegex, { message: "Invalid phone number " }),
-    EmergencyContactPerson: z
+    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
+    aadharNumber: z
       .string()
       .optional()
       .refine((val) => !val || /^\d{12}$/.test(val), {
         message: "Aadhar card must be exactly 12 digits long",
       }),
-    Gender: z
+    gender: z
       .string()
       .min(1, { message: "Gender is required" })
       .refine((val) => val !== "Select Gender", {
         message: "Please select a gender",
       }),
-    PanNumber: z
+    panNumber: z
       .string()
       .optional()
       .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
         message: "Invalid PAN number",
       }),
-    PermanentAddress: z
+    permanentAddress: z
       .string()
       .min(1, { message: "Permanent Address is required" })
       .max(500, { message: "Address cannot exceed 500 characters" }),
-    PhoneNumber: z
+    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" }),
+    jobRoleId: z.string().min(1, { message: "Role is required" }),
   });
 
   const {
@@ -135,22 +137,22 @@ const ManageEmployee = () => {
   } = useForm({
     resolver: zodResolver(userSchema),
     defaultValues: {
-      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,
+      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",
   });
@@ -160,29 +162,8 @@ const ManageEmployee = () => {
   const onSubmit = (data) => {
     setLoading(true);
 
-    const formData = getValues();
-
-    const formDataToSend = new FormData();
-
-    if (!employeeId) {
-      delete formData["Id"];
-    }
-
-    for (const key in formData) {
-      formDataToSend.append(key, formData[key]);
-
-      //  if (key === "Documents") {
-      //    formData[key]?.forEach((file, index) => {
-      //      formDataToSend.append(`Documents`, file);
-      //    });
-      //  } else if (key === "Photo" && formData[key]) {
-      //    formDataToSend.append("Photo", formData[key]);
-      //  } else{
-      //    formDataToSend.append(key, formData[key]);
-      //  }
-    }
-
-    EmployeeRepository.manageEmployee(formDataToSend)
+  console.log(data);
+    EmployeeRepository.manageEmployee(data)
       .then((response) => {
         showToast("Employee details updated successfully.", "success");
         clearCacheKey("employeeListByProject");
@@ -194,7 +175,10 @@ const ManageEmployee = () => {
         navigation("/employees");
       })
       .catch((error) => {
-        const message  = error?.response?.data?.message || error?.message || "Error occured during api calling"
+        const message =
+          error?.response?.data?.message ||
+          error?.message ||
+          "Error occured during api calling";
         showToast(message, "error");
         setLoading(false);
       });
@@ -206,29 +190,27 @@ const ManageEmployee = () => {
     }
   }, [loading, error, employee]);
 
-  dispatch(changeMaster("Job Role"));
-
   useEffect(() => {
     reset(
       currentEmployee
         ? {
-            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:
+            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() || "",
+            aadharNumber: currentEmployee.aadharNumber || "",
+            gender: currentEmployee.gender || "",
+            panNumber: currentEmployee.panNumber || "",
+            permanentAddress: currentEmployee.permanentAddress || "",
+            phoneNumber: currentEmployee.phoneNumber || "",
+            jobRoleId: currentEmployee.jobRoleId?.toString() || "",
           }
         : {} // Empty object resets the form
     );
@@ -238,9 +220,9 @@ const ManageEmployee = () => {
 
   return (
     <>
-      <div className="row">
-        <div className="col-xxl">
-          <div className="card mb-4">
+      <div className=" row">
+        <div className="col-xl">
+          <div className="card">
             <div className="card-header d-flex align-items-center justify-content-between">
               <h6 className="mb-0">
                 {employee ? "Update Employee" : "Create Employee"}
@@ -248,15 +230,9 @@ const ManageEmployee = () => {
 
               <span
                 className="cursor-pointer fs-6"
-                data-htm="true"
-                data-bs-toggle="tooltip"
-                data-bs-offset="0,6"
-                data-bs-placement="top"
-                data-bs-html="true"
-                title="Move Back"
-                onClick={() => navigation("/employees")}
+                onClick={() => onClosed()}
               >
-                <i className="bx bxs-chevron-left"></i> Back
+                <i className='bx bx-x'></i>
               </span>
             </div>
             <div className="card-body">
@@ -272,7 +248,7 @@ const ManageEmployee = () => {
                     <input
                       type="text"
                       name="FirstName"
-                      {...register("FirstName")}
+                      {...register("firstName")}
                       className="form-control form-control-sm"
                       id="FirstName"
                       placeholder="First Name"
@@ -291,7 +267,7 @@ const ManageEmployee = () => {
 
                     <input
                       type="text"
-                      {...register("MiddleName")}
+                      {...register("middleName")}
                       className="form-control form-control-sm"
                       id="MiddleName"
                       placeholder="Middle Name"
@@ -309,7 +285,7 @@ const ManageEmployee = () => {
                     <div className="form-text text-start">Last Name</div>
                     <input
                       type="text"
-                      {...register("LastName")}
+                      {...register("lastName")}
                       className="form-control form-control-sm"
                       id="LastName"
                       placeholder="Last Name"
@@ -330,7 +306,7 @@ const ManageEmployee = () => {
                     <input
                       type="email"
                       id="Email"
-                      {...register("Email")}
+                      {...register("email")}
                       className="form-control form-control-sm"
                       placeholder="example@domain.com"
                       maxLength={80}
@@ -352,7 +328,7 @@ const ManageEmployee = () => {
                       type="text"
                       keyboardType="numeric"
                       id="PhoneNumber"
-                      {...register("PhoneNumber")}
+                      {...register("phoneNumber")}
                       className="form-control form-control-sm"
                       placeholder="Phone Number"
                       inputMode="numeric"
@@ -376,7 +352,7 @@ const ManageEmployee = () => {
                     <div className="input-group input-group-merge ">
                       <select
                         className="form-select form-select-sm "
-                        {...register("Gender")}
+                        {...register("gender")}
                         id="Gender"
                         aria-label=""
                       >
@@ -404,7 +380,7 @@ const ManageEmployee = () => {
                       <input
                         className="form-control form-control-sm"
                         type="date"
-                        {...register("BirthDate")}
+                        {...register("birthDate")}
                         id="BirthDate"
                       />
                     </div>
@@ -424,7 +400,7 @@ const ManageEmployee = () => {
                       <input
                         className="form-control form-control-sm"
                         type="date"
-                        {...register("JoiningDate")}
+                        {...register("joiningDate")}
                         id="JoiningDate"
                       />
                     </div>
@@ -448,7 +424,7 @@ const ManageEmployee = () => {
                       placeholder="Current Address"
                       aria-label="Current Address"
                       aria-describedby="basic-icon-default-message2"
-                      {...register("CurrentAddress")}
+                      {...register("currentAddress")}
                       maxLength={500}
                       onChange={(e) => {
                         setCurrentAddressLength(e.target.value.length);
@@ -482,7 +458,7 @@ const ManageEmployee = () => {
                       placeholder="Permanent Address"
                       aria-label="Permanent Address"
                       aria-describedby="basic-icon-default-message2"
-                      {...register("PermanentAddress")}
+                      {...register("permanentAddress")}
                       maxLength={500}
                       onChange={(e) => {
                         setPermanentAddressLength(e.target.value.length);
@@ -516,7 +492,7 @@ const ManageEmployee = () => {
                     <div className="input-group input-group-merge ">
                       <select
                         className="form-select form-select-sm"
-                        {...register("JobRoleId")}
+                        {...register("jobRoleId")}
                         id="JobRoleId"
                         aria-label=""
                       >
@@ -545,7 +521,7 @@ const ManageEmployee = () => {
                     </div>
                     <input
                       type="text"
-                      {...register("EmergencyContactPerson")}
+                      {...register("emergencyContactPerson")}
                       className="form-control form-control-sm"
                       id="EmergencyContactPerson"
                       maxLength={50}
@@ -566,7 +542,7 @@ const ManageEmployee = () => {
                     </div>
                     <input
                       type="text"
-                      {...register("EmergencyPhoneNumber")}
+                      {...register("emergencyPhoneNumber")}
                       className="form-control form-control-sm phone-mask"
                       id="EmergencyPhoneNumber"
                       placeholder="Phone Number"
@@ -583,13 +559,13 @@ const ManageEmployee = () => {
                     )}
                   </div>
                 </div>
-                <div className="row mb-3">
+                <div className="row mb-3 d-none">
                   <div className="col-sm-6">
                     <div className="form-text text-start">AADHAR Number</div>
 
                     <input
                       type="text"
-                      {...register("AadharNumber")}
+                      {...register("aadharNumber")}
                       className="form-control form-control-sm"
                       id="AadharNumber"
                       placeholder="AADHAR Number"
@@ -602,12 +578,12 @@ const ManageEmployee = () => {
                       </div>
                     )}
                   </div>
-                  <div className="col-sm-6">
+                  <div className="col-sm-6 d-none">
                     <div className="form-text text-start">PAN Number</div>
 
                     <input
                       type="text"
-                      {...register("PanNumber")}
+                      {...register("panNumber")}
                       className="form-control form-control-sm"
                       id="PanNumber"
                       placeholder="PAN Number"
@@ -627,7 +603,7 @@ const ManageEmployee = () => {
                 {employeeId && (
                   <div className="row mb-3 d-none">
                     <div className="col-sm-12">
-                      <input type="text" name="id" {...register("Id")} />
+                      <input type="text" name="id" {...register("id")} />
                     </div>
                   </div>
                 )}

src/components/Employee/ManageRole.jsx

@@ -17,7 +17,9 @@ const ManageRole = ( {employeeId, onClosed} ) =>
 {
   
   const disptach = useDispatch();
+useEffect(()=>{
   disptach(changeMaster("Application Role"));
+},[disptach])
   const [isLoading, setIsLoading] = useState(false);
   const { employeeRoles, loading } = useEmployeeRoles(employeeId);
   const { data, loading: roleLoading } = useMaster();

src/pages/employee/EmployeeList.jsx

@@ -20,13 +20,14 @@ import {
   exportToPDF,
 } from "../../utils/tableExportUtils";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
+import ManageEmployee from "../../components/Employee/ManageEmployee";
 
 const EmployeeList = () => {
   const { profile: loginUser } = useProfile();
   const [selectedProject, setSelectedProject] = useState("");
   const { projects, loading: projectLoading } = useProjects();
   const [showInactive, setShowInactive] = useState(false);
-  const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES);
+  const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
     useEmployeesAllOrByProjectId(selectedProject, showInactive);
@@ -37,9 +38,11 @@ const EmployeeList = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage] = useState(15);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
   const [filteredData, setFilteredData] = useState([]);
   const [showModal, setShowModal] = useState(false);
+  const [selectedEmployeeId, setSelecedEmployeeId] = useState();
 
   const navigate = useNavigate();
 
@@ -91,13 +94,15 @@ const EmployeeList = () => {
 
   const closeModal = () => {
     setIsCreateModalOpen(false);
+
     const modalElement = document.getElementById("managerole-modal");
-    if (modalElement) {
+    if (modalElement && !showModal) {
       modalElement.classList.remove("show");
       modalElement.style.display = "none";
       document.body.classList.remove("modal-open");
       document.querySelector(".modal-backdrop").remove();
     }
+    setShowModal(false);
   };
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
@@ -160,20 +165,34 @@ const EmployeeList = () => {
     recallEmployeeData(e.target.checked);
   };
 
+  const handleEmployeeModel = (id) => {
+    setSelecedEmployeeId(id);
+    setShowModal(true);
+  };
+
   return (
     <>
       {isCreateModalOpen && (
         <ManageEmp employeeId={modelConfig} onClosed={closeModal} />
       )}
-
       <div
-        className={`modal fade ${showModal ? "show" : ""}`}
+        className={`modal fade ${showModal ? "show" : ""} `}
         tabIndex="-1"
         role="dialog"
         style={{ display: showModal ? "block" : "none" }}
         aria-hidden={!showModal}
       >
-        <SuspendEmp onClose={handleClose} />
+        <div
+          className="modal-dialog modal-xl modal-dialog-centered "
+        >
+          <div className="modal-content overflow-y-auto overflow-x-hidden"
+          style={{ maxHeight: "90vh" }}>
+            <ManageEmployee
+              employeeId={selectedEmployeeId}
+              onClosed={closeModal}
+            />
+          </div>
+        </div>
       </div>
 
       <div className="container-xxl flex-grow-1 container-p-y">
@@ -301,21 +320,19 @@ const EmployeeList = () => {
                           </ul>
                           <button
                             className={`btn btn-sm add-new btn-primary ${
-                              !ManageEmployee && "d-none"
+                              !Manage_Employee && "d-none"
                             }`}
                             tabIndex="0"
                             type="button"
+                            onClick={() => {
+                              handleEmployeeModel(null);
+                            }}
                           >
                             <span>
-                              <Link
-                                to="/employee/manage"
-                                className="dropdown-item"
-                              >
-                                <i className="bx bx-plus-circle me-2"></i>
-                                <span className="d-none d-md-inline-block">
-                                  Add New Employee
-                                </span>
-                              </Link>
+                              <i className="bx bx-plus-circle me-2"></i>
+                              <span className="d-none d-md-inline-block">
+                                Add New Employee
+                              </span>
                             </span>
                           </button>{" "}
                         </div>
@@ -332,12 +349,8 @@ const EmployeeList = () => {
                       onChange={handleToggle}
                     />
                     <span className="switch-toggle-slider">
-                      <span className="switch-on">
-                        <i className="icon-base bx bx-check"></i>
-                      </span>
-                      <span className="switch-off">
-                        <i className="icon-base bx bx-x"></i>
-                      </span>
+                      <span className="switch-on"></span>
+                      <span className="switch-off"></span>
                     </span>
                     <span className="switch-label">
                       Show Inactive Employees
@@ -420,7 +433,7 @@ const EmployeeList = () => {
                       </th>
                       <th
                         className={`sorting_disabled  ${
-                          !ManageEmployee && "d-none"
+                          !Manage_Employee && "d-none"
                         }`}
                         rowSpan="1"
                         colSpan="1"
@@ -535,7 +548,7 @@ const EmployeeList = () => {
                               </span>
                             )}
                           </td>
-                          {ManageEmployee && (
+                          {Manage_Employee && (
                             <td className="text-end">
                               <div className="dropdown">
                                 <button
@@ -553,12 +566,14 @@ const EmployeeList = () => {
                                   >
                                     <i className="bx bx-detail bx-sm"></i> View
                                   </button>
-                                  <Link
-                                    to={`/employee/manage/${item.id}`}
+                                  <button
                                     className="dropdown-item py-1"
+                                    onClick={() => {
+                                      handleEmployeeModel(item.id);
+                                    }}
                                   >
                                     <i className="bx bx-edit bx-sm"></i> Edit
-                                  </Link>
+                                  </button>
                                   {!item.isSystem && (
                                     <>
                                       <button

src/pages/employee/ManageEmp.jsx

@@ -1,31 +0,0 @@
-import React from "react";
-import ManageEmployee from "../../components/Employee/ManageEmployee";
-import Breadcrumb from "../../components/common/Breadcrumb";
-import { getCachedData } from "../../slices/apiDataManager";
-
-const ManageEmp = () => {
- 
-  const onEmployeeSubmt = () => {
-    // console.log("employee submit clicked");
-  };
-  return (
-    <div className="container-xxl flex-grow-1 container-p-y">
-      <Breadcrumb
-        data={[
-          { label: "Home", link: "/dashboard" },
-          { label: "Employees", link: "/employees" },
-          { label: "Manage", link: null },
-        ]}
-      ></Breadcrumb>
-
-      <div>
-        <ManageEmployee
-          employee={null}
-          onSubmit={onEmployeeSubmt}
-        ></ManageEmployee>
-      </div>
-    </div>
-  );
-};
-
-export default ManageEmp;

src/repositories/EmployeeRepository.jsx

@@ -7,9 +7,7 @@ const EmployeeRepository = {
   searchEmployees: (query) =>
     api.get(`/api/employee/search/${query}`),
   manageEmployee: (data) =>
-    api.post("/api/employee/manage", data, {
-      "Content-Type": "multipart/form-data",
-    }),
+    api.post("/api/employee/manage", data),
   updateEmployee: (id, data) => api.put(`/users/${id}`, data),
   // deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
   getEmployeeProfile:(id)=>api.get(`/api/employee/profile/get/${id}`),

src/router/AppRoutes.jsx

@@ -18,7 +18,7 @@ import ProjectList from "../pages/project/ProjectList";
 import ProjectDetails from "../pages/project/ProjectDetails";
 import ManageProject from "../components/Project/ManageProject";
 import EmployeeList from "../pages/employee/EmployeeList";
-import ManageEmp from "../pages/employee/ManageEmp";
+// import ManageEmp from "../pages/employee/ManageEmp";
 import EmployeeProfile from "../pages/employee/EmployeeProfile";
 import Inventory from "../pages/project/Inventory";
 import AttendancePage from "../pages/Activities/AttendancePage";
@@ -63,8 +63,8 @@ const router = createBrowserRouter(
             { path: "/project/manage/:projectId", element: <ManageProject /> },
             { path: "/employees", element: <EmployeeList /> },
             { path: "/employee/:employeeId", element: <EmployeeProfile /> },
-            { path: "/employee/manage", element: <ManageEmp /> },
-            {path: "/employee/manage/:employeeId", element: <ManageEmp />},
+            // { path: "/employee/manage", element: <ManageEmp /> },
+            // {path: "/employee/manage/:employeeId", element: <ManageEmp />},
             { path: "/directory", element: <Directory /> },
             { path: "/inventory", element: <Inventory /> },
             { path: "/activities/attendance", element: <AttendancePage /> },