diff --git a/client/src/components/NavBar/NavBar.tsx b/client/src/components/NavBar/NavBar.tsx
index b140fd3..bae89a4 100644
--- a/client/src/components/NavBar/NavBar.tsx
+++ b/client/src/components/NavBar/NavBar.tsx
@@ -1,167 +1,3 @@
-// import React, { useState } from "react";
-// import { Link, NavLink } from "react-router-dom";
-// import "./NavBar.css";
-
-// const NavBar: React.FC = () => {
-//   const [isCollapsed, setIsCollapsed] = useState(true);
-
-//   const toggleNavbar = () => setIsCollapsed(!isCollapsed);
-
-//   return (
-//     <nav className="navbar-container">
-//       <div className="navbar-inner">
-//         <Link to="/" className="navbar-logo">
-//           <img src="./favicon-32x32.png" alt="GADZ Up" className="logo-img" />
-//           <span>GADZConnect</span>
-//         </Link>
-
-//         {/* Hamburger Button */}
-//         <button className="navbar-toggler" onClick={toggleNavbar}>
-//           <span className="hamburger-icon"></span>
-//         </button>
-
-//         {/* Collapsible Links */}
-//         <div className={`navbar-links-container ${isCollapsed ? "collapsed" : ""}`}>
-//           <ul className="navbar-links">
-//             <li>
-//               <NavLink to="/AboutUs" className="nav-link">
-//                 About Us
-//               </NavLink>
-//             </li>
-//             <li>
-//               <NavLink to="/Services" className="nav-link">
-//                 Services
-//               </NavLink>
-//             </li>
-//             <li>
-//               <NavLink to="/ContactUs" className="nav-link">
-//                 Contact Us
-//               </NavLink>
-//             </li>
-//             <li>
-//               <NavLink to="/Login" className="nav-link">
-//                 Login
-//               </NavLink>
-//             </li>
-//           </ul>
-
-//           <div className="navbar-social">
-//             <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
-//               <i className="fab fa-twitter"></i>
-//             </a>
-//             <a href="https://facebook.com/global.asset.dispatching.service" target="_blank" rel="noopener noreferrer">
-//               <i className="fab fa-facebook-f"></i>
-//             </a>
-//             <a href="https://youtube.com" target="_blank" rel="noopener noreferrer">
-//               <i className="fab fa-youtube"></i>
-//             </a>
-//             <a href="https://instagram.com/Global_assetleader/" target="_blank" rel="noopener noreferrer">
-//               <i className="fab fa-instagram"></i>
-//             </a>
-//           </div>
-//         </div>
-//       </div>
-//     </nav>
-//   );
-// };
-
-// export default NavBar;
-
-// import React, { useState, useEffect } from "react";
-// import { Link, NavLink, useNavigate } from "react-router-dom";
-// import "./NavBar.css";
-
-// const NavBar: React.FC = () => {
-//   const [isCollapsed, setIsCollapsed] = useState(true);
-//   const [isLoggedIn, setIsLoggedIn] = useState(false);
-//   const navigate = useNavigate();
-
-//   const toggleNavbar = () => setIsCollapsed(!isCollapsed);
-
-//   // Check login status on mount
-//   useEffect(() => {
-//     const token = localStorage.getItem("token");
-//     setIsLoggedIn(!!token);
-//   }, []);
-
-//   // Logout handler
-//   const handleLogout = () => {
-//     localStorage.removeItem("token");
-//     localStorage.removeItem("userId");
-//     setIsLoggedIn(false);
-//     navigate("/Login");
-//   };
-
-//   return (
-//     <nav className="navbar-container">
-//       <div className="navbar-inner">
-//         <Link to="/" className="navbar-logo">
-//           <img src="./favicon-32x32.png" alt="GADZ Up" className="logo-img" />
-//           <span>GADZConnect</span>
-//         </Link>
-
-//         {/* Hamburger */}
-//         <button className="navbar-toggler" onClick={toggleNavbar}>
-//           <span className="hamburger-icon"></span>
-//         </button>
-
-//         <div className={`navbar-links-container ${isCollapsed ? "collapsed" : ""}`}>
-//           <ul className="navbar-links">
-//             <li>
-//               <NavLink to="/AboutUs" className="nav-link">
-//                 About Us
-//               </NavLink>
-//             </li>
-//             <li>
-//               <NavLink to="/Services" className="nav-link">
-//                 Services
-//               </NavLink>
-//             </li>
-//             <li>
-//               <NavLink to="/ContactUs" className="nav-link">
-//                 Contact Us
-//               </NavLink>
-//             </li>
-
-//             {/* LOGIN OR LOGOUT BUTTON */}
-//             {!isLoggedIn ? (
-//               <li>
-//                 <NavLink to="/Login" className="nav-link login-link">
-//                   Login
-//                 </NavLink>
-//               </li>
-//             ) : (
-//               <li>
-//                 <button onClick={handleLogout} className="nav-link login-link" style={{ border: "none", background: "transparent", cursor: "pointer" }}>
-//                   Logout
-//                 </button>
-//               </li>
-//             )}
-//           </ul>
-
-//           <div className="navbar-social">
-//             <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
-//               <i className="fab fa-twitter"></i>
-//             </a>
-//             <a href="https://facebook.com/global.asset.dispatching.service" target="_blank" rel="noopener noreferrer">
-//               <i className="fab fa-facebook-f"></i>
-//             </a>
-//             <a href="https://youtube.com" target="_blank" rel="noopener noreferrer">
-//               <i className="fab fa-youtube"></i>
-//             </a>
-//             <a href="https://instagram.com/Global_assetleader/" target="_blank" rel="noopener noreferrer">
-//               <i className="fab fa-instagram"></i>
-//             </a>
-//           </div>
-//         </div>
-//       </div>
-//     </nav>
-//   );
-// };
-
-// export default NavBar;
-
-// NavBar.tsx
 import React, { useState, useEffect } from "react";
 import { Link, NavLink, useNavigate, useLocation } from "react-router-dom";
 import "./NavBar.css";
diff --git a/client/src/containers/AboutUs/globalassetdispatching/DispatchAgreement/Agreement/PostForm.jsx b/client/src/containers/AboutUs/globalassetdispatching/DispatchAgreement/Agreement/PostForm.jsx
index 4c7dca3..e91a896 100644
--- a/client/src/containers/AboutUs/globalassetdispatching/DispatchAgreement/Agreement/PostForm.jsx
+++ b/client/src/containers/AboutUs/globalassetdispatching/DispatchAgreement/Agreement/PostForm.jsx
@@ -1,306 +1,3 @@
-// import React, { useState, useRef } from "react";
-// // import PropTypes from 'prop-types'
-// import SignatureCanvas from "react-signature-canvas";
-// import Axios from "axios";
-
-// const PostForm = () => {
-//   let sigPad = useRef({});
-//   const url = "/api/agreement/need2work";
-//   const [signature, setSign] = useState();
-//   const [data, setData] = useState({
-//     email: "",
-//     description: "",
-//     date: "",
-//     numberMC: 0,
-//     invoiceRate: 0,
-//     company: "",
-//     signature: "",
-//   });
-//   const [showResults, setShowResults] = React.useState(false);
-//   const onClick = () => setShowResults(true);
-
-//   const clear = (e) => {
-//     sigPad.current.clear();
-//   };
-//   const save = (e) => {
-//     setSign(sigPad.current.getTrimmedCanvas().toDataURL("image/png"));
-//     // data["numberMC"]=Number
-//     // console.log("signature", signature);
-//   };
-
-//   // Test
-//   // const obj = [data, sigPad, { signature }];
-//   // const obj = [{data}, {signature}]
-//   // console.log(obj);
-
-//   function submit(e) {
-//     e.preventDefault(e);
-//     const body = { data, signature };
-//     // console.log("data", data.email);
-//     // console.log("My e.target", e.target.email.value);
-//     // console.log(sigPad);
-//     // console.log(signature);
-//     Axios.post(url, body)
-//       .then((res) => {
-//         setData({ ...data, [e.target.name]: e.target.value });
-//         // console.log("My Data from Res: ", res);
-//         window.location.replace("/AboutUs");
-//       })
-//       .catch((err) => console.log(err));
-//   }
-
-//   function handle(e) {
-//     const newData = { ...data };
-//     newData[e.target.id] = e.target.value;
-//     setData(newData);
-//     // console.log(`data from handle: ${JSON.stringify(data)}`);
-//     // console.log(newData);
-//   }
-
-//   return (
-//     <>
-//       {/* FIXME */}
-//       {/* redirect to home page or the next agreement */}
-//       <form
-//         method="POST"
-//         action="/api/agreement/need2work"
-//         encType="multipart/form-data"
-//         onSubmit={(e) => submit(e)}
-//       >
-//         {/* Create a PDF to send to the admin email after customer fills it out */}
-//         <div>Agreement</div>
-//         <br />
-//         Email Address:
-//         <br />
-//         <input
-//           onChange={(e) => handle(e)}
-//           id="email"
-//           value={data.email}
-//           placeholder="email"
-//           type="email"
-//         ></input>{" "}
-//         <br />
-//         <br />
-//         This Dispatcher-Carrier Agreement hereinafter "Agreement' is made and
-//         entered on{" "}
-//         <input
-//           onChange={(e) => handle(e)}
-//           id="date"
-//           value={data.date}
-//           placeholder="date"
-//           type="date"
-//         ></input>
-//         (the "effective date") by and between Berhenny Dean Co, a New Jersey
-//         limited liability Company, and, a Registered Motor Carrier with its
-//         principal office at
-//         <input
-//           onChange={(e) => handle(e)}
-//           id="description"
-//           value={data.description}
-//           placeholder="description"
-//           type="text"
-//         ></input>{" "}
-//         ("Carrier"): collectively referred to as the "Parties". <br />
-//         <br />
-//         WHEREAS, DISPATCHER is an Independent Contractor conducting Load
-//         Tendering Transitions between Freight Shippers or Freight Holders, and
-//         Carriers authorized by the Federal Motor Carrier Safety Administration
-//         ("FMCS") to operate as a Registered Property Carriers Pursuant to
-//         Licenses issued. DISPATCHER is not a broker nor acting as a broker to
-//         the CARRIER. <br />
-//         <br />
-//         WHEREAS, CARRIER, an independent contractor, is licensed by the FMCS to
-//         operate as a for-hire motor carrier pursuant authority issued in Number
-//         MC-
-//         <input
-//           onChange={(e) => handle(e)}
-//           id="numberMC"
-//           value={data.numberMC}
-//           placeholder="numberMC"
-//           type="number"
-//         ></input>{" "}
-//         <br />
-//         <br />
-//         WHEREAS, the transportation service provided by CARRIER for Freight
-//         Shippers, whether on regulated, unregulated, or intrastate traffic, is
-//         intended by the Parties to be contract carriage between the CARRIER and
-//         Freight Shippers/Holders as defined in 49 U.S.C. $13102 (4) and §14101
-//         (b) and not between DISPATCHER, and the Parties hereto intend that the
-//         contractual arrangement be continuous in nature until this agreement is,
-//         by its terms, terminated; and <br />
-//         <br />
-//         WHEREAS, both DISPATCHER and CARRIER enter into this Agreement for the
-//         purpose of providing and receiving specified services under specified
-//         rates and conditions, DISPATCHER and CARRIER deem it essential to their
-//         respective interest to establish and maintain an Independent Contractor
-//         relationship in the execution and performance of this agreement; and{" "}
-//         <br />
-//         <br />
-//         DISPATCHER is NOT responsible for the following: billing issues, load
-//         problems, advances (all advances will have to be handled directly
-//         between CARRIER and shipper/broker), handling and storage of paperwork
-//         all documents will be sent to CARRIER, (at Carrier's expense), and DOT
-//         compliance issues; <br />
-//         <br />
-//         NOW, THEREFORE, for and in consideration of the mutual covenants and
-//         undertakings herein, and subject to the terms and conditions hereinafter
-//         set forth, the Parties hereto warrant, covenant, and agree as follows:{" "}
-//         <br />
-//         <br />
-//         CARRIER desires to retain DISPATCHER by executing a Limited, Power of
-//         Attorney to find, negotiate, and procure freight for and dispatch
-//         CARRIER's equipment at a flat rate of{" "}
-//         <input
-//           onChange={(e) => handle(e)}
-//           id="freightRate"
-//           value={data.freightRate}
-//           placeholder="freightRate"
-//           type="number"
-//         ></input>{" "}
-//         the gross of each load. Additional billing services may be procured at a
-//         rate of $
-//         <input
-//           onChange={(e) => handle(e)}
-//           id="invoiceRate"
-//           value={data.invoiceRate}
-//           placeholder="invoiceRate"
-//           type="number"
-//         ></input>{" "}
-//         invoice. All DISPATCHER fees must be paid after each load has been
-//         booked and accepted by the CARRIER. CARRIER must, prior to the
-//         implementation, of this agreement furnish to DISPATCHER the following:{" "}
-//         <br />
-//         <br />
-//         <ol>
-//           <li>A signed Limited Power of Attorney form (optional)</li>
-//           <li>Copy of CARRIER's Motor Carrier Authority</li>
-//           <li>This AGREEMENT form is completed dated and signed</li>
-//           <li>
-//             Copy of Insurance Certificates, listing DISPATCHER as a certificate
-//             holder. **DISPATCHER requires at least $1,000,000 liability
-//             insurance and at least $100;000 cargo coverage. **Power-only
-//             carriers must also have $40,000 non-owned trailer or interchange
-//             insurance.
-//           </li>
-//           <li>A signed W-9 </li>
-//           <li>
-//             Company Profile Sheet (including a list if three established
-//             references)
-//           </li>
-//           <li>
-//             Cell phone or contact phone number and name of main company contact
-//           </li>
-//         </ol>
-//         <br />
-//         <br />
-//         <br />
-//         <label htmlFor="agree">Company (DISPATCH)</label>
-//         <br />
-//         {/* The API methods are mostly just wrappers around signature_pad's API. on() and off() will, in addition, bind/unbind the window resize event handler. 
-//         getCanvas(), getTrimmedCanvas(), and getSignaturePad() are new. */}
-//         {/* getTrimmedCanvas(): canvas, creates a copy of the canvas and returns a trimmed version of it, with all whitespace removed.
-//         getSignaturePad(): SignaturePad, returns the underlying SignaturePad reference. */}
-//         <br />
-//         <h1>GADZConnect LLC.</h1>
-//         <br />
-//         <label htmlFor="agree">Authorized Signature</label>
-//         <br />
-//         ___________________________
-//         <br />
-//         <br />
-//         <label htmlFor="agree">Printed Name/Title</label>
-//         <br />
-//         ___________________________
-//         <br />
-//         <br />
-//         <label htmlFor="agree">Date</label>
-//         <br />
-//         <input type="date" name="dob" /> <br />
-//         <br />
-//         <br /> <br />
-//         <label htmlFor="agree">Company (CARRIER)</label>
-//         <br />
-//         <input
-//           onChange={(e) => handle(e)}
-//           id="company"
-//           value={data.company}
-//           placeholder="company"
-//           type="text"
-//         ></input>{" "}
-//         <br />
-//         <br />
-//         <label htmlFor="agree">Authorized Signature</label>
-//         <br />
-//         <SignatureCanvas
-//           // style={{border:"black solid", backgroundColor:"white"}}
-//           ref={sigPad}
-//           name="signature"
-//           type="file"
-//           backgroundColor="gray"
-//           penColor="black"
-//           value={signature}
-//           id="signature"
-//           canvasProps={{
-//             width: 500,
-//             height: 200,
-//             className: "signature",
-//           }}
-//         />{" "}
-//         <br />
-//         <label htmlFor="agree">Printed Name/Title</label>
-//         <br />
-//         <input
-//           onChange={(e) => handle(e)}
-//           id="print"
-//           value={data.print}
-//           placeholder="print"
-//           type="text"
-//         ></input>{" "}
-//         <br />
-//         <label htmlFor="agree">Date</label>
-//         <br />
-//         <input
-//           onChange={(e) => handle(e)}
-//           id="date"
-//           value={data.date}
-//           placeholder="date"
-//           type="date"
-//         ></input>{" "}
-//         <br />
-//         <br />
-//         {/* https://github.com/agilgur5/react-signature-canvas/blob/gh-pages/example/app.js */}
-//         <br />
-//         {/* Please Hide this until the customer click save below. */}
-//         {/* <input hidden={false} type="submit" value="Submit" />{" "} */}
-//         {"Please Click Save to save signature Before Submitting this form"}
-//         {/* The Test */}
-//         <div>
-//           {/* <input type="submit" value="Save Signature" onClick={onClick} /> */}
-//           {showResults ? (
-//             <button hidden={false} type="submit" value="Submit">
-//               Submit
-//             </button>
-//           ) : null}
-//         </div>
-//       </form>
-//       {/* Fix the value if there is a problem */}
-//       <button value={sigPad} onClick={clear}>
-//         Clear
-//       </button>
-//       <div onClick={save}>
-//         <input type="submit" value="Save" onClick={onClick} />
-//       </div>
-//     </>
-//   );
-// };
-
-// // PostForm.propTypes = {
-// // id: PropTypes.string.isRequired,
-// // onChange: PropTypes.func.isRequired,
-// // }
-
-// export default PostForm;
-
 import React, { useState, useRef } from "react";
 import SignatureCanvas from "react-signature-canvas";
 import Axios from "axios";
