added "Coming Soon!" message and illustration to multiple components
This commit is contained in:
parent
c595930640
commit
f2a77b0685
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user