From cf430881dcbac508fce80819d346450603e726e7 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 19 Nov 2025 10:24:24 +0530
Subject: [PATCH] Creating new weidget for dashboard for Service jobs.

---
 src/components/Dashboard/Dashboard.jsx   |   4 +
 src/components/Dashboard/ServiceJobs.jsx | 399 +++++++++++++++++++++++
 2 files changed, 403 insertions(+)
 create mode 100644 src/components/Dashboard/ServiceJobs.jsx

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index ad5ead8c..ea4d279c 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -17,6 +17,7 @@ import ExpenseAnalysis from "./ExpenseAnalysis";
 import ExpenseStatus from "./ExpenseStatus";
 import ExpenseByProject from "./ExpenseByProject";
 import ProjectStatistics from "../Project/ProjectStatistics";
+import ServiceJobs from "./ServiceJobs";
 
 const Dashboard = () => {
 
@@ -74,6 +75,9 @@ const Dashboard = () => {
                 <div className="col-12 col-md-6">
                     <ExpenseByProject />
                 </div>
+                <div className="col-12 col-md-12">
+                    <ServiceJobs />
+                </div>
             </div>
         </div>
     );
diff --git a/src/components/Dashboard/ServiceJobs.jsx b/src/components/Dashboard/ServiceJobs.jsx
new file mode 100644
index 00000000..3f0e12ea
--- /dev/null
+++ b/src/components/Dashboard/ServiceJobs.jsx
@@ -0,0 +1,399 @@
+// import React from "react";
+
+// const ServiceJobs = () => {
+//   return (
+//     <div className="col-xxl-4 col-lg-6">
+//       <div className="card h-100">
+//         <div className="card-header d-flex justify-content-between">
+//           <div className="card-title mb-0">
+//             <h5 className="mb-1">Orders by Countries</h5>
+//             <p className="card-subtitle">62 deliveries in progress</p>
+//           </div>
+
+//           <div className="dropdown">
+//             <button
+//               className="btn text-muted p-0"
+//               type="button"
+//               data-bs-toggle="dropdown"
+//             >
+//               <i className="bx bx-dots-vertical-rounded bx-lg"></i>
+//             </button>
+//             <div className="dropdown-menu dropdown-menu-end">
+//               <button className="dropdown-item">Select All</button>
+//               <button className="dropdown-item">Refresh</button>
+//               <button className="dropdown-item">Share</button>
+//             </div>
+//           </div>
+//         </div>
+
+//         <div className="card-body p-0">
+//           <div className="nav-align-top">
+//             {/* Tabs */}
+//             <ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
+//               <li className="nav-item">
+//                 <button
+//                   className="nav-link active"
+//                   data-bs-toggle="tab"
+//                   data-bs-target="#tab-new"
+//                 >
+//                   New
+//                 </button>
+//               </li>
+//               <li className="nav-item">
+//                 <button
+//                   className="nav-link"
+//                   data-bs-toggle="tab"
+//                   data-bs-target="#tab-preparing"
+//                 >
+//                   Preparing
+//                 </button>
+//               </li>
+//               <li className="nav-item">
+//                 <button
+//                   className="nav-link"
+//                   data-bs-toggle="tab"
+//                   data-bs-target="#tab-shipping"
+//                 >
+//                   Shipping
+//                 </button>
+//               </li>
+//             </ul>
+
+//             {/* Tab Content */}
+//             <div className="tab-content border-0 mx-1 text-start">
+
+//               {/* New Tab */}
+//               <div className="tab-pane fade show active" id="tab-new">
+//                 <ul className="timeline mb-0">
+//                   <li className="timeline-item ps-6 border-left-dashed">
+//                     <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+//                       <i className="bx bx-check-circle"></i>
+//                     </span>
+//                     <div className="timeline-event ps-1">
+//                       <div className="timeline-header">
+//                         <small className="text-success text-uppercase">sender</small>
+//                       </div>
+//                       <h6 className="my-50">Myrtle Ullrich</h6>
+//                       <p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
+//                     </div>
+//                   </li>
+
+//                   <li className="timeline-item ps-6 border-transparent">
+//                     <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+//                       <i className="bx bx-map"></i>
+//                     </span>
+//                     <div className="timeline-event ps-1">
+//                       <div className="timeline-header">
+//                         <small className="text-primary text-uppercase">Receiver</small>
+//                       </div>
+//                       <h6 className="my-50">Barry Schowalter</h6>
+//                       <p className="text-body mb-0">939 Orange, California(CA), 92118</p>
+//                     </div>
+//                   </li>
+//                 </ul>
+
+//                 <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+//                 <ul className="timeline mb-0">
+//                   <li className="timeline-item ps-6 border-left-dashed">
+//                     <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+//                       <i className="bx bx-check-circle"></i>
+//                     </span>
+//                     <div className="timeline-event ps-1">
+//                       <div className="timeline-header">
+//                         <small className="text-success text-uppercase">sender</small>
+//                       </div>
+//                       <h6 className="my-50">Veronica Herman</h6>
+//                       <p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
+//                     </div>
+//                   </li>
+
+//                   <li className="timeline-item ps-6 border-transparent">
+//                     <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+//                       <i className="bx bx-map"></i>
+//                     </span>
+//                     <div className="timeline-event ps-1">
+//                       <div className="timeline-header">
+//                         <small className="text-primary text-uppercase">Receiver</small>
+//                       </div>
+//                       <h6 className="my-50">Helen Jacobs</h6>
+//                       <p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
+//                     </div>
+//                   </li>
+//                 </ul>
+//               </div>
+
+//               {/* Preparing Tab */}
+//               <div className="tab-pane fade" id="tab-preparing">
+//                 {/* Keep your original content */}
+//                 {/* You can copy the same list structure here */}
+//               </div>
+
+//               {/* Shipping Tab */}
+//               <div className="tab-pane fade" id="tab-shipping">
+//                 {/* Keep your original content */}
+//               </div>
+
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default ServiceJobs;
+
+
+import React from "react";
+
+const ServiceJobs = () => {
+  return (
+    <div className="col-xxl-4 col-lg-6">
+      <div className="card h-100">
+        <div className="card-header d-flex justify-content-between">
+          <div className="card-title mb-0 text-start">
+            <h5 className="mb-1">Service Jobs</h5>
+            <p className="card-subtitle">62 deliveries in progress</p>
+          </div>
+
+          <div className="dropdown">
+            <button
+              className="btn text-muted p-0"
+              type="button"
+              data-bs-toggle="dropdown"
+            >
+              <i className="bx bx-dots-vertical-rounded bx-lg"></i>
+            </button>
+            <div className="dropdown-menu dropdown-menu-end">
+              <button className="dropdown-item">Select All</button>
+              <button className="dropdown-item">Refresh</button>
+              <button className="dropdown-item">Share</button>
+            </div>
+          </div>
+        </div>
+
+        <div className="card-body p-0">
+          <div className="nav-align-top">
+
+            {/* Tabs */}
+            <ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
+              <li className="nav-item">
+                <button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
+                  New
+                </button>
+              </li>
+              <li className="nav-item">
+                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
+                  Preparing
+                </button>
+              </li>
+              <li className="nav-item">
+                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
+                  Shipping
+                </button>
+              </li>
+            </ul>
+
+            {/* Tab Content */}
+            <div className="tab-content border-0 mx-1 text-start">
+
+              {/* ---------------------- NEW TAB ---------------------- */}
+              <div className="tab-pane fade show active" id="tab-new">
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                      <i className="bx bx-check-circle"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-success text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Myrtle Ullrich</h6>
+                      <p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
+                    </div>
+                  </li>
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Barry Schowalter</h6>
+                      <p className="text-body mb-0">939 Orange, California(CA), 92118</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                      <i className="bx bx-check-circle"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-success text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Veronica Herman</h6>
+                      <p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
+                    </div>
+                  </li>
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Helen Jacobs</h6>
+                      <p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+              {/* ---------------------- PREPARING TAB ---------------------- */}
+              <div className="tab-pane fade" id="tab-preparing">
+
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
+                      <i className="bx bx-time-five"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-warning text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Oliver Grant</h6>
+                      <p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Samantha Lee</h6>
+                      <p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
+                      <i className="bx bx-time-five"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-warning text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Marcus Howard</h6>
+                      <p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Daniel Foster</h6>
+                      <p className="text-body mb-0">312 Marina, California(CA), 94109</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+              {/* ---------------------- SHIPPING TAB ---------------------- */}
+              <div className="tab-pane fade" id="tab-shipping">
+
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
+                      <i className="bx bx-package"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-info text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">James Carter</h6>
+                      <p className="text-body mb-0">441 Market St, California(CA), 94111</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Linda Moore</h6>
+                      <p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
+                      <i className="bx bx-package"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-info text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Sarah Bennett</h6>
+                      <p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">George Simmons</h6>
+                      <p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default ServiceJobs;