Merge branch 'dev' into feature/dashboardInfo

Refactor/assets

src/auth/forgotPass.js

@@ -66,6 +66,7 @@ module.exports = (users) => {
         }
     });
 
+    //Reset link verifies information from user and checks token
     router.post('/resetLink', async (req, res) => {
         const { token, password, confirmPassword, } = req.body;
         const passwordSchema = joi.object({

src/public/scripts/dollarFormat.js

@@ -0,0 +1,15 @@
+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);
+        } else if (num > 999) {
+            value.textContent = (num /= 1000).toFixed(2) + "K";
+        } else {
+            return num;
+        }
+    });
+});
+

src/router/user.js

@@ -56,6 +56,12 @@ const getAssetSchema = (type) => {
     return assetSchema;
 }
 
+/** 
+ * Function takes in a number and formats it to currency
+ * @param {integer}
+ * @returns nuber formatted in currency
+ */
+
 /**
  * @param {function} middleware handler
  * @param {MongoClient.collection} users db collection
@@ -72,6 +78,7 @@ module.exports = (middleware, users, plans, assets) => {
     router.use(middleware);
 
     router.get('/home', async (req, res) => {
+        let user = req.session.user._id;
         // if no session with geoData
         if (!req.session.geoData) {
             req.session.geoData = {
@@ -79,8 +86,10 @@ module.exports = (middleware, users, plans, assets) => {
                 toCurrencyRates: [],
             };
         }
-
+        let planSchema = await plans.find({ userId: new ObjectId(user) }).project({
-        res.render('dashboard', { user: req.user, geoData: req.session.geoData });
+            name: 1, retirementAssets: 1, progress: 1, _id: 1,
+        }).toArray();
+        res.render('dashboard', { user: req.user, geoData: req.session.geoData, plans: planSchema, });
 
         return res.status(status.Ok);
     });

src/views/dashboard.ejs

@@ -1,7 +1,7 @@
 <%- include("./partials/fileHeader") %>
     <%- include("./partials/header") %>
 
-        <main>
+        <main class="">
             <!-- Buttons -->
             <div class="flex justify-end gap-4 px-5 py-6">
                 <a href="/assets?popup"
@@ -11,106 +11,15 @@
                     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>
-            <!--This is the cards for plans and other things-->
+            <div class="flex justify-center">
-            <div class="mt-12">
+                <div class="mb-12 grid gap-y-4 gap-x-6 md:grid-cols-2 mr-3 ml-3 ">
-                <!--box to put logo icon if we want on in a box-->
+                    <% plans.forEach(plan=> { %>
-                <!-- <div -->
+                        <%- include('./partials/dashboardBox.ejs', {plan: plan}) %>
-                <!--   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>
-                <!--This is the cards for plans and other things-->
+            </div>
-                <div class="mt-12">
-                    <div class="mb-12 grid gap-y-10 gap-x-6 md:grid-cols-2 mr-3 ml-3 xl:grid-cols-4">
-                        <!--box to put logo icon if we want on in a box-->
-                        <div class=" relative flex flex-col bg-clip-border rounded-xl bg-white text-gray-700 shadow-md">
-                            <!-- <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-normal text-blue-gray-600">
-                                    Retirement goal</p>
-                                <h4
-                                    class="block text-right antialiased tracking-normal font-sans text-2xl font-semibold leading-snug text-blue-gray-900">
-                                    $53k</h4>
-                            </div>
-                            <div class="border-t border-blue-gray-50 p-10">
-                                <p
-                                    class=" antialiased font-sans text-base leading-relaxed font-normal text-blue-gray-600">
-                                    <strong class="text-green-500">Make this percent bar or graph or
-                                        something
-                                    </strong>&nbsp;than lastweek
-                                </p>
-                            </div>
-                        </div>
-                        <div class="relative flex flex-col bg-clip-border rounded-xl bg-white text-gray-700 shadow-md">
-                            <div class="p-4 flex items-center justify-between">
-                                <p class="font-sans text-2xl leading-normal font-normal text-blue-gray-600">
-                                    Retirement goal</p>
-                                <h4
-                                    class="block text-right antialiased tracking-normal font-sans text-2xl font-semibold leading-snug text-blue-gray-900">
-                                    $53k</h4>
-                            </div>
-                            <div class="border-t border-blue-gray-50 p-10">
-                                <p
-                                    class=" antialiased font-sans text-base leading-relaxed font-normal text-blue-gray-600">
-                                    <strong class="text-green-500">Make this percent bar or graph or
-                                        something
-                                    </strong>&nbsp;than last
-                                    week
-                                </p>
-                            </div>
-                        </div>
-                        <div class="relative flex flex-col bg-clip-border rounded-xl bg-white text-gray-700 shadow-md">
-                            <!-- <div -->
-                            <!--   class="bg-clip-border mx-4 rounded-xl overflow-hidden bg-gradient-to-tr from-green-600 to-green-400 text-white shadow-green-500/40 shadow-lg absolute -mt-4 grid h-16 w-16 place-items-center"> -->
-                            <!--   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" -->
-                            <!--     class="w-6 h-6 text-white"> -->
-                            <!--     <path -->
-                            <!--       d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"> -->
-                            <!--     </path> -->
-                            <!--   </svg> -->
-                            <!-- </div> -->
-                            <!-- we can use this later if needed not sure what it shoudl be for right now. -->
-                            <!--   <div class="p-4 text-right"> -->
-                            <!--     <p class="block antialiased font-sans text-sm leading-normal font-normal text-blue-gray-600">New Clients -->
-                            <!--     </p> -->
-                            <!--     <h4 -->
-                            <!--       class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug text-blue-gray-900"> -->
-                            <!--       3,462</h4> -->
-                            <!--   </div> -->
-                            <!--   <div class="border-t border-blue-gray-50 p-4"> -->
-                            <!--     <p class="block antialiased font-sans text-base leading-relaxed font-normal text-blue-gray-600"> -->
-                            <!--       <strong class="text-red-500">-2%</strong>&nbsp;than yesterday -->
-                            <!--     </p> -->
-                            <!--   </div> -->
-                            <!-- </div> -->
-                            <div
-                                class="relative flex flex-col bg-clip-border rounded-xl bg-white text-gray-700 shadow-md">
-                                <div
-                                    class="relative flex flex-col bg-clip-border rounded-xl bg-white text-gray-700 shadow-md">
-                                    <div class="p-4 flex items-center justify-between">
-                                        <p class="font-sans text-2xl leading-normal font-normal text-blue-gray-600">
-                                            Retirement goal</p>
-                                        <h4
-                                            class="block text-right antialiased tracking-normal font-sans text-2xl font-semibold leading-snug text-blue-gray-900">
-                                            $53k</h4>
-                                    </div>
-                                    <div class="border-t border-blue-gray-50 p-10">
-                                        <p
-                                            class=" antialiased font-sans text-base leading-relaxed font-normal text-blue-gray-600">
-                                            <strong class="text-green-500">Make this percent bar or
-                                                graph or something
-                                            </strong>&nbsp;than last
-                                            week
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="text-blue-gray-600">
-                    </div>
         </main>
-
         <%- include("./partials/navBar") %>
             <%- include("./partials/scriptLoader") %>
                 <%- include("./partials/footer") %>
+                    <script src="/static/scripts/dollarFormat.js"></script>

src/views/partials/dashboardBox.ejs

@@ -0,0 +1,34 @@
+<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-[150px] min-w-[500px] 
+        md:min-h-[220px] ">
+            <!-- <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 %>
+                </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>
+            </div>
+            <div class="border-t border-blue-gray-50 p-10">
+                <p class=" antialiased font-sans text-base leading-relaxed font-normal text-blue-gray-600">
+                <div class="float-left font-bold">
+                    Status bar:
+                </div>
+                <strong class="text-green-500">
+                    <div class="float-right mb-2">
+                        <%=Math.floor(plan.progress) %>% complete
+                    </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 %>%;"></div>
+
+                    </div>
+            </div>
+        </div>
+    </a>
+</div>