dashboard col issue

src/public/scripts/dollarFormat.js

@@ -1,14 +1,19 @@
+/** 
+ * Function takes in a number and formats it to currency
+ * @param {integer}
+ * @returns nuber formatted in currency
+ */
+
 document.addEventListener("DOMContentLoaded", () => {
     const number = document.querySelectorAll(".planGoal");
     number.forEach(value => {
         num = parseFloat(value.textContent);
         if (num >= 999999) {
-            value.textContent = (num /= 1000000).toFixed(2) + "M";
-            console.log(value.textContent);
+            value.textContent = "$" + (num /= 1000000) + "M";
         } else if (num > 999) {
-            value.textContent = (num /= 1000).toFixed(2) + "K";
+            value.textContent = "$" + (num /= 1000) + "k";
         } else {
-            return num;
+            return "$" + num;
         }
     });
 });

src/router/user.js

@@ -98,7 +98,8 @@ module.exports = (middleware, users, plans, assets) => {
         res.render('dashboard', {
             user: req.session.user,
             geoData: req.session.geoData,
-            plans: updatedUserPlans, });
+            plans: updatedUserPlans,
+        });
 
         return res.status(status.Ok);
     });

src/views/dashboard.ejs

@@ -11,10 +11,10 @@
                     class="text-center cursor-pointer min-w-[150px] bg-green-600 px-4 py-2 text-white rounded hover:bg-green-800"
                     type="button">Create new plan </a>
             </div>
-            <div class="flex justify-center sm:px-6 w-full ">
-                <div class="mb-12  grid gap-y-4 gap-x-6 md:grid-cols-2  ">
+            <div class="w-full">
+                <div class="mb-12 grid grid-cols-1  md:grid-cols-2 lg:grid-cols-3 gap-y-4 gap-x-6">
                     <% plans.forEach(plan=> { %>
-                        <%- include('./partials/dashboardBox.ejs', {plan: plan}) %>
+                        <%- include('./partials/dashboardBox.ejs', {thing: plan}) %>
                             <% }); %>
                 </div>
             </div>

src/views/partials/dashboardBox.ejs

@@ -1,33 +1,33 @@
-<div class="mt-12">
-    <a href="/plans/<%=plan._id%>">
-        <div class=" relative flex flex-col bg-clip-border  rounded-xl bg-white text-gray-700 shadow-md w-full min-h-[130px] min-w-[340px] 
-        md:min-h-[220px] md:min-w-[500px]">
-            <!-- <div -->
-            <!--   class="bg-clip-border mx-4 rounded-xl overflow-hidden bg-gradient-to-tr from-blue-600 to-blue-400 text-white shadow-blue-500/40 shadow-lg absolute mt-2 grid h-16 w-16 place-items-center"> -->
-            <!-- </div> -->
-            <div class="p-4 flex items-center justify-between">
-                <p class="font-sans text-2xl leading-normal font-bold text-blue-gray-600">
-                    <%= plan.name %>
+<div class="w-full h-full mt-3">
+    <a href="/plans/<%=thing._id%>"
+        class="block p-4 w-full h-full rounded-xl transition-shadow duration-300 ease-in-out hover:shadow-xl">
+        <div
+            class="relative flex flex-col bg-white text-gray-700 shadow-md rounded-xl w-full h-full overflow-hidden min-h-[175px]">
+            <!-- Header Section -->
+            <div class="p-4 flex items-center justify-between border-b ">
+                <p class="text-xl font-semibold text-blue-gray-700 truncate" title="<%= thing.name %>">
+                    <%= thing.name %>
                 </p>
-                <h4
-                    class="planGoal block text-right antialiased tracking-normal font-sans text-2xl font-semibold leading-snug text-blue-gray-900">
-                    <%= plan.retirementAssets %>
+                <h4 class="planGoal text-xl font-semibold whitespace-nowrap">
+                    <%= thing.retirementAssets %>
                 </h4>
             </div>
-            <div class="border-t border-blue-gray-50 p-10">
-                <div class="float-left font-bold">
-                    <p class=" antialiased font-sans text-base leading-relaxed font-normal text-blue-gray-600">
-                        Status bar:
+
+            <!-- Progress Bar Section - Pushed to the bottom -->
+            <div class="mt-2">
+                <div class="p-4 mt-auto border-gray-900">
+                    <div class="flex justify-between items-center mb-1">
+                        <p class="text-sm font-medium text-blue-gray-600">
+                            Progress:
+                        </p>
+                        <p class="text-sm font-semibold justify-between text-green-500">
+                            <%=Math.floor(thing.progress)> 100 ? 100 : Math.floor(thing.progress) %>%
                         </p>
                     </div>
-                <strong class="text-green-500">
-                    <div class="float-right mb-2">
-                        <%=Math.floor(plan.progress) > 100 ? 100 : Math.floor(plan.progress) %>% complete
+                    <div class="w-full bg-gray-300 rounded-full h-2.5">
+                        <div class="bg-green-500 h-2.5 rounded-full"
+                            style="width: <%= thing.progress > 100 ? 100 : thing.progress %>%;"></div>
                     </div>
-                    <div class="bg-gray-400 mt-7">
-                        <div class="bg-green-600 h-2.5 rounded-full dark:bg-green-500"
-                            style="width: <%= plan.progress > 100 ? 100 : plan.progress %>%;"></div>
-
                 </div>
             </div>
         </div>