From db496d07a5e8eca463bf2d0bb2df15f51e286044 Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Sat, 29 Nov 2025 01:56:09 -0500
Subject: [PATCH] testing the new Dash look

---
 client/src/containers/User/UserDash/Dash.css |  26 +-
 client/src/containers/User/UserDash/Dash.tsx | 549 ++++++++++++++++---
 2 files changed, 506 insertions(+), 69 deletions(-)

diff --git a/client/src/containers/User/UserDash/Dash.css b/client/src/containers/User/UserDash/Dash.css
index 59957cc..9ba5793 100644
--- a/client/src/containers/User/UserDash/Dash.css
+++ b/client/src/containers/User/UserDash/Dash.css
@@ -20,19 +20,33 @@
   color: #555;
 }
 
+.profile-img {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 15px;
+  border: 2px solid #007bff;
+}
+
 .user-info {
-  background: #f7f7f7;
-  padding: 20px;
-  border-radius: 12px;
   margin-bottom: 40px;
 }
 
 .info-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 15px;
 }
 
+.info-card {
+  background: #f7f7f7;
+  padding: 15px;
+  border-radius: 12px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+  font-size: 0.95rem;
+}
+
 .chart-container {
   display: flex;
   flex-direction: column;
@@ -45,10 +59,6 @@
   margin-bottom: 30px;
 }
 
-.pie-chart-wrapper {
-  margin: 0 20px;
-}
-
 .bar-chart-wrapper {
   overflow-x: auto;
   margin-top: 20px;
diff --git a/client/src/containers/User/UserDash/Dash.tsx b/client/src/containers/User/UserDash/Dash.tsx
index 6bdbb01..b8a345b 100644
--- a/client/src/containers/User/UserDash/Dash.tsx
+++ b/client/src/containers/User/UserDash/Dash.tsx
@@ -143,6 +143,398 @@
 
 // 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 {
@@ -164,15 +556,38 @@ 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);
+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;
+  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>("");
 
-  // Fetch user data
   useEffect(() => {
     const userId = localStorage.getItem("userId");
     if (!userId) {
@@ -183,7 +598,7 @@ const Dash = () => {
 
     const fetchUserData = async () => {
       try {
-        const res = await axios.get(`${SERVER_PORT}/api/user/view/${userId}`);
+        const res = await axios.get<UserData>(`${SERVER_PORT}/api/user/view/${userId}`);
         setUserData(res.data);
       } catch (err) {
         console.error("Error fetching user data:", err);
@@ -198,88 +613,102 @@ const Dash = () => {
 
   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,
+    loadStatus,
+    availableFrom,
+    userType,
+    experienceLevel,
+    preferredLoadType,
+    company,
+    subscribed,
+    rating,
+    profileImage,
+    loadDetails,
+  } = userData;
 
-  // 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 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: userData.availableFrom ? 1 : 0 },
-    { name: "Unavailable", value: userData.availableFrom ? 0 : 1 },
+    { 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, {userData.firstName}!</p>
+        <p>Welcome back, {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 className="info-card">
+            <strong>Name:</strong> {firstName} {lastName}
           </div>
-          <div>
-            <strong>Email:</strong> {userData.email}
+          <div className="info-card">
+            <strong>Email:</strong> {email}
           </div>
-          <div>
-            <strong>Phone:</strong> {userData.phoneNumber || "Not provided"}
+          <div className="info-card">
+            <strong>Phone:</strong> {phoneNumber || "Not provided"}
           </div>
-          <div>
-            <strong>Address:</strong> {userData.address || "Not provided"}
+          <div className="info-card">
+            <strong>Address:</strong> {address || "Not provided"}
           </div>
-          <div>
-            <strong>Status:</strong> {userData.loadStatus || "N/A"}
+          <div className="info-card">
+            <strong>Status:</strong> {loadStatus || "N/A"}
           </div>
-          <div>
+          <div className="info-card">
             <strong>Customer Since:</strong>{" "}
-            {userData.availableFrom
-              ? new Date(userData.availableFrom).toLocaleDateString()
-              : "N/A"}
+            {availableFrom ? new Date(availableFrom).toLocaleDateString() : "N/A"}
           </div>
-          <div>
-            <strong>Type of Owner:</strong> {userData.userType || "N/A"}
+          <div className="info-card">
+            <strong>Type of Owner:</strong> {userType || "N/A"}
           </div>
-          <div>
-            <strong>Experience Level:</strong> {userData.experienceLevel || "N/A"}
+          <div className="info-card">
+            <strong>Experience Level:</strong> {experienceLevel || "N/A"}
           </div>
-          <div>
-            <strong>Preferred Load:</strong> {userData.preferredLoadType || "N/A"}
+          <div className="info-card">
+            <strong>Preferred Load:</strong> {preferredLoadType || "N/A"}
           </div>
-          <div>
-            <strong>Company:</strong> {userData.company || "N/A"}
+          <div className="info-card">
+            <strong>Company:</strong> {company || "N/A"}
           </div>
-          <div>
-            <strong>Subscribed:</strong> {userData.subscribed ? "Yes" : "No"}
+          <div className="info-card">
+            <strong>Subscribed:</strong> {subscribed ? "Yes" : "No"}
           </div>
-          <div>
-            <strong>Rating:</strong> {userData.rating || "N/A"}
+          <div className="info-card">
+            <strong>Rating:</strong> {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) => (
+            <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>
@@ -287,14 +716,8 @@ const Dash = () => {
           </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 }}
-          >
+          <BarChart width={900} height={400} data={barData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis dataKey="name" />
             <YAxis />
@@ -302,8 +725,12 @@ const Dash = () => {
             <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" />
+            <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>