Creating new weidget for dashboard for Service jobs.
This commit is contained in:
parent
d4582c101a
commit
cf430881dc
@ -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>
|
||||
);
|
||||
|
||||
399
src/components/Dashboard/ServiceJobs.jsx
Normal file
399
src/components/Dashboard/ServiceJobs.jsx
Normal file
@ -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;
|
||||
Loading…
x
Reference in New Issue
Block a user