From f2a77b0685dde9494bc3edc8ba258105ba078358 Mon Sep 17 00:00:00 2001
From: Vaibhav Surve <vaibhav.surve@marcoaiot.com>
Date: Mon, 7 Apr 2025 18:29:22 +0530
Subject: [PATCH]  added "Coming Soon!" message and illustration to multiple
 components

---
 src/components/Project/ActivityTimeline.jsx | 273 +++++++++++---------
 src/components/Project/WorkPlan.jsx         |  20 +-
 src/pages/Gallary/ImageGallary.jsx          |  16 +-
 src/pages/employee/EmployeeProfile.jsx      |  16 +-
 src/pages/project/Inventory.jsx             |  20 +-
 src/pages/project/ProjectDetails.jsx        |  16 +-
 src/pages/reports/Reports.jsx               |  16 +-
 7 files changed, 238 insertions(+), 139 deletions(-)

diff --git a/src/components/Project/ActivityTimeline.jsx b/src/components/Project/ActivityTimeline.jsx
index 90e09f8d..159b182c 100644
--- a/src/components/Project/ActivityTimeline.jsx
+++ b/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-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>
   );
 };
 
diff --git a/src/components/Project/WorkPlan.jsx b/src/components/Project/WorkPlan.jsx
index 076d8f07..ebaa8a8b 100644
--- a/src/components/Project/WorkPlan.jsx
+++ b/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;
diff --git a/src/pages/Gallary/ImageGallary.jsx b/src/pages/Gallary/ImageGallary.jsx
index 47ab1b19..de5c2bcc 100644
--- a/src/pages/Gallary/ImageGallary.jsx
+++ b/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;
diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index 297de953..6987c322 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/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>;
     }
   };
 
diff --git a/src/pages/project/Inventory.jsx b/src/pages/project/Inventory.jsx
index de705df8..74ca9e5e 100644
--- a/src/pages/project/Inventory.jsx
+++ b/src/pages/project/Inventory.jsx
@@ -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;
diff --git a/src/pages/project/ProjectDetails.jsx b/src/pages/project/ProjectDetails.jsx
index 7c0fb529..937c6de7 100644
--- a/src/pages/project/ProjectDetails.jsx
+++ b/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>;
     }
   };
 
diff --git a/src/pages/reports/Reports.jsx b/src/pages/reports/Reports.jsx
index 79aa9c0a..b14cce50 100644
--- a/src/pages/reports/Reports.jsx
+++ b/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;