From af8f64b0115a8d5952911a993e7c379d49104113 Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Thu, 28 May 2026 17:36:23 -0400
Subject: [PATCH 1/5] updates

---
 controllers/UserAPIRoutes.js | 311 ++++++++++++++++++++++++++++++++---
 1 file changed, 290 insertions(+), 21 deletions(-)

diff --git a/controllers/UserAPIRoutes.js b/controllers/UserAPIRoutes.js
index 48a0da7..390d1c1 100644
--- a/controllers/UserAPIRoutes.js
+++ b/controllers/UserAPIRoutes.js
@@ -48,71 +48,340 @@ router.get("/view/:id", (req, res) => {
     });
 });
 
+// router.put("/update/:id", async (req, res) => {
+//   try {
+//     // 1️⃣ Find user
+//     const user = await db.User.findByPk(req.params.id);
+//     if (!user) {
+//       return res.status(404).json({
+//         success: false,
+//         message: "User not found",
+//       });
+//     }
+
+//     let updateData = { ...req.body };
+
+//     // 2️⃣ Handle password update
+//     if (updateData.newPassword) {
+//       const hashedPassword = await bcrypt.hash(updateData.newPassword, 10);
+//       updateData.password = hashedPassword;
+//       delete updateData.newPassword;
+//     }
+
+//     // 3️⃣ Cloudinary image upload (base64)
+//     if (updateData.profileImage) {
+//       try {
+//         let imageBase64 = updateData.profileImage.trim();
+
+//         // If it's raw base64, add data URI prefix
+//         if (
+//           !imageBase64.startsWith("data:") &&
+//           !imageBase64.startsWith("http")
+//         ) {
+//           imageBase64 = `data:image/jpeg;base64,${imageBase64}`;
+//         }
+
+//         const uploadResult = await cloudinary.uploader.upload(imageBase64, {
+//           folder: "users",
+//           public_id: `user_${user.id}_${Date.now()}`,
+//           transformation: [{ width: 500, height: 500, crop: "fill" }],
+//         });
+
+//         updateData.profileImage = uploadResult.secure_url;
+//       } catch (err) {
+//         console.error("Cloudinary Upload Error:", err);
+//         return res.status(400).json({
+//           success: false,
+//           message: "Image upload failed",
+//         });
+//       }
+//     }
+
+//     // 4️⃣ Update user
+//     await db.User.update(updateData, { where: { id: req.params.id } });
+
+//     // 5️⃣ Fetch updated user
+//     const updatedUser = await db.User.findByPk(req.params.id);
+
+//     return res.status(200).json({
+//       success: true,
+//       message: "User updated successfully",
+//       user: updatedUser,
+//     });
+//   } catch (err) {
+//     console.error("Update Error:", err);
+//     res.status(500).json({
+//       success: false,
+//       message: "Internal server error",
+//     });
+//   }
+// });
 router.put("/update/:id", async (req, res) => {
   try {
-    // 1️⃣ Find user
-    const user = await db.User.findByPk(req.params.id);
+    // =====================================================
+    // VALIDATE USER ID
+    // =====================================================
+
+    const userId = req.params.id;
+
+    if (!userId || userId === "undefined" || userId === "null") {
+      return res.status(400).json({
+        success: false,
+
+        field: "id",
+
+        message: "A valid user ID is required to update this account.",
+
+        details:
+          "The update request was missing the account ID. Please refresh the page and try again.",
+      });
+    }
+
+    // =====================================================
+    // FIND USER
+    // =====================================================
+
+    const user = await db.User.findByPk(userId);
+
     if (!user) {
       return res.status(404).json({
         success: false,
-        message: "User not found",
+
+        field: "user",
+
+        message: "User account not found.",
+
+        details: "We could not find an account matching this request.",
       });
     }
 
+    // =====================================================
+    // PREP UPDATE DATA
+    // =====================================================
+
     let updateData = { ...req.body };
 
-    // 2️⃣ Handle password update
+    // =====================================================
+    // CLEAN INPUTS
+    // =====================================================
+
+    Object.keys(updateData).forEach((key) => {
+      if (typeof updateData[key] === "string") {
+        updateData[key] = updateData[key].trim();
+      }
+    });
+
+    // =====================================================
+    // REQUIRED VALIDATION
+    // =====================================================
+
+    const validationErrors = [];
+
+    // NAME VALIDATION
+
+    if (updateData.name !== undefined && updateData.name.length < 2) {
+      validationErrors.push({
+        field: "name",
+
+        message: "Your name must contain at least 2 characters.",
+
+        fix: "Please enter your full name.",
+      });
+    }
+
+    // EMAIL VALIDATION
+
+    if (updateData.email !== undefined) {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+      if (!updateData.email) {
+        validationErrors.push({
+          field: "email",
+
+          message: "Email address is required.",
+
+          fix: "Please enter your email address.",
+        });
+      } else if (!emailRegex.test(updateData.email)) {
+        validationErrors.push({
+          field: "email",
+
+          message: "This email address is not valid.",
+
+          fix: "Example: john@example.com",
+        });
+      } else {
+        // CHECK DUPLICATE EMAIL
+
+        const existingEmailUser = await db.User.findOne({
+          where: {
+            email: updateData.email,
+          },
+        });
+
+        if (existingEmailUser && existingEmailUser.id !== user.id) {
+          validationErrors.push({
+            field: "email",
+
+            message: "This email address is already being used.",
+
+            fix: "Use a different email address.",
+          });
+        }
+      }
+    }
+
+    // PASSWORD VALIDATION
+
+    if (updateData.newPassword !== undefined) {
+      if (!updateData.newPassword) {
+        validationErrors.push({
+          field: "newPassword",
+
+          message: "Password field cannot be empty.",
+
+          fix: "Enter a secure password.",
+        });
+      } else if (updateData.newPassword.length < 8) {
+        validationErrors.push({
+          field: "newPassword",
+
+          message: "Password must be at least 8 characters long.",
+
+          fix: "Use at least 8 characters with numbers and symbols.",
+        });
+      } else {
+        const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/;
+
+        if (!strongPasswordRegex.test(updateData.newPassword)) {
+          validationErrors.push({
+            field: "newPassword",
+
+            message: "Password is too weak.",
+
+            fix: "Include at least 1 uppercase letter, 1 lowercase letter, and 1 number.",
+          });
+        }
+      }
+    }
+
+    // =====================================================
+    // RETURN VALIDATION ERRORS
+    // =====================================================
+
+    if (validationErrors.length > 0) {
+      return res.status(400).json({
+        success: false,
+
+        message: "Please correct the highlighted fields and try again.",
+
+        errors: validationErrors,
+      });
+    }
+
+    // =====================================================
+    // HANDLE PASSWORD UPDATE
+    // =====================================================
+
     if (updateData.newPassword) {
       const hashedPassword = await bcrypt.hash(updateData.newPassword, 10);
+
       updateData.password = hashedPassword;
+
       delete updateData.newPassword;
     }
 
-    // 3️⃣ Cloudinary image upload (base64)
-    if (updateData.profileImage) {
+    // =====================================================
+    // HANDLE PROFILE IMAGE
+    // =====================================================
+
+    if (
+      updateData.profileImage &&
+      !updateData.profileImage.startsWith("http")
+    ) {
       try {
         let imageBase64 = updateData.profileImage.trim();
 
-        // If it's raw base64, add data URI prefix
-        if (
-          !imageBase64.startsWith("data:") &&
-          !imageBase64.startsWith("http")
-        ) {
+        // ADD DATA URI IF RAW BASE64
+
+        if (!imageBase64.startsWith("data:")) {
           imageBase64 = `data:image/jpeg;base64,${imageBase64}`;
         }
 
         const uploadResult = await cloudinary.uploader.upload(imageBase64, {
           folder: "users",
+
           public_id: `user_${user.id}_${Date.now()}`,
-          transformation: [{ width: 500, height: 500, crop: "fill" }],
+
+          transformation: [
+            {
+              width: 500,
+              height: 500,
+              crop: "fill",
+            },
+          ],
         });
 
         updateData.profileImage = uploadResult.secure_url;
       } catch (err) {
         console.error("Cloudinary Upload Error:", err);
+
         return res.status(400).json({
           success: false,
-          message: "Image upload failed",
+
+          field: "profileImage",
+
+          message: "Profile image upload failed.",
+
+          details: "Please try another image or use a smaller file size.",
         });
       }
     }
 
-    // 4️⃣ Update user
-    await db.User.update(updateData, { where: { id: req.params.id } });
+    // =====================================================
+    // REMOVE UNSAFE FIELDS
+    // =====================================================
+
+    delete updateData.id;
+    delete updateData.createdAt;
+    delete updateData.updatedAt;
+
+    // =====================================================
+    // UPDATE USER
+    // =====================================================
+
+    await db.User.update(updateData, {
+      where: {
+        id: userId,
+      },
+    });
+
+    // =====================================================
+    // FETCH UPDATED USER
+    // =====================================================
 
-    // 5️⃣ Fetch updated user
-    const updatedUser = await db.User.findByPk(req.params.id);
+    const updatedUser = await db.User.findByPk(userId);
+
+    // =====================================================
+    // SUCCESS RESPONSE
+    // =====================================================
 
     return res.status(200).json({
       success: true,
-      message: "User updated successfully",
+
+      message: "Your account has been updated successfully.",
+
       user: updatedUser,
     });
   } catch (err) {
-    console.error("Update Error:", err);
-    res.status(500).json({
+    console.error("User Update Route Error:", err);
+
+    return res.status(500).json({
       success: false,
-      message: "Internal server error",
+
+      message: "Something went wrong while updating your account.",
+
+      details: "Please try again in a few moments.",
     });
   }
 });

From 4a4c7bb440400de1b6bc7f9c4edfc8685d2fee54 Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Thu, 28 May 2026 18:01:16 -0400
Subject: [PATCH 2/5] updates

---
 controllers/UserAPIRoutes.js | 508 +++++++++++++++++------------------
 1 file changed, 254 insertions(+), 254 deletions(-)

diff --git a/controllers/UserAPIRoutes.js b/controllers/UserAPIRoutes.js
index 390d1c1..cc5f075 100644
--- a/controllers/UserAPIRoutes.js
+++ b/controllers/UserAPIRoutes.js
@@ -48,343 +48,343 @@ router.get("/view/:id", (req, res) => {
     });
 });
 
-// router.put("/update/:id", async (req, res) => {
-//   try {
-//     // 1️⃣ Find user
-//     const user = await db.User.findByPk(req.params.id);
-//     if (!user) {
-//       return res.status(404).json({
-//         success: false,
-//         message: "User not found",
-//       });
-//     }
+router.put("/update/:id", async (req, res) => {
+  try {
+    // 1️⃣ Find user
+    const user = await db.User.findByPk(req.params.id);
+    if (!user) {
+      return res.status(404).json({
+        success: false,
+        message: "User not found",
+      });
+    }
 
-//     let updateData = { ...req.body };
+    let updateData = { ...req.body };
 
-//     // 2️⃣ Handle password update
-//     if (updateData.newPassword) {
-//       const hashedPassword = await bcrypt.hash(updateData.newPassword, 10);
-//       updateData.password = hashedPassword;
-//       delete updateData.newPassword;
-//     }
+    // 2️⃣ Handle password update
+    if (updateData.newPassword) {
+      const hashedPassword = await bcrypt.hash(updateData.newPassword, 10);
+      updateData.password = hashedPassword;
+      delete updateData.newPassword;
+    }
 
-//     // 3️⃣ Cloudinary image upload (base64)
-//     if (updateData.profileImage) {
-//       try {
-//         let imageBase64 = updateData.profileImage.trim();
+    // 3️⃣ Cloudinary image upload (base64)
+    if (updateData.profileImage) {
+      try {
+        let imageBase64 = updateData.profileImage.trim();
 
-//         // If it's raw base64, add data URI prefix
-//         if (
-//           !imageBase64.startsWith("data:") &&
-//           !imageBase64.startsWith("http")
-//         ) {
-//           imageBase64 = `data:image/jpeg;base64,${imageBase64}`;
-//         }
+        // If it's raw base64, add data URI prefix
+        if (
+          !imageBase64.startsWith("data:") &&
+          !imageBase64.startsWith("http")
+        ) {
+          imageBase64 = `data:image/jpeg;base64,${imageBase64}`;
+        }
 
-//         const uploadResult = await cloudinary.uploader.upload(imageBase64, {
-//           folder: "users",
-//           public_id: `user_${user.id}_${Date.now()}`,
-//           transformation: [{ width: 500, height: 500, crop: "fill" }],
-//         });
+        const uploadResult = await cloudinary.uploader.upload(imageBase64, {
+          folder: "users",
+          public_id: `user_${user.id}_${Date.now()}`,
+          transformation: [{ width: 500, height: 500, crop: "fill" }],
+        });
 
-//         updateData.profileImage = uploadResult.secure_url;
-//       } catch (err) {
-//         console.error("Cloudinary Upload Error:", err);
-//         return res.status(400).json({
-//           success: false,
-//           message: "Image upload failed",
-//         });
-//       }
-//     }
+        updateData.profileImage = uploadResult.secure_url;
+      } catch (err) {
+        console.error("Cloudinary Upload Error:", err);
+        return res.status(400).json({
+          success: false,
+          message: "Image upload failed",
+        });
+      }
+    }
 
-//     // 4️⃣ Update user
-//     await db.User.update(updateData, { where: { id: req.params.id } });
+    // 4️⃣ Update user
+    await db.User.update(updateData, { where: { id: req.params.id } });
 
-//     // 5️⃣ Fetch updated user
-//     const updatedUser = await db.User.findByPk(req.params.id);
+    // 5️⃣ Fetch updated user
+    const updatedUser = await db.User.findByPk(req.params.id);
 
-//     return res.status(200).json({
-//       success: true,
-//       message: "User updated successfully",
-//       user: updatedUser,
-//     });
-//   } catch (err) {
-//     console.error("Update Error:", err);
-//     res.status(500).json({
-//       success: false,
-//       message: "Internal server error",
-//     });
-//   }
-// });
-router.put("/update/:id", async (req, res) => {
-  try {
-    // =====================================================
-    // VALIDATE USER ID
-    // =====================================================
+    return res.status(200).json({
+      success: true,
+      message: "User updated successfully",
+      user: updatedUser,
+    });
+  } catch (err) {
+    console.error("Update Error:", err);
+    res.status(500).json({
+      success: false,
+      message: "Internal server error",
+    });
+  }
+});
+// router.put("/update/:id", async (req, res) => {
+//   try {
+//     // =====================================================
+//     // VALIDATE USER ID
+//     // =====================================================
 
-    const userId = req.params.id;
+//     const userId = req.params.id;
 
-    if (!userId || userId === "undefined" || userId === "null") {
-      return res.status(400).json({
-        success: false,
+//     if (!userId || userId === "undefined" || userId === "null") {
+//       return res.status(400).json({
+//         success: false,
 
-        field: "id",
+//         field: "id",
 
-        message: "A valid user ID is required to update this account.",
+//         message: "A valid user ID is required to update this account.",
 
-        details:
-          "The update request was missing the account ID. Please refresh the page and try again.",
-      });
-    }
+//         details:
+//           "The update request was missing the account ID. Please refresh the page and try again.",
+//       });
+//     }
 
-    // =====================================================
-    // FIND USER
-    // =====================================================
+//     // =====================================================
+//     // FIND USER
+//     // =====================================================
 
-    const user = await db.User.findByPk(userId);
+//     const user = await db.User.findByPk(userId);
 
-    if (!user) {
-      return res.status(404).json({
-        success: false,
+//     if (!user) {
+//       return res.status(404).json({
+//         success: false,
 
-        field: "user",
+//         field: "user",
 
-        message: "User account not found.",
+//         message: "User account not found.",
 
-        details: "We could not find an account matching this request.",
-      });
-    }
+//         details: "We could not find an account matching this request.",
+//       });
+//     }
 
-    // =====================================================
-    // PREP UPDATE DATA
-    // =====================================================
+//     // =====================================================
+//     // PREP UPDATE DATA
+//     // =====================================================
 
-    let updateData = { ...req.body };
+//     let updateData = { ...req.body };
 
-    // =====================================================
-    // CLEAN INPUTS
-    // =====================================================
+//     // =====================================================
+//     // CLEAN INPUTS
+//     // =====================================================
 
-    Object.keys(updateData).forEach((key) => {
-      if (typeof updateData[key] === "string") {
-        updateData[key] = updateData[key].trim();
-      }
-    });
+//     Object.keys(updateData).forEach((key) => {
+//       if (typeof updateData[key] === "string") {
+//         updateData[key] = updateData[key].trim();
+//       }
+//     });
 
-    // =====================================================
-    // REQUIRED VALIDATION
-    // =====================================================
+//     // =====================================================
+//     // REQUIRED VALIDATION
+//     // =====================================================
 
-    const validationErrors = [];
+//     const validationErrors = [];
 
-    // NAME VALIDATION
+//     // NAME VALIDATION
 
-    if (updateData.name !== undefined && updateData.name.length < 2) {
-      validationErrors.push({
-        field: "name",
+//     if (updateData.name !== undefined && updateData.name.length < 2) {
+//       validationErrors.push({
+//         field: "name",
 
-        message: "Your name must contain at least 2 characters.",
+//         message: "Your name must contain at least 2 characters.",
 
-        fix: "Please enter your full name.",
-      });
-    }
+//         fix: "Please enter your full name.",
+//       });
+//     }
 
-    // EMAIL VALIDATION
+//     // EMAIL VALIDATION
 
-    if (updateData.email !== undefined) {
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+//     if (updateData.email !== undefined) {
+//       const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-      if (!updateData.email) {
-        validationErrors.push({
-          field: "email",
+//       if (!updateData.email) {
+//         validationErrors.push({
+//           field: "email",
 
-          message: "Email address is required.",
+//           message: "Email address is required.",
 
-          fix: "Please enter your email address.",
-        });
-      } else if (!emailRegex.test(updateData.email)) {
-        validationErrors.push({
-          field: "email",
+//           fix: "Please enter your email address.",
+//         });
+//       } else if (!emailRegex.test(updateData.email)) {
+//         validationErrors.push({
+//           field: "email",
 
-          message: "This email address is not valid.",
+//           message: "This email address is not valid.",
 
-          fix: "Example: john@example.com",
-        });
-      } else {
-        // CHECK DUPLICATE EMAIL
+//           fix: "Example: john@example.com",
+//         });
+//       } else {
+//         // CHECK DUPLICATE EMAIL
 
-        const existingEmailUser = await db.User.findOne({
-          where: {
-            email: updateData.email,
-          },
-        });
+//         const existingEmailUser = await db.User.findOne({
+//           where: {
+//             email: updateData.email,
+//           },
+//         });
 
-        if (existingEmailUser && existingEmailUser.id !== user.id) {
-          validationErrors.push({
-            field: "email",
+//         if (existingEmailUser && existingEmailUser.id !== user.id) {
+//           validationErrors.push({
+//             field: "email",
 
-            message: "This email address is already being used.",
+//             message: "This email address is already being used.",
 
-            fix: "Use a different email address.",
-          });
-        }
-      }
-    }
+//             fix: "Use a different email address.",
+//           });
+//         }
+//       }
+//     }
 
-    // PASSWORD VALIDATION
+//     // PASSWORD VALIDATION
 
-    if (updateData.newPassword !== undefined) {
-      if (!updateData.newPassword) {
-        validationErrors.push({
-          field: "newPassword",
+//     if (updateData.newPassword !== undefined) {
+//       if (!updateData.newPassword) {
+//         validationErrors.push({
+//           field: "newPassword",
 
-          message: "Password field cannot be empty.",
+//           message: "Password field cannot be empty.",
 
-          fix: "Enter a secure password.",
-        });
-      } else if (updateData.newPassword.length < 8) {
-        validationErrors.push({
-          field: "newPassword",
+//           fix: "Enter a secure password.",
+//         });
+//       } else if (updateData.newPassword.length < 8) {
+//         validationErrors.push({
+//           field: "newPassword",
 
-          message: "Password must be at least 8 characters long.",
+//           message: "Password must be at least 8 characters long.",
 
-          fix: "Use at least 8 characters with numbers and symbols.",
-        });
-      } else {
-        const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/;
+//           fix: "Use at least 8 characters with numbers and symbols.",
+//         });
+//       } else {
+//         const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/;
 
-        if (!strongPasswordRegex.test(updateData.newPassword)) {
-          validationErrors.push({
-            field: "newPassword",
+//         if (!strongPasswordRegex.test(updateData.newPassword)) {
+//           validationErrors.push({
+//             field: "newPassword",
 
-            message: "Password is too weak.",
+//             message: "Password is too weak.",
 
-            fix: "Include at least 1 uppercase letter, 1 lowercase letter, and 1 number.",
-          });
-        }
-      }
-    }
+//             fix: "Include at least 1 uppercase letter, 1 lowercase letter, and 1 number.",
+//           });
+//         }
+//       }
+//     }
 
-    // =====================================================
-    // RETURN VALIDATION ERRORS
-    // =====================================================
+//     // =====================================================
+//     // RETURN VALIDATION ERRORS
+//     // =====================================================
 
-    if (validationErrors.length > 0) {
-      return res.status(400).json({
-        success: false,
+//     if (validationErrors.length > 0) {
+//       return res.status(400).json({
+//         success: false,
 
-        message: "Please correct the highlighted fields and try again.",
+//         message: "Please correct the highlighted fields and try again.",
 
-        errors: validationErrors,
-      });
-    }
+//         errors: validationErrors,
+//       });
+//     }
 
-    // =====================================================
-    // HANDLE PASSWORD UPDATE
-    // =====================================================
+//     // =====================================================
+//     // HANDLE PASSWORD UPDATE
+//     // =====================================================
 
-    if (updateData.newPassword) {
-      const hashedPassword = await bcrypt.hash(updateData.newPassword, 10);
+//     if (updateData.newPassword) {
+//       const hashedPassword = await bcrypt.hash(updateData.newPassword, 10);
 
-      updateData.password = hashedPassword;
+//       updateData.password = hashedPassword;
 
-      delete updateData.newPassword;
-    }
+//       delete updateData.newPassword;
+//     }
 
-    // =====================================================
-    // HANDLE PROFILE IMAGE
-    // =====================================================
+//     // =====================================================
+//     // HANDLE PROFILE IMAGE
+//     // =====================================================
 
-    if (
-      updateData.profileImage &&
-      !updateData.profileImage.startsWith("http")
-    ) {
-      try {
-        let imageBase64 = updateData.profileImage.trim();
+//     if (
+//       updateData.profileImage &&
+//       !updateData.profileImage.startsWith("http")
+//     ) {
+//       try {
+//         let imageBase64 = updateData.profileImage.trim();
 
-        // ADD DATA URI IF RAW BASE64
+//         // ADD DATA URI IF RAW BASE64
 
-        if (!imageBase64.startsWith("data:")) {
-          imageBase64 = `data:image/jpeg;base64,${imageBase64}`;
-        }
+//         if (!imageBase64.startsWith("data:")) {
+//           imageBase64 = `data:image/jpeg;base64,${imageBase64}`;
+//         }
 
-        const uploadResult = await cloudinary.uploader.upload(imageBase64, {
-          folder: "users",
+//         const uploadResult = await cloudinary.uploader.upload(imageBase64, {
+//           folder: "users",
 
-          public_id: `user_${user.id}_${Date.now()}`,
+//           public_id: `user_${user.id}_${Date.now()}`,
 
-          transformation: [
-            {
-              width: 500,
-              height: 500,
-              crop: "fill",
-            },
-          ],
-        });
+//           transformation: [
+//             {
+//               width: 500,
+//               height: 500,
+//               crop: "fill",
+//             },
+//           ],
+//         });
 
-        updateData.profileImage = uploadResult.secure_url;
-      } catch (err) {
-        console.error("Cloudinary Upload Error:", err);
+//         updateData.profileImage = uploadResult.secure_url;
+//       } catch (err) {
+//         console.error("Cloudinary Upload Error:", err);
 
-        return res.status(400).json({
-          success: false,
+//         return res.status(400).json({
+//           success: false,
 
-          field: "profileImage",
+//           field: "profileImage",
 
-          message: "Profile image upload failed.",
+//           message: "Profile image upload failed.",
 
-          details: "Please try another image or use a smaller file size.",
-        });
-      }
-    }
+//           details: "Please try another image or use a smaller file size.",
+//         });
+//       }
+//     }
 
-    // =====================================================
-    // REMOVE UNSAFE FIELDS
-    // =====================================================
+//     // =====================================================
+//     // REMOVE UNSAFE FIELDS
+//     // =====================================================
 
-    delete updateData.id;
-    delete updateData.createdAt;
-    delete updateData.updatedAt;
+//     delete updateData.id;
+//     delete updateData.createdAt;
+//     delete updateData.updatedAt;
 
-    // =====================================================
-    // UPDATE USER
-    // =====================================================
+//     // =====================================================
+//     // UPDATE USER
+//     // =====================================================
 
-    await db.User.update(updateData, {
-      where: {
-        id: userId,
-      },
-    });
+//     await db.User.update(updateData, {
+//       where: {
+//         id: userId,
+//       },
+//     });
 
-    // =====================================================
-    // FETCH UPDATED USER
-    // =====================================================
+//     // =====================================================
+//     // FETCH UPDATED USER
+//     // =====================================================
 
-    const updatedUser = await db.User.findByPk(userId);
+//     const updatedUser = await db.User.findByPk(userId);
 
-    // =====================================================
-    // SUCCESS RESPONSE
-    // =====================================================
+//     // =====================================================
+//     // SUCCESS RESPONSE
+//     // =====================================================
 
-    return res.status(200).json({
-      success: true,
+//     return res.status(200).json({
+//       success: true,
 
-      message: "Your account has been updated successfully.",
+//       message: "Your account has been updated successfully.",
 
-      user: updatedUser,
-    });
-  } catch (err) {
-    console.error("User Update Route Error:", err);
+//       user: updatedUser,
+//     });
+//   } catch (err) {
+//     console.error("User Update Route Error:", err);
 
-    return res.status(500).json({
-      success: false,
+//     return res.status(500).json({
+//       success: false,
 
-      message: "Something went wrong while updating your account.",
+//       message: "Something went wrong while updating your account.",
 
-      details: "Please try again in a few moments.",
-    });
-  }
-});
+//       details: "Please try again in a few moments.",
+//     });
+//   }
+// });
 
 router.post("/signUp", async (req, res) => {
   const { email, password } = req.body;

From 5af6d6f471dd015310628a20fcdc9304fd82715f Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Thu, 28 May 2026 18:14:27 -0400
Subject: [PATCH 3/5] updates

---
 .../User/IT-Ticket/CreateTicket.tsx           | 803 ++++++++++++++----
 1 file changed, 639 insertions(+), 164 deletions(-)

diff --git a/client/src/containers/User/IT-Ticket/CreateTicket.tsx b/client/src/containers/User/IT-Ticket/CreateTicket.tsx
index 2e3edf2..d08f710 100644
--- a/client/src/containers/User/IT-Ticket/CreateTicket.tsx
+++ b/client/src/containers/User/IT-Ticket/CreateTicket.tsx
@@ -29,12 +29,20 @@ interface Ticket {
 }
 
 const CreateTicket = () => {
+  // =====================================================
+  // USER INFO
+  // =====================================================
+
   const [name, setName] =
     useState("");
 
   const [email, setEmail] =
     useState("");
 
+  // =====================================================
+  // FORM
+  // =====================================================
+
   const [subject, setSubject] =
     useState("");
 
@@ -46,6 +54,10 @@ const CreateTicket = () => {
   const [priority, setPriority] =
     useState("normal");
 
+  // =====================================================
+  // UI STATE
+  // =====================================================
+
   const [loading, setLoading] =
     useState(false);
 
@@ -55,6 +67,13 @@ const CreateTicket = () => {
   const [error, setError] =
     useState("");
 
+  const [infoMessage, setInfoMessage] =
+    useState("");
+
+  // =====================================================
+  // TICKETS
+  // =====================================================
+
   const [tickets, setTickets] =
     useState<Ticket[]>([]);
 
@@ -66,34 +85,172 @@ const CreateTicket = () => {
     setSortBy,
   ] = useState("newest");
 
-  // -----------------------------------
+  // =====================================================
+  // AUTO LOAD USER
+  // =====================================================
+
+  useEffect(() => {
+    const storedUser =
+      localStorage.getItem("user");
+
+    if (!storedUser) return;
+
+    try {
+      const parsed =
+        JSON.parse(storedUser);
+
+      setName(
+        parsed.name ||
+        parsed.fullName ||
+        ""
+      );
+
+      setEmail(
+        parsed.email || ""
+      );
+    } catch (err) {
+      console.error(
+        "User Parse Error:",
+        err
+      );
+    }
+  }, []);
+
+  // =====================================================
   // FETCH USER TICKETS
-  // -----------------------------------
+  // =====================================================
 
   const fetchTickets = async (
     userEmail: string
   ) => {
     try {
+      if (
+        !userEmail ||
+        !userEmail.trim()
+      ) {
+        return;
+      }
+
+      const cleanEmail =
+        userEmail
+          .toLowerCase()
+          .trim();
+
       const res = await axios.get(
-        "/api/it-help/view"
+        "/api/it-help/view",
+        {
+          withCredentials: true,
+        }
       );
 
+      const allTickets =
+        Array.isArray(res.data)
+          ? res.data
+          : [];
+
       const filtered =
-        res.data.filter(
+        allTickets.filter(
           (ticket: Ticket) =>
-            ticket.email ===
-            userEmail
+            ticket.email
+              ?.toLowerCase()
+              .trim() ===
+            cleanEmail
         );
 
       setTickets(filtered);
     } catch (err) {
-      console.error(err);
+      console.error(
+        "Fetch Tickets Error:",
+        err
+      );
+    }
+  };
+
+  // =====================================================
+  // LOAD TICKETS WHEN EMAIL EXISTS
+  // =====================================================
+
+  useEffect(() => {
+    if (email.trim()) {
+      fetchTickets(email);
+    }
+  }, [email]);
+
+  // =====================================================
+  // VALIDATION
+  // =====================================================
+
+  const validateForm = () => {
+    if (!name.trim()) {
+      setError(
+        "Your full name is required before creating a support ticket."
+      );
+
+      return false;
+    }
+
+    if (!email.trim()) {
+      setError(
+        "Your email address is required so support can identify and track your tickets."
+      );
+
+      return false;
+    }
+
+    if (
+      !email.includes("@") ||
+      !email.includes(".")
+    ) {
+      setError(
+        "Please enter a valid email address."
+      );
+
+      return false;
+    }
+
+    if (!subject.trim()) {
+      setError(
+        "A ticket subject is required."
+      );
+
+      return false;
+    }
+
+    if (
+      subject.trim().length < 5
+    ) {
+      setError(
+        "Ticket subject must be at least 5 characters long."
+      );
+
+      return false;
+    }
+
+    if (!description.trim()) {
+      setError(
+        "Please explain the issue before submitting your ticket."
+      );
+
+      return false;
+    }
+
+    if (
+      description.trim()
+        .length < 15
+    ) {
+      setError(
+        "Please provide a more detailed explanation of the issue."
+      );
+
+      return false;
     }
+
+    return true;
   };
 
-  // -----------------------------------
+  // =====================================================
   // SUBMIT
-  // -----------------------------------
+  // =====================================================
 
   const submitTicket =
     async (
@@ -102,73 +259,136 @@ const CreateTicket = () => {
       e.preventDefault();
 
       setLoading(true);
+
       setSuccess("");
+
       setError("");
 
+      setInfoMessage("");
+
       try {
+        const valid =
+          validateForm();
+
+        if (!valid) {
+          setLoading(false);
+          return;
+        }
+
+        const payload = {
+          name:
+            name.trim(),
+
+          email:
+            email
+              .toLowerCase()
+              .trim(),
+
+          subject:
+            subject.trim(),
+
+          description:
+            description.trim(),
+
+          priority,
+
+          status: "open",
+        };
+
         await axios.post(
           "/api/it-help/post-ticket",
+          payload,
           {
-            name,
-            email,
-            subject,
-            description,
-            priority,
-            status: "open",
+            withCredentials: true,
           }
         );
 
         setSuccess(
-          "Ticket created successfully."
+          "Support ticket created successfully. Your request has been submitted and is now being tracked."
+        );
+
+        setInfoMessage(
+          "Your tickets are linked to your email address. Use the same email every time to view your ticket history."
         );
 
         setSubject("");
+
         setDescription("");
-        setPriority("normal");
 
-        fetchTickets(email);
-      } catch (err) {
-        console.error(err);
+        setPriority(
+          "normal"
+        );
 
-        setError(
-          "Unable to create ticket."
+        await fetchTickets(
+          email
+        );
+      } catch (err: any) {
+        console.error(
+          "Create Ticket Error:",
+          err
         );
+
+        if (
+          err?.response?.status ===
+          400
+        ) {
+          setError(
+            err.response.data
+              ?.message ||
+            "Some required ticket information is missing."
+          );
+        } else if (
+          err?.response?.status ===
+          401
+        ) {
+          setError(
+            "Your session expired. Please sign in again."
+          );
+        } else if (
+          err?.response?.status ===
+          500
+        ) {
+          setError(
+            "The server encountered an error while creating your ticket. Please try again."
+          );
+        } else {
+          setError(
+            "Unable to create ticket right now. Please try again."
+          );
+        }
       } finally {
         setLoading(false);
       }
     };
 
-  // -----------------------------------
-  // LOAD TICKETS AFTER EMAIL
-  // -----------------------------------
-
-  useEffect(() => {
-    if (email.trim()) {
-      fetchTickets(email);
-    }
-  }, [email]);
-
-  // -----------------------------------
+  // =====================================================
   // FILTER + SORT
-  // -----------------------------------
+  // =====================================================
 
   const filteredTickets =
     useMemo(() => {
-      let filtered = tickets.filter(
-        (ticket) =>
-          ticket.subject
-            ?.toLowerCase()
-            .includes(
-              search.toLowerCase()
-            ) ||
-          ticket.description
-            ?.toLowerCase()
-            .includes(
-              search.toLowerCase()
-            )
-      );
+      let filtered = [
+        ...tickets,
+      ];
+
+      filtered =
+        filtered.filter(
+          (ticket) =>
+            ticket.subject
+              ?.toLowerCase()
+              .includes(
+                search.toLowerCase()
+              ) ||
+            ticket.description
+              ?.toLowerCase()
+              .includes(
+                search.toLowerCase()
+              )
+        );
 
-      if (sortBy === "newest") {
+      if (
+        sortBy === "newest"
+      ) {
         filtered.sort(
           (a, b) =>
             new Date(
@@ -180,7 +400,9 @@ const CreateTicket = () => {
         );
       }
 
-      if (sortBy === "oldest") {
+      if (
+        sortBy === "oldest"
+      ) {
         filtered.sort(
           (a, b) =>
             new Date(
@@ -192,16 +414,40 @@ const CreateTicket = () => {
         );
       }
 
+      if (
+        sortBy === "priority"
+      ) {
+        const order: any = {
+          urgent: 4,
+          high: 3,
+          normal: 2,
+          low: 1,
+        };
+
+        filtered.sort(
+          (a, b) =>
+            (order[
+              b.priority || ""
+            ] || 0) -
+            (order[
+              a.priority || ""
+            ] || 0)
+        );
+      }
+
       return filtered;
-    }, [tickets, search, sortBy]);
+    }, [
+      tickets,
+      search,
+      sortBy,
+    ]);
 
-  // -----------------------------------
+  // =====================================================
   // RENDER
-  // -----------------------------------
+  // =====================================================
 
   return (
     <div className={styles.page}>
-
       <div className={styles.bgGrid}></div>
 
       <div className={styles.glow1}></div>
@@ -209,11 +455,9 @@ const CreateTicket = () => {
       <div className={styles.glow2}></div>
 
       <div className={styles.wrapper}>
-
         {/* HERO */}
 
         <div className={styles.hero}>
-
           <h1 className={styles.title}>
             Support Command Center
           </h1>
@@ -224,17 +468,14 @@ const CreateTicket = () => {
             and manage your issues
             in real time.
           </p>
-
         </div>
 
         {/* GRID */}
 
         <div className={styles.grid}>
-
           {/* LEFT */}
 
           <div className={styles.card}>
-
             <div
               className={
                 styles.cardHeader
@@ -250,162 +491,355 @@ const CreateTicket = () => {
               </p>
             </div>
 
-            <form
-              className={styles.form}
-              onSubmit={submitTicket}
+            {/* USER HELP BOX */}
+
+            <div
+              style={{
+                padding:
+                  "18px",
+                marginBottom:
+                  "24px",
+                borderRadius:
+                  "18px",
+                background:
+                  "rgba(59,130,246,0.08)",
+                border:
+                  "1px solid rgba(59,130,246,0.25)",
+              }}
             >
+              <div
+                style={{
+                  fontSize:
+                    "13px",
+                  fontWeight:
+                    700,
+                  marginBottom:
+                    "10px",
+                  color:
+                    "#93c5fd",
+                  textTransform:
+                    "uppercase",
+                  letterSpacing:
+                    "0.08em",
+                }}
+              >
+                Important Ticket Information
+              </div>
 
-              {/* NAME + EMAIL GRID */}
+              <ul
+                style={{
+                  margin: 0,
+                  paddingLeft:
+                    "18px",
+                  lineHeight:
+                    1.7,
+                  color:
+                    "#dbeafe",
+                  fontSize:
+                    "14px",
+                }}
+              >
+                <li>
+                  Your email
+                  address is used
+                  to load your
+                  tickets.
+                </li>
+
+                <li>
+                  Always use the
+                  same email to
+                  access your
+                  ticket history.
+                </li>
+
+                <li>
+                  Ticket subjects
+                  should clearly
+                  explain the
+                  issue.
+                </li>
+
+                <li>
+                  Detailed
+                  descriptions
+                  help support
+                  resolve issues
+                  faster.
+                </li>
+              </ul>
+            </div>
 
-              <div className={styles.topGrid}>
+            {/* FORM */}
 
-                <div className={styles.inputWrap}>
+            <form
+              className={
+                styles.form
+              }
+              onSubmit={
+                submitTicket
+              }
+            >
+              {/* NAME + EMAIL */}
 
-                  <label className={styles.label}>
+              <div
+                className={
+                  styles.topGrid
+                }
+              >
+                <div
+                  className={
+                    styles.inputWrap
+                  }
+                >
+                  <label
+                    className={
+                      styles.label
+                    }
+                  >
                     Full Name
                   </label>
 
-                  <div className={styles.inputShell}>
-
-                    <span className={styles.inputIcon}>
+                  <div
+                    className={
+                      styles.inputShell
+                    }
+                  >
+                    <span
+                      className={
+                        styles.inputIcon
+                      }
+                    >
                       👤
                     </span>
 
                     <input
-                      className={styles.inputModern}
-                      placeholder="Your full name"
-                      value={name}
-                      onChange={(e) =>
-                        setName(e.target.value)
+                      className={
+                        styles.inputModern
+                      }
+                      placeholder="Enter your full name"
+                      value={
+                        name
+                      }
+                      onChange={(
+                        e
+                      ) =>
+                        setName(
+                          e.target
+                            .value
+                        )
                       }
                       required
                     />
-
                   </div>
-
                 </div>
 
-                <div className={styles.inputWrap}>
-
-                  <label className={styles.label}>
+                <div
+                  className={
+                    styles.inputWrap
+                  }
+                >
+                  <label
+                    className={
+                      styles.label
+                    }
+                  >
                     Email Address
                   </label>
 
-                  <div className={styles.inputShell}>
-
-                    <span className={styles.inputIcon}>
+                  <div
+                    className={
+                      styles.inputShell
+                    }
+                  >
+                    <span
+                      className={
+                        styles.inputIcon
+                      }
+                    >
                       ✉️
                     </span>
 
                     <input
-                      className={styles.inputModern}
-                      placeholder="Your email"
-                      value={email}
-                      onChange={(e) =>
-                        setEmail(e.target.value)
+                      type="email"
+                      className={
+                        styles.inputModern
+                      }
+                      placeholder="Enter your email address"
+                      value={
+                        email
+                      }
+                      onChange={(
+                        e
+                      ) =>
+                        setEmail(
+                          e.target
+                            .value
+                        )
                       }
                       required
                     />
-
                   </div>
-
                 </div>
-
               </div>
 
               {/* SUBJECT */}
 
-              <div className={styles.inputWrap}>
-
-                <label className={styles.label}>
+              <div
+                className={
+                  styles.inputWrap
+                }
+              >
+                <label
+                  className={
+                    styles.label
+                  }
+                >
                   Ticket Subject
                 </label>
 
-                <div className={styles.inputShell}>
-
-                  <span className={styles.inputIcon}>
+                <div
+                  className={
+                    styles.inputShell
+                  }
+                >
+                  <span
+                    className={
+                      styles.inputIcon
+                    }
+                  >
                     🎫
                   </span>
 
                   <input
-                    className={styles.inputModern}
-                    placeholder="Describe the issue title"
-                    value={subject}
-                    onChange={(e) =>
-                      setSubject(e.target.value)
+                    className={
+                      styles.inputModern
+                    }
+                    placeholder="Example: Unable to access dashboard"
+                    value={
+                      subject
+                    }
+                    onChange={(
+                      e
+                    ) =>
+                      setSubject(
+                        e.target
+                          .value
+                      )
                     }
                     required
                   />
-
                 </div>
-
               </div>
 
               {/* DESCRIPTION */}
 
-              <div className={styles.inputWrap}>
-
-                <label className={styles.label}>
+              <div
+                className={
+                  styles.inputWrap
+                }
+              >
+                <label
+                  className={
+                    styles.label
+                  }
+                >
                   Full Description
                 </label>
 
-                <div className={styles.textareaShell}>
-
+                <div
+                  className={
+                    styles.textareaShell
+                  }
+                >
                   <textarea
-                    className={styles.textareaModern}
-                    placeholder="Explain your issue in detail..."
-                    value={description}
-                    onChange={(e) =>
+                    className={
+                      styles.textareaModern
+                    }
+                    placeholder="Describe the issue, what happened, when it started, and any errors you received..."
+                    value={
+                      description
+                    }
+                    onChange={(
+                      e
+                    ) =>
                       setDescription(
-                        e.target.value
+                        e.target
+                          .value
                       )
                     }
                     required
                   />
-
                 </div>
-
               </div>
 
               {/* PRIORITY */}
 
-              <div className={styles.inputWrap}>
-
-                <label className={styles.label}>
+              <div
+                className={
+                  styles.inputWrap
+                }
+              >
+                <label
+                  className={
+                    styles.label
+                  }
+                >
                   Priority Level
                 </label>
 
-                <div className={styles.priorityGrid}>
-
+                <div
+                  className={
+                    styles.priorityGrid
+                  }
+                >
                   <button
                     type="button"
-                    className={`${styles.priorityCard} ${priority === "low"
+                    className={`${styles.priorityCard} ${priority ===
+                        "low"
                         ? styles.priorityActive
                         : ""
                       }`}
                     onClick={() =>
-                      setPriority("low")
+                      setPriority(
+                        "low"
+                      )
                     }
                   >
-                    <span>🟢</span>
-                    <strong>Low</strong>
+                    <span>
+                      🟢
+                    </span>
+
+                    <strong>
+                      Low
+                    </strong>
+
                     <small>
-                      Non urgent request
+                      Minor issue
                     </small>
                   </button>
 
                   <button
                     type="button"
-                    className={`${styles.priorityCard} ${priority === "normal"
+                    className={`${styles.priorityCard} ${priority ===
+                        "normal"
                         ? styles.priorityActive
                         : ""
                       }`}
                     onClick={() =>
-                      setPriority("normal")
+                      setPriority(
+                        "normal"
+                      )
                     }
                   >
-                    <span>🔵</span>
-                    <strong>Normal</strong>
+                    <span>
+                      🔵
+                    </span>
+
+                    <strong>
+                      Normal
+                    </strong>
+
                     <small>
                       Standard support
                     </small>
@@ -413,48 +847,68 @@ const CreateTicket = () => {
 
                   <button
                     type="button"
-                    className={`${styles.priorityCard} ${priority === "high"
+                    className={`${styles.priorityCard} ${priority ===
+                        "high"
                         ? styles.priorityActive
                         : ""
                       }`}
                     onClick={() =>
-                      setPriority("high")
+                      setPriority(
+                        "high"
+                      )
                     }
                   >
-                    <span>🟠</span>
-                    <strong>High</strong>
+                    <span>
+                      🟠
+                    </span>
+
+                    <strong>
+                      High
+                    </strong>
+
                     <small>
-                      Needs quick attention
+                      Needs attention
                     </small>
                   </button>
 
                   <button
                     type="button"
-                    className={`${styles.priorityCard} ${priority === "urgent"
+                    className={`${styles.priorityCard} ${priority ===
+                        "urgent"
                         ? styles.priorityActive
                         : ""
                       }`}
                     onClick={() =>
-                      setPriority("urgent")
+                      setPriority(
+                        "urgent"
+                      )
                     }
                   >
-                    <span>🔴</span>
-                    <strong>Urgent</strong>
+                    <span>
+                      🔴
+                    </span>
+
+                    <strong>
+                      Urgent
+                    </strong>
+
                     <small>
                       Critical issue
                     </small>
                   </button>
-
                 </div>
-
               </div>
 
               {/* BUTTON */}
 
               <button
                 type="submit"
-                className={styles.submitBtn}
-                disabled={loading}
+                className={
+                  styles.submitBtn
+                }
+                disabled={
+                  loading
+                }
               >
                 <span>
                   {loading
@@ -462,9 +916,10 @@ const CreateTicket = () => {
                     : "Launch Support Ticket"}
                 </span>
               </button>
-
             </form>
 
+            {/* SUCCESS */}
+
             {success && (
               <div
                 className={
@@ -475,6 +930,33 @@ const CreateTicket = () => {
               </div>
             )}
 
+            {/* INFO */}
+
+            {infoMessage && (
+              <div
+                style={{
+                  marginTop:
+                    "16px",
+                  padding:
+                    "16px",
+                  borderRadius:
+                    "14px",
+                  background:
+                    "rgba(59,130,246,0.08)",
+                  border:
+                    "1px solid rgba(59,130,246,0.20)",
+                  color:
+                    "#dbeafe",
+                }}
+              >
+                {
+                  infoMessage
+                }
+              </div>
+            )}
+
+            {/* ERROR */}
+
             {error && (
               <div
                 className={
@@ -484,13 +966,11 @@ const CreateTicket = () => {
                 {error}
               </div>
             )}
-
           </div>
 
           {/* RIGHT */}
 
           <div className={styles.card}>
-
             <div
               className={
                 styles.cardHeader
@@ -513,7 +993,6 @@ const CreateTicket = () => {
                 styles.controls
               }
             >
-
               <input
                 className={
                   styles.searchInput
@@ -545,18 +1024,20 @@ const CreateTicket = () => {
                 <option value="oldest">
                   Oldest
                 </option>
-              </select>
 
+                <option value="priority">
+                  Priority
+                </option>
+              </select>
             </div>
 
-            {/* TICKETS */}
+            {/* TICKET LIST */}
 
             <div
               className={
                 styles.ticketList
               }
             >
-
               {filteredTickets.length ===
                 0 ? (
                 <div
@@ -564,7 +1045,8 @@ const CreateTicket = () => {
                     styles.emptyState
                   }
                 >
-                  No tickets found.
+                  No tickets found for
+                  this email address.
                 </div>
               ) : (
                 filteredTickets.map(
@@ -577,13 +1059,11 @@ const CreateTicket = () => {
                         styles.ticketCard
                       }
                     >
-
                       <div
                         className={
                           styles.ticketTop
                         }
                       >
-
                         <h3>
                           {
                             ticket.subject
@@ -604,7 +1084,6 @@ const CreateTicket = () => {
                             ticket.status
                           }
                         </span>
-
                       </div>
 
                       <p
@@ -622,13 +1101,14 @@ const CreateTicket = () => {
                           styles.ticketFooter
                         }
                       >
-
                         <span>
                           Priority:
                           {" "}
-                          {
-                            ticket.priority
-                          }
+                          <strong>
+                            {
+                              ticket.priority
+                            }
+                          </strong>
                         </span>
 
                         <span>
@@ -638,20 +1118,17 @@ const CreateTicket = () => {
                             ).toLocaleString()
                             : ""}
                         </span>
-
                       </div>
-
                     </div>
                   )
                 )
               )}
-
             </div>
-
           </div>
-
         </div>
 
+        {/* BACK */}
+
         <Link
           to="/"
           className={
@@ -660,11 +1137,9 @@ const CreateTicket = () => {
         >
           ← Back Home
         </Link>
-
       </div>
-
     </div>
   );
 };
 
-export default CreateTicket;
+export default CreateTicket;
\ No newline at end of file

From 19817bb3ac57a88c3014d770dcf8977b31f957a4 Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Thu, 28 May 2026 18:31:19 -0400
Subject: [PATCH 4/5] updates

---
 .../containers/User/Profile/ProfileUpdate.tsx | 1268 +++++++++++++----
 1 file changed, 1017 insertions(+), 251 deletions(-)

diff --git a/client/src/containers/User/Profile/ProfileUpdate.tsx b/client/src/containers/User/Profile/ProfileUpdate.tsx
index c0f439c..292314c 100644
--- a/client/src/containers/User/Profile/ProfileUpdate.tsx
+++ b/client/src/containers/User/Profile/ProfileUpdate.tsx
@@ -1,312 +1,1078 @@
-import React, { useEffect, useState } from "react";
+import React, {
+  useEffect,
+  useState,
+} from "react";
+
 import axios from "axios";
-import { Form, Alert, Card, Spinner } from "react-bootstrap";
+
+import {
+  Form,
+  Alert,
+  Card,
+  Spinner,
+} from "react-bootstrap";
+
 import { Link } from "react-router-dom";
+
 import styles from "./ProfileUpdate.module.css";
 
 type User = {
   id: string;
+
   email: string;
+
   password?: string;
+
   newPassword?: string;
+
   description: string;
+
   userType: string;
+
   experienceLevel: string;
+
   location: string;
+
   availableFrom: string;
-  profileImage?: string; // <-- HTTP URL from DB
+
+  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 [selectedFile, setSelectedFile] = useState<File | null>(null);
-
-  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 fetchUser = async () => {
-      setLoading(true);
-
-      try {
-        const token = localStorage.getItem("token");
-        if (!token) {
-          setError("No token found.");
-          return;
-        }
+  process.env
+    .REACT_APP_SOCKET_IO_CLIENT_PORT ||
+  "http://localhost:3001";
+
+const ProfileUpdate: React.FC =
+  () => {
+    // =====================================================
+    // USER ID
+    // =====================================================
+
+    const userId =
+      localStorage.getItem(
+        "userId"
+      ) || "";
+
+    // =====================================================
+    // FORM DATA
+    // =====================================================
+
+    const [formData, setFormData] =
+      useState<User>({
+        id: "",
+
+        email: "",
+
+        password: "",
+
+        newPassword: "",
+
+        description: "",
+
+        userType: "",
+
+        experienceLevel:
+          "",
+
+        location: "",
+
+        availableFrom: "",
+
+        profileImage: "",
+
+        phoneNumber: "",
+
+        driversLicense: "",
+
+        comments: "",
+
+        qrCode: "",
+      });
+
+    // =====================================================
+    // FILE
+    // =====================================================
+
+    const [
+      selectedFile,
+      setSelectedFile,
+    ] = useState<File | null>(
+      null
+    );
+
+    const [
+      imagePreview,
+      setImagePreview,
+    ] = useState("");
+
+    // =====================================================
+    // UI STATE
+    // =====================================================
+
+    const [loading, setLoading] =
+      useState(false);
+
+    const [
+      isSubmitting,
+      setIsSubmitting,
+    ] = useState(false);
+
+    const [error, setError] =
+      useState<string | null>(
+        null
+      );
+
+    const [
+      successMessage,
+      setSuccessMessage,
+    ] = useState<
+      string | null
+    >(null);
+
+    const [
+      infoMessage,
+      setInfoMessage,
+    ] = useState<
+      string | null
+    >(null);
+
+    // =====================================================
+    // FETCH USER
+    // =====================================================
+
+    useEffect(() => {
+      const fetchUser =
+        async () => {
+          setLoading(true);
+
+          setError(null);
 
-        const res = await axios.get(
-          `${ServerPort}/api/user/view/${userId}`,
-          { headers: { Authorization: `Bearer ${token}` } }
+          try {
+            const token =
+              localStorage.getItem(
+                "token"
+              );
+
+            if (!token) {
+              setError(
+                "Your login session was not found. Please sign in again before updating your profile."
+              );
+
+              return;
+            }
+
+            const res =
+              await axios.get(
+                `${ServerPort}/api/user/view/${userId}`,
+                {
+                  headers: {
+                    Authorization: `Bearer ${token}`,
+                  },
+                }
+              );
+
+            const user =
+              res.data.user ??
+              res.data;
+
+            setFormData({
+              ...user,
+
+              availableFrom:
+                user.availableFrom?.split(
+                  "T"
+                )[0] || "",
+
+              password: "",
+
+              newPassword: "",
+            });
+
+            setImagePreview(
+              user.profileImage ||
+              ""
+            );
+
+            setInfoMessage(
+              "Keep your email and phone number accurate so your account and tickets can be recovered if needed."
+            );
+          } catch (err: any) {
+            console.error(
+              "Fetch User Error:",
+              err
+            );
+
+            setError(
+              err?.response?.data
+                ?.message ||
+              "Failed to load profile information."
+            );
+          } finally {
+            setLoading(false);
+          }
+        };
+
+      if (userId) {
+        fetchUser();
+      }
+    }, [userId]);
+
+    // =====================================================
+    // FILE CHANGE
+    // =====================================================
+
+    const handleFileChange = (
+      e: React.ChangeEvent<HTMLInputElement>
+    ) => {
+      const file =
+        e.target.files?.[0] ||
+        null;
+
+      if (!file) return;
+
+      // FILE VALIDATION
+
+      if (
+        !file.type.startsWith(
+          "image/"
+        )
+      ) {
+        setError(
+          "Only image files are allowed for profile photos."
         );
 
-        const user = res.data.user ?? res.data;
-
-        setFormData({
-          ...user,
-          availableFrom: user.availableFrom?.split("T")[0] || "",
-          password: "",
-          newPassword: "",
-        });
-      } catch (err: any) {
-        setError(err?.message || "Failed to load profile");
-      } finally {
-        setLoading(false);
+        return;
       }
-    };
 
-    if (userId) fetchUser();
-  }, [userId]);
+      if (
+        file.size >
+        5 * 1024 * 1024
+      ) {
+        setError(
+          "Profile images must be under 5MB."
+        );
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0] || null;
-    setSelectedFile(file);
-  };
+        return;
+      }
 
-  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 = reject;
-    });
+      setSelectedFile(file);
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+      setError(null);
 
-    setError(null);
-    setSuccessMessage(null);
-    setIsSubmitting(true);
+      const previewUrl =
+        URL.createObjectURL(file);
 
-    try {
-      const token = localStorage.getItem("token");
+      setImagePreview(
+        previewUrl
+      );
+    };
 
-      const payload: any = { ...formData };
+    // =====================================================
+    // FILE TO BASE64
+    // =====================================================
 
-      // remove password if not changing
-      if (!formData.newPassword) delete payload.password;
+    const fileToBase64 = (
+      file: File
+    ): Promise<string> =>
+      new Promise(
+        (
+          resolve,
+          reject
+        ) => {
+          const reader =
+            new FileReader();
 
-      // upload image only if user selected a new one
-      if (selectedFile) {
-        payload.profileImage = await fileToBase64(selectedFile);
-      }
+          reader.readAsDataURL(
+            file
+          );
+
+          reader.onload = () =>
+            resolve(
+              reader.result as string
+            );
 
-      const res = await axios.put(
-        `${ServerPort}/api/user/update/${userId}`,
-        payload,
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-            "Content-Type": "application/json",
-          },
+          reader.onerror =
+            reject;
         }
       );
 
-      const updated = res.data.user ?? res.data;
+    // =====================================================
+    // VALIDATION
+    // =====================================================
 
-      setFormData((prev) => ({
-        ...prev,
-        ...updated,
-        newPassword: "",
-      }));
-
-      setSelectedFile(null);
-      setSuccessMessage("Profile updated successfully");
-    } catch (err: any) {
-      setError(err?.message || "Update failed");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
+    const validateForm =
+      () => {
+        if (
+          !formData.email
+            .trim()
+        ) {
+          setError(
+            "Email address is required."
+          );
 
-  return (
-    <div className={styles.container}>
-      <div className={styles.glow} />
-
-      <Card className={styles.card}>
-        <div className={styles.header}>
-          <h2>⚙️ Profile Settings</h2>
-          <p>Update your account details</p>
-        </div>
-
-        {loading && (
-          <Spinner animation="border" className={styles.spinner} />
-        )}
-
-        {error && <Alert variant="danger">{error}</Alert>}
-        {successMessage && (
-          <Alert variant="success">{successMessage}</Alert>
-        )}
-
-        {/* PROFILE IMAGE (ONLY FROM DB URL OR FALLBACK) */}
-        <div className={styles.avatar}>
-          <img
-            src={
-              formData.profileImage?.trim()
-                ? formData.profileImage
-                : "https://via.placeholder.com/150"
-            }
-            alt="profile"
-          />
-
-          <input type="file" onChange={handleFileChange} />
-        </div>
-
-        <Form onSubmit={handleSubmit} className={styles.form}>
-          <div className={styles.grid}>
-            <input
-              placeholder="Email"
-              value={formData.email}
-              onChange={(e) =>
-                setFormData({ ...formData, email: e.target.value })
-              }
-            />
+          return false;
+        }
+
+        if (
+          !formData.email.includes(
+            "@"
+          )
+        ) {
+          setError(
+            "Please enter a valid email address."
+          );
+
+          return false;
+        }
+
+        if (
+          formData
+            .newPassword &&
+          formData
+            .newPassword.length <
+          6
+        ) {
+          setError(
+            "New password must be at least 6 characters long."
+          );
+
+          return false;
+        }
+
+        if (
+          formData
+            .phoneNumber &&
+          formData
+            .phoneNumber.length <
+          7
+        ) {
+          setError(
+            "Please enter a valid phone number."
+          );
+
+          return false;
+        }
+
+        return true;
+      };
+
+    // =====================================================
+    // SUBMIT
+    // =====================================================
+
+    const handleSubmit =
+      async (
+        e: React.FormEvent
+      ) => {
+        e.preventDefault();
+
+        setError(null);
+
+        setSuccessMessage(
+          null
+        );
+
+        setIsSubmitting(
+          true
+        );
+
+        try {
+          const valid =
+            validateForm();
+
+          if (!valid) {
+            setIsSubmitting(
+              false
+            );
+
+            return;
+          }
+
+          const token =
+            localStorage.getItem(
+              "token"
+            );
+
+          if (!token) {
+            setError(
+              "Your session expired. Please log in again."
+            );
+
+            setIsSubmitting(
+              false
+            );
+
+            return;
+          }
+
+          const payload: any =
+          {
+            ...formData,
+          };
+
+          // REMOVE EMPTY PASSWORD
+
+          if (
+            !formData.newPassword
+          ) {
+            delete payload.password;
+
+            delete payload.newPassword;
+          }
+
+          // IMAGE UPLOAD
 
-            <input
-              placeholder="Description"
-              value={formData.description}
-              onChange={(e) =>
-                setFormData({
-                  ...formData,
-                  description: e.target.value,
-                })
+          if (
+            selectedFile
+          ) {
+            payload.profileImage =
+              await fileToBase64(
+                selectedFile
+              );
+          }
+
+          const res =
+            await axios.put(
+              `${ServerPort}/api/user/update/${userId}`,
+              payload,
+              {
+                headers: {
+                  Authorization: `Bearer ${token}`,
+
+                  "Content-Type":
+                    "application/json",
+                },
               }
-            />
+            );
+
+          const updated =
+            res.data.user ??
+            res.data;
+
+          setFormData(
+            (
+              prev
+            ) => ({
+              ...prev,
+
+              ...updated,
+
+              password: "",
+
+              newPassword:
+                "",
+            })
+          );
+
+          setSelectedFile(
+            null
+          );
+
+          setSuccessMessage(
+            "Your profile has been updated successfully."
+          );
+
+          setInfoMessage(
+            "Your account changes were saved successfully. If you changed your password, use the new password the next time you sign in."
+          );
+        } catch (err: any) {
+          console.error(
+            "Profile Update Error:",
+            err
+          );
+
+          if (
+            err?.response
+              ?.status ===
+            400
+          ) {
+            setError(
+              err.response
+                .data
+                ?.message ||
+              "Some required profile information is missing or invalid."
+            );
+          } else if (
+            err?.response
+              ?.status ===
+            401
+          ) {
+            setError(
+              "Your login session expired. Please sign in again."
+            );
+          } else if (
+            err?.response
+              ?.status ===
+            404
+          ) {
+            setError(
+              "Your account could not be found."
+            );
+          } else if (
+            err?.response
+              ?.status ===
+            500
+          ) {
+            setError(
+              "The server encountered an error while updating your profile."
+            );
+          } else {
+            setError(
+              err?.message ||
+              "Profile update failed."
+            );
+          }
+        } finally {
+          setIsSubmitting(
+            false
+          );
+        }
+      };
+
+    // =====================================================
+    // RENDER
+    // =====================================================
+
+    return (
+      <div
+        className={
+          styles.container
+        }
+      >
+        <div
+          className={
+            styles.glow
+          }
+        />
+
+        <Card
+          className={
+            styles.card
+          }
+        >
+          {/* HEADER */}
+
+          <div
+            className={
+              styles.header
+            }
+          >
+            <h2>
+              ⚙️ Profile
+              Settings
+            </h2>
+
+            <p>
+              Update your
+              account details,
+              password, and
+              profile image.
+            </p>
           </div>
 
-          <div className={styles.grid}>
-            <input
-              placeholder="User Type"
-              value={formData.userType}
-              onChange={(e) =>
-                setFormData({
-                  ...formData,
-                  userType: e.target.value,
-                })
+          {/* LOADING */}
+
+          {loading && (
+            <Spinner
+              animation="border"
+              className={
+                styles.spinner
               }
             />
+          )}
+
+          {/* ERROR */}
+
+          {error && (
+            <Alert variant="danger">
+              <strong>
+                Unable to
+                Update Profile
+              </strong>
+
+              <div
+                style={{
+                  marginTop:
+                    "8px",
+                }}
+              >
+                {error}
+              </div>
+            </Alert>
+          )}
 
-            <input
-              placeholder="Experience Level"
-              value={formData.experienceLevel}
-              onChange={(e) =>
-                setFormData({
-                  ...formData,
-                  experienceLevel: e.target.value,
-                })
+          {/* SUCCESS */}
+
+          {successMessage && (
+            <Alert variant="success">
+              <strong>
+                Success
+              </strong>
+
+              <div
+                style={{
+                  marginTop:
+                    "8px",
+                }}
+              >
+                {
+                  successMessage
+                }
+              </div>
+            </Alert>
+          )}
+
+          {/* INFO */}
+
+          {infoMessage && (
+            <Alert variant="info">
+              <strong>
+                Important
+                Information
+              </strong>
+
+              <div
+                style={{
+                  marginTop:
+                    "8px",
+                }}
+              >
+                {
+                  infoMessage
+                }
+              </div>
+            </Alert>
+          )}
+
+          {/* PROFILE IMAGE */}
+
+          <div
+            className={
+              styles.avatar
+            }
+          >
+            <img
+              src={
+                imagePreview?.trim()
+                  ? imagePreview
+                  : formData.profileImage?.trim()
+                    ? formData.profileImage
+                    : "https://via.placeholder.com/150"
               }
+              alt="profile"
             />
+
+            <div
+              style={{
+                marginTop:
+                  "14px",
+                width:
+                  "100%",
+              }}
+            >
+              <input
+                type="file"
+                accept="image/*"
+                onChange={
+                  handleFileChange
+                }
+              />
+
+              <div
+                style={{
+                  marginTop:
+                    "10px",
+                  fontSize:
+                    "13px",
+                  color:
+                    "#9ca3af",
+                  textAlign:
+                    "center",
+                }}
+              >
+                Upload a
+                profile image.
+                JPG, PNG, and
+                WEBP files are
+                supported.
+              </div>
+            </div>
           </div>
 
-          <div className={styles.grid}>
-            <input
-              placeholder="Location"
-              value={formData.location}
-              onChange={(e) =>
-                setFormData({
-                  ...formData,
-                  location: e.target.value,
-                })
+          {/* FORM */}
+
+          <Form
+            onSubmit={
+              handleSubmit
+            }
+            className={
+              styles.form
+            }
+          >
+            {/* EMAIL + DESCRIPTION */}
+
+            <div
+              className={
+                styles.grid
               }
-            />
+            >
+              <div>
+                <label>
+                  Email
+                  Address
+                </label>
+
+                <input
+                  type="email"
+                  placeholder="Email Address"
+                  value={
+                    formData.email
+                  }
+                  onChange={(
+                    e
+                  ) =>
+                    setFormData(
+                      {
+                        ...formData,
+
+                        email:
+                          e
+                            .target
+                            .value,
+                      }
+                    )
+                  }
+                />
+              </div>
+
+              <div>
+                <label>
+                  Description
+                </label>
+
+                <input
+                  placeholder="Short profile description"
+                  value={
+                    formData.description
+                  }
+                  onChange={(
+                    e
+                  ) =>
+                    setFormData(
+                      {
+                        ...formData,
 
-            <input
-              type="date"
-              value={formData.availableFrom}
-              onChange={(e) =>
-                setFormData({
-                  ...formData,
-                  availableFrom: e.target.value,
-                })
+                        description:
+                          e
+                            .target
+                            .value,
+                      }
+                    )
+                  }
+                />
+              </div>
+            </div>
+
+            {/* USER TYPE + EXPERIENCE */}
+
+            <div
+              className={
+                styles.grid
               }
-            />
-          </div>
+            >
+              <div>
+                <label>
+                  User Type
+                </label>
+
+                <input
+                  placeholder="User Type"
+                  value={
+                    formData.userType
+                  }
+                  onChange={(
+                    e
+                  ) =>
+                    setFormData(
+                      {
+                        ...formData,
+
+                        userType:
+                          e
+                            .target
+                            .value,
+                      }
+                    )
+                  }
+                />
+              </div>
 
-          <div className={styles.grid}>
-            <input
-              placeholder="Phone"
-              value={formData.phoneNumber}
-              onChange={(e) =>
-                setFormData({
-                  ...formData,
-                  phoneNumber: e.target.value,
-                })
+              <div>
+                <label>
+                  Experience
+                  Level
+                </label>
+
+                <input
+                  placeholder="Experience Level"
+                  value={
+                    formData.experienceLevel
+                  }
+                  onChange={(
+                    e
+                  ) =>
+                    setFormData(
+                      {
+                        ...formData,
+
+                        experienceLevel:
+                          e
+                            .target
+                            .value,
+                      }
+                    )
+                  }
+                />
+              </div>
+            </div>
+
+            {/* LOCATION + DATE */}
+
+            <div
+              className={
+                styles.grid
               }
-            />
+            >
+              <div>
+                <label>
+                  Location
+                </label>
+
+                <input
+                  placeholder="Location"
+                  value={
+                    formData.location
+                  }
+                  onChange={(
+                    e
+                  ) =>
+                    setFormData(
+                      {
+                        ...formData,
 
-            <input
-              placeholder="Driver License"
-              value={formData.driversLicense}
-              onChange={(e) =>
-                setFormData({
-                  ...formData,
-                  driversLicense: e.target.value,
-                })
+                        location:
+                          e
+                            .target
+                            .value,
+                      }
+                    )
+                  }
+                />
+              </div>
+
+              <div>
+                <label>
+                  Available
+                  From
+                </label>
+
+                <input
+                  type="date"
+                  value={
+                    formData.availableFrom
+                  }
+                  onChange={(
+                    e
+                  ) =>
+                    setFormData(
+                      {
+                        ...formData,
+
+                        availableFrom:
+                          e
+                            .target
+                            .value,
+                      }
+                    )
+                  }
+                />
+              </div>
+            </div>
+
+            {/* PHONE + LICENSE */}
+
+            <div
+              className={
+                styles.grid
               }
-            />
-          </div>
+            >
+              <div>
+                <label>
+                  Phone Number
+                </label>
 
-          <textarea
-            placeholder="Comments"
-            value={formData.comments}
-            onChange={(e) =>
-              setFormData({
-                ...formData,
-                comments: e.target.value,
-              })
-            }
-          />
-
-          <input
-            type="password"
-            placeholder="New Password"
-            value={formData.newPassword}
-            onChange={(e) =>
-              setFormData({
-                ...formData,
-                newPassword: e.target.value,
-              })
-            }
-          />
-
-          <button disabled={isSubmitting}>
-            {isSubmitting ? "Saving..." : "Save Changes"}
-          </button>
-
-          <Link to="/user" className={styles.back}>
-            ← Back
-          </Link>
-        </Form>
-      </Card>
-    </div>
-  );
-};
+                <input
+                  placeholder="Phone Number"
+                  value={
+                    formData.phoneNumber
+                  }
+                  onChange={(
+                    e
+                  ) =>
+                    setFormData(
+                      {
+                        ...formData,
+
+                        phoneNumber:
+                          e
+                            .target
+                            .value,
+                      }
+                    )
+                  }
+                />
+              </div>
+
+              <div>
+                <label>
+                  Driver
+                  License
+                </label>
+
+                <input
+                  placeholder="Driver License"
+                  value={
+                    formData.driversLicense
+                  }
+                  onChange={(
+                    e
+                  ) =>
+                    setFormData(
+                      {
+                        ...formData,
+
+                        driversLicense:
+                          e
+                            .target
+                            .value,
+                      }
+                    )
+                  }
+                />
+              </div>
+            </div>
+
+            {/* COMMENTS */}
+
+            <div>
+              <label>
+                Comments
+              </label>
+
+              <textarea
+                placeholder="Additional comments or information"
+                value={
+                  formData.comments
+                }
+                onChange={(
+                  e
+                ) =>
+                  setFormData(
+                    {
+                      ...formData,
+
+                      comments:
+                        e
+                          .target
+                          .value,
+                    }
+                  )
+                }
+              />
+            </div>
+
+            {/* PASSWORD */}
+
+            <div>
+              <label>
+                New Password
+              </label>
+
+              <input
+                type="password"
+                placeholder="Leave blank if you do not want to change your password"
+                value={
+                  formData.newPassword
+                }
+                onChange={(
+                  e
+                ) =>
+                  setFormData(
+                    {
+                      ...formData,
+
+                      newPassword:
+                        e
+                          .target
+                          .value,
+                    }
+                  )
+                }
+              />
+
+              <div
+                style={{
+                  marginTop:
+                    "8px",
+                  fontSize:
+                    "13px",
+                  color:
+                    "#9ca3af",
+                }}
+              >
+                Passwords
+                should be at
+                least 6
+                characters
+                long.
+              </div>
+            </div>
+
+            {/* BUTTON */}
+
+            <button
+              disabled={
+                isSubmitting
+              }
+            >
+              {isSubmitting
+                ? "Saving Changes..."
+                : "Save Changes"}
+            </button>
+
+            {/* BACK */}
+
+            <Link
+              to="/user"
+              className={
+                styles.back
+              }
+            >
+              ← Back
+            </Link>
+          </Form>
+        </Card>
+      </div>
+    );
+  };
 
 export default ProfileUpdate;
\ No newline at end of file

From bbb3dfed3919fd1b9924bf4ea813f6cacf9417db Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Thu, 28 May 2026 19:44:26 -0400
Subject: [PATCH 5/5] updates

---
 .../containers/User/UserDash/Dash.module.css  | 158 +++++++++++++-
 client/src/containers/User/UserDash/Dash.tsx  | 196 +++++++++++++++++-
 2 files changed, 351 insertions(+), 3 deletions(-)

diff --git a/client/src/containers/User/UserDash/Dash.module.css b/client/src/containers/User/UserDash/Dash.module.css
index 7f15207..9ec5e4a 100644
--- a/client/src/containers/User/UserDash/Dash.module.css
+++ b/client/src/containers/User/UserDash/Dash.module.css
@@ -366,6 +366,142 @@
   overflow: visible;
 }
 
+/* ================= DRIVER INTELLIGENCE ================= */
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+
+  margin-bottom: 24px;
+
+  flex-wrap: wrap;
+}
+
+.sectionSub {
+  color: #9ca3af;
+  margin-top: 6px;
+}
+
+.liveBadge {
+  background: rgba(34,197,94,0.18);
+  color: #4ade80;
+
+  border: 1px solid rgba(34,197,94,0.35);
+
+  padding: 8px 14px;
+
+  border-radius: 999px;
+
+  font-size: 12px;
+  font-weight: 800;
+
+  letter-spacing: 0.08em;
+}
+
+.driverGrid {
+  display: grid;
+
+  grid-template-columns: repeat(4, 1fr);
+
+  gap: 18px;
+
+  margin-bottom: 24px;
+}
+
+.driverStat {
+  background: rgba(255,255,255,0.04);
+
+  border: 1px solid rgba(255,255,255,0.06);
+
+  border-radius: 20px;
+
+  padding: 22px;
+
+  display: flex;
+  gap: 16px;
+
+  transition: 0.25s ease;
+}
+
+.driverStat:hover {
+  transform: translateY(-4px);
+
+  border-color: rgba(255,255,255,0.14);
+
+  background: rgba(255,255,255,0.06);
+}
+
+.driverIcon {
+  font-size: 1.8rem;
+}
+
+.driverStat h3 {
+  font-size: 0.95rem;
+
+  color: #9ca3af;
+
+  margin-bottom: 8px;
+}
+
+.driverStat strong {
+  display: block;
+
+  font-size: 1.6rem;
+
+  font-weight: 800;
+
+  margin-bottom: 6px;
+}
+
+.driverStat small {
+  color: #94a3b8;
+
+  line-height: 1.5;
+}
+
+.alertSection {
+  display: flex;
+  flex-direction: column;
+
+  gap: 14px;
+}
+
+.alertGood,
+.alertWarn,
+.alertInfo {
+  padding: 16px 18px;
+
+  border-radius: 16px;
+
+  font-weight: 600;
+}
+
+.alertGood {
+  background: rgba(34,197,94,0.12);
+
+  border: 1px solid rgba(34,197,94,0.2);
+
+  color: #4ade80;
+}
+
+.alertWarn {
+  background: rgba(245,158,11,0.12);
+
+  border: 1px solid rgba(245,158,11,0.2);
+
+  color: #fbbf24;
+}
+
+.alertInfo {
+  background: rgba(59,130,246,0.12);
+
+  border: 1px solid rgba(59,130,246,0.2);
+
+  color: #60a5fa;
+}
+
 /* ================= TABLET ================= */
 
 @media (max-width: 1100px) {
@@ -480,4 +616,24 @@
   .reco p {
     font-size: 0.9rem;
   }
-}
\ No newline at end of file
+}
+
+@media (max-width: 1200px) {
+  .driverGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .driverGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .driverStat {
+    padding: 18px;
+  }
+
+  .driverStat strong {
+    font-size: 1.3rem;
+  }
+}
diff --git a/client/src/containers/User/UserDash/Dash.tsx b/client/src/containers/User/UserDash/Dash.tsx
index 8618366..770b710 100644
--- a/client/src/containers/User/UserDash/Dash.tsx
+++ b/client/src/containers/User/UserDash/Dash.tsx
@@ -16,7 +16,7 @@ import {
 import axios from "axios";
 import styles from "./Dash.module.css";
 
-import Comments from "../../../components/Comments/Comment";
+// import Comments from "../../../components/Comments/Comment";
 
 const SERVER =
   process.env.REACT_APP_SOCKET_IO_CLIENT_PORT || "http://localhost:3001";
@@ -224,13 +224,205 @@ const Dash: React.FC = () => {
         </div>
       </div>
 
-      <div className={styles.card}>
+      {/* <div className={styles.card}>
         <Comments
           title={userData?.firstName ? `${userData.firstName}'s Dashboard` : "User Dashboard"}
           post={userData?.email || "No post available"}
           image={userData?.qrPNG || ""}
           comment={userData?.comment || ""}
         />
+      </div> */}
+      {/* ================= DRIVER INTELLIGENCE ================= */}
+
+      <div className={styles.card}>
+        <div className={styles.sectionHeader}>
+          <div>
+            <h2>🚛 Driver Intelligence Center</h2>
+
+            <p className={styles.sectionSub}>
+              Real-time operational analytics and performance tracking
+            </p>
+          </div>
+
+          <div className={styles.liveBadge}>
+            LIVE
+          </div>
+        </div>
+
+        <div className={styles.driverGrid}>
+
+          {/* HOURS DRIVEN */}
+
+          <div className={styles.driverStat}>
+            <span className={styles.driverIcon}>🕒</span>
+
+            <div>
+              <h3>Hours Driven Today</h3>
+
+              <strong>
+                {userData?.hoursDrivenToday || 8.5} hrs
+              </strong>
+
+              <small>
+                DOT Limit Remaining:
+                {" "}
+                {14 - (userData?.hoursDrivenToday || 8.5)} hrs
+              </small>
+            </div>
+          </div>
+
+          {/* MILES */}
+
+          <div className={styles.driverStat}>
+            <span className={styles.driverIcon}>🛣️</span>
+
+            <div>
+              <h3>Total Miles This Week</h3>
+
+              <strong>
+                {userData?.weeklyMiles || 2875} mi
+              </strong>
+
+              <small>
+                Avg:
+                {" "}
+                {userData?.avgDailyMiles || 411}
+                {" "}
+                mi/day
+              </small>
+            </div>
+          </div>
+
+          {/* FUEL */}
+
+          <div className={styles.driverStat}>
+            <span className={styles.driverIcon}>⛽</span>
+
+            <div>
+              <h3>Fuel Efficiency</h3>
+
+              <strong>
+                {userData?.fuelMPG || 6.9} MPG
+              </strong>
+
+              <small>
+                Estimated Savings:
+                {" "}
+                $1,240/mo
+              </small>
+            </div>
+          </div>
+
+          {/* SAFETY */}
+
+          <div className={styles.driverStat}>
+            <span className={styles.driverIcon}>🛡️</span>
+
+            <div>
+              <h3>Safety Score</h3>
+
+              <strong>
+                {userData?.safetyScore || 94}%
+              </strong>
+
+              <small>
+                Excellent Driving Performance
+              </small>
+            </div>
+          </div>
+
+          {/* EARNINGS */}
+
+          <div className={styles.driverStat}>
+            <span className={styles.driverIcon}>💰</span>
+
+            <div>
+              <h3>This Week Revenue</h3>
+
+              <strong>
+                $
+                {userData?.weeklyRevenue || 8420}
+              </strong>
+
+              <small>
+                +18% from last week
+              </small>
+            </div>
+          </div>
+
+          {/* MAINTENANCE */}
+
+          <div className={styles.driverStat}>
+            <span className={styles.driverIcon}>🔧</span>
+
+            <div>
+              <h3>Maintenance Status</h3>
+
+              <strong>
+                Good
+              </strong>
+
+              <small>
+                Oil change due in 2,400 mi
+              </small>
+            </div>
+          </div>
+
+          {/* LOAD SUCCESS */}
+
+          <div className={styles.driverStat}>
+            <span className={styles.driverIcon}>📦</span>
+
+            <div>
+              <h3>Load Completion</h3>
+
+              <strong>
+                {userData?.completionRate || 98}%
+              </strong>
+
+              <small>
+                42 successful deliveries
+              </small>
+            </div>
+          </div>
+
+          {/* AI SCORE */}
+
+          <div className={styles.driverStat}>
+            <span className={styles.driverIcon}>🧠</span>
+
+            <div>
+              <h3>AI Performance Index</h3>
+
+              <strong>
+                Elite Tier
+              </strong>
+
+              <small>
+                Optimized for premium lanes
+              </small>
+            </div>
+          </div>
+
+        </div>
+
+        {/* ALERTS */}
+
+        <div className={styles.alertSection}>
+
+          <div className={styles.alertGood}>
+            ✅ Weather conditions are optimal for all active routes
+          </div>
+
+          <div className={styles.alertWarn}>
+            ⚠️ HOS reset recommended within next 18 hours
+          </div>
+
+          <div className={styles.alertInfo}>
+            ℹ️ AI detected higher-paying loads near Dallas region
+          </div>
+
+        </div>
       </div>
 
       <Link to="/User" className={styles.backLink}>