diff --git a/client/src/containers/Admin/B2BMessages/B2BMessages.tsx b/client/src/containers/Admin/B2BMessages/B2BMessages.tsx
index 9acc1be..5e39e4c 100644
--- a/client/src/containers/Admin/B2BMessages/B2BMessages.tsx
+++ b/client/src/containers/Admin/B2BMessages/B2BMessages.tsx
@@ -1,3 +1,82 @@
+// import React, { useEffect, useState } from "react";
+// import axios from "axios";
+
+// type Message = {
+//   updatedAt: string;
+//   createdAt: string;
+//   sender: string;
+//   receiver: string;
+//   content: string;
+// };
+
+// const B2BMessages: React.FC = () => {
+//   const [messages, setMessages] = useState<Message[]>([]);
+//   const [error, setError] = useState<string | null>(null);
+//   useEffect(() => {
+//     axios
+//       .get<Message[]>("/api/message/cheat")
+//       .then((response) => {
+//         setMessages(response.data);
+//         setError(null);
+//       })
+//       .catch((error) => {
+//         console.error("Error fetching messages:", error);
+//         setError("Failed to fetch messages. Please try again later.");
+//       });
+//   }, []);
+
+//   return (
+//     <div style={{ padding: "20px" }}>
+//       <h1>Admin Dashboard</h1>
+//       {error && <p style={{ color: "red" }}>{error}</p>}
+//       <table style={{ width: "100%", borderCollapse: "collapse" }}>
+//         <thead>
+//           <tr>
+//             <th style={{ border: "1px solid black", padding: "8px" }}>
+//               Sender
+//             </th>
+//             <th style={{ border: "1px solid black", padding: "8px" }}>
+//               Receiver
+//             </th>
+//             <th style={{ border: "1px solid black", padding: "8px" }}>
+//               Content
+//             </th>
+//             <th style={{ border: "1px solid black", padding: "8px" }}>
+//               Date & Time
+//             </th>
+//             <th style={{ border: "1px solid black", padding: "8px" }}>
+//               Updated
+//             </th>
+//           </tr>
+//         </thead>
+//         <tbody>
+//           {messages.map((message, index) => (
+//             <tr key={index}>
+//               <td style={{ border: "1px solid black", padding: "8px" }}>
+//                 {message.sender}
+//               </td>
+//               <td style={{ border: "1px solid black", padding: "8px" }}>
+//                 {message.receiver}
+//               </td>
+//               <td style={{ border: "1px solid black", padding: "8px" }}>
+//                 {message.content}
+//               </td>
+//               <td style={{ border: "1px solid black", padding: "8px" }}>
+//                 {message.createdAt}
+//               </td>
+//               <td style={{ border: "1px solid black", padding: "8px" }}>
+//                 {message.updatedAt}
+//               </td>
+//             </tr>
+//           ))}
+//         </tbody>
+//       </table>
+//     </div>
+//   );
+// };
+
+// export default B2BMessages;
+
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 
@@ -11,68 +90,84 @@ type Message = {
 
 const B2BMessages: React.FC = () => {
   const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+
   useEffect(() => {
-    axios
-      .get<Message[]>("/api/message/cheat")
-      .then((response) => {
-        setMessages(response.data);
+    const fetchMessages = async () => {
+      try {
+        const res = await axios.get<Message[]>("/api/message/cheat");
+        setMessages(res.data);
         setError(null);
-      })
-      .catch((error) => {
-        console.error("Error fetching messages:", error);
+      } catch (err) {
+        console.error("Error fetching messages:", err);
         setError("Failed to fetch messages. Please try again later.");
-      });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMessages();
   }, []);
 
+  const formatDate = (dateStr: string) => {
+    const d = new Date(dateStr);
+    return d.toLocaleString();
+  };
+
   return (
     <div style={{ padding: "20px" }}>
-      <h1>Admin Dashboard</h1>
-      {error && <p style={{ color: "red" }}>{error}</p>}
-      <table style={{ width: "100%", borderCollapse: "collapse" }}>
-        <thead>
-          <tr>
-            <th style={{ border: "1px solid black", padding: "8px" }}>
-              Sender
-            </th>
-            <th style={{ border: "1px solid black", padding: "8px" }}>
-              Receiver
-            </th>
-            <th style={{ border: "1px solid black", padding: "8px" }}>
-              Content
-            </th>
-            <th style={{ border: "1px solid black", padding: "8px" }}>
-              Date & Time
-            </th>
-            <th style={{ border: "1px solid black", padding: "8px" }}>
-              Updated
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {messages.map((message, index) => (
-            <tr key={index}>
-              <td style={{ border: "1px solid black", padding: "8px" }}>
-                {message.sender}
-              </td>
-              <td style={{ border: "1px solid black", padding: "8px" }}>
-                {message.receiver}
-              </td>
-              <td style={{ border: "1px solid black", padding: "8px" }}>
-                {message.content}
-              </td>
-              <td style={{ border: "1px solid black", padding: "8px" }}>
-                {message.createdAt}
-              </td>
-              <td style={{ border: "1px solid black", padding: "8px" }}>
-                {message.updatedAt}
-              </td>
+      <h1 style={{ marginBottom: "20px" }}>Admin Dashboard</h1>
+
+      {/* Loading Indicator */}
+      {loading && (
+        <p style={{ fontWeight: "bold" }}>
+          <span className="spinner-border spinner-border-sm"></span> Loading
+          messages…
+        </p>
+      )}
+
+      {/* Error Message */}
+      {error && <p style={{ color: "red", fontWeight: "bold" }}>{error}</p>}
+
+      {/* No Messages */}
+      {!loading && !error && messages.length === 0 && (
+        <p>No messages found.</p>
+      )}
+
+      {/* Message Table */}
+      {!loading && messages.length > 0 && (
+        <table style={{ width: "100%", borderCollapse: "collapse" }}>
+          <thead>
+            <tr style={{ background: "#f0f0f0" }}>
+              <th style={cellStyle}>Sender</th>
+              <th style={cellStyle}>Receiver</th>
+              <th style={cellStyle}>Content</th>
+              <th style={cellStyle}>Created</th>
+              <th style={cellStyle}>Updated</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {messages.map((msg, i) => (
+              <tr key={i}>
+                <td style={cellStyle}>{msg.sender}</td>
+                <td style={cellStyle}>{msg.receiver}</td>
+                <td style={cellStyle}>{msg.content}</td>
+                <td style={cellStyle}>{formatDate(msg.createdAt)}</td>
+                <td style={cellStyle}>{formatDate(msg.updatedAt)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
     </div>
   );
 };
 
+const cellStyle = {
+  border: "1px solid #ddd",
+  padding: "8px",
+  fontSize: "14px",
+};
+
 export default B2BMessages;
diff --git a/client/src/containers/Admin/Tickets/TicketsCreated.css b/client/src/containers/Admin/Tickets/TicketsCreated.css
index 71f8339..cdd988c 100644
--- a/client/src/containers/Admin/Tickets/TicketsCreated.css
+++ b/client/src/containers/Admin/Tickets/TicketsCreated.css
@@ -1,4 +1,4 @@
-.tickets-header {
+/* .tickets-header {
   text-align: center;
   margin-bottom: 20px;
 }
@@ -46,4 +46,115 @@ td a:hover {
   margin-top: 20px;
   text-align: center;
   color: #007bff;
+} */
+
+.tickets-wrapper {
+  padding: 20px;
+}
+
+.tickets-title {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+/* Search Bar */
+.search-container {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.search-container input {
+  width: 90%;
+  max-width: 400px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+}
+
+/* Table */
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.tickets-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tickets-table th,
+.tickets-table td {
+  padding: 10px;
+  border: 1px solid #ddd;
+}
+
+.tickets-table th {
+  background-color: #f8f8f8;
+  text-align: left;
+}
+
+.archive-btn {
+  background: #c62828;
+  color: white;
+  border: none;
+  padding: 6px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.archive-btn:hover {
+  background: #b71c1c;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  gap: 15px;
+}
+
+.pagination button {
+  padding: 8px 12px;
+  border: none;
+  background: #007bff;
+  color: white;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.pagination button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* Home link */
+.home-link {
+  display: block;
+  margin-top: 30px;
+  text-align: center;
+  color: #007bff;
+  text-decoration: none;
+}
+
+.home-link:hover {
+  text-decoration: underline;
+}
+
+/* Mobile Responsive */
+@media (max-width: 600px) {
+  .tickets-table th,
+  .tickets-table td {
+    padding: 6px;
+  }
+
+  .search-container input {
+    width: 95%;
+  }
+
+  .pagination span {
+    font-size: 14px;
+  }
 }
diff --git a/client/src/containers/Admin/Tickets/TicketsCreated.tsx b/client/src/containers/Admin/Tickets/TicketsCreated.tsx
index b3f8ed2..100a74a 100644
--- a/client/src/containers/Admin/Tickets/TicketsCreated.tsx
+++ b/client/src/containers/Admin/Tickets/TicketsCreated.tsx
@@ -1,19 +1,113 @@
+// import React, { useEffect, useState } from "react";
+// import axios from "axios";
+// import { Link } from "react-router-dom";
+// import "./TicketsCreated.css"; // Importing CSS for styling
+
+// // Define the ticket type
+// interface Ticket {
+//   name?: string;
+//   subject?: string;
+//   description?: string;
+// }
+
+// const TicketsCreated: React.FC = () => {
+//   const [itTickets, setItTickets] = useState<Ticket[]>([]);
+//   const [userTickets, setUserTickets] = useState<Ticket[]>([]);
+
+//   const fetchItTickets = async () => {
+//     try {
+//       const { data } = await axios.get(`/api/it-help/view`);
+//       setItTickets(data);
+//     } catch (error) {
+//       console.error("Error fetching IT tickets:", error);
+//     }
+//   };
+
+//   const fetchUserTickets = async () => {
+//     try {
+//       const { data } = await axios.get(`/api/employee-help/view`);
+//       setUserTickets(data);
+//     } catch (error) {
+//       console.error("Error fetching user tickets:", error);
+//     }
+//   };
+
+//   useEffect(() => {
+//     fetchItTickets();
+//     fetchUserTickets();
+//   }, []);
+
+//   const renderTickets = (tickets: Ticket[], title: string) => (
+//     <div className="ticket-section">
+//       <h1>{title}</h1>
+//       <table>
+//         <thead>
+//           <tr>
+//             <th>View Ticket</th>
+//             <th>Name</th>
+//             <th>Subject</th>
+//             <th>Description</th>
+//           </tr>
+//         </thead>
+//         <tbody>
+//           {tickets.length > 0 ? (
+//             tickets.map((ticket, index) => (
+//               <tr key={index}>
+//                 <td>
+//                   <Link to="/AdminUserProfile">View</Link>
+//                 </td>
+//                 <td>{ticket.name || "No Name"}</td>
+//                 <td>{ticket.subject || "No Subject"}</td>
+//                 <td>{ticket.description || "No Information"}</td>
+//               </tr>
+//             ))
+//           ) : (
+//             <tr>
+//               <td colSpan={4}>No tickets available</td>
+//             </tr>
+//           )}
+//         </tbody>
+//       </table>
+//     </div>
+//   );
+
+//   return (
+//     <>
+//       <div className="tickets-header">
+//         <h2>All Tickets</h2>
+//       </div>
+//       {renderTickets(itTickets, "View All Tickets Created for IT Issues")}
+//       {renderTickets(userTickets, "View All Tickets Created for User Issues")}
+//       <Link to="/Admin">Home</Link>
+//     </>
+//   );
+// };
+
+// export default TicketsCreated;
+
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import { Link } from "react-router-dom";
-import "./TicketsCreated.css"; // Importing CSS for styling
+import "./TicketsCreated.css";
 
-// Define the ticket type
 interface Ticket {
+  _id: string;
   name?: string;
   subject?: string;
   description?: string;
+  createdAt?: string;
 }
 
+const ITEMS_PER_PAGE = 10;
+
 const TicketsCreated: React.FC = () => {
   const [itTickets, setItTickets] = useState<Ticket[]>([]);
   const [userTickets, setUserTickets] = useState<Ticket[]>([]);
+  const [search, setSearch] = useState("");
+  const [filtered, setFiltered] = useState<Ticket[]>([]);
+  const [page, setPage] = useState(1);
 
+  // Fetch IT tickets
   const fetchItTickets = async () => {
     try {
       const { data } = await axios.get(`/api/it-help/view`);
@@ -23,6 +117,7 @@ const TicketsCreated: React.FC = () => {
     }
   };
 
+  // Fetch User tickets
   const fetchUserTickets = async () => {
     try {
       const { data } = await axios.get(`/api/employee-help/view`);
@@ -37,49 +132,116 @@ const TicketsCreated: React.FC = () => {
     fetchUserTickets();
   }, []);
 
-  const renderTickets = (tickets: Ticket[], title: string) => (
-    <div className="ticket-section">
-      <h1>{title}</h1>
-      <table>
-        <thead>
-          <tr>
-            <th>View Ticket</th>
-            <th>Name</th>
-            <th>Subject</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          {tickets.length > 0 ? (
-            tickets.map((ticket, index) => (
-              <tr key={index}>
-                <td>
-                  <Link to="/AdminUserProfile">View</Link>
-                </td>
-                <td>{ticket.name || "No Name"}</td>
-                <td>{ticket.subject || "No Subject"}</td>
-                <td>{ticket.description || "No Information"}</td>
-              </tr>
-            ))
-          ) : (
-            <tr>
-              <td colSpan={4}>No tickets available</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
+  // Combine both ticket sources
+  useEffect(() => {
+    const combined = [...itTickets, ...userTickets];
+
+    const cleanSearch = search.toLowerCase();
+    const filteredTickets = combined.filter((t) => {
+      return (
+        (t.name?.toLowerCase().includes(cleanSearch) ?? false) ||
+        (t.subject?.toLowerCase().includes(cleanSearch) ?? false) ||
+        (t.description?.toLowerCase().includes(cleanSearch) ?? false)
+      );
+    });
+
+    setFiltered(filteredTickets);
+    setPage(1); // reset to first page on search
+  }, [search, itTickets, userTickets]);
+
+  const startIndex = (page - 1) * ITEMS_PER_PAGE;
+  const pageTickets = filtered.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+  const pages = Math.ceil(filtered.length / ITEMS_PER_PAGE);
+
+  const handleArchive = async (id: string) => {
+    try {
+      await axios.put(`/api/tickets/archive/${id}`);
+      setItTickets(itTickets.filter((t) => t._id !== id));
+      setUserTickets(userTickets.filter((t) => t._id !== id));
+    } catch (error) {
+      console.error("Error archiving ticket:", error);
+    }
+  };
 
   return (
-    <>
-      <div className="tickets-header">
-        <h2>All Tickets</h2>
+    <div className="tickets-wrapper">
+      <h2 className="tickets-title">All Tickets</h2>
+
+      {/* Search Bar */}
+      <div className="search-container">
+        <input
+          type="text"
+          placeholder="Search by name, subject, or description..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
+
+      <div className="table-container">
+        <table className="tickets-table">
+          <thead>
+            <tr>
+              <th>View</th>
+              <th>Name</th>
+              <th>Subject</th>
+              <th>Description</th>
+              <th>Created</th>
+              <th>Archive</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pageTickets.length > 0 ? (
+              pageTickets.map((ticket) => (
+                <tr key={ticket._id}>
+                  <td>
+                    <Link to={`/AdminUserProfile/${ticket._id}`}>Open</Link>
+                  </td>
+                  <td>{ticket.name ?? "—"}</td>
+                  <td>{ticket.subject ?? "—"}</td>
+                  <td>{ticket.description ?? "—"}</td>
+                  <td>{ticket.createdAt ? new Date(ticket.createdAt).toLocaleString() : "—"}</td>
+                  <td>
+                    <button
+                      className="archive-btn"
+                      onClick={() => handleArchive(ticket._id)}
+                    >
+                      Archive
+                    </button>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={6} style={{ textAlign: "center" }}>
+                  No tickets found
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
       </div>
-      {renderTickets(itTickets, "View All Tickets Created for IT Issues")}
-      {renderTickets(userTickets, "View All Tickets Created for User Issues")}
-      <Link to="/Admin">Home</Link>
-    </>
+
+      {/* Pagination */}
+      {pages > 1 && (
+        <div className="pagination">
+          <button disabled={page === 1} onClick={() => setPage(page - 1)}>
+            Prev
+          </button>
+
+          <span>
+            Page {page} of {pages}
+          </span>
+
+          <button disabled={page === pages} onClick={() => setPage(page + 1)}>
+            Next
+          </button>
+        </div>
+      )}
+
+      <Link to="/Admin" className="home-link">
+        Back Home
+      </Link>
+    </div>
   );
 };
 
diff --git a/client/src/containers/EmployeeLogin/EmployeeLogin.test.tsx b/client/src/containers/EmployeeLogin/EmployeeLogin.test.tsx
new file mode 100644
index 0000000..083a69a
--- /dev/null
+++ b/client/src/containers/EmployeeLogin/EmployeeLogin.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import EmployeeLogin from './EmployeeLogin';
+
+test('renders Home', () => {
+  render(<EmployeeLogin />);
+  const linkElement = screen.getByText(/EmployeeLogin/i);
+  expect(linkElement).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/client/src/containers/EmployeeLogin/EmployeeLogin.tsx b/client/src/containers/EmployeeLogin/EmployeeLogin.tsx
new file mode 100644
index 0000000..7cfde8d
--- /dev/null
+++ b/client/src/containers/EmployeeLogin/EmployeeLogin.tsx
@@ -0,0 +1,190 @@
+import React, { useState } from "react";
+// import AuthContext from "../../utils/ContextAPI/AuthContext";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import Button from "react-bootstrap/Button";
+
+const EmployeeLogin = () => {
+  // TODO: Fix the state, signin and login is twisted together somehow.
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  // const [email, setEmail] = useState("");
+  // const [password, setPassword] = useState("");
+  // const history = useHistory();
+  // const { setJwt } = useContext(AuthContext);
+  const navigate = useNavigate();
+
+  const handle2Submit = (e: any) => {
+    e.preventDefault();
+    // const email  = e.target.email;
+    // const password  = e.target.password;
+    axios
+      // FIXME: After creating an account, it pushes on local but it do not push to the home page/ login in Production
+      .post("/api/employee/employeeSignUp", { email, password })
+      .then((response) => {
+        console.log(response.data);
+        // setJwt(response.data.data);
+        navigate("/employee");
+        // history.push("/");
+        // window.location = "/home";
+        // this.props.history.push("/home");
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    // const { email, password } = e.target;
+    axios
+      // TODO: change to /api/login
+      .post("/api/employee/employeeLogin", { email, password })
+      .then((response) => {
+        // setJwt(response.data.data);
+        console.log(response.data.data);
+        console.log(response.data);
+        console.log(response);
+        navigate("/employee");
+        // history.push("/");
+        // window.location = "/home";
+        // this.props.history.push("/home");
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+
+
+  return (
+    <div className="container" style={{ textAlign: "center" }}>
+      <div className="row jumbotron">
+        <form
+          onSubmit={handleSubmit}
+          className="p-4 p-md-5 border rounded-3 bg-light"
+        >
+          <div className="container">
+            <div className="row">
+              <div className="col-sm-12">
+                <input
+                  id="email"
+                  className="form-control"
+                  type="text"
+                  placeholder="Email"
+                  name="email"
+                  value={email}
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                  }}
+                />
+              </div>
+            </div>
+            <div className="row form-group">
+              <div className="col-sm-12">
+                <input
+                  id="password"
+                  className="form-control"
+                  type="password"
+                  placeholder="Password"
+                  name="password"
+                  value={password}
+                  onChange={(e) => {
+                    setPassword(e.target.value);
+                  }}
+                />
+              </div>
+            </div>
+            <Button
+              className="w-10 btn btn-lg btn-primary"
+              type="submit"
+            //onClick={handleSubmit}
+            >
+              Connect
+            </Button>
+          </div>
+        </form>
+      </div>
+
+      <div className="container">
+        <div className="container col-xl-10 col-xxl-8 px-4 py-5">
+          <div className="row align-items-center g-lg-5 py-5">
+            <div className="col-lg-7 text-center text-lg-start">
+              <h1 className="display-4 fw-bold lh-1 mb-3">Sign Up</h1>
+              <p className="col-lg-10 fs-4">
+                Ready to experience the future of logistics management? Sign up
+                for GADZ CONNECT today and take your business to new heights.
+                Let’s embark on this journey together, and unlock the full
+                potential of your logistics operations.
+              </p>
+            </div>
+            <div className="col-md-10 mx-auto col-lg-5">
+              <form
+                onSubmit={handle2Submit}
+                className="p-4 p-md-5 border rounded-3 bg-light"
+              >
+                <div className="form-floating mb-3">
+                  <input
+                    type="email"
+                    className="form-control"
+                    id="floatingInput"
+                    placeholder="name@example.com"
+                    data-nlok-ref-guid="45d30697-7fd3-457b-fb20-fd168951d258"
+                    control-id="ControlID-1"
+                    name="email"
+                    value={email}
+                    onChange={(e) => {
+                      setEmail(e.target.value);
+                    }}
+                  />
+                  <div id="norton-idsafe-field-styling-divId"></div>
+                  <label htmlFor="floatingInput">Email address</label>
+                </div>
+                <div className="form-floating mb-3">
+                  <input
+                    type="password"
+                    className="form-control"
+                    id="floatingPassword"
+                    placeholder="Password"
+                    data-nlok-ref-guid="133f212d-f672-4c6f-e332-4bc651dd15a2"
+                    control-id="ControlID-2"
+                    name="password"
+                    value={password}
+                    onChange={(e) => {
+                      setPassword(e.target.value);
+                    }}
+                  />
+                  <div id="norton-idsafe-field-styling-divId"></div>
+                  <label htmlFor="floatingPassword">Password</label>
+                </div>
+                {/* <div className="checkbox mb-3">
+                  <label>
+                    <input
+                      type="checkbox"
+                      value="remember-me"
+                      control-id="ControlID-3"
+                    />{" "}
+                    Remember me
+                  </label>
+                </div> */}
+                <button
+                  className="w-100 btn btn-lg btn-primary"
+                  type="submit"
+                  control-id="ControlID-4"
+                >
+                  SIGN UP NOW
+                </button>
+                <hr className="my-4" />
+                <small className="text-muted">
+                  By clicking Sign up, you agree to the terms of use.
+                </small>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmployeeLogin;
diff --git a/client/src/containers/Home/Home.jsx b/client/src/containers/Home/Home.jsx
index 6454919..3d9d5dc 100644
--- a/client/src/containers/Home/Home.jsx
+++ b/client/src/containers/Home/Home.jsx
@@ -1,191 +1,3 @@
-// import React from "react";
-// import "./Home.css"; // Import your custom styles
-
-// const Home = () => {
-//   return (
-//     <div
-//       className="container text-center home-container"
-//       style={{ padding: "40px" }}
-//     >
-//       <div className="row jumbotron">
-//         <div className="col-12">
-//           <div className="display-4 welcome-text">Welcome To GADZConnect!</div>
-//           <img
-//             style={{ width: "100%", height: "auto", objectFit: "cover" }}
-//             src="https://res.cloudinary.com/fashion-commit/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1726274331/GADZCo_ndr2y6.jpg"
-//             alt="Big World of Connections"
-//           />
-//         </div>
-//         <div className="col-12 display-6" style={{ padding: "40px" }}>
-//           The innovative solution revolutionizing the transportation and
-//           logistics industry. We’re here to transform the way you manage your
-//           logistics operations, offering a seamless platform that connects
-//           buyers and sellers, carriers and shippers, and every player in
-//           between!
-//         </div>
-
-//         <div className="col-12 social-icons">
-//           <lord-icon
-//             src="https://cdn.lordicon.com/tltikfri.json"
-//             trigger="hover"
-//             state="loop-rotate"
-//             style={{ width: "100px", height: "100px", margin: "0 20px" }}
-//           ></lord-icon>
-
-//           <lord-icon
-//             src="https://cdn.lordicon.com/hsrrkevt.json"
-//             trigger="hover"
-//             state="loop-cycle"
-//             style={{ width: "100px", height: "100px", margin: "0 20px" }}
-//           ></lord-icon>
-//         </div>
-
-//         <div className="col-12 display-2">It's A New World</div>
-
-//         <div className="col-12">
-//           <img
-//             src="https://res.cloudinary.com/fashion-commit/image/upload/v1713670837/GADZ/Free-Photo-700x860-1660911398_fvksf2.webp"
-//             style={{ width: "100%", height: "auto", objectFit: "cover" }}
-//             alt="Big Town top view"
-//           />
-//           <h1 className="jumbotron display-4">What We Offer?</h1>
-//           <hr />
-//           <p className="display-6">
-//             You have the loads, we got the GADZ. Connect your assets and manage
-//             them easily. Make loads available to the public or make yourself
-//             assessable as a driver.
-//           </p>
-//         </div>
-
-//         <div className="col-12">
-//           <h1 className="jumbotron display-4">We are Global</h1>
-//           <hr />
-//           <div className="row">
-//             <div className="col-md-6 col-12">
-//               <p className="display-6">
-//                 At GADZCONNECT, we’re redefining the way businesses manage their
-//                 logistics operations. Say goodbye to the complexities and
-//                 inefficiencies of traditional logistics processes- and hello to
-//                 a world of seamless connectivity, real-time visibility, and
-//                 unparalleled efficiency.
-//               </p>
-//             </div>
-//             <div className="col-md-6 col-12">
-//               <img
-//                 style={{ width: "100%", height: "auto", objectFit: "cover" }}
-//                 src="https://res.cloudinary.com/fashion-commit/image/upload/v1713670842/GADZ/Screenshot_2023-08-24_211718_hjhizt.webp"
-//                 alt="Logistics"
-//               />
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default Home;
-
-// import React from "react";
-// import "./Home.css";
-
-// const Home = () => {
-//   return (
-//     <div className="home-container">
-//       {/* Hero Section */}
-//       <section className="hero">
-//         <div className="hero-content">
-//           <h1 className="hero-title">🚀 Welcome To <span>GADZConnect</span></h1>
-//           <p className="hero-subtitle">
-//             The innovative solution revolutionizing the transportation and
-//             logistics industry. Connecting shippers, carriers, and businesses
-//             worldwide on one seamless platform.
-//           </p>
-//           <div className="hero-buttons">
-//             <button className="btn-primary">Get Started</button>
-//             <button className="btn-secondary">Learn More</button>
-//           </div>
-//         </div>
-//         <div className="hero-image">
-//           <img
-//             src="https://res.cloudinary.com/fashion-commit/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1726274331/GADZCo_ndr2y6.jpg"
-//             alt="Global Logistics"
-//           />
-//         </div>
-//       </section>
-
-//       {/* Social Section */}
-//       <section className="social-icons">
-//         <lord-icon
-//           src="https://cdn.lordicon.com/tltikfri.json"
-//           trigger="hover"
-//           state="loop-rotate"
-//           style={{ width: "80px", height: "80px" }}
-//         ></lord-icon>
-//         <lord-icon
-//           src="https://cdn.lordicon.com/hsrrkevt.json"
-//           trigger="hover"
-//           state="loop-cycle"
-//           style={{ width: "80px", height: "80px" }}
-//         ></lord-icon>
-//       </section>
-
-//       {/* What We Offer */}
-//       <section className="offer-section">
-//         <div className="offer-card">
-//           <img
-//             src="https://res.cloudinary.com/fashion-commit/image/upload/v1713670837/GADZ/Free-Photo-700x860-1660911398_fvksf2.webp"
-//             alt="Big Town top view"
-//           />
-//           <div className="offer-content">
-//             <h2>What We Offer</h2>
-//             <p>
-//               You have the loads, we got the GADZ. Connect your assets and manage
-//               them effortlessly. Make loads available to the public or make
-//               yourself accessible as a driver. Efficiency, connectivity, and
-//               simplicity—all in one place.
-//             </p>
-//           </div>
-//         </div>
-//       </section>
-
-//       {/* Global Section */}
-//       <section className="global-section">
-//         <h2>We Are Global 🌍</h2>
-//         <div className="global-content">
-//           <div className="global-text">
-//             <p>
-//               At GADZCONNECT, we’re redefining the way businesses manage their
-//               logistics operations. Say goodbye to complexity and inefficiency,
-//               and hello to seamless connectivity, real-time visibility, and
-//               unparalleled efficiency—anywhere in the world.
-//             </p>
-//           </div>
-//           <div className="global-image">
-//             <img
-//               src="https://res.cloudinary.com/fashion-commit/image/upload/v1713670842/GADZ/Screenshot_2023-08-24_211718_hjhizt.webp"
-//               alt="Global Logistics Map"
-//             />
-//           </div>
-//         </div>
-//       </section>
-
-//       {/* CTA Section */}
-//       <section className="cta-section">
-//         <h2>It’s A New World with GADZConnect</h2>
-//         <p>
-//           Join thousands of logistics professionals already transforming the way
-//           they manage operations. The future of logistics is here.
-//         </p>
-//         <button className="btn-primary cta-btn">Join Now</button>
-//       </section>
-//     </div>
-//   );
-// };
-
-// export default Home;
-
-import React from "react";
 import { Link } from "react-router-dom";
 import "./Home.css";
 
@@ -204,6 +16,11 @@ const Home = () => {
             worldwide on one seamless platform.
           </p>
           <div className="hero-buttons">
+            {localStorage.getItem("userId") && (
+              <Link to="/User">
+                <button className="home-btn-secondary">Reconnect</button>
+              </Link>
+            )}
             {/* <button className="home-btn-primary">Get Started</button> */}
             {/* <button className="home-btn-secondary">Learn More</button> */}
             <Link to="/Login">
diff --git a/client/src/containers/User/AvailableTable/AvailableTable.tsx b/client/src/containers/User/AvailableTable/AvailableTable.tsx
index 6c880d8..ce6effd 100644
--- a/client/src/containers/User/AvailableTable/AvailableTable.tsx
+++ b/client/src/containers/User/AvailableTable/AvailableTable.tsx
@@ -4604,6 +4604,56 @@ const AvailableTable: React.FC = () => {
     }
   };
 
+  const fetchLoadboardData = useCallback(
+    async () => {
+      if (!code) {
+        setError("Missing authorization code — please connect your account first.");
+        return;
+      }
+
+      setLoading(true);
+      setError(null);
+
+      try {
+        const resp = await axios.get(`${API_BASE}/auth/callback/`, {
+          params: { code },
+        });
+
+        // Save token from cookie if server sets it
+        const cookieToken = getCookie("lb_access_token");
+        if (cookieToken) {
+          localStorage.setItem("lb_access_token", cookieToken);
+          setToken(cookieToken);
+        }
+
+        let apiLoads: any[] = [];
+        const d = resp.data;
+
+        if (Array.isArray(d)) apiLoads = d;
+        else if (Array.isArray(d.loads)) apiLoads = d.loads;
+        else if (Array.isArray(d.data)) apiLoads = d.data;
+        else if (Array.isArray(d.results)) apiLoads = d.results;
+        else if (Array.isArray(d.payload)) apiLoads = d.payload;
+
+        if (apiLoads.length > 0) {
+          setSearchResults(apiLoads.map(mapApiLoadToDisplay));
+          setSuccess(true);
+
+          // Scroll into view after results load
+          setTimeout(() => {
+            resultsRef.current?.scrollIntoView({ behavior: "smooth" });
+          }, 150);
+        }
+      } catch (err) {
+        console.error("Error fetching 123Loadboard data:", err);
+        setError("Failed to fetch 123Loadboard data. Please reauthorize or try again.");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [code, mapApiLoadToDisplay]
+  );
+
   // ---------- Render ----------
   return (
     <div className={styles["at-container"]}>
@@ -4808,14 +4858,49 @@ const AvailableTable: React.FC = () => {
             <button className="btn btn-outline-primary" onClick={handleAuthorizeNavigation}>
               Connect / Authorize
             </button> */}
-            <button
+            {/* <button
               className="btn btn-outline-success"
               type="submit"
               // onClick={fetchLoadboardData}
               disabled={loading}
             >
               {loading ? "Fetching..." : "Fetch 123Loadboard Data"}
+            </button> */}
+            {/* <button
+              className="btn btn-outline-success d-flex align-items-center gap-2"
+              type="submit"
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <span
+                    className="spinner-border spinner-border-sm"
+                    role="status"
+                    aria-hidden="true"
+                  ></span>
+                  Fetching...
+                </>
+              ) : (
+                "Fetch 123Loadboard Data"
+              )}
+            </button> */}
+            <button
+              className="btn btn-outline-success d-flex align-items-center gap-2"
+              type="button"
+              onClick={fetchLoadboardData}
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <span className="spinner-border spinner-border-sm" role="status" />
+                  Fetching...
+                </>
+              ) : (
+                "Fetch 123Loadboard Data"
+              )}
             </button>
+
+
           </div>
         </form>
         {loading && <p>Loading search results...</p>}
diff --git a/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx b/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx
index b7e0f24..b55a36d 100644
--- a/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx
+++ b/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx
@@ -1,323 +1,3 @@
-// import React, { useEffect, useState } from "react";
-// import { useParams, Link } from "react-router-dom";
-// import axios from "axios";
-// import styles from "./UserProfile.module.css";
-
-// const ServerPort =
-//   process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
-
-// const UserProfile = () => {
-//   const { userId } = useParams<{ userId: string }>();
-//   const [userData, setUserData] = useState<any>(null);
-//   const [loading, setLoading] = useState<boolean>(true);
-//   const [error, setError] = useState<string>("");
-
-//   interface Load {
-//     id: number;
-//     loadId: string; // Add loadId property
-//     description: string;
-//     company: string;
-//   }
-
-//   interface Driver {
-//     id: number;
-//     driverId: string; // Add driverId property
-//     name: string;
-//     experience: string;
-//   }
-
-//   useEffect(() => {
-//     const fetchUserData = async () => {
-//       try {
-//         const [userRes, loadsRes, driversRes] = await Promise.all([
-//           axios.get(`${ServerPort}/api/user/view/${userId}`),
-//           axios.get(`${ServerPort}/api/loads/user/${userId}`),
-//           axios.get(`${ServerPort}/api/drivers/user/${userId}`),
-//         ]);
-
-//         setUserData({
-//           ...userRes.data,
-//           loads: Array.isArray(loadsRes.data) ? loadsRes.data : [],
-//           drivers: Array.isArray(driversRes.data) ? driversRes.data : [],
-//         });
-//       } catch (error) {
-//         console.error("Error fetching user profile data:", error);
-//         setError("Failed to load user profile data.");
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     fetchUserData();
-//   }, [userId]);
-
-//   if (loading) {
-//     return <div className={styles.loading}>Loading user profile...</div>;
-//   }
-
-//   if (error) {
-//     return <div className={styles.error}>{error}</div>;
-//   }
-
-//   return (
-//     <div className={styles.userProfileContainer}>
-//       <h1>User Profile</h1>
-//       <div className={styles.contentWrapper}>
-//         {/* Loads Section on the Left */}
-//         <div className={styles.loadsSection}>
-//           <h2>Loads ({userData.loads.length}):</h2>
-//           {Array.isArray(userData.loads) && userData.loads.length > 0 ? (
-//             userData.loads.map((load: Load) => (
-//               <div key={load.id} className={styles.loadItem}>
-//                 <h3>{load.description}</h3>
-//                 <p>Company: {load.company}</p>
-//                 <p>Load ID: {load.id}</p> {/* Display loadId */}
-//                 <Link to={`/UserProfile/${userData.userId}`} className={styles.loadLink}>
-//                   View Driver Profile
-//                 </Link>
-//               </div>
-//             ))
-//           ) : (
-//             <p>No loads available</p>
-//           )}
-//         </div>
-
-//         {/* Driver Details Section on the Right */}
-//         <div className={styles.profileSection}>
-//           <h2>Available Status: {userData.loadStatus}</h2>
-//           {userData.qrPNG && (
-//             <img
-//               src={userData.qrPNG}
-//               alt={`${userData.firstName} ${userData.lastName}`}
-//               className={styles.profileImage}
-//             />
-//           )}
-//           <h2>
-//             Name: {userData.firstName} {userData.lastName}
-//           </h2>
-//           <h2>
-//             Customer Since: {new Date(userData.availableFrom).toLocaleDateString()}
-//           </h2>
-//           <h2>Type of Owner: {userData.userType}</h2>
-//           <h2>
-//             All Services Available: {userData.loadReferences ? userData.loadReferences.split(",") : "None"}
-//           </h2>
-//           <h2>
-//             Locations: {userData.location ? userData.location.split(",") : "None"}
-//           </h2>
-//           <h2>Phone Number: {userData.phoneNumber || "Not provided"}</h2>
-//           <h2>Address: {userData.address || "Not provided"}</h2>
-//         </div>
-
-//         {/* Drivers Section in the Third Column */}
-//         <div className={styles.driversSection}>
-//           <h2>Drivers ({userData.drivers.length}):</h2>
-//           {Array.isArray(userData.drivers) && userData.drivers.length > 0 ? (
-//             userData.drivers.map((driver: Driver) => (
-//               <div key={driver.id} className={styles.driverItem}>
-//                 <h3>{driver.name}</h3>
-//                 <p>Experience: {driver.experience}</p>
-//                 <p>Driver ID: {driver.id}</p> {/* Display driverId */}
-//               </div>
-//             ))
-//           ) : (
-//             <p>No drivers available</p>
-//           )}
-//         </div>
-//       </div>
-
-//       {/* "Add Business" Button */}
-//       <button
-//         className={styles.button}
-//         onClick={() => console.log("Business added!")}
-//       >
-//         Add Business
-//       </button>
-
-//       {/* Navigation buttons */}
-//       <div className={styles.buttonContainer}>
-//         <Link to="/AvailableTable" className={styles.button}>
-//           Home
-//         </Link>
-//         <Link to={`/MessageUser/${userId}`} className={styles.button}>
-//           Message User
-//         </Link>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default UserProfile;
-
-// import React, { useEffect, useState } from "react";
-// import { useParams, Link } from "react-router-dom";
-// import axios from "axios";
-// import styles from "./UserProfile.module.css";
-
-// const SERVER_PORT = process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
-
-// interface Load {
-//   id: number;
-//   loadId: string;
-//   description: string;
-//   company: string;
-// }
-
-// interface Driver {
-//   id: number;
-//   driverId: string;
-//   name: string;
-//   experience: string;
-// }
-
-// interface UserData {
-//   firstName: string;
-//   lastName: string;
-//   email: string;
-//   phoneNumber?: string;
-//   address?: string;
-//   loadStatus?: string;
-//   availableFrom?: string;
-//   userType?: string;
-//   loadReferences?: string;
-//   location?: string;
-//   qrPNG?: string;
-//   loads: Load[];
-//   drivers: Driver[];
-// }
-
-// const UserProfile: React.FC = () => {
-//   const { userId } = useParams<{ userId: string }>();
-//   const [userData, setUserData] = useState<UserData | null>(null);
-//   const [loading, setLoading] = useState<boolean>(true);
-//   const [error, setError] = useState<string>("");
-
-//   useEffect(() => {
-//     if (!userId) {
-//       setError("User ID not provided in URL.");
-//       setLoading(false);
-//       return;
-//     }
-
-//     const fetchUserData = async () => {
-//       try {
-//         const [userRes, loadsRes, driversRes] = await Promise.all([
-//           axios.get(`${SERVER_PORT}/api/user/view/${userId}`),
-//           axios.get(`${SERVER_PORT}/api/loads/user/${userId}`),
-//           axios.get(`${SERVER_PORT}/api/drivers/user/${userId}`),
-//         ]);
-
-//         setUserData({
-//           ...userRes.data,
-//           loads: Array.isArray(loadsRes.data) ? loadsRes.data : [],
-//           drivers: Array.isArray(driversRes.data) ? driversRes.data : [],
-//         });
-//       } catch (err) {
-//         console.error("Error fetching user profile data:", err);
-//         setError("Failed to load user profile data.");
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     fetchUserData();
-//   }, [userId]);
-
-//   if (loading) return <div className={styles.loading}>Loading user profile...</div>;
-//   if (error) return <div className={styles.error}>{error}</div>;
-//   if (!userData) return <div className={styles.error}>No user data available.</div>;
-
-//   const {
-//     firstName,
-//     lastName,
-//     email,
-//     phoneNumber,
-//     address,
-//     loadStatus,
-//     availableFrom,
-//     userType,
-//     loadReferences,
-//     location,
-//     qrPNG,
-//     loads,
-//     drivers,
-//   } = userData;
-
-//   return (
-//     <div className={styles.userProfileContainer}>
-//       <h1>User Profile</h1>
-//       <div className={styles.contentWrapper}>
-//         {/* Loads Section */}
-//         <div className={styles.loadsSection}>
-//           <h2>Loads ({loads.length})</h2>
-//           {loads.length > 0 ? (
-//             loads.map((load) => (
-//               <div key={load.id} className={styles.loadItem}>
-//                 <h3>{load.description}</h3>
-//                 <p>Company: {load.company}</p>
-//                 <p>Load ID: {load.loadId}</p>
-//                 <Link to={`/UserProfile/${userId}`} className={styles.loadLink}>
-//                   View Load Details
-//                 </Link>
-//               </div>
-//             ))
-//           ) : (
-//             <p>No loads available</p>
-//           )}
-//         </div>
-
-//         {/* User Profile Section */}
-//         <div className={styles.profileSection}>
-//           {qrPNG && (
-//             <img
-//               src={qrPNG}
-//               alt={`${firstName} ${lastName}`}
-//               className={styles.profileImage}
-//             />
-//           )}
-//           <h2>{firstName} {lastName}</h2>
-//           <p><strong>Email:</strong> {email}</p>
-//           <p><strong>Phone:</strong> {phoneNumber || "Not provided"}</p>
-//           <p><strong>Address:</strong> {address || "Not provided"}</p>
-//           <p><strong>Status:</strong> {loadStatus || "N/A"}</p>
-//           <p><strong>Customer Since:</strong> {availableFrom ? new Date(availableFrom).toLocaleDateString() : "N/A"}</p>
-//           <p><strong>Type of Owner:</strong> {userType || "N/A"}</p>
-//           <p><strong>Services:</strong> {loadReferences ? loadReferences.split(",").join(", ") : "None"}</p>
-//           <p><strong>Locations:</strong> {location ? location.split(",").join(", ") : "None"}</p>
-//         </div>
-
-//         {/* Drivers Section */}
-//         <div className={styles.driversSection}>
-//           <h2>Drivers ({drivers.length})</h2>
-//           {drivers.length > 0 ? (
-//             drivers.map((driver) => (
-//               <div key={driver.id} className={styles.driverItem}>
-//                 <h3>{driver.name}</h3>
-//                 <p>Experience: {driver.experience}</p>
-//                 <p>Driver ID: {driver.driverId}</p>
-//               </div>
-//             ))
-//           ) : (
-//             <p>No drivers available</p>
-//           )}
-//         </div>
-//       </div>
-
-//       {/* Action Buttons */}
-//       <div className={styles.buttonContainer}>
-//         <button className={styles.button} onClick={() => console.log("Business added!")}>
-//           Add Business
-//         </button>
-//         <Link to="/AvailableTable" className={styles.button}>Home</Link>
-//         <Link to={`/MessageUser/${userId}`} className={styles.button}>Message User</Link>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default UserProfile;
-
-// UserProfile.tsx
 import React, { useEffect, useState } from "react";
 import { useParams, Link } from "react-router-dom";
 import axios from "axios";
diff --git a/client/src/containers/User/Profile/ProfileUpdate.tsx b/client/src/containers/User/Profile/ProfileUpdate.tsx
index e62d333..3389107 100644
--- a/client/src/containers/User/Profile/ProfileUpdate.tsx
+++ b/client/src/containers/User/Profile/ProfileUpdate.tsx
@@ -1,1682 +1,3 @@
-// import React, { useState, useEffect } from "react";
-// import axios from "axios";
-// import Button from "react-bootstrap/Button";
-// import Col from "react-bootstrap/Col";
-// import Form from "react-bootstrap/Form";
-// import Row from "react-bootstrap/Row";
-// import Alert from "react-bootstrap/Alert";
-// import Card from "react-bootstrap/Card";
-// import Spinner from "react-bootstrap/Spinner";
-// import { Link } from "react-router-dom";
-
-// type User = {
-//   id: string;
-//   email: string;
-//   password?: string;
-//   description: string;
-//   userType: string;
-//   experienceLevel: string;
-//   location: string;
-//   availableFrom: string;
-//   newPassword?: string;
-//   profileImage?: string;
-//   phoneNumber: string;
-//   driversLicense: string;
-//   comments: string;
-//   qrCode?: string; // ✅ added QR support
-// };
-
-// const ServerPort =
-//   process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
-
-// // ✅ Replace these with your actual Cloudinary credentials
-// // const CLOUDINARY_UPLOAD_URL = `https://api.cloudinary.com/v1_1/<your-cloud-name>/image/upload`;
-// // const CLOUDINARY_UPLOAD_PRESET = "<your-upload-preset>";
-// const CLOUDINARY_UPLOAD_URL = `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUDINARY_CLOUD_NAME}/image/upload`;
-// const CLOUDINARY_UPLOAD_PRESET = process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET;
-
-// const ProfileUpdate: React.FC = () => {
-//   const userId = localStorage.getItem("userId");
-//   const [error, setError] = useState<string | null>(null);
-//   const [loading, setLoading] = useState<boolean>(false);
-//   const [successMessage, setSuccessMessage] = useState<string | null>(null);
-//   const [isSubmitting, setIsSubmitting] = useState(false);
-//   const [imagePreview, setImagePreview] = useState<string | null>(null);
-//   const [qrCodeImage, setQrCodeImage] = useState<string | null>(null); // ✅ QR code state
-
-//   const [formData, setFormData] = useState<User>({
-//     id: "",
-//     email: "",
-//     password: "",
-//     description: "",
-//     userType: "",
-//     experienceLevel: "",
-//     location: "",
-//     availableFrom: "",
-//     newPassword: "",
-//     profileImage: "",
-//     phoneNumber: "",
-//     driversLicense: "",
-//     comments: "",
-//     qrCode: "",
-//   });
-
-//   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
-
-//   // ✅ Load user profile
-//   useEffect(() => {
-//     const fetchUserData = async () => {
-//       setLoading(true);
-//       const token = localStorage.getItem("token");
-//       if (!token) {
-//         setError("No token found. Please log in.");
-//         setLoading(false);
-//         return;
-//       }
-
-//       try {
-//         const response = await axios.get(`${ServerPort}/api/user/view/${userId}`, {
-//           headers: { Authorization: `Bearer ${token}` },
-//         });
-
-//         if (response.status === 200) {
-//           const userData = response.data;
-//           const availableFromDate =
-//             typeof userData.availableFrom === "string"
-//               ? userData.availableFrom.split("T")[0]
-//               : "";
-
-//           setFormData({
-//             ...userData,
-//             availableFrom: availableFromDate,
-//             password: "",
-//             newPassword: "",
-//           });
-
-//           setImagePreview(userData.profileImage || null);
-//           setQrCodeImage(userData.qrCode || null);
-//         }
-//       } catch (err) {
-//         handleApiError(err);
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     if (userId) fetchUserData();
-//   }, [userId]);
-
-//   // ✅ Upload image to Cloudinary
-//   const handleImageUpload = async (file: File) => {
-//     setLoading(true);
-//     try {
-//       const data = new FormData();
-//       data.append("file", file);
-//       data.append("upload_preset", CLOUDINARY_UPLOAD_PRESET!);
-
-//       const res = await axios.post(CLOUDINARY_UPLOAD_URL, data);
-//       const imageUrl = res.data.secure_url;
-
-//       setFormData({ ...formData, profileImage: imageUrl });
-//       setImagePreview(imageUrl);
-//     } catch (err) {
-//       console.error("Upload error:", err);
-//       setError("Image upload failed. Please try again.");
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
-
-//   // ✅ Validate before sending update
-//   const validateForm = () => {
-//     const errors: any = {};
-//     if (!formData.email) errors.email = "Email is required";
-//     else if (!/\S+@\S+\.\S+/.test(formData.email))
-//       errors.email = "Invalid email format";
-//     if (!formData.description) errors.description = "Description is required";
-//     if (!formData.userType) errors.userType = "User Type is required";
-//     if (!formData.experienceLevel)
-//       errors.experienceLevel = "Experience Level is required";
-//     if (!formData.location) errors.location = "Location is required";
-//     if (!formData.availableFrom)
-//       errors.availableFrom = "Available From date is required";
-//     if (!formData.phoneNumber) errors.phoneNumber = "Phone Number is required";
-//     if (!formData.driversLicense)
-//       errors.driversLicense = "Drivers License is required";
-//     if (!formData.comments) errors.comments = "Comments are required";
-//     setFormErrors(errors);
-//     return Object.keys(errors).length === 0;
-//   };
-
-//   // ✅ Submit update to backend
-//   const handleUserUpdate = async (e: React.FormEvent) => {
-//     e.preventDefault();
-//     if (!validateForm()) return;
-
-//     setIsSubmitting(true);
-//     setLoading(true);
-//     setError(null);
-//     setSuccessMessage(null);
-
-//     const token = localStorage.getItem("token");
-
-//     // Remove password if not updating it
-//     const updatedData: Partial<User> = { ...formData };
-//     if (!formData.newPassword) delete updatedData.password;
-
-//     try {
-//       const response = await axios.put(
-//         `${ServerPort}/api/user/update/${userId}`,
-//         updatedData,
-//         {
-//           headers: {
-//             "Content-Type": "application/json",
-//             Authorization: `Bearer ${token}`,
-//           },
-//         }
-//       );
-
-//       if (response.status === 200) {
-//         setSuccessMessage("✅ Profile updated successfully!");
-//         setQrCodeImage(response.data.qrCode || qrCodeImage); // ✅ refresh QR code if regenerated
-//         setFormData({ ...formData, newPassword: "" });
-//       }
-//     } catch (err) {
-//       handleApiError(err);
-//     } finally {
-//       setLoading(false);
-//       setIsSubmitting(false);
-//     }
-//   };
-
-//   // ✅ Handle API errors
-//   const handleApiError = (error: any) => {
-//     if (axios.isAxiosError(error)) {
-//       setError(error.response?.data?.message || error.message);
-//     } else {
-//       setError("An unknown error occurred");
-//     }
-//   };
-
-//   return (
-//     <Card className="p-4 shadow-lg rounded-lg">
-//       <h2 className="mb-4 text-center">Update Your Profile</h2>
-//       {loading && <Spinner animation="border" className="d-block mx-auto mb-3" />}
-//       {error && <Alert variant="danger">{error}</Alert>}
-//       {successMessage && <Alert variant="success">{successMessage}</Alert>}
-
-//       <Form onSubmit={handleUserUpdate}>
-//         {/* Profile Image Upload */}
-//         <div className="mb-4 text-center">
-//           <img
-//             src={
-//               imagePreview ||
-//               "https://via.placeholder.com/150?text=Upload+Profile+Image"
-//             }
-//             alt="Profile"
-//             style={{
-//               width: 120,
-//               height: 120,
-//               borderRadius: "50%",
-//               objectFit: "cover",
-//               border: "2px solid #ddd",
-//             }}
-//           />
-//           <Form.Control
-//             type="file"
-//             accept="image/*"
-//             className="mt-2"
-//             onChange={(e) => {
-//               const target = e.target as HTMLInputElement;
-//               if (target.files?.[0]) {
-//                 handleImageUpload(target.files[0]);
-//               }
-//             }}
-//           />
-//         </div>
-
-//         {/* ✅ QR Code Section */}
-//         {qrCodeImage && (
-//           <div className="mb-4 text-center">
-//             <h5>Your QR Code</h5>
-//             <img
-//               src={qrCodeImage}
-//               alt="QR Code"
-//               style={{ width: 150, height: 150 }}
-//             />
-//           </div>
-//         )}
-
-//         {/* Email + Description */}
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="email">
-//             <Form.Label>Email</Form.Label>
-//             <Form.Control
-//               type="email"
-//               value={formData.email}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, email: e.target.value })
-//               }
-//               isInvalid={!!formErrors.email}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.email}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="description">
-//             <Form.Label>Description</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.description}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, description: e.target.value })
-//               }
-//               isInvalid={!!formErrors.description}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.description}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         {/* User Type + Experience */}
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="userType">
-//             <Form.Label>User Type</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.userType}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, userType: e.target.value })
-//               }
-//               isInvalid={!!formErrors.userType}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.userType}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="experienceLevel">
-//             <Form.Label>Experience Level</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.experienceLevel}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, experienceLevel: e.target.value })
-//               }
-//               isInvalid={!!formErrors.experienceLevel}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.experienceLevel}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         {/* Location + Available From */}
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="location">
-//             <Form.Label>Location</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.location}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, location: e.target.value })
-//               }
-//               isInvalid={!!formErrors.location}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.location}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="availableFrom">
-//             <Form.Label>Available From</Form.Label>
-//             <Form.Control
-//               type="date"
-//               value={formData.availableFrom}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, availableFrom: e.target.value })
-//               }
-//               isInvalid={!!formErrors.availableFrom}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.availableFrom}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         {/* Phone + License */}
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="phoneNumber">
-//             <Form.Label>Phone Number</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.phoneNumber}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, phoneNumber: e.target.value })
-//               }
-//               isInvalid={!!formErrors.phoneNumber}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.phoneNumber}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="driversLicense">
-//             <Form.Label>Driver’s License</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.driversLicense}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, driversLicense: e.target.value })
-//               }
-//               isInvalid={!!formErrors.driversLicense}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.driversLicense}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         {/* Comments */}
-//         <Form.Group className="mb-3" controlId="comments">
-//           <Form.Label>Comments</Form.Label>
-//           <Form.Control
-//             as="textarea"
-//             rows={3}
-//             value={formData.comments}
-//             onChange={(e) =>
-//               setFormData({ ...formData, comments: e.target.value })
-//             }
-//             isInvalid={!!formErrors.comments}
-//           />
-//           <Form.Control.Feedback type="invalid">
-//             {formErrors.comments}
-//           </Form.Control.Feedback>
-//         </Form.Group>
-
-//         {/* Password Update */}
-//         <Form.Group className="mb-4" controlId="newPassword">
-//           <Form.Label>New Password</Form.Label>
-//           <Form.Control
-//             type="password"
-//             value={formData.newPassword}
-//             onChange={(e) =>
-//               setFormData({ ...formData, newPassword: e.target.value })
-//             }
-//           />
-//         </Form.Group>
-
-//         {/* Buttons */}
-//         <div className="d-flex justify-content-between">
-//           <Button
-//             type="submit"
-//             disabled={isSubmitting || loading}
-//             variant="primary"
-//           >
-//             {isSubmitting ? "Updating..." : "Update Profile"}
-//           </Button>
-//           <Link to="/user">
-//             <Button variant="outline-secondary">Cancel</Button>
-//           </Link>
-//         </div>
-//       </Form>
-//     </Card>
-//   );
-// };
-
-// export default ProfileUpdate;
-
-// import React, { useState, useEffect } from "react";
-// import axios from "axios";
-// import {
-//   Button,
-//   Col,
-//   Form,
-//   Row,
-//   Alert,
-//   Card,
-//   Spinner,
-// } from "react-bootstrap";
-
-// type User = {
-//   id: string;
-//   email: string;
-//   password?: string;
-//   description: string;
-//   userType: string;
-//   experienceLevel: string;
-//   location: string;
-//   availableFrom: string;
-//   newPassword?: string;
-//   profileImage?: string;
-//   phoneNumber: string;
-//   driversLicense: string;
-//   comments: string;
-//   qrCode?: string;
-// };
-
-// const ServerPort =
-//   process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
-
-// const CLOUDINARY_UPLOAD_URL = `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUDINARY_CLOUD_NAME}/image/upload`;
-// const CLOUDINARY_UPLOAD_PRESET = process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET;
-
-// const ProfileUpdate: React.FC = () => {
-//   const userId = localStorage.getItem("userId");
-
-//   const [formData, setFormData] = useState<User>({
-//     id: "",
-//     email: "",
-//     password: "",
-//     description: "",
-//     userType: "",
-//     experienceLevel: "",
-//     location: "",
-//     availableFrom: "",
-//     newPassword: "",
-//     profileImage: "",
-//     phoneNumber: "",
-//     driversLicense: "",
-//     comments: "",
-//     qrCode: "",
-//   });
-
-//   const [imagePreview, setImagePreview] = useState<string | null>(null);
-//   const [qrCodeImage, setQrCodeImage] = useState<string | null>(null);
-//   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
-//   const [loading, setLoading] = useState(false);
-//   const [isSubmitting, setIsSubmitting] = useState(false);
-//   const [error, setError] = useState<string | null>(null);
-//   const [successMessage, setSuccessMessage] = useState<string | null>(null);
-
-//   // -------------------------
-//   // LOAD USER PROFILE
-//   // -------------------------
-//   useEffect(() => {
-//     const fetchUserData = async () => {
-//       setLoading(true);
-
-//       try {
-//         const token = localStorage.getItem("token");
-//         if (!token) return setError("No token found.");
-
-//         const response = await axios.get(
-//           `${ServerPort}/api/user/view/${userId}`,
-//           { headers: { Authorization: `Bearer ${token}` } }
-//         );
-
-//         const user = response.data;
-
-//         setFormData({
-//           ...user,
-//           availableFrom: user.availableFrom?.split("T")[0] || "",
-//           password: "",
-//           newPassword: "",
-//         });
-
-//         setImagePreview(user.profileImage || null);
-//         setQrCodeImage(user.qrCode || null);
-//       } catch (err) {
-//         handleApiError(err);
-//       }
-
-//       setLoading(false);
-//     };
-
-//     if (userId) fetchUserData();
-//   }, [userId]);
-
-//   // -------------------------
-//   // IMAGE UPLOAD TO CLOUDINARY
-//   // -------------------------
-//   const handleImageUpload = async (file: File) => {
-//     setLoading(true);
-
-//     try {
-//       const data = new FormData();
-//       data.append("file", file);
-//       data.append("upload_preset", CLOUDINARY_UPLOAD_PRESET!);
-
-//       const uploadRes = await axios.post(CLOUDINARY_UPLOAD_URL, data);
-//       const secureUrl = uploadRes.data.secure_url;
-
-//       setFormData((prev) => ({ ...prev, profileImage: secureUrl }));
-//       setImagePreview(secureUrl);
-//     } catch (err) {
-//       setError("Image upload failed. Try again.");
-//     }
-
-//     setLoading(false);
-//   };
-
-//   // -------------------------
-//   // FORM VALIDATION
-//   // -------------------------
-//   const validateForm = () => {
-//     const errors: Record<string, string> = {};
-//     const required = [
-//       "email",
-//       "description",
-//       "userType",
-//       "experienceLevel",
-//       "location",
-//       "availableFrom",
-//       "phoneNumber",
-//       "driversLicense",
-//       "comments",
-//     ];
-
-//     required.forEach((field) => {
-//       // @ts-ignore
-//       if (!formData[field]) errors[field] = "This field is required";
-//     });
-
-//     if (formData.email && !/\S+@\S+\.\S+/.test(formData.email))
-//       errors.email = "Invalid email";
-
-//     setFormErrors(errors);
-
-//     return Object.keys(errors).length === 0;
-//   };
-
-//   // -------------------------
-//   // UPDATE USER
-//   // -------------------------
-//   const handleUserUpdate = async (e: React.FormEvent) => {
-//     e.preventDefault();
-//     if (!validateForm()) return;
-
-//     setLoading(true);
-//     setIsSubmitting(true);
-//     setError(null);
-//     setSuccessMessage(null);
-
-//     try {
-//       const token = localStorage.getItem("token");
-
-//       const payload = { ...formData };
-//       if (!formData.newPassword) delete payload.password;
-
-//       const res = await axios.put(
-//         `${ServerPort}/api/user/update/${userId}`,
-//         payload,
-//         {
-//           headers: {
-//             Authorization: `Bearer ${token}`,
-//             "Content-Type": "application/json",
-//           },
-//         }
-//       );
-
-//       if (res.status === 200) {
-//         setSuccessMessage("Profile successfully updated!");
-//         setQrCodeImage(res.data.qrCode || qrCodeImage);
-//         setFormData((prev) => ({ ...prev, newPassword: "" }));
-//       }
-//     } catch (err) {
-//       handleApiError(err);
-//     }
-
-//     setIsSubmitting(false);
-//     setLoading(false);
-//   };
-
-//   // -------------------------
-//   // ERROR HANDLER
-//   // -------------------------
-//   const handleApiError = (error: any) => {
-//     if (axios.isAxiosError(error)) {
-//       setError(error.response?.data?.message || "Something went wrong.");
-//     } else {
-//       setError("An unexpected error occurred.");
-//     }
-//   };
-
-//   // -------------------------
-//   // UI RENDER
-//   // -------------------------
-//   return (
-//     <Card className="p-4 shadow-lg rounded-4">
-//       <h2 className="text-center mb-3">Update Profile</h2>
-
-//       {loading && (
-//         <Spinner animation="border" className="d-block mx-auto my-2" />
-//       )}
-//       {error && <Alert variant="danger">{error}</Alert>}
-//       {successMessage && <Alert variant="success">{successMessage}</Alert>}
-
-//       <Form onSubmit={handleUserUpdate}>
-//         {/* PROFILE IMAGE UPLOAD */}
-//         <div className="text-center mb-4">
-//           <img
-//             src={
-//               imagePreview ||
-//               "https://via.placeholder.com/150?text=Upload+Profile+Image"
-//             }
-//             alt="Profile"
-//             style={{
-//               width: 130,
-//               height: 130,
-//               objectFit: "cover",
-//               borderRadius: "50%",
-//               border: "3px solid #ddd",
-//             }}
-//           />
-
-//           <Form.Control
-//             type="file"
-//             accept="image/*"
-//             className="mt-2"
-//             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-//               const file = e.target.files?.[0];
-//               if (file) handleImageUpload(file);
-//             }}
-//           />
-//         </div>
-
-//         {/* QR CODE */}
-//         {qrCodeImage && (
-//           <div className="text-center mb-4">
-//             <h5>Your QR Code</h5>
-//             <img src={qrCodeImage} alt="QR Code" width={150} height={150} />
-//           </div>
-//         )}
-
-//         {/* FORM ROWS */}
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6">
-//             <Form.Label>Email</Form.Label>
-//             <Form.Control
-//               type="email"
-//               value={formData.email}
-//               isInvalid={!!formErrors.email}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, email: e.target.value })
-//               }
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.email}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6">
-//             <Form.Label>Description</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.description}
-//               isInvalid={!!formErrors.description}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, description: e.target.value })
-//               }
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.description}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6">
-//             <Form.Label>User Type</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.userType}
-//               isInvalid={!!formErrors.userType}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, userType: e.target.value })
-//               }
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.userType}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6">
-//             <Form.Label>Experience Level</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.experienceLevel}
-//               isInvalid={!!formErrors.experienceLevel}
-//               onChange={(e) =>
-//                 setFormData({
-//                   ...formData,
-//                   experienceLevel: e.target.value,
-//                 })
-//               }
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.experienceLevel}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6">
-//             <Form.Label>Location</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.location}
-//               isInvalid={!!formErrors.location}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, location: e.target.value })
-//               }
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.location}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6">
-//             <Form.Label>Available From</Form.Label>
-//             <Form.Control
-//               type="date"
-//               value={formData.availableFrom}
-//               isInvalid={!!formErrors.availableFrom}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, availableFrom: e.target.value })
-//               }
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.availableFrom}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6">
-//             <Form.Label>Phone Number</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.phoneNumber}
-//               isInvalid={!!formErrors.phoneNumber}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, phoneNumber: e.target.value })
-//               }
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.phoneNumber}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6">
-//             <Form.Label>Driver’s License</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.driversLicense}
-//               isInvalid={!!formErrors.driversLicense}
-//               onChange={(e) =>
-//                 setFormData({
-//                   ...formData,
-//                   driversLicense: e.target.value,
-//                 })
-//               }
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.driversLicense}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Form.Group className="mb-3">
-//           <Form.Label>Comments</Form.Label>
-//           <Form.Control
-//             as="textarea"
-//             rows={3}
-//             value={formData.comments}
-//             isInvalid={!!formErrors.comments}
-//             onChange={(e) =>
-//               setFormData({ ...formData, comments: e.target.value })
-//             }
-//           />
-//           <Form.Control.Feedback type="invalid">
-//             {formErrors.comments}
-//           </Form.Control.Feedback>
-//         </Form.Group>
-
-//         <Form.Group className="mb-4">
-//           <Form.Label>New Password</Form.Label>
-//           <Form.Control
-//             type="password"
-//             value={formData.newPassword}
-//             onChange={(e) =>
-//               setFormData({ ...formData, newPassword: e.target.value })
-//             }
-//           />
-//         </Form.Group>
-
-//         <div className="d-flex justify-content-center">
-//           <Button
-//             type="submit"
-//             disabled={isSubmitting}
-//             className="px-5 py-2"
-//             variant="primary"
-//           >
-//             {isSubmitting ? "Updating..." : "Update Profile"}
-//           </Button>
-//         </div>
-//       </Form>
-//     </Card>
-//   );
-// };
-
-// export default ProfileUpdate;
-
-// import React, { useEffect, useState } from "react";
-// import axios from "axios";
-// import {
-//   Button,
-//   Col,
-//   Form,
-//   Row,
-//   Alert,
-//   Card,
-//   Spinner,
-// } from "react-bootstrap";
-// import { Link } from "react-router-dom";
-
-// type User = {
-//   id: string;
-//   email: string;
-//   password?: string;
-//   description: string;
-//   userType: string;
-//   experienceLevel: string;
-//   location: string;
-//   availableFrom: string;
-//   newPassword?: string;
-//   profileImage?: string;
-//   phoneNumber: string;
-//   driversLicense: string;
-//   comments: string;
-//   qrCode?: string;
-// };
-
-// const ServerPort =
-//   process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
-
-// const ProfileUpdate: React.FC = () => {
-//   const userId = localStorage.getItem("userId") || "";
-
-//   const [formData, setFormData] = useState<User>({
-//     id: "",
-//     email: "",
-//     password: "",
-//     description: "",
-//     userType: "",
-//     experienceLevel: "",
-//     location: "",
-//     availableFrom: "",
-//     newPassword: "",
-//     profileImage: "",
-//     phoneNumber: "",
-//     driversLicense: "",
-//     comments: "",
-//     qrCode: "",
-//   });
-
-//   const [selectedFile, setSelectedFile] = useState<File | null>(null);
-//   const [imagePreview, setImagePreview] = useState<string | null>(null);
-//   const [qrCodeImage, setQrCodeImage] = useState<string | null>(null);
-//   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
-//   const [loading, setLoading] = useState(false);
-//   const [isSubmitting, setIsSubmitting] = useState(false);
-//   const [error, setError] = useState<string | null>(null);
-//   const [successMessage, setSuccessMessage] = useState<string | null>(null);
-
-//   // load user profile
-//   useEffect(() => {
-//     const fetchUserData = async () => {
-//       setLoading(true);
-//       try {
-//         const token = localStorage.getItem("token");
-//         if (!token) {
-//           setError("No token found.");
-//           setLoading(false);
-//           return;
-//         }
-
-//         const res = await axios.get(`${ServerPort}/api/user/view/${userId}`, {
-//           headers: { Authorization: `Bearer ${token}` },
-//         });
-
-//         if (res.status === 200) {
-//           const user = res.data;
-//           setFormData({
-//             ...user,
-//             availableFrom: user.availableFrom?.split("T")[0] || "",
-//             password: "",
-//             newPassword: "",
-//           });
-//           setImagePreview(user.profileImage || null);
-//           setQrCodeImage(user.qrPNG || user.qrCode || null);
-//         } else {
-//           setError("Failed to fetch user data.");
-//         }
-//       } catch (err) {
-//         handleApiError(err);
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     if (userId) fetchUserData();
-//     // eslint-disable-next-line react-hooks/exhaustive-deps
-//   }, [userId]);
-
-//   // cleanup object URL when component unmounts / file changes
-//   useEffect(() => {
-//     return () => {
-//       if (imagePreview && imagePreview.startsWith("blob:")) {
-//         URL.revokeObjectURL(imagePreview);
-//       }
-//     };
-//   }, [imagePreview]);
-
-//   // handle native file input change (use plain input to avoid bootstrap issues)
-//   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-//     const file = e.target.files?.[0] ?? null;
-//     if (file) {
-//       // revoke previous blob url if any
-//       if (imagePreview && imagePreview.startsWith("blob:")) {
-//         URL.revokeObjectURL(imagePreview);
-//       }
-//       setSelectedFile(file);
-//       setImagePreview(URL.createObjectURL(file));
-//       // don't mutate formData.profileImage here — backend will return permanent URL
-//     } else {
-//       setSelectedFile(null);
-//     }
-//   };
-
-//   const validateForm = () => {
-//     const errors: Record<string, string> = {};
-//     const required = [
-//       "email",
-//       "description",
-//       "userType",
-//       "experienceLevel",
-//       "location",
-//       "availableFrom",
-//       "phoneNumber",
-//       "driversLicense",
-//       "comments",
-//     ] as const;
-
-//     for (const field of required) {
-//       // @ts-ignore
-//       if (!formData[field]) errors[field] = "This field is required";
-//     }
-
-//     if (formData.email && !/\S+@\S+\.\S+/.test(formData.email)) {
-//       errors.email = "Invalid email";
-//     }
-
-//     setFormErrors(errors);
-//     return Object.keys(errors).length === 0;
-//   };
-
-//   // Submit: if selectedFile exists -> send multipart/form-data to backend,
-//   // otherwise send JSON. Backend should accept multipart and handle saving to Cloudinary.
-//   const handleUserUpdate = async (e: React.FormEvent) => {
-//     e.preventDefault();
-//     setError(null);
-//     setSuccessMessage(null);
-
-//     if (!validateForm()) return;
-
-//     setLoading(true);
-//     setIsSubmitting(true);
-
-//     try {
-//       const token = localStorage.getItem("token");
-//       if (!token) throw new Error("No token - please sign in.");
-
-//       if (selectedFile) {
-//         // send multipart to backend; backend must use multer to accept `profileImage`
-//         const form = new FormData();
-
-//         // append scalar fields
-//         Object.entries(formData).forEach(([k, v]) => {
-//           if (v !== undefined && v !== null) form.append(k, String(v));
-//         });
-
-//         form.append("profileImage", selectedFile);
-
-//         const res = await axios.put(
-//           `${ServerPort}/api/user/update/${userId}`,
-//           form,
-//           {
-//             headers: {
-//               Authorization: `Bearer ${token}`,
-//               "Content-Type": "multipart/form-data",
-//             },
-//           }
-//         );
-
-//         if (res.status === 200) {
-//           const updatedUser = res.data.user ?? res.data;
-//           setFormData((prev) => ({
-//             ...prev,
-//             ...updatedUser,
-//             newPassword: "",
-//           }));
-//           // server should return permanent image URL (profileImage)
-//           setImagePreview(updatedUser.profileImage || imagePreview);
-//           setQrCodeImage(updatedUser.qrPNG || updatedUser.qrCode || qrCodeImage);
-//           setSuccessMessage("Profile updated and image uploaded.");
-//           setSelectedFile(null);
-//         } else {
-//           setError("Unexpected server response when uploading image.");
-//         }
-//       } else {
-//         // no file selected — send JSON update
-//         const payload: Partial<User> = { ...formData };
-//         if (!formData.newPassword) delete payload.password;
-
-//         const res = await axios.put(
-//           `${ServerPort}/api/user/update/${userId}`,
-//           payload,
-//           {
-//             headers: {
-//               Authorization: `Bearer ${token}`,
-//               "Content-Type": "application/json",
-//             },
-//           }
-//         );
-
-//         if (res.status === 200) {
-//           const updatedUser = res.data.user ?? res.data;
-//           setFormData((prev) => ({
-//             ...prev,
-//             ...updatedUser,
-//             newPassword: "",
-//           }));
-//           setImagePreview(updatedUser.profileImage || imagePreview);
-//           setQrCodeImage(updatedUser.qrPNG || updatedUser.qrCode || qrCodeImage);
-//           setSuccessMessage("Profile updated.");
-//         } else {
-//           setError("Unexpected server response when updating profile.");
-//         }
-//       }
-//     } catch (err) {
-//       handleApiError(err);
-//     } finally {
-//       setIsSubmitting(false);
-//       setLoading(false);
-//     }
-//   };
-
-//   const handleApiError = (err: any) => {
-//     if (axios.isAxiosError(err)) {
-//       const msg =
-//         (err.response && (err.response.data?.message || err.response.data)) ||
-//         err.message ||
-//         "Server error";
-//       setError(String(msg));
-//     } else {
-//       setError(String(err || "Unknown error"));
-//     }
-//   };
-
-//   return (
-//     <Card className="p-4 shadow-lg rounded-4">
-//       <h2 className="text-center mb-3">Update Profile</h2>
-
-//       {loading && (
-//         <Spinner animation="border" className="d-block mx-auto my-2" />
-//       )}
-//       {error && <Alert variant="danger">{error}</Alert>}
-//       {successMessage && <Alert variant="success">{successMessage}</Alert>}
-
-//       <Form onSubmit={handleUserUpdate} encType="multipart/form-data">
-//         {/* IMAGE PREVIEW + NATIVE FILE INPUT (avoid Form.Control for file) */}
-//         <div className="text-center mb-4">
-//           <img
-//             src={
-//               imagePreview ||
-//               formData.profileImage ||
-//               "https://via.placeholder.com/150?text=Upload+Profile+Image"
-//             }
-//             alt="Profile"
-//             style={{
-//               width: 130,
-//               height: 130,
-//               objectFit: "cover",
-//               borderRadius: "50%",
-//               border: "3px solid #ddd",
-//             }}
-//           />
-//           <div style={{ marginTop: 8 }}>
-//             <input
-//               type="file"
-//               accept="image/*"
-//               onChange={handleFileChange}
-//               style={{ display: "inline-block" }}
-//             />
-//             {selectedFile && (
-//               <div style={{ marginTop: 6, fontSize: 13, color: "#555" }}>
-//                 Selected: {selectedFile.name}
-//               </div>
-//             )}
-//           </div>
-//         </div>
-
-//         {/* QR CODE */}
-//         {qrCodeImage && (
-//           <div className="text-center mb-4">
-//             <h5>Your QR Code</h5>
-//             <img
-//               src={qrCodeImage}
-//               alt="QR Code"
-//               width={150}
-//               height={150}
-//               style={{ objectFit: "contain" }}
-//             />
-//           </div>
-//         )}
-
-//         {/* FORM FIELDS */}
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="email">
-//             <Form.Label>Email</Form.Label>
-//             <Form.Control
-//               type="email"
-//               value={formData.email}
-//               isInvalid={!!formErrors.email}
-//               onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.email}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="description">
-//             <Form.Label>Description</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.description}
-//               isInvalid={!!formErrors.description}
-//               onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.description}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="userType">
-//             <Form.Label>User Type</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.userType}
-//               isInvalid={!!formErrors.userType}
-//               onChange={(e) => setFormData({ ...formData, userType: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.userType}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="experienceLevel">
-//             <Form.Label>Experience Level</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.experienceLevel}
-//               isInvalid={!!formErrors.experienceLevel}
-//               onChange={(e) =>
-//                 setFormData({ ...formData, experienceLevel: e.target.value })
-//               }
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.experienceLevel}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="location">
-//             <Form.Label>Location</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.location}
-//               isInvalid={!!formErrors.location}
-//               onChange={(e) => setFormData({ ...formData, location: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.location}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="availableFrom">
-//             <Form.Label>Available From</Form.Label>
-//             <Form.Control
-//               type="date"
-//               value={formData.availableFrom}
-//               isInvalid={!!formErrors.availableFrom}
-//               onChange={(e) => setFormData({ ...formData, availableFrom: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.availableFrom}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="phoneNumber">
-//             <Form.Label>Phone Number</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.phoneNumber}
-//               isInvalid={!!formErrors.phoneNumber}
-//               onChange={(e) => setFormData({ ...formData, phoneNumber: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.phoneNumber}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="driversLicense">
-//             <Form.Label>Driver’s License</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.driversLicense}
-//               isInvalid={!!formErrors.driversLicense}
-//               onChange={(e) => setFormData({ ...formData, driversLicense: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">
-//               {formErrors.driversLicense}
-//             </Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Form.Group className="mb-3" controlId="comments">
-//           <Form.Label>Comments</Form.Label>
-//           <Form.Control
-//             as="textarea"
-//             rows={3}
-//             value={formData.comments}
-//             isInvalid={!!formErrors.comments}
-//             onChange={(e) => setFormData({ ...formData, comments: e.target.value })}
-//           />
-//           <Form.Control.Feedback type="invalid">
-//             {formErrors.comments}
-//           </Form.Control.Feedback>
-//         </Form.Group>
-
-//         <Form.Group className="mb-4" controlId="newPassword">
-//           <Form.Label>New Password</Form.Label>
-//           <Form.Control
-//             type="password"
-//             value={formData.newPassword}
-//             onChange={(e) => setFormData({ ...formData, newPassword: e.target.value })}
-//           />
-//         </Form.Group>
-
-//         <div className="d-flex justify-content-between">
-//           <Button type="submit" disabled={isSubmitting} variant="primary">
-//             {isSubmitting ? "Updating..." : "Update Profile"}
-//           </Button>
-//           <Link to="/user">
-//             <Button variant="outline-secondary">Cancel</Button>
-//           </Link>
-//         </div>
-//       </Form>
-//     </Card>
-//   );
-// };
-
-// export default ProfileUpdate;
-
-
-// import React, { useEffect, useState } from "react";
-// import axios from "axios";
-// import { Button, Col, Form, Row, Alert, Card, Spinner } from "react-bootstrap";
-// import { Link } from "react-router-dom";
-
-// type User = {
-//   id: string;
-//   email: string;
-//   password?: string;
-//   newPassword?: string;
-//   description: string;
-//   userType: string;
-//   experienceLevel: string;
-//   location: string;
-//   availableFrom: string;
-//   profileImage?: string;
-//   phoneNumber: string;
-//   driversLicense: string;
-//   comments: string;
-//   qrCode?: string;
-// };
-
-// const ServerPort = process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
-
-// const ProfileUpdate: React.FC = () => {
-//   const userId = localStorage.getItem("userId") || "";
-
-//   const [formData, setFormData] = useState<User>({
-//     id: "",
-//     email: "",
-//     password: "",
-//     newPassword: "",
-//     description: "",
-//     userType: "",
-//     experienceLevel: "",
-//     location: "",
-//     availableFrom: "",
-//     profileImage: "",
-//     phoneNumber: "",
-//     driversLicense: "",
-//     comments: "",
-//     qrCode: "",
-//   });
-
-//   const [imagePreview, setImagePreview] = useState<string | null>(null);
-//   const [selectedFile, setSelectedFile] = useState<File | null>(null);
-//   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
-//   const [loading, setLoading] = useState(false);
-//   const [isSubmitting, setIsSubmitting] = useState(false);
-//   const [error, setError] = useState<string | null>(null);
-//   const [successMessage, setSuccessMessage] = useState<string | null>(null);
-
-//   useEffect(() => {
-//     const fetchUserData = async () => {
-//       setLoading(true);
-//       try {
-//         const token = localStorage.getItem("token");
-//         if (!token) {
-//           setError("No token found.");
-//           setLoading(false);
-//           return;
-//         }
-
-//         const res = await axios.get(`${ServerPort}/api/user/view/${userId}`, {
-//           headers: { Authorization: `Bearer ${token}` },
-//         });
-
-//         if (res.status === 200) {
-//           const user = res.data;
-//           setFormData({
-//             ...user,
-//             availableFrom: user.availableFrom?.split("T")[0] || "",
-//             password: "",
-//             newPassword: "",
-//           });
-//           setImagePreview(user.profileImage || null);
-//         } else {
-//           setError("Failed to fetch user data.");
-//         }
-//       } catch (err) {
-//         handleApiError(err);
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     if (userId) fetchUserData();
-//   }, [userId]);
-
-//   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-//     const file = e.target.files?.[0] ?? null;
-//     if (file) {
-//       setSelectedFile(file);
-//       setImagePreview(URL.createObjectURL(file));
-//     } else {
-//       setSelectedFile(null);
-//     }
-//   };
-
-//   const fileToBase64 = (file: File): Promise<string> =>
-//     new Promise((resolve, reject) => {
-//       const reader = new FileReader();
-//       reader.readAsDataURL(file);
-//       reader.onload = () => resolve(reader.result as string);
-//       reader.onerror = (err) => reject(err);
-//     });
-
-//   const validateForm = () => {
-//     const errors: Record<string, string> = {};
-//     const requiredFields: (keyof User)[] = [
-//       "email",
-//       "description",
-//       "userType",
-//       "experienceLevel",
-//       "location",
-//       "availableFrom",
-//       "phoneNumber",
-//       "driversLicense",
-//       "comments",
-//     ];
-
-//     requiredFields.forEach((field) => {
-//       if (!formData[field]) errors[field] = "This field is required";
-//     });
-
-//     if (formData.email && !/\S+@\S+\.\S+/.test(formData.email)) {
-//       errors.email = "Invalid email";
-//     }
-
-//     setFormErrors(errors);
-//     return Object.keys(errors).length === 0;
-//   };
-
-//   const handleUserUpdate = async (e: React.FormEvent) => {
-//     e.preventDefault();
-//     setError(null);
-//     setSuccessMessage(null);
-
-//     if (!validateForm()) return;
-
-//     setLoading(true);
-//     setIsSubmitting(true);
-
-//     try {
-//       const token = localStorage.getItem("token");
-//       if (!token) throw new Error("No token found");
-
-//       const payload: any = { ...formData };
-
-//       if (!formData.newPassword) delete payload.password;
-
-//       if (selectedFile) {
-//         payload.profileImage = await fileToBase64(selectedFile);
-//       }
-
-//       const res = await axios.put(
-//         `${ServerPort}/api/user/update/${userId}`,
-//         payload,
-//         { headers: { Authorization: `Bearer ${token}` } }
-//       );
-
-//       if (res.status === 200) {
-//         const updatedUser = res.data.user ?? res.data;
-//         setFormData((prev) => ({ ...prev, ...updatedUser, newPassword: "" }));
-//         setImagePreview(updatedUser.profileImage || imagePreview);
-//         setSelectedFile(null);
-//         setSuccessMessage("Profile updated and image uploaded.");
-//       } else {
-//         setError("Unexpected server response.");
-//       }
-//     } catch (err) {
-//       handleApiError(err);
-//     } finally {
-//       setLoading(false);
-//       setIsSubmitting(false);
-//     }
-//   };
-
-//   const handleApiError = (err: any) => {
-//     if (axios.isAxiosError(err)) {
-//       const msg =
-//         (err.response && (err.response.data?.message || err.response.data)) ||
-//         err.message ||
-//         "Server error";
-//       setError(String(msg));
-//     } else {
-//       setError(String(err || "Unknown error"));
-//     }
-//   };
-
-//   return (
-//     <Card className="p-4 shadow-lg rounded-4">
-//       <h2 className="text-center mb-3">Update Profile</h2>
-
-//       {loading && <Spinner animation="border" className="d-block mx-auto my-2" />}
-//       {error && <Alert variant="danger">{error}</Alert>}
-//       {successMessage && <Alert variant="success">{successMessage}</Alert>}
-
-//       <Form onSubmit={handleUserUpdate}>
-//         {/* Profile Image */}
-//         <div className="text-center mb-4">
-//           <img
-//             src={imagePreview || formData.profileImage || "https://via.placeholder.com/150?text=Profile"}
-//             alt="Profile"
-//             style={{ width: 130, height: 130, borderRadius: "50%", objectFit: "cover", border: "3px solid #ddd" }}
-//           />
-//           <div style={{ marginTop: 8 }}>
-//             <input type="file" accept="image/*" onChange={handleFileChange} />
-//             {selectedFile && <div style={{ marginTop: 6, fontSize: 13 }}>{selectedFile.name}</div>}
-//           </div>
-//         </div>
-
-//         {/* ALL FORM FIELDS */}
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="email">
-//             <Form.Label>Email</Form.Label>
-//             <Form.Control
-//               type="email"
-//               value={formData.email}
-//               isInvalid={!!formErrors.email}
-//               onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">{formErrors.email}</Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="description">
-//             <Form.Label>Description</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.description}
-//               isInvalid={!!formErrors.description}
-//               onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">{formErrors.description}</Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="userType">
-//             <Form.Label>User Type</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.userType}
-//               isInvalid={!!formErrors.userType}
-//               onChange={(e) => setFormData({ ...formData, userType: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">{formErrors.userType}</Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="experienceLevel">
-//             <Form.Label>Experience Level</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.experienceLevel}
-//               isInvalid={!!formErrors.experienceLevel}
-//               onChange={(e) => setFormData({ ...formData, experienceLevel: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">{formErrors.experienceLevel}</Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="location">
-//             <Form.Label>Location</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.location}
-//               isInvalid={!!formErrors.location}
-//               onChange={(e) => setFormData({ ...formData, location: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">{formErrors.location}</Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="availableFrom">
-//             <Form.Label>Available From</Form.Label>
-//             <Form.Control
-//               type="date"
-//               value={formData.availableFrom}
-//               isInvalid={!!formErrors.availableFrom}
-//               onChange={(e) => setFormData({ ...formData, availableFrom: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">{formErrors.availableFrom}</Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Row className="mb-3">
-//           <Form.Group as={Col} md="6" controlId="phoneNumber">
-//             <Form.Label>Phone Number</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.phoneNumber}
-//               isInvalid={!!formErrors.phoneNumber}
-//               onChange={(e) => setFormData({ ...formData, phoneNumber: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">{formErrors.phoneNumber}</Form.Control.Feedback>
-//           </Form.Group>
-
-//           <Form.Group as={Col} md="6" controlId="driversLicense">
-//             <Form.Label>Driver’s License</Form.Label>
-//             <Form.Control
-//               type="text"
-//               value={formData.driversLicense}
-//               isInvalid={!!formErrors.driversLicense}
-//               onChange={(e) => setFormData({ ...formData, driversLicense: e.target.value })}
-//             />
-//             <Form.Control.Feedback type="invalid">{formErrors.driversLicense}</Form.Control.Feedback>
-//           </Form.Group>
-//         </Row>
-
-//         <Form.Group className="mb-3" controlId="comments">
-//           <Form.Label>Comments</Form.Label>
-//           <Form.Control
-//             as="textarea"
-//             rows={3}
-//             value={formData.comments}
-//             isInvalid={!!formErrors.comments}
-//             onChange={(e) => setFormData({ ...formData, comments: e.target.value })}
-//           />
-//           <Form.Control.Feedback type="invalid">{formErrors.comments}</Form.Control.Feedback>
-//         </Form.Group>
-
-//         <Form.Group className="mb-4" controlId="newPassword">
-//           <Form.Label>New Password</Form.Label>
-//           <Form.Control
-//             type="password"
-//             value={formData.newPassword}
-//             onChange={(e) => setFormData({ ...formData, newPassword: e.target.value })}
-//           />
-//         </Form.Group>
-
-//         <div className="d-flex justify-content-between">
-//           <Button type="submit" disabled={isSubmitting} variant="primary">
-//             {isSubmitting ? "Updating..." : "Update Profile"}
-//           </Button>
-//           <Link to="/user">
-//             <Button variant="outline-secondary">Cancel</Button>
-//           </Link>
-//         </div>
-//       </Form>
-//     </Card>
-//   );
-// };
-
-// export default ProfileUpdate;
-
-// src/pages/ProfileUpdate.tsx
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import { Button, Col, Form, Row, Alert, Card, Spinner } from "react-bootstrap";
diff --git a/client/src/containers/User/UserDash/Dash.tsx b/client/src/containers/User/UserDash/Dash.tsx
index f40c394..e97828a 100644
--- a/client/src/containers/User/UserDash/Dash.tsx
+++ b/client/src/containers/User/UserDash/Dash.tsx
@@ -1,792 +1,3 @@
-// import React, { useEffect, useState } from "react";
-// import { Link } from "react-router-dom";
-// import {
-//   PieChart,
-//   Pie,
-//   BarChart,
-//   Bar,
-//   Brush,
-//   ReferenceLine,
-//   XAxis,
-//   YAxis,
-//   CartesianGrid,
-//   Tooltip,
-//   Legend,
-// } from "recharts";
-// import axios from "axios";
-// import "./Dash.css"; // Make sure to update styles in this file
-
-// const ServerPort =
-//   process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
-
-// const Dash = () => {
-//   const [userData, setUserData] = useState<any>(null);
-//   const [loading, setLoading] = useState<boolean>(true);
-//   const [error, setError] = useState<string>("");
-
-//   useEffect(() => {
-//     const userId = localStorage.getItem("userId"); // Get user ID from local storage
-//     const fetchUserData = async () => {
-//       try {
-//         const res = await axios.get(`${ServerPort}/api/user/view/${userId}`);
-//         setUserData(res.data);
-//       } catch (error) {
-//         console.error("Error fetching user data:", error);
-//         setError("Failed to load user data.");
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     if (userId) {
-//       fetchUserData();
-//     } else {
-//       setError("User ID not found in local storage.");
-//       setLoading(false);
-//     }
-//   }, []);
-
-//   const data = [
-//     // Your existing data for bar chart
-//     { name: "1", uv: 300, pv: 456 },
-//     { name: "2", uv: -145, pv: 230 },
-//     // ... other data points
-//   ];
-
-//   const data2 = [
-//     { name: "Group A", value: 400 },
-//     { name: "Group B", value: 300 },
-//     // ... other data points
-//   ];
-
-//   if (loading) {
-//     return <div className="loading">Loading user data...</div>;
-//   }
-
-//   if (error) {
-//     return <div className="error">{error}</div>;
-//   }
-
-//   return (
-//     <>
-//       <div className="dashboard-header">
-//         <h1>Dashboard</h1>
-//       </div>
-
-//       <div className="user-info">
-//         <h2>User Information</h2>
-//         <p><strong>Name:</strong> {userData.firstName} {userData.lastName}</p>
-//         <p><strong>Email:</strong> {userData.email}</p>
-//         <p><strong>Phone Number:</strong> {userData.phoneNumber || "Not provided"}</p>
-//         <p><strong>Address:</strong> {userData.address || "Not provided"}</p>
-//         <p><strong>Available Status:</strong> {userData.loadStatus}</p>
-//         <p><strong>Customer Since:</strong> {new Date(userData.availableFrom).toLocaleDateString()}</p>
-//         <p><strong>Type of Owner:</strong> {userData.userType}</p>
-//       </div>
-
-//       <div className="chart-container">
-//         <h2>Charts</h2>
-//         <div className="pie-charts">
-//           {Array(4)
-//             .fill(null)
-//             .map((_, index) => (
-//               <div key={index} className="pie-chart-wrapper">
-//                 <PieChart width={300} height={300} className="pie-chart">
-//                   <Pie
-//                     dataKey="value"
-//                     startAngle={180}
-//                     endAngle={0}
-//                     data={data2}
-//                     cx="50%"
-//                     cy="50%"
-//                     outerRadius={80}
-//                     fill="#8884d8"
-//                     label
-//                   />
-//                 </PieChart>
-//               </div>
-//             ))}
-//         </div>
-
-//         <div className="bar-chart-wrapper">
-//           <BarChart
-//             width={1000}
-//             height={400}
-//             data={data}
-//             margin={{
-//               top: 5,
-//               right: 30,
-//               left: 20,
-//               bottom: 5,
-//             }}
-//             className="bar-chart"
-//           >
-//             <CartesianGrid strokeDasharray="3 3" />
-//             <XAxis dataKey="name" />
-//             <YAxis />
-//             <Tooltip />
-//             <Legend verticalAlign="top" wrapperStyle={{ lineHeight: "40px" }} />
-//             <ReferenceLine y={0} stroke="#000" />
-//             <Brush dataKey="name" height={30} stroke="#8884d8" />
-//             <Bar dataKey="pv" fill="#8884d8" />
-//             <Bar dataKey="uv" fill="#82ca9d" />
-//           </BarChart>
-//         </div>
-//       </div>
-
-//       <Link to="/User" className="home-link">
-//         Home
-//       </Link>
-//     </>
-//   );
-// };
-
-// export default Dash;
-
-// import React, { useEffect, useState } from "react";
-// import { Link } from "react-router-dom";
-// import {
-//   PieChart,
-//   Pie,
-//   Cell,
-//   BarChart,
-//   Bar,
-//   XAxis,
-//   YAxis,
-//   CartesianGrid,
-//   Tooltip,
-//   Legend,
-//   ReferenceLine,
-//   Brush,
-// } from "recharts";
-// import axios from "axios";
-// import "./Dash.css";
-
-// const SERVER_PORT = process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
-
-// // Colors for pie charts
-// const PIE_COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
-
-// const Dash = () => {
-//   const [userData, setUserData] = useState<any>(null);
-//   const [loading, setLoading] = useState<boolean>(true);
-//   const [error, setError] = useState<string>("");
-
-//   // Fetch user data
-//   useEffect(() => {
-//     const userId = localStorage.getItem("userId");
-//     if (!userId) {
-//       setError("User ID not found in local storage.");
-//       setLoading(false);
-//       return;
-//     }
-
-//     const fetchUserData = async () => {
-//       try {
-//         const res = await axios.get(`${SERVER_PORT}/api/user/view/${userId}`);
-//         setUserData(res.data);
-//       } catch (err) {
-//         console.error("Error fetching user data:", err);
-//         setError("Failed to load user data.");
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     fetchUserData();
-//   }, []);
-
-//   if (loading) return <div className="loading">Loading user data...</div>;
-//   if (error) return <div className="error">{error}</div>;
-
-//   // Prepare chart data
-//   const barData = userData?.loadDetails?.map((load: any, idx: number) => ({
-//     name: `Load ${idx + 1}`,
-//     weight: load.weight || 0,
-//     value: load.value || 0,
-//   })) || [{ name: "No Data", weight: 0, value: 0 }];
-
-//   const pieData = [
-//     { name: "Available", value: userData.availableFrom ? 1 : 0 },
-//     { name: "Unavailable", value: userData.availableFrom ? 0 : 1 },
-//   ];
-
-//   return (
-//     <div className="dashboard-container">
-//       <header className="dashboard-header">
-//         <h1>Dashboard</h1>
-//         <p>Welcome back, {userData.firstName}!</p>
-//       </header>
-
-//       {/* User Info */}
-//       <section className="user-info">
-//         <h2>User Information</h2>
-//         <div className="info-grid">
-//           <div>
-//             <strong>Name:</strong> {userData.firstName} {userData.lastName}
-//           </div>
-//           <div>
-//             <strong>Email:</strong> {userData.email}
-//           </div>
-//           <div>
-//             <strong>Phone:</strong> {userData.phoneNumber || "Not provided"}
-//           </div>
-//           <div>
-//             <strong>Address:</strong> {userData.address || "Not provided"}
-//           </div>
-//           <div>
-//             <strong>Status:</strong> {userData.loadStatus || "N/A"}
-//           </div>
-//           <div>
-//             <strong>Customer Since:</strong>{" "}
-//             {userData.availableFrom
-//               ? new Date(userData.availableFrom).toLocaleDateString()
-//               : "N/A"}
-//           </div>
-//           <div>
-//             <strong>Type of Owner:</strong> {userData.userType || "N/A"}
-//           </div>
-//           <div>
-//             <strong>Experience Level:</strong> {userData.experienceLevel || "N/A"}
-//           </div>
-//           <div>
-//             <strong>Preferred Load:</strong> {userData.preferredLoadType || "N/A"}
-//           </div>
-//           <div>
-//             <strong>Company:</strong> {userData.company || "N/A"}
-//           </div>
-//           <div>
-//             <strong>Subscribed:</strong> {userData.subscribed ? "Yes" : "No"}
-//           </div>
-//           <div>
-//             <strong>Rating:</strong> {userData.rating || "N/A"}
-//           </div>
-//         </div>
-//       </section>
-
-//       {/* Charts */}
-//       <section className="chart-container">
-//         <h2>Analytics</h2>
-
-//         {/* Pie Chart */}
-//         <div className="pie-charts">
-//           <PieChart width={250} height={250}>
-//             <Pie
-//               data={pieData}
-//               dataKey="value"
-//               cx="50%"
-//               cy="50%"
-//               outerRadius={80}
-//               label
-//             >
-//               {pieData.map((entry, index) => (
-//                 <Cell key={`cell-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
-//               ))}
-//             </Pie>
-//             <Tooltip />
-//           </PieChart>
-//         </div>
-
-//         {/* Bar Chart */}
-//         <div className="bar-chart-wrapper">
-//           <BarChart
-//             width={900}
-//             height={400}
-//             data={barData}
-//             margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
-//           >
-//             <CartesianGrid strokeDasharray="3 3" />
-//             <XAxis dataKey="name" />
-//             <YAxis />
-//             <Tooltip />
-//             <Legend verticalAlign="top" />
-//             <ReferenceLine y={0} stroke="#000" />
-//             <Brush dataKey="name" height={30} stroke="#8884d8" />
-//             <Bar dataKey="weight" fill="#8884d8" />
-//             <Bar dataKey="value" fill="#82ca9d" />
-//           </BarChart>
-//         </div>
-//       </section>
-
-//       <Link to="/User" className="home-link">
-//         Back to Home
-//       </Link>
-//     </div>
-//   );
-// };
-
-// export default Dash;
-
-// import React, { useEffect, useState } from "react";
-// import { Link } from "react-router-dom";
-// import {
-//   PieChart,
-//   Pie,
-//   Cell,
-//   BarChart,
-//   Bar,
-//   XAxis,
-//   YAxis,
-//   CartesianGrid,
-//   Tooltip,
-//   Legend,
-//   ReferenceLine,
-//   Brush,
-// } from "recharts";
-// import axios from "axios";
-// import "./Dash.css";
-
-// const SERVER_PORT = process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
-
-// // Colors for pie charts
-// const PIE_COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
-
-// interface LoadData {
-//   weight: number;
-//   value: number;
-//   rating: number;
-// }
-
-// interface UserData {
-//   firstName: string;
-//   lastName: string;
-//   email: string;
-//   phoneNumber?: string;
-//   address?: string;
-//   loadStatus?: string;
-//   availableFrom?: string;
-//   userType?: string;
-//   experienceLevel?: string;
-//   preferredLoadType?: string;
-//   company?: string;
-//   subscribed?: boolean;
-//   rating?: number;
-//   profileImage?: string;
-//   loadDetails?: LoadData[];
-// }
-
-// const Dash: React.FC = () => {
-//   const [userData, setUserData] = useState<UserData | null>(null);
-//   const [loading, setLoading] = useState<boolean>(true);
-//   const [error, setError] = useState<string>("");
-
-//   useEffect(() => {
-//     const userId = localStorage.getItem("userId");
-//     if (!userId) {
-//       setError("User ID not found in local storage.");
-//       setLoading(false);
-//       return;
-//     }
-
-//     const fetchUserData = async () => {
-//       try {
-//         const res = await axios.get<UserData>(`${SERVER_PORT}/api/user/view/${userId}`);
-//         setUserData(res.data);
-//       } catch (err) {
-//         console.error("Error fetching user data:", err);
-//         setError("Failed to load user data.");
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     fetchUserData();
-//   }, []);
-
-//   if (loading) return <div className="loading">Loading user data...</div>;
-//   if (error) return <div className="error">{error}</div>;
-//   if (!userData) return <div className="error">No user data available.</div>;
-
-//   const barData: LoadData[] =
-//     userData?.loadDetails?.map((load) => ({
-//       weight: load.weight || 0,
-//       value: load.value || 0,
-//       rating: load.rating || 0,
-//     })) || [{ weight: 0, value: 0, rating: 0 }];
-
-//   const pieData = [
-//     { name: "Available", value: userData.availableFrom ? 1 : 0 },
-//     { name: "Unavailable", value: userData.availableFrom ? 0 : 1 },
-//   ];
-
-//   // Find top-rated load for highlight
-//   const topLoadIndex = barData.reduce((maxIdx: number, currentLoad: LoadData, idx: number, arr: LoadData[]) =>
-//     currentLoad.rating > arr[maxIdx].rating ? idx : maxIdx
-//   , 0);
-
-//   return (
-//     <div className="dashboard-container">
-//       <header className="dashboard-header">
-//         {userData.profileImage && (
-//           <img src={userData.profileImage} alt="Profile" className="profile-img" />
-//         )}
-//         <h1>Dashboard</h1>
-//         <p>Welcome back, {userData.firstName}!</p>
-//       </header>
-
-//       <section className="user-info">
-//         <h2>User Information</h2>
-//         <div className="info-grid">
-//           <div className="info-card">
-//             <strong>Name:</strong> {userData.firstName} {userData.lastName}
-//           </div>
-//           <div className="info-card">
-//             <strong>Email:</strong> {userData.email}
-//           </div>
-//           <div className="info-card">
-//             <strong>Phone:</strong> {userData.phoneNumber || "Not provided"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Address:</strong> {userData.address || "Not provided"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Status:</strong> {userData.loadStatus || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Customer Since:</strong>{" "}
-//             {userData.availableFrom ? new Date(userData.availableFrom).toLocaleDateString() : "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Type of Owner:</strong> {userData.userType || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Experience Level:</strong> {userData.experienceLevel || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Preferred Load:</strong> {userData.preferredLoadType || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Company:</strong> {userData.company || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Subscribed:</strong> {userData.subscribed ? "Yes" : "No"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Rating:</strong> {userData.rating || "N/A"}
-//           </div>
-//         </div>
-//       </section>
-
-//       <section className="chart-container">
-//         <h2>Analytics</h2>
-
-//         <div className="pie-charts">
-//           <PieChart width={250} height={250}>
-//             <Pie
-//               data={pieData}
-//               dataKey="value"
-//               cx="50%"
-//               cy="50%"
-//               outerRadius={80}
-//               label
-//             >
-//               {pieData.map((slice, index) => (
-//                 <Cell key={`cell-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
-//               ))}
-//             </Pie>
-//             <Tooltip />
-//           </PieChart>
-//         </div>
-
-//         <div className="bar-chart-wrapper">
-//           <BarChart
-//             width={900}
-//             height={400}
-//             data={barData}
-//             margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
-//           >
-//             <CartesianGrid strokeDasharray="3 3" />
-//             <XAxis dataKey="name" />
-//             <YAxis />
-//             <Tooltip />
-//             <Legend verticalAlign="top" />
-//             <ReferenceLine y={0} stroke="#000" />
-//             <Brush dataKey="name" height={30} stroke="#8884d8" />
-//             <Bar
-//               dataKey="weight"
-//               fill="#8884d8"
-//               name="Weight"
-//               maxBarSize={50}
-//               isAnimationActive
-//               label={{ position: "top" }}
-//             >
-//               {barData.map((_, idx) =>
-//                 idx === topLoadIndex ? <Cell key={`cell-${idx}`} fill="#FF8042" /> : null
-//               )}
-//             </Bar>
-//             <Bar
-//               dataKey="value"
-//               fill="#82ca9d"
-//               name="Value"
-//               maxBarSize={50}
-//               isAnimationActive
-//               label={{ position: "top" }}
-//             />
-//           </BarChart>
-//         </div>
-//       </section>
-
-//       <Link to="/User" className="home-link">
-//         Back to Home
-//       </Link>
-//     </div>
-//   );
-// };
-
-// export default Dash;
-
-// import React, { useEffect, useState } from "react";
-// import { Link } from "react-router-dom";
-// import {
-//   PieChart,
-//   Pie,
-//   Cell,
-//   BarChart,
-//   Bar,
-//   XAxis,
-//   YAxis,
-//   CartesianGrid,
-//   Tooltip,
-//   Legend,
-//   ReferenceLine,
-//   Brush,
-// } from "recharts";
-// import axios from "axios";
-// import "./Dash.css";
-
-// const SERVER_PORT = process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
-
-// const PIE_COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
-
-// interface LoadData {
-//   weight: number;
-//   value: number;
-//   rating: number;
-//   name?: string; // optional name for display on chart
-// }
-
-// interface UserData {
-//   firstName: string;
-//   lastName: string;
-//   email: string;
-//   phoneNumber?: string;
-//   address?: string;
-//   qrCode?: string;
-//   qrCodeId?: string;
-//   qrData?: string;
-//   qrPNG?: string;
-//   loadStatus?: string;
-//   availableFrom?: string;
-//   userType?: string;
-//   experienceLevel?: string;
-//   preferredLoadType?: string;
-//   company?: string;
-//   subscribed?: boolean;
-//   rating?: number;
-//   profileImage?: string;
-//   loadDetails?: LoadData[];
-// }
-
-// const Dash: React.FC = () => {
-//   const [userData, setUserData] = useState<UserData | null>(null);
-//   const [loading, setLoading] = useState<boolean>(true);
-//   const [error, setError] = useState<string>("");
-
-//   useEffect(() => {
-//     const userId = localStorage.getItem("userId");
-//     if (!userId) {
-//       setError("User ID not found in local storage.");
-//       setLoading(false);
-//       return;
-//     }
-
-//     const fetchUserData = async () => {
-//       try {
-//         const res = await axios.get<UserData>(`${SERVER_PORT}/api/user/view/${userId}`);
-//         setUserData(res.data);
-//       } catch (err) {
-//         console.error("Error fetching user data:", err);
-//         setError("Failed to load user data.");
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     fetchUserData();
-//   }, []);
-
-//   if (loading) return <div className="loading">Loading user data...</div>;
-//   if (error) return <div className="error">{error}</div>;
-//   if (!userData) return <div className="error">No user data available.</div>;
-
-//   // ✅ TypeScript knows userData is not null here
-//   const {
-//     firstName,
-//     lastName,
-//     email,
-//     phoneNumber,
-//     address,
-//     qrCode,
-//     qrCodeId,
-//     qrData,
-//     qrPNG,
-//     loadStatus,
-//     availableFrom,
-//     userType,
-//     experienceLevel,
-//     preferredLoadType,
-//     company,
-//     subscribed,
-//     rating,
-//     profileImage,
-//     loadDetails,
-//   } = userData;
-
-//   const barData: LoadData[] =
-//     loadDetails?.map((load, idx) => ({
-//       ...load,
-//       name: `Load ${idx + 1}`, // optional for x-axis
-//     })) || [{ weight: 0, value: 0, rating: 0, name: "N/A" }];
-
-//   const pieData = [
-//     { name: "Available", value: availableFrom ? 1 : 0 },
-//     { name: "Unavailable", value: availableFrom ? 0 : 1 },
-//   ];
-
-//   const topLoadIndex = barData.reduce(
-//     (maxIdx: number, currentLoad: LoadData, idx: number, arr: LoadData[]) =>
-//       currentLoad.rating > arr[maxIdx].rating ? idx : maxIdx,
-//     0
-//   );
-
-//   return (
-//     <div className="dashboard-container">
-//       <header className="dashboard-header">
-//         {profileImage && <img src={profileImage} alt="Profile" className="profile-img" />}
-//         <h1>Dashboard</h1>
-//         <p>Welcome back, {firstName}!</p>
-//       </header>
-
-//       <section className="user-info">
-//         <h2>User Information</h2>
-//         <div className="info-grid">
-//           <div className="info-card">
-//             <strong>Name:</strong> {firstName} {lastName}
-//           </div>
-//           <div className="info-card">
-//             <strong>Email:</strong> {email}
-//           </div>
-//           <div className="info-card">
-//             <strong>Phone:</strong> {phoneNumber || "Not provided"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Address:</strong> {address || "Not provided"}
-//           </div>
-//           <div className="info-card">
-//             <strong>QR Code:</strong> {qrCode || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>QR Code ID:</strong> {qrCodeId || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>QR Data:</strong> {qrData || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>QR PNG:</strong> {qrPNG || "N/A"}
-//           </div>
-//           {/* QR Code Card */}
-//           <div className="card" style={{ padding: "20px", textAlign: "center" }}>
-//             <h3>Your QR Code</h3>
-
-//             {qrPNG ? (
-//               <img
-//                 src={qrPNG}
-//                 alt="QR Code"
-//                 style={{
-//                   width: "200px",
-//                   height: "200px",
-//                   objectFit: "contain",
-//                   marginTop: "15px",
-//                   borderRadius: "12px",
-//                   border: "1px solid #eee",
-//                   padding: "10px",
-//                   background: "#fff",
-//                 }}
-//               />
-//             ) : (
-//               <p style={{ marginTop: "10px", color: "#888" }}>No QR code available</p>
-//             )}
-//           </div>
-
-//           <div className="info-card">
-//             <strong>Status:</strong> {loadStatus || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Customer Since:</strong> {availableFrom ? new Date(availableFrom).toLocaleDateString() : "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Type of Owner:</strong> {userType || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Experience Level:</strong> {experienceLevel || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Preferred Load:</strong> {preferredLoadType || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Company:</strong> {company || "N/A"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Subscribed:</strong> {subscribed ? "Yes" : "No"}
-//           </div>
-//           <div className="info-card">
-//             <strong>Rating:</strong> {rating || "N/A"}
-//           </div>
-//         </div>
-//       </section>
-
-//       <section className="chart-container">
-//         <h2>Analytics</h2>
-
-//         <div className="pie-charts">
-//           <PieChart width={250} height={250}>
-//             <Pie data={pieData} dataKey="value" cx="50%" cy="50%" outerRadius={80} label>
-//               {pieData.map((slice, index) => (
-//                 <Cell key={`cell-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
-//               ))}
-//             </Pie>
-//             <Tooltip />
-//           </PieChart>
-//         </div>
-
-//         <div className="bar-chart-wrapper">
-//           <BarChart width={900} height={400} data={barData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
-//             <CartesianGrid strokeDasharray="3 3" />
-//             <XAxis dataKey="name" />
-//             <YAxis />
-//             <Tooltip />
-//             <Legend verticalAlign="top" />
-//             <ReferenceLine y={0} stroke="#000" />
-//             <Brush dataKey="name" height={30} stroke="#8884d8" />
-//             <Bar dataKey="weight" fill="#8884d8" name="Weight" maxBarSize={50} label={{ position: "top" }}>
-//               {barData.map((_, idx) =>
-//                 idx === topLoadIndex ? <Cell key={`cell-${idx}`} fill="#FF8042" /> : null
-//               )}
-//             </Bar>
-//             <Bar dataKey="value" fill="#82ca9d" name="Value" maxBarSize={50} label={{ position: "top" }} />
-//           </BarChart>
-//         </div>
-//       </section>
-
-//       <Link to="/User" className="home-link">
-//         Back to Home
-//       </Link>
-//     </div>
-//   );
-// };
-
-// export default Dash;
-
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import {
diff --git a/controllers/UserAPIRoutes.js b/controllers/UserAPIRoutes.js
index 57b8e20..4ca577b 100644
--- a/controllers/UserAPIRoutes.js
+++ b/controllers/UserAPIRoutes.js
@@ -48,128 +48,6 @@ router.get("/view/:id", (req, res) => {
     });
 });
 
-// router.put("/update/:id", upload.single("profileImage"), async (req, res) => {
-//   try {
-//     // 1️⃣ Fetch the user
-//     const user = await db.User.findByPk(req.params.id);
-//     if (!user) {
-//       return res.status(404).send({ success: false, message: "User not found" });
-//     }
-
-//     // 2️⃣ Handle password update
-//     const updateData = { ...req.body };
-
-//     if (updateData.newPassword) {
-//       const hashedPassword = await bcrypt.hash(updateData.newPassword, 10);
-//       updateData.password = hashedPassword;
-//       delete updateData.newPassword;
-//     }
-
-//     // 3️⃣ Handle image upload (optional)
-//     let imageUrl = user.profileImage; // keep previous image by default
-
-//     if (req.file) {
-//       try {
-//         const result = await cloudinary.uploader.upload(req.file.path, {
-//           folder: "users",
-//           public_id: `user_${user.id}_${Date.now()}`,
-//           transformation: [{ width: 500, height: 500, crop: "fill" }],
-//         });
-
-//         imageUrl = result.secure_url;
-//       } catch (err) {
-//         console.error("Cloudinary Upload Error:", err);
-//         return res.status(500).json({
-//           success: false,
-//           message: "Image upload failed",
-//         });
-//       }
-//     }
-
-//     updateData.profileImage = imageUrl;
-
-//     // 4️⃣ Update the user
-//     const [updatedRows] = await db.User.update(updateData, {
-//       where: { id: req.params.id },
-//     });
-
-//     if (updatedRows === 0) {
-//       return res.status(404).send({ success: false, message: "No updates made" });
-//     }
-
-//     // 5️⃣ Fetch updated user
-//     const updatedUser = await db.User.findByPk(req.params.id);
-
-//     res.status(200).send({
-//       success: true,
-//       message: "User updated successfully",
-//       user: updatedUser,
-//     });
-
-//   } catch (error) {
-//     console.error("Error updating user:", error);
-//     res.status(500).send({ success: false, message: "Internal Server Error" });
-//   }
-// // });
-// router.put("/update/:id", async (req, res) => {
-//   try {
-//     const user = await db.User.findByPk(req.params.id);
-//     if (!user) return res.status(404).json({ success: false, message: "User not found" });
-
-//     const updateData = { ...req.body };
-
-//     // Handle new password
-//     if (updateData.newPassword) {
-//       const hashed = await bcrypt.hash(updateData.newPassword, 10);
-//       updateData.password = hashed;
-//       delete updateData.newPassword;
-//     }
-
-//     // Handle profile image upload to Cloudinary
-//     if (updateData.profileImage) {
-//       try {
-//         // Normalize profileImage input:
-//         // - if it's already a data URI (starts with "data:"), use it as-is
-//         // - if it's a remote URL (starts with http/https), use it as-is
-//         // - otherwise assume it's a raw base64 string and prefix with a JPEG data URI header
-//         let uploadSource = updateData.profileImage;
-//         if (typeof uploadSource === "string") {
-//           const trimmed = uploadSource.trim();
-//           if (!/^data:/.test(trimmed) && !/^https?:\/\//i.test(trimmed)) {
-//             // treat as raw base64
-//             uploadSource = `data:image/jpeg;base64,${trimmed}`;
-//           } else {
-//             uploadSource = trimmed;
-//           }
-//         } else {
-//           // If not a string, avoid passing invalid input to Cloudinary
-//           throw new Error("Invalid profileImage format");
-//         }
-
-//         const result = await cloudinary.uploader.upload(uploadSource, {
-//           folder: "users",
-//           public_id: `user_${user.id}_${Date.now()}`,
-//           transformation: [{ width: 500, height: 500, crop: "fill" }],
-//         });
-//         updateData.profileImage = result.secure_url;
-//       } catch (err) {
-//         console.error("Cloudinary upload failed:", err);
-//         return res.status(400).json({ success: false, message: "Image upload failed", error: err.message });
-//       }
-//     }
-
-//     // Update user
-//     const [updatedRows] = await db.User.update(updateData, { where: { id: req.params.id } });
-//     if (updatedRows === 0) return res.status(404).json({ success: false, message: "No updates made" });
-
-//     const updatedUser = await db.User.findByPk(req.params.id);
-//     res.status(200).json({ success: true, message: "User updated", user: updatedUser });
-
-//   } catch (err) {
-//     console.error("Error updating user:", err);
-//     res.status(500).json({ success: false, message: "Internal server error" });
-//   }
-// });
 router.put("/update/:id", async (req, res) => {
   try {
     // 1️⃣ Find user
@@ -370,71 +248,4 @@ router.post("/login", (req, res) => {
     });
 });
 
-// router.put("/user/update/:userId", upload.single("image"), async (req, res) => {
-//   try {
-//     const { newPassword } = req.body;
-
-//     // 1️⃣ Fetch user
-//     const user = await db.User.findByPk(req.params.userId);
-//     if (!user) {
-//       return res.status(404).json({ success: false, message: "User not found" });
-//     }
-
-//     // 2️⃣ Handle password change
-//     if (newPassword) {
-//       const hashedPassword = await bcrypt.hash(newPassword, 10);
-//       req.body.password = hashedPassword;
-//       delete req.body.newPassword;
-//     }
-
-//     // 3️⃣ Handle image upload if provided
-//     let imageUrl = user.image; // Keep old image if none uploaded
-//     if (req.file) {
-//       try {
-//         const result = await cloudinary.uploader.upload(req.file.path, {
-//           folder: "users",
-//           public_id: `user_${user.id}_${Date.now()}`,
-//           transformation: [{ width: 500, height: 500, crop: "fill" }],
-//         });
-//         imageUrl = result.secure_url;
-//       } catch (uploadErr) {
-//         console.error("Cloudinary upload failed:", uploadErr);
-//         return res.status(500).json({
-//           success: false,
-//           message: "Image upload failed",
-//         });
-//       }
-//     }
-
-//     // 4️⃣ Prepare update data
-//     const updateData = { ...req.body, image: imageUrl };
-
-//     // 5️⃣ Update user
-//     const [updatedRows] = await db.User.update(updateData, {
-//       where: { id: req.params.userId },
-//     });
-
-//     if (updatedRows === 0) {
-//       return res
-//         .status(400)
-//         .json({ success: false, message: "No updates made" });
-//     }
-
-//     // 6️⃣ Fetch updated user
-//     const updatedUser = await db.User.findByPk(req.params.userId);
-
-//     res.status(200).json({
-//       success: true,
-//       message: "User updated successfully",
-//       user: updatedUser,
-//     });
-//   } catch (error) {
-//     console.error("Error updating user:", error);
-//     res.status(500).json({
-//       success: false,
-//       message: "Internal Server Error",
-//     });
-//   }
-// });
-
 module.exports = router;