// 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>

        <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">
                  In Progress
                </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">
                  All
                </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;