src/components/Project/ActivityTimeline.jsx

@@ -2,151 +2,136 @@ import React from "react";
 
 const ActivityTimeline = () => {
   return (
-    // <div className="card card-action mb-6">
-    //   <div className="card-header align-items-center">
-    //     <h5 className="card-action-title mb-0">
-    //       <i className="bx bx-bar-chart-alt-2 bx-lg text-body me-4"></i>
-    //       Activity Timeline
-    //     </h5>
-    //   </div>
-    //   <div className="card-body pt-3">
-    //     <ul className="timeline mb-0">
-    //       <li className="timeline-item timeline-item-transparent">
-    //         <span className="timeline-point timeline-point-primary"></span>
-    //         <div className="timeline-event">
-    //           <div className="timeline-header mb-3">
-    //             <h6 className="mb-0">12 Invoices have been paid</h6>
-    //             <small className="text-muted">12 min ago</small>
-    //           </div>
-    //           <p className="mb-2">Invoices have been paid to the company</p>
-    //           <div className="d-flex align-items-center mb-2">
-    //             <div className="badge bg-lighter rounded d-flex align-items-center">
-    //               <img
-    //                 src="../../assets//img/icons/misc/pdf.png"
-    //                 alt="img"
-    //                 width="15"
-    //                 className="me-2"
-    //               ></img>
-    //               <span className="h6 mb-0 text-body">invoices.pdf</span>
-    //             </div>
-    //           </div>
-    //         </div>
-    //       </li>
-    //       <li className="timeline-item timeline-item-transparent">
-    //         <span className="timeline-point timeline-point-success"></span>
-    //         <div className="timeline-event">
-    //           <div className="timeline-header mb-3">
-    //             <h6 className="mb-0">Client Meeting</h6>
-    //             <small className="text-muted">45 min ago</small>
-    //           </div>
-    //           <p className="mb-2">Project meeting with john @10:15am</p>
-    //           <div className="d-flex justify-content-between flex-wrap gap-2 mb-2">
-    //             <div className="d-flex flex-wrap align-items-center mb-50">
-    //               <div className="avatar avatar-sm me-3">
-    //                 <img
-    //                   src="../../assets/img/avatars/1.png"
-    //                   alt="Avatar"
-    //                   className="rounded-circle"
-    //                 ></img>
-    //               </div>
-    //               <div>
-    //                 <p className="mb-0 small fw-medium">
-    //                   Lester McCarthy (Client)
-    //                 </p>
-    //                 <small>CEO of ThemeSelection</small>
-    //               </div>
-    //             </div>
-    //           </div>
-    //         </div>
-    //       </li>
-    //       <li className="timeline-item timeline-item-transparent">
-    //         <span className="timeline-point timeline-point-info"></span>
-    //         <div className="timeline-event">
-    //           <div className="timeline-header mb-3">
-    //             <h6 className="mb-0">Create a new project for client</h6>
-    //             <small className="text-muted">2 Day Ago</small>
-    //           </div>
-    //           <p className="mb-2">6 team members in a project</p>
-    //           <ul className="list-group list-group-flush">
-    //             <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
-    //               <div className="d-flex flex-wrap align-items-center">
-    //                 <ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
-    //                   <li
-    //                     data-bs-toggle="tooltip"
-    //                     data-popup="tooltip-custom"
-    //                     data-bs-placement="top"
-    //                     className="avatar pull-up"
-    //                     aria-label="Vinnie Mostowy"
-    //                     data-bs-original-title="Vinnie Mostowy"
-    //                   >
-    //                     <img
-    //                       className="rounded-circle"
-    //                       src="../../assets/img/avatars/1.png"
-    //                       alt="Avatar"
-    //                     ></img>
-    //                   </li>
-    //                   <li
-    //                     data-bs-toggle="tooltip"
-    //                     data-popup="tooltip-custom"
-    //                     data-bs-placement="top"
-    //                     className="avatar pull-up"
-    //                     aria-label="Allen Rieske"
-    //                     data-bs-original-title="Allen Rieske"
-    //                   >
-    //                     <img
-    //                       className="rounded-circle"
-    //                       src="../../assets/img/avatars/4.png"
-    //                       alt="Avatar"
-    //                     ></img>
-    //                   </li>
-    //                   <li
-    //                     data-bs-toggle="tooltip"
-    //                     data-popup="tooltip-custom"
-    //                     data-bs-placement="top"
-    //                     className="avatar pull-up"
-    //                     aria-label="Julee Rossignol"
-    //                     data-bs-original-title="Julee Rossignol"
-    //                   >
-    //                     <img
-    //                       className="rounded-circle"
-    //                       src="../../assets/img/avatars/2.png"
-    //                       alt="Avatar"
-    //                     ></img>
-    //                   </li>
-    //                   <li className="avatar">
-    //                     <span
-    //                       className="avatar-initial rounded-circle pull-up text-heading"
-    //                       data-bs-toggle="tooltip"
-    //                       data-bs-placement="bottom"
-    //                       data-bs-original-title="3 more"
-    //                     >
-    //                       +3
-    //                     </span>
-    //                   </li>
-    //                 </ul>
-    //               </div>
-    //             </li>
-    //           </ul>
-    //         </div>
-    //       </li>
-    //     </ul>
-    //   </div>
-    // </div>
-    <div className="misc-wrapper">
-    <h2 className="mb-2 mx-2">Coming Soon!</h2>
-    <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-    Thank you for your patience!</p>
-    <div className="mt-4">
-        <img
-            src="../assets/img/illustrations/girl-doing-yoga-light.png"
-            alt="girl-doing-yoga-light"
-            aria-label="Girl doing yoga light"
-            width="500"
-            className="img-fluid"
-            data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-            data-app-light-img="illustrations/girl-doing-yoga-light.png" />
+    <div className="card card-action mb-6">
+      <div className="card-header align-items-center">
+        <h5 className="card-action-title mb-0">
+          <i className="bx bx-bar-chart-alt-2 bx-lg text-body me-4"></i>
+          Activity Timeline
+        </h5>
+      </div>
+      <div className="card-body pt-3">
+        <ul className="timeline mb-0">
+          <li className="timeline-item timeline-item-transparent">
+            <span className="timeline-point timeline-point-primary"></span>
+            <div className="timeline-event">
+              <div className="timeline-header mb-3">
+                <h6 className="mb-0">12 Invoices have been paid</h6>
+                <small className="text-muted">12 min ago</small>
+              </div>
+              <p className="mb-2">Invoices have been paid to the company</p>
+              <div className="d-flex align-items-center mb-2">
+                <div className="badge bg-lighter rounded d-flex align-items-center">
+                  <img
+                    src="../../assets//img/icons/misc/pdf.png"
+                    alt="img"
+                    width="15"
+                    className="me-2"
+                  ></img>
+                  <span className="h6 mb-0 text-body">invoices.pdf</span>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li className="timeline-item timeline-item-transparent">
+            <span className="timeline-point timeline-point-success"></span>
+            <div className="timeline-event">
+              <div className="timeline-header mb-3">
+                <h6 className="mb-0">Client Meeting</h6>
+                <small className="text-muted">45 min ago</small>
+              </div>
+              <p className="mb-2">Project meeting with john @10:15am</p>
+              <div className="d-flex justify-content-between flex-wrap gap-2 mb-2">
+                <div className="d-flex flex-wrap align-items-center mb-50">
+                  <div className="avatar avatar-sm me-3">
+                    <img
+                      src="../../assets/img/avatars/1.png"
+                      alt="Avatar"
+                      className="rounded-circle"
+                    ></img>
+                  </div>
+                  <div>
+                    <p className="mb-0 small fw-medium">
+                      Lester McCarthy (Client)
+                    </p>
+                    <small>CEO of ThemeSelection</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li className="timeline-item timeline-item-transparent">
+            <span className="timeline-point timeline-point-info"></span>
+            <div className="timeline-event">
+              <div className="timeline-header mb-3">
+                <h6 className="mb-0">Create a new project for client</h6>
+                <small className="text-muted">2 Day Ago</small>
+              </div>
+              <p className="mb-2">6 team members in a project</p>
+              <ul className="list-group list-group-flush">
+                <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
+                  <div className="d-flex flex-wrap align-items-center">
+                    <ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
+                      <li
+                        data-bs-toggle="tooltip"
+                        data-popup="tooltip-custom"
+                        data-bs-placement="top"
+                        className="avatar pull-up"
+                        aria-label="Vinnie Mostowy"
+                        data-bs-original-title="Vinnie Mostowy"
+                      >
+                        <img
+                          className="rounded-circle"
+                          src="../../assets/img/avatars/1.png"
+                          alt="Avatar"
+                        ></img>
+                      </li>
+                      <li
+                        data-bs-toggle="tooltip"
+                        data-popup="tooltip-custom"
+                        data-bs-placement="top"
+                        className="avatar pull-up"
+                        aria-label="Allen Rieske"
+                        data-bs-original-title="Allen Rieske"
+                      >
+                        <img
+                          className="rounded-circle"
+                          src="../../assets/img/avatars/4.png"
+                          alt="Avatar"
+                        ></img>
+                      </li>
+                      <li
+                        data-bs-toggle="tooltip"
+                        data-popup="tooltip-custom"
+                        data-bs-placement="top"
+                        className="avatar pull-up"
+                        aria-label="Julee Rossignol"
+                        data-bs-original-title="Julee Rossignol"
+                      >
+                        <img
+                          className="rounded-circle"
+                          src="../../assets/img/avatars/2.png"
+                          alt="Avatar"
+                        ></img>
+                      </li>
+                      <li className="avatar">
+                        <span
+                          className="avatar-initial rounded-circle pull-up text-heading"
+                          data-bs-toggle="tooltip"
+                          data-bs-placement="bottom"
+                          data-bs-original-title="3 more"
+                        >
+                          +3
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
-</div>
   );
 };
 

