From e70ffe36475fde1fa5ded7c7ed79dac51d2f8107 Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Sat, 29 Nov 2025 02:07:12 -0500
Subject: [PATCH 1/2] testing user view page

---
 .../UserProfile/UserProfile.tsx               | 320 +++++++++++++-----
 1 file changed, 244 insertions(+), 76 deletions(-)

diff --git a/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx b/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx
index abe4d5b..0057542 100644
--- a/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx
+++ b/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx
@@ -1,38 +1,210 @@
+// 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 ServerPort =
-  process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
+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;
+}
 
-const UserProfile = () => {
+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<any>(null);
+  const [userData, setUserData] = useState<UserData | null>(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(() => {
+    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(`${ServerPort}/api/user/view/${userId}`),
-          axios.get(`${ServerPort}/api/loads/user/${userId}`),
-          axios.get(`${ServerPort}/api/drivers/user/${userId}`),
+          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({
@@ -40,8 +212,8 @@ const UserProfile = () => {
           loads: Array.isArray(loadsRes.data) ? loadsRes.data : [],
           drivers: Array.isArray(driversRes.data) ? driversRes.data : [],
         });
-      } catch (error) {
-        console.error("Error fetching user profile data:", error);
+      } catch (err) {
+        console.error("Error fetching user profile data:", err);
         setError("Failed to load user profile data.");
       } finally {
         setLoading(false);
@@ -51,29 +223,41 @@ const UserProfile = () => {
     fetchUserData();
   }, [userId]);
 
-  if (loading) {
-    return <div className={styles.loading}>Loading user profile...</div>;
-  }
+  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>;
 
-  if (error) {
-    return <div className={styles.error}>{error}</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 on the Left */}
+        {/* Loads Section */}
         <div className={styles.loadsSection}>
-          <h2>Loads ({userData.loads.length}):</h2>
-          {Array.isArray(userData.loads) && userData.loads.length > 0 ? (
-            userData.loads.map((load: Load) => (
+          <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.id}</p> {/* Display loadId */}
-                <Link to={`/UserProfile/${userData.userId}`} className={styles.loadLink}>
-                  View Driver Profile
+                <p>Load ID: {load.loadId}</p>
+                <Link to={`/UserProfile/${userId}`} className={styles.loadLink}>
+                  View Load Details
                 </Link>
               </div>
             ))
@@ -82,42 +266,35 @@ const UserProfile = () => {
           )}
         </div>
 
-        {/* Driver Details Section on the Right */}
+        {/* User Profile Section */}
         <div className={styles.profileSection}>
-          <h2>Available Status: {userData.loadStatus}</h2>
-          {userData.qrPNG && (
+          {qrPNG && (
             <img
-              src={userData.qrPNG}
-              alt={`${userData.firstName} ${userData.lastName}`}
+              src={qrPNG}
+              alt={`${firstName} ${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>
+          <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 in the Third Column */}
+        {/* Drivers Section */}
         <div className={styles.driversSection}>
-          <h2>Drivers ({userData.drivers.length}):</h2>
-          {Array.isArray(userData.drivers) && userData.drivers.length > 0 ? (
-            userData.drivers.map((driver: Driver) => (
+          <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.id}</p> {/* Display driverId */}
+                <p>Driver ID: {driver.driverId}</p>
               </div>
             ))
           ) : (
@@ -126,22 +303,13 @@ const UserProfile = () => {
         </div>
       </div>
 
-      {/* "Add Business" Button */}
-      <button
-        className={styles.button}
-        onClick={() => console.log("Business added!")}
-      >
-        Add Business
-      </button>
-
-      {/* Navigation buttons */}
+      {/* Action Buttons */}
       <div className={styles.buttonContainer}>
-        <Link to="/AvailableTable" className={styles.button}>
-          Home
-        </Link>
-        <Link to={`/MessageUser/${userId}`} className={styles.button}>
-          Message User
-        </Link>
+        <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>
   );

From 7950bff392d098ce70519a49c043ffbea72778c2 Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Sat, 29 Nov 2025 02:21:52 -0500
Subject: [PATCH 2/2] testing the profile view page

---
 .../UserProfile/UserProfile.module.css        | 120 ++++---
 .../UserProfile/UserProfile.tsx               | 294 ++++++++++++++----
 2 files changed, 310 insertions(+), 104 deletions(-)

diff --git a/client/src/containers/User/AvailableTable/UserProfile/UserProfile.module.css b/client/src/containers/User/AvailableTable/UserProfile/UserProfile.module.css
index daedeea..b7711f8 100644
--- a/client/src/containers/User/AvailableTable/UserProfile/UserProfile.module.css
+++ b/client/src/containers/User/AvailableTable/UserProfile/UserProfile.module.css
@@ -1,82 +1,109 @@
 /* UserProfile.module.css */
-
 .userProfileContainer {
-  font-family: Arial, sans-serif;
-  max-width: 1200px;
+  max-width: 1300px;
   margin: auto;
   padding: 20px;
+  font-family: Arial, sans-serif;
   color: #333;
 }
 
-.contentWrapper {
+.profileHeader {
   display: flex;
-  flex-wrap: wrap; /* Allows wrapping for smaller screens */
+  align-items: center;
   gap: 20px;
+  margin-bottom: 30px;
 }
 
-.loadsSection, .profileSection, .driversSection {
-  background-color: #f9f9f9;
-  padding: 15px;
+.profileImage {
+  width: 150px;
+  height: 150px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 3px solid #2980b9;
+}
+
+.profileName h1 {
+  margin: 0;
+  font-size: 2rem;
+  color: #2980b9;
+}
+
+.profileName p {
+  margin: 4px 0;
+  font-size: 1rem;
+}
+
+.userInfoSection {
+  margin-bottom: 30px;
+}
+
+.infoGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.infoCard {
+  background: #f5f5f5;
+  padding: 12px 15px;
   border-radius: 8px;
-  border: 1px solid #ddd;
-  flex: 1;
-  min-width: 280px; /* Minimum width to improve responsiveness */
+  flex: 1 1 200px;
+  min-width: 180px;
 }
 
-.loadsSection {
-  max-width: 400px;
+.sectionsWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.loadsSection, .driversSection {
+  flex: 1;
+  min-width: 280px;
+  background: #f9f9f9;
+  padding: 15px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
 }
 
 .loadItem, .driverItem {
-  background-color: #fff;
+  background: #fff;
   padding: 12px;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
+  border-radius: 6px;
   border: 1px solid #ddd;
-  border-radius: 4px;
 }
 
-.loadLink, .buttonLink {
+.loadLink {
   color: #2980b9;
   text-decoration: none;
 }
 
-.loadLink:hover, .buttonLink:hover {
+.loadLink:hover {
   text-decoration: underline;
 }
 
-.profileSection {
-  flex: 2;
-}
-
-.profileImage {
-  width: 150px;
-  height: auto;
-  border-radius: 8px;
-  margin-bottom: 10px;
+.buttonContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 20px;
+  justify-content: center;
 }
 
 .button {
   padding: 10px 20px;
-  background-color: #2980b9;
+  background: #2980b9;
   color: #fff;
+  border-radius: 5px;
   border: none;
-  border-radius: 4px;
   cursor: pointer;
+  text-decoration: none;
   text-align: center;
-  margin: 5px 0;
-  display: inline-block;
 }
 
 .button:hover {
-  background-color: #1a66a0;
-}
-
-.buttonContainer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 20px;
-  justify-content: center;
+  background: #1a66a0;
 }
 
 .loading,
@@ -87,10 +114,15 @@
 }
 
 @media (max-width: 768px) {
-  .contentWrapper {
-    flex-direction: column; /* Stack sections vertically on smaller screens */
+  .profileHeader {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  .sectionsWrapper {
+    flex-direction: column;
   }
-  .buttonContainer {
-    flex-direction: column; /* Stack buttons vertically */
+  .infoGrid {
+    flex-direction: column;
   }
 }
diff --git a/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx b/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx
index 0057542..b7e0f24 100644
--- a/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx
+++ b/client/src/containers/User/AvailableTable/UserProfile/UserProfile.tsx
@@ -149,12 +149,182 @@
 
 // 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";
 import styles from "./UserProfile.module.css";
 
-const SERVER_PORT = process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
+const SERVER_PORT =
+  process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
 
 interface Load {
   id: number;
@@ -179,26 +349,25 @@ interface UserData {
   loadStatus?: string;
   availableFrom?: string;
   userType?: string;
+  experienceLevel?: string;
+  preferredLoadType?: string;
+  company?: string;
+  subscribed?: boolean;
+  rating?: number;
+  profileImage?: string;
+  loadDetails?: Load[];
+  drivers?: Driver[];
   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>("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
 
   useEffect(() => {
-    if (!userId) {
-      setError("User ID not provided in URL.");
-      setLoading(false);
-      return;
-    }
-
     const fetchUserData = async () => {
       try {
         const [userRes, loadsRes, driversRes] = await Promise.all([
@@ -209,7 +378,7 @@ const UserProfile: React.FC = () => {
 
         setUserData({
           ...userRes.data,
-          loads: Array.isArray(loadsRes.data) ? loadsRes.data : [],
+          loadDetails: Array.isArray(loadsRes.data) ? loadsRes.data : [],
           drivers: Array.isArray(driversRes.data) ? driversRes.data : [],
         });
       } catch (err) {
@@ -227,26 +396,47 @@ const UserProfile: React.FC = () => {
   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;
+  const loads = userData.loadDetails || [];
+  const drivers = userData.drivers || [];
 
   return (
     <div className={styles.userProfileContainer}>
-      <h1>User Profile</h1>
-      <div className={styles.contentWrapper}>
+      {/* Profile Header */}
+      <div className={styles.profileHeader}>
+        {userData.profileImage && (
+          <img
+            src={userData.profileImage}
+            alt={`${userData.firstName} ${userData.lastName}`}
+            className={styles.profileImage}
+          />
+        )}
+        <div className={styles.profileName}>
+          <h1>{userData.firstName} {userData.lastName}</h1>
+          <p>Customer Since: {userData.availableFrom ? new Date(userData.availableFrom).toLocaleDateString() : "N/A"}</p>
+          <p>Type of Owner: {userData.userType || "N/A"}</p>
+        </div>
+      </div>
+
+      {/* User Info */}
+      <section className={styles.userInfoSection}>
+        <h2>User Information</h2>
+        <div className={styles.infoGrid}>
+          <div className={styles.infoCard}><strong>Email:</strong> {userData.email}</div>
+          <div className={styles.infoCard}><strong>Phone:</strong> {userData.phoneNumber || "Not provided"}</div>
+          <div className={styles.infoCard}><strong>Address:</strong> {userData.address || "Not provided"}</div>
+          <div className={styles.infoCard}><strong>Status:</strong> {userData.loadStatus || "N/A"}</div>
+          <div className={styles.infoCard}><strong>Experience Level:</strong> {userData.experienceLevel || "N/A"}</div>
+          <div className={styles.infoCard}><strong>Preferred Load:</strong> {userData.preferredLoadType || "N/A"}</div>
+          <div className={styles.infoCard}><strong>Company:</strong> {userData.company || "N/A"}</div>
+          <div className={styles.infoCard}><strong>Subscribed:</strong> {userData.subscribed ? "Yes" : "No"}</div>
+          <div className={styles.infoCard}><strong>Rating:</strong> {userData.rating || "N/A"}</div>
+          <div className={styles.infoCard}><strong>Services:</strong> {userData.loadReferences ? userData.loadReferences.split(",").join(", ") : "None"}</div>
+          <div className={styles.infoCard}><strong>Locations:</strong> {userData.location ? userData.location.split(",").join(", ") : "None"}</div>
+        </div>
+      </section>
+
+      {/* Loads and Drivers Sections */}
+      <div className={styles.sectionsWrapper}>
         {/* Loads Section */}
         <div className={styles.loadsSection}>
           <h2>Loads ({loads.length})</h2>
@@ -254,10 +444,10 @@ const UserProfile: React.FC = () => {
             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>
+                <p><strong>Company:</strong> {load.company}</p>
+                <p><strong>Load ID:</strong> {load.loadId || load.id}</p>
                 <Link to={`/UserProfile/${userId}`} className={styles.loadLink}>
-                  View Load Details
+                  View Driver Profile
                 </Link>
               </div>
             ))
@@ -266,26 +456,6 @@ const UserProfile: React.FC = () => {
           )}
         </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>
@@ -293,8 +463,11 @@ const UserProfile: React.FC = () => {
             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>
+                <p><strong>Experience:</strong> {driver.experience}</p>
+                <p><strong>Driver ID:</strong> {driver.driverId || driver.id}</p>
+                <Link to={`/UserProfile/${driver.driverId}`} className={styles.loadLink}>
+                  View Driver Profile
+                </Link>
               </div>
             ))
           ) : (
@@ -305,11 +478,12 @@ const UserProfile: React.FC = () => {
 
       {/* 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>
+        <Link to="/AvailableTable" className={styles.button}>
+          Home
+        </Link>
+        <Link to={`/MessageUser/${userId}`} className={styles.button}>
+          Message User
+        </Link>
       </div>
     </div>
   );