admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: #1
This commit is contained in:
Vikas Nale 2025-04-07 16:25:50 +00:00
commit 8888f9d2d8
14 changed files with 458 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

273
src/components/Project/ActivityTimeline.jsx
View File

@ -2,136 +2,151 @@ 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 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>
</div>
);
};

14
src/components/Project/Infrastructure/FloorModel.jsx
View File

@ -106,12 +106,7 @@ const FloorModel = ({
<div className="modal-content">
<div className="modal-body">
<div className="row">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
<button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
<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"
aria-label="Close"
onClick={onClose}
>
Cancel
</button>

211
src/components/Project/Infrastructure/InfraTable.jsx
View File

@ -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 [projectBuiling,setProjectBuilding] = useState([])
const [expandedBuildings, setExpandedBuildings] = useState([]);
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 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 toggleBuilding = (buildingId) => {
setExpandedBuildings((prevExpanded) =>
prevExpanded.includes(buildingId)
? prevExpanded.filter((id) => id !== buildingId)
: [...prevExpanded, buildingId]
);
};
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;

39
src/components/Project/ProjectInfra.jsx
View File

@ -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,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"
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>
type="button"
className="link-button m-1"
onClick={() => openFloorModel()}
>
<i className="bx bx-plus-circle me-2"></i>
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>

20
src/components/Project/WorkPlan.jsx
View File

@ -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;

6
src/data/menuData.json
View File

@ -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",

16
src/pages/Gallary/ImageGallary.jsx
View File

@ -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;

16
src/pages/employee/EmployeeProfile.jsx
View File

@ -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>;
}
};

20
src/pages/project/Inventory.jsx
View File

@ -1,11 +1,21 @@
import React from "react";
const Inventory = () => {
return <div>Inventory
<div>
<p>ddj</p>
</div>
</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 Inventory;

16
src/pages/project/ProjectDetails.jsx
View File

@ -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>;
}
};

16
src/pages/reports/Reports.jsx
View File

@ -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;

16
src/pages/support/Connect.jsx
View File

@ -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;

16
src/pages/support/Documentation.jsx
View File

@ -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;

16
src/pages/support/Support.jsx
View File

@ -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;