From d13c48dd393153e28ece6cabb899d755a02c73ca Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 21 Nov 2025 11:47:55 +0530
Subject: [PATCH] Change the Ui for Archieve jobs.

---
 src/components/ServiceProject/Jobs.jsx | 46 ++++++++++----------------
 1 file changed, 17 insertions(+), 29 deletions(-)

diff --git a/src/components/ServiceProject/Jobs.jsx b/src/components/ServiceProject/Jobs.jsx
index f0c4fb7a..832e90e6 100644
--- a/src/components/ServiceProject/Jobs.jsx
+++ b/src/components/ServiceProject/Jobs.jsx
@@ -63,37 +63,25 @@ const Jobs = () => {
           <div className="row align-items-center py-4">
 
             {/* LEFT — Tabs */}
-            <div className="col-12 col-md-6">
-              <ul className="nav nav-pills" role="tablist">
-
-                <li className="nav-item">
-                  <button
-                    type="button"
-                    className={`nav-link px-2 py-2 ${!showArchive ? "active" : ""}`}
-                    role="tab"
-                    onClick={() => setShowArchive(false)}
-                    style={{ fontSize: "13px" }}
-                  >
-                    Active Jobs
-                  </button>
-                </li>
-
-                <li className="nav-item">
-                  <button
-                    type="button"
-                    className={`nav-link px-2 py-2 ${showArchive ? "active" : ""}`}
-                    role="tab"
-                    onClick={() => setShowArchive(true)}
-                    style={{ fontSize: "13px" }}
-                  >
-                    Archived Jobs
-                  </button>
-                </li>
-
-              </ul>
+            <div className="col-12 col-md-6 text-start">
+              <button
+                type="button"
+                className={`btn btn-sm ${showArchive ? "btn-primary" : "btn-outline-secondary"}`}
+                onClick={() => setShowArchive(!showArchive)}
+                style={{ fontSize: "13px" }}
+              >
+                {showArchive ? (
+                  <>
+                    <i className="bx bx-list-ul me-1 mt-1"></i> Show Active Jobs
+                  </>
+                ) : (
+                  <>
+                    <i className="bx bx-archive me-1 mt-1"></i> Show Archived Jobs
+                  </>
+                )}
+              </button>
             </div>
 
-
             {/* RIGHT — New Job button */}
             <div className="col-12 col-md-6 d-flex justify-content-md-end mt-2 mt-md-0">
               <button