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 = () => {
|
const ActivityTimeline = () => {
|
||||||
return (
|
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>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,25 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
const WorkPlan = () => {
|
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;
|
export default WorkPlan;
|
||||||
|
|||||||
@ -1,7 +1,21 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
const ImageGallary = () => {
|
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;
|
export default ImageGallary;
|
||||||
|
|||||||
@ -84,7 +84,21 @@ const EmployeeProfile = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
default:
|
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";
|
import React from "react";
|
||||||
|
|
||||||
const Inventory = () => {
|
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;
|
export default Inventory;
|
||||||
|
|||||||
@ -149,7 +149,21 @@ const ProjectDetails = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
default:
|
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";
|
import React from "react";
|
||||||
|
|
||||||
const Reports = () => {
|
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;
|
export default Reports;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user