Merge pull request 'Vaibhav_Resolved_Issues' (#1) from Vaibhav_Resolved_Issues into Feature_Task_Management

Reviewed-on: #1

src/components/Project/ActivityTimeline.jsx

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

src/components/Project/Infrastructure/FloorModel.jsx

@@ -106,12 +106,7 @@ const FloorModel = ({
       <div className="modal-content">
         <div className="modal-body">
           <div className="row">
-            <button
+            <button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
-              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>
@@ -155,7 +150,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>
@@ -192,10 +187,9 @@ const FloorModel = ({
                     : "Add Floor"}
                 </button>
                 <button
-                  type="reset"
+                  type="button"
                   className="btn btn-label-secondary"
-                  data-bs-dismiss="modal"
+                  onClick={onClose}
-                  aria-label="Close"
                 >
                   Cancel
                 </button>

src/components/Project/Infrastructure/InfraTable.jsx

@@ -1,69 +1,154 @@
-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,assign} ) =>
+const InfraTable = ({ buildings }) => {
-{
+  const [projectBuilding, setProjectBuilding] = useState([]);
-  const [projectBuiling,setProjectBuilding] = useState([])
+  const [expandedBuildings, setExpandedBuildings] = useState([]);
-    const [expandedBuildings, setExpandedBuildings] = useState([]);
+  const [showFloorModal, setShowFloorModal] = useState(false);
-  
+  const [selectedBuilding, setSelectedBuilding] = useState(null);
-    const toggleBuilding = (buildingId) => {
+  const [clearTrigger, setClearTrigger] = useState(false);
-      setExpandedBuildings((prevExpanded) =>
-        prevExpanded.includes(buildingId)
-          ? prevExpanded.filter((id) => id !== buildingId)
-          : [...prevExpanded, buildingId]
-      );
-    };
-  
 
-    const getContent = (building) => {
+  const toggleBuilding = (buildingId) => {
-      return building.floors.length > 0 ? (
+    setExpandedBuildings((prevExpanded) =>
-        building.floors.map((floor) => <Floor  forBuilding={building}   key={floor.id} floor={floor} workAreas={floor.workAreas} />)
+      prevExpanded.includes(buildingId)
-      ) : (
+        ? prevExpanded.filter((id) => id !== buildingId)
-        <tr>
+        : [...prevExpanded, buildingId]
-          <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>
     );
   };
-  export default InfraTable
+
+  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;

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

src/components/Project/WorkPlan.jsx

@@ -1,7 +1,25 @@
 import React from "react";
 
 const WorkPlan = () => {
-  return <div>Work plan calender will go here</div>;
+  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>
+    </>
+)
 };
 
 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"
+                        "link": "/employees/list"
                     },
                     {
                         "text": "Masters",

src/pages/Gallary/ImageGallary.jsx

@@ -1,7 +1,21 @@
 import React from "react";
 
 const ImageGallary = () => {
-  return <div>Image Gallery</div>;
+  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>;
 };
 
 export default ImageGallary;

src/pages/employee/EmployeeProfile.jsx

@@ -84,7 +84,21 @@ const EmployeeProfile = () => {
       }
 
       default:
-        return <div>Select a pill to display content here.</div>;
+        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>;
     }
   };
 

src/pages/project/Inventory.jsx

@@ -1,11 +1,21 @@
 import React from "react";
 
 const Inventory = () => {
-  return <div>Inventory
+  return  <div className="misc-wrapper">
-    <div>
+  <h2 className="mb-2 mx-2">Coming Soon!</h2>
-    <p>ddj</p>
+  <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-    </div>
+  Thank you for your patience!</p>
-  </div>;
+  <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>;
 };
 
 export default Inventory;

src/pages/project/ProjectDetails.jsx

@@ -149,7 +149,21 @@ const ProjectDetails = () => {
       }
     
       default:
-        return <div>Select a pill to display content here.</div>;
+        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>;
     }
   };
 

src/pages/reports/Reports.jsx

@@ -1,7 +1,21 @@
 import React from "react";
 
 const Reports = () => {
-  return <div>Reports</div>;
+  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>;
 };
 
 export default Reports;

src/pages/support/Connect.jsx

@@ -1,7 +1,21 @@
 import React from "react";
 
 const Connect = () => {
-  return <div>Connect</div>;
+  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>;
 };
 
 export default Connect;

src/pages/support/Documentation.jsx

@@ -1,7 +1,21 @@
 import React from "react";
 
 const Documentation = () => {
-  return <div>Documentation</div>;
+  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>;
 };
 
 export default Documentation;

src/pages/support/Support.jsx

@@ -1,7 +1,21 @@
 import React from "react";
 
 const Support = () => {
-  return <div>Support</div>;
+  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>;
 };
 
 export default Support;