add ComingSoonPage component and integrate it into EmployeeProfile for placeholder content

This commit is contained in:
Vaibhav Surve 2025-04-09 12:03:16 +05:30
parent 0e7088b4d4
commit 1019e9a32f
2 changed files with 37 additions and 30 deletions

View File

@ -0,0 +1,24 @@
import React from 'react'
import { Link } from 'react-router-dom'
export const ComingSoonPage = () => {
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>
</>
)
}

View File

@ -8,7 +8,7 @@ import { getCachedData } from "../../slices/apiDataManager";
import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../hooks/useEmployees"; import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../hooks/useEmployees";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import EmployeeRepository from "../../repositories/EmployeeRepository"; import EmployeeRepository from "../../repositories/EmployeeRepository";
import { ComingSoonPage } from "../Misc/ComingSoonPage";
const EmployeeProfile = () => { const EmployeeProfile = () => {
@ -56,49 +56,32 @@ const EmployeeProfile = () => {
switch (activePill) { switch (activePill) {
case "account": { case "account": {
return ( return (
<div className="row"> <>
{/* <div className="col-xl-4 col-lg-5 col-md-5"> */} <ComingSoonPage/>
<p>Account</p> </>
{/* </div> */}
</div>
); );
} }
case "attendance": { case "attendance": {
return ( return (
<div className="row"> <>
<div className="col-lg-12 col-xl-12"> <ComingSoonPage/>
{/* Teams */} </>
<p>attendance component</p>
{/* Teams */}
</div>
</div>
); );
break; break;
} }
case "activities": { case "activities": {
return ( return (
<p>activites components</p> <>
<ComingSoonPage/>
</>
); );
break; break;
} }
default: default:
return <div className="misc-wrapper"> return <>
<h2 className="mb-2 mx-2">Coming Soon!</h2> <ComingSoonPage/>
<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>;
} }
}; };