src/components/Project/Infrastructure/FloorModel.jsx

@@ -106,7 +106,12 @@ const FloorModel = ({
       <div className="modal-content">
         <div className="modal-body">
           <div className="row">
-            <button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
+            <button
+              type="button"
+              className="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
             <div className="text-center mb-1">
               <h5 className="mb-1">Manage Floors - {project.name}</h5>
             </div>
@@ -150,7 +155,7 @@ const FloorModel = ({
                     onChange={handleFloorChange}
                   >
                     <option value="0">Add New Floor</option>
-                    {selectedBuilding?.floors?.map((floor) => (
+                    {selectedBuilding.floors.map((floor) => (
                       <option key={floor.id} value={floor.id}>
                         {floor.floorName}
                       </option>
@@ -187,9 +192,10 @@ const FloorModel = ({
                     : "Add Floor"}
                 </button>
                 <button
-                  type="button"
+                  type="reset"
                   className="btn btn-label-secondary"
-                  onClick={onClose}
+                  data-bs-dismiss="modal"
+                  aria-label="Close"
                 >
                   Cancel
                 </button>

src/components/Project/Infrastructure/InfraTable.jsx

@@ -1,154 +1,69 @@
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import Building from "./Building";
 import Floor from "./Floor";
-import FloorModel from "./FloorModel";
-import showToast from "../../../services/toastService";
-import ProjectRepository from "../../../repositories/ProjectRepository";
 
-const InfraTable = ({ buildings }) => {
-  const [projectBuilding, setProjectBuilding] = useState([]);
-  const [expandedBuildings, setExpandedBuildings] = useState([]);
-  const [showFloorModal, setShowFloorModal] = useState(false);
-  const [selectedBuilding, setSelectedBuilding] = useState(null);
-  const [clearTrigger, setClearTrigger] = useState(false);
+const InfraTable = ( {buildings,assign} ) =>
+{
+  const [projectBuiling,setProjectBuilding] = useState([])
+    const [expandedBuildings, setExpandedBuildings] = useState([]);
+  
+    const toggleBuilding = (buildingId) => {
+      setExpandedBuildings((prevExpanded) =>
+        prevExpanded.includes(buildingId)
+          ? prevExpanded.filter((id) => id !== buildingId)
+          : [...prevExpanded, buildingId]
+      );
+    };
+  
 
-  const toggleBuilding = (buildingId) => {
-    setExpandedBuildings((prevExpanded) =>
-      prevExpanded.includes(buildingId)
-        ? prevExpanded.filter((id) => id !== buildingId)
-        : [...prevExpanded, buildingId]
+    const getContent = (building) => {
+      return building.floors.length > 0 ? (
+        building.floors.map((floor) => <Floor  forBuilding={building}   key={floor.id} floor={floor} workAreas={floor.workAreas} />)
+      ) : (
+        <tr>
+          <td colSpan="4">
+            <div className="alert alert-warning text-center mb-0" role="alert">
+              <p>No floors have been added yet. Please add floors to start managing your building.</p>
+              <button
+                type="button"
+                className="btn btn-xs btn-primary"
+                data-bs-toggle="modal"
+                data-bs-target="#addFloorModal"
+                onClick={() => openModal('addFloor')}
+              >
+                <i className="bx bx-plus-circle me-2"></i>
+                Add Floors
+              </button>
+            </div>
+          </td>
+        </tr>
+      );
+  };
+  
+
+  useEffect( () =>
+  {
+    setProjectBuilding(buildings)
+  },[buildings])
+  
+    return (
+      <div className="col-12 overflow-auto">
+        {projectBuiling && projectBuiling.length > 0 && (
+          <table className="table table-bordered">
+            <tbody>
+              {projectBuiling.map((building) => (
+                <Building
+                  key={building.id}
+                  building={building}
+                  toggleBuilding={toggleBuilding}
+                  expandedBuildings={expandedBuildings}
+                  getContent={getContent}
+                />
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
     );
   };
-
-  const handleAddFloor = (building) => {
-    setSelectedBuilding(building);
-    setShowFloorModal(true);
-  };
-
-  const handleFloorSubmit = async (data) => {
-    try {
-      const payload = [
-        {
-          building: null,
-          floor: {
-            id: data.id || "0",
-            floorName: data.floorName,
-            buildingId: data.buildingId,
-          },
-          workArea: null,
-        },
-      ];
-
-      const res = await ProjectRepository.manageProjectInfra(payload);
-
-      if (res?.success) {
-        showToast("Floor saved successfully!", "success");
-
-        // Find and update the correct building
-        const updatedBuildings = projectBuilding.map((b) => {
-          if (b.id === parseInt(data.buildingId)) {
-            const newFloor = {
-              id: res.data?.[0]?.floor?.id || Math.random(),
-              floorName: res.data?.[0]?.floor?.floorName || data.floorName,
-              workAreas: [],
-            };
-
-            return {
-              ...b,
-              floors: [...(b.floors || []), newFloor],
-            };
-          }
-          return b;
-        });
-
-        setProjectBuilding(updatedBuildings);
-        setShowFloorModal(false);
-        setClearTrigger(true);
-      } else {
-        showToast("Failed to save floor", "error");
-      }
-    } catch (err) {
-      console.error("Error adding floor", err);
-      showToast("Error occurred while saving floor", "error");
-    }
-  };
-
-
-  const handleClearComplete = () => {
-    setClearTrigger(false);
-  };
-
-  const getContent = (building) => {
-    return building.floors?.length > 0 ? (
-      building.floors.map((floor) => (
-        <Floor
-          key={floor.id}
-          forBuilding={building}
-          floor={floor}
-          workAreas={floor.workAreas}
-        />
-      ))
-    ) : (
-      <tr>
-        <td colSpan="4">
-          <div className="alert alert-warning text-center mb-0" role="alert">
-            <p>No floors have been added yet. Please add floors to start managing your building.</p>
-            <button
-              type="button"
-              className="btn btn-xs btn-primary"
-              onClick={() => handleAddFloor(building)}
-            >
-              <i className="bx bx-plus-circle me-2"></i>
-              Add Floors
-            </button>
-          </div>
-        </td>
-      </tr>
-    );
-  };
-  useEffect(() => {
-    setProjectBuilding(buildings);
-  }, [buildings]);
-
-  return (
-    <div >
-      {projectBuilding && projectBuilding.length > 0 && (
-        <table className="table table-bordered">
-          <tbody>
-            {projectBuilding.map((building) => (
-              <Building
-                key={building.id}
-                building={building}
-                toggleBuilding={toggleBuilding}
-                expandedBuildings={expandedBuildings}
-                getContent={getContent}
-              />
-            ))}
-          </tbody>
-        </table>
-      )}
-      {showFloorModal && selectedBuilding && (
-        <div
-          className="modal fade show"
-          id="floor-model"
-          tabIndex="-1"
-          style={{ display: "block" }}
-          aria-modal="true"
-          role="dialog"
-        >
-          <FloorModel
-            project={{
-              buildings: [selectedBuilding]
-            }}
-            onClose={() => setShowFloorModal(false)}
-            onSubmit={handleFloorSubmit}
-            onClearComplete={handleClearComplete}
-          />
-        </div>
-      )}
-
-    </div>
-  );
-};
-
-export default InfraTable;
+  export default InfraTable

src/components/Project/ProjectInfra.jsx

@@ -312,12 +312,12 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
   }
   const openModal = () => {
     const modalElement = document.getElementById('building-model');
-    const modal = new Modal(modalElement, {
-      backdrop: false,
-      keyboard: true,
-      focus: true
-    });
-    modal.show()
+  const modal = new Modal(modalElement, {
+    backdrop: false,
+    keyboard: true,
+    focus: true
+  });
+  modal.show()
   };
   const closeModal = () => {
     setIsModalOpen(false); 
@@ -364,12 +364,10 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
         </div>
       {isFloorModalOpen && (
         <div
-          className="modal fade show"
+          className={`modal fade `}
           id="floor-model"
           tabIndex="-1"
-          role="dialog"
-          style={{ display: 'block' }}
-          aria-hidden="false"
+          aria-hidden="true"
         >
           <FloorModel
             project={data}
@@ -377,7 +375,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
             onSubmit={handleFloorModelFormSubmit}
             clearTrigger={clearFormTrigger}
             onClearComplete={() => setClearFormTrigger(false)}
-          />
+          ></FloorModel>
         </div>
       )}
 
@@ -439,14 +437,15 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
                     Manage Building
                   </button>
                   <button
-  type="button"
-  className="link-button m-1"
-  onClick={() => openFloorModel()}
->
-  <i className="bx bx-plus-circle me-2"></i>
-  Manage Floors
-</button>
-
+                    type="button"
+                    data-bs-toggle="modal"
+                    className="link-button m-1"
+                    data-bs-target="#floor-model"
+                    onClick={() => openFloorModel()}
+                  >
+                    <i className="bx bx-plus-circle me-2"></i>
+                    Manage Floors
+                  </button>
 
                   <button
                     type="button"
@@ -471,7 +470,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
                 </div>
               </div>
               <div className="row ">
-                <InfraTable buildings={project.buildings} project={data}/>
+                <InfraTable buildings={project.buildings}/>
               </div>
             </div>
           </div>

src/components/Project/WorkPlan.jsx

@@ -1,25 +1,7 @@
 import React from "react";
 
 const WorkPlan = () => {
-  return (
-    <>
-        <div className="misc-wrapper">
-            <h2 className="mb-2 mx-2">Coming Soon!</h2>
-            <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-            Thank you for your patience!</p>
-            <div className="mt-4">
-                <img
-                    src="../assets/img/illustrations/girl-doing-yoga-light.png"
-                    alt="girl-doing-yoga-light"
-                    aria-label="Girl doing yoga light"
-                    width="500"
-                    className="img-fluid"
-                    data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-                    data-app-light-img="illustrations/girl-doing-yoga-light.png" />
-            </div>
-        </div>
-    </>
-)
+  return <div>Work plan calender will go here</div>;
 };
 
 export default WorkPlan;

src/data/menuData.json

@@ -70,7 +70,7 @@
                     {
                         "text": "Daily Expenses",
                         "available": true,
-                        "link": "/dashboard/"
+                        "link": "/dashboard"
                     }
                 ]
             },
@@ -83,12 +83,12 @@
                     {
                         "text": "Application Users",
                         "available": true,
-                        "link": "/employees/"
+                        "link": "/employees"
                     },
                     {
                         "text": "Employees",
                         "available": true,
-                        "link": "/employees/list"
+                        "link": "/employees"
                     },
                     {
                         "text": "Masters",

src/pages/Gallary/ImageGallary.jsx

@@ -1,21 +1,7 @@
 import React from "react";
 
 const ImageGallary = () => {
-  return  <div className="misc-wrapper">
-  <h2 className="mb-2 mx-2">Coming Soon!</h2>
-  <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-  Thank you for your patience!</p>
-  <div className="mt-4">
-      <img
-          src="../assets/img/illustrations/girl-doing-yoga-light.png"
-          alt="girl-doing-yoga-light"
-          aria-label="Girl doing yoga light"
-          width="500"
-          className="img-fluid"
-          data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-          data-app-light-img="illustrations/girl-doing-yoga-light.png" />
-  </div>
-</div>;
+  return <div>Image Gallery</div>;
 };
 
 export default ImageGallary;

src/pages/employee/EmployeeProfile.jsx

@@ -84,21 +84,7 @@ const EmployeeProfile = () => {
       }
 
       default:
-        return  <div className="misc-wrapper">
-        <h2 className="mb-2 mx-2">Coming Soon!</h2>
-        <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-        Thank you for your patience!</p>
-        <div className="mt-4">
-            <img
-                src="../assets/img/illustrations/girl-doing-yoga-light.png"
-                alt="girl-doing-yoga-light"
-                aria-label="Girl doing yoga light"
-                width="500"
-                className="img-fluid"
-                data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-                data-app-light-img="illustrations/girl-doing-yoga-light.png" />
-        </div>
-    </div>;
+        return <div>Select a pill to display content here.</div>;
     }
   };
 

src/pages/project/Inventory.jsx

@@ -1,21 +1,11 @@
 import React from "react";
 
 const Inventory = () => {
-  return  <div className="misc-wrapper">
-  <h2 className="mb-2 mx-2">Coming Soon!</h2>
-  <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-  Thank you for your patience!</p>
-  <div className="mt-4">
-      <img
-          src="../assets/img/illustrations/girl-doing-yoga-light.png"
-          alt="girl-doing-yoga-light"
-          aria-label="Girl doing yoga light"
-          width="500"
-          className="img-fluid"
-          data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-          data-app-light-img="illustrations/girl-doing-yoga-light.png" />
-  </div>
-</div>;
+  return <div>Inventory
+    <div>
+    <p>ddj</p>
+    </div>
+  </div>;
 };
 
 export default Inventory;

src/pages/project/ProjectDetails.jsx

@@ -149,21 +149,7 @@ const ProjectDetails = () => {
       }
     
       default:
-        return  <div className="misc-wrapper">
-        <h2 className="mb-2 mx-2">Coming Soon!</h2>
-        <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-        Thank you for your patience!</p>
-        <div className="mt-4">
-            <img
-                src="../assets/img/illustrations/girl-doing-yoga-light.png"
-                alt="girl-doing-yoga-light"
-                aria-label="Girl doing yoga light"
-                width="500"
-                className="img-fluid"
-                data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-                data-app-light-img="illustrations/girl-doing-yoga-light.png" />
-        </div>
-    </div>;
+        return <div>Select a pill to display content here.</div>;
     }
   };
 

src/pages/reports/Reports.jsx

@@ -1,21 +1,7 @@
 import React from "react";
 
 const Reports = () => {
-  return  <div className="misc-wrapper">
-  <h2 className="mb-2 mx-2">Coming Soon!</h2>
-  <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-  Thank you for your patience!</p>
-  <div className="mt-4">
-      <img
-          src="../assets/img/illustrations/girl-doing-yoga-light.png"
-          alt="girl-doing-yoga-light"
-          aria-label="Girl doing yoga light"
-          width="500"
-          className="img-fluid"
-          data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-          data-app-light-img="illustrations/girl-doing-yoga-light.png" />
-  </div>
-</div>;
+  return <div>Reports</div>;
 };
 
 export default Reports;

src/pages/support/Connect.jsx

@@ -1,21 +1,7 @@
 import React from "react";
 
 const Connect = () => {
-  return  <div className="misc-wrapper">
-  <h2 className="mb-2 mx-2">Coming Soon!</h2>
-  <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-  Thank you for your patience!</p>
-  <div className="mt-4">
-      <img
-          src="../assets/img/illustrations/girl-doing-yoga-light.png"
-          alt="girl-doing-yoga-light"
-          aria-label="Girl doing yoga light"
-          width="500"
-          className="img-fluid"
-          data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-          data-app-light-img="illustrations/girl-doing-yoga-light.png" />
-  </div>
-</div>;
+  return <div>Connect</div>;
 };
 
 export default Connect;

src/pages/support/Documentation.jsx

@@ -1,21 +1,7 @@
 import React from "react";
 
 const Documentation = () => {
-  return  <div className="misc-wrapper">
-  <h2 className="mb-2 mx-2">Coming Soon!</h2>
-  <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-  Thank you for your patience!</p>
-  <div className="mt-4">
-      <img
-          src="../assets/img/illustrations/girl-doing-yoga-light.png"
-          alt="girl-doing-yoga-light"
-          aria-label="Girl doing yoga light"
-          width="500"
-          className="img-fluid"
-          data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-          data-app-light-img="illustrations/girl-doing-yoga-light.png" />
-  </div>
-</div>;
+  return <div>Documentation</div>;
 };
 
 export default Documentation;

src/pages/support/Support.jsx

@@ -1,21 +1,7 @@
 import React from "react";
 
 const Support = () => {
-  return  <div className="misc-wrapper">
-  <h2 className="mb-2 mx-2">Coming Soon!</h2>
-  <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-  Thank you for your patience!</p>
-  <div className="mt-4">
-      <img
-          src="../assets/img/illustrations/girl-doing-yoga-light.png"
-          alt="girl-doing-yoga-light"
-          aria-label="Girl doing yoga light"
-          width="500"
-          className="img-fluid"
-          data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-          data-app-light-img="illustrations/girl-doing-yoga-light.png" />
-  </div>
-</div>;
+  return <div>Support</div>;
 };
 
 export default Support;