238 lines
11 KiB
JavaScript
238 lines
11 KiB
JavaScript
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">All Projects</p>
|
|
</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">
|
|
My Jobs
|
|
</button>
|
|
</li>
|
|
<li className="nav-item">
|
|
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
|
|
Assigned
|
|
</button>
|
|
</li>
|
|
<li className="nav-item">
|
|
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
|
|
In Progress
|
|
</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;
|