SowinskiBraeden/RetirementCalculator
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6

Browse Source 
Plan detail page finished with mock data
This commit is contained in:
Nícolas Agostini authored and GitHub committed 2025-05-06 18:42:34 -07:00
2 parents d67718733d 173c0b63c4
commit 0658a8a85c
10 files changed
+128 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/auth/authentication.js
+1
View File
@@ -76,6 +76,7 @@ module.exports = (users) => {
email: req.body.email,
name: req.body.name,
password: hashedPassword,
financialData: false,
}).then((results, err) => {
if (err) {
console.error(err);
src/router/user.js
+42
View File
@@ -1,6 +1,7 @@
const status = require("../util/statuses");
const bcrypt = require('bcrypt');
const joi = require("joi");
const { ObjectId } = require('mongodb');
const salt = 12;
module.exports = (middleware, users, plans) => {
@@ -40,7 +41,48 @@ module.exports = (middleware, users, plans) => {
}
});
router.get('/plans/:id', async (req, res) => {
if (!req.session.email) {
return res.status(status.Unauthorized).redirect('/login');
}
try {
const planId = req.params.id;
if (!ObjectId.isValid(planId)) {
req.session.errMessage = "Invalid plan ID format.";
return res.status(status.BadRequest).redirect('/plans');
}
const plan = await plans.findOne({ userEmail: req.user.email, _id: new ObjectId(planId) });
if (!plan) {
console.log(`Plan not found with ID: ${planId} for user: ${req.user.email}`);
req.session.errMessage = "Plan not found or you do not have permission to view it.";
return res.status(status.NotFound).redirect('/plans');
}
// console.log("Found plan:", plan);
res.render('planDetail', {
user: req.user,
plan: plan
});
} catch (err) {
console.error("Error fetching plan:", err);
req.session.errMessage = "Could not load your plan. Please try again.";
res.status(status.InternalServerError).redirect('/home');
}
});
router.get('/newPlan', (req, res) => {
if (!req.session.email) {
return res.status(status.Unauthorized).redirect('/login');
}
if(!req.user.financialData){
req.session.errMessage = "Please complete your financial data before creating a plan.";
return res.status(status.Unauthorized).redirect('/questionnaire');
}
const errMessage = req.session.errMessage;
req.session.errMessage = "";
res.render('newPlan', { user: req.user, errMessage: errMessage });
src/views/dashboard.ejs
+3 -2
View File
@@ -2,14 +2,15 @@
<%- include("./partials/header") %>
<main>
<h2 class="text-xl text-white font-semibold mb-4">Welcome: <%= user.name %></h2>
<!-- Buttons -->
<div class="flex justify-end gap-4 px-5 py-6">
<button class="cursor-pointer min-w-[150px] bg-green-600 px-4 py-2 text-white rounded hover:bg-green-800" type="button">
Add Asset
</button>
<button class="cursor-pointer min-w-[150px] bg-green-600 px-4 py-2 text-white rounded hover:bg-green-800" type="button">
<a href="/newPlan" class="cursor-pointer min-w-[150px] bg-green-600 px-4 py-2 text-white rounded hover:bg-green-800" type="button">
Create new plan
</button>
</a>
</div>
<!--This is the cards for plans and other things-->
<div class="mt-12">
src/views/newPlan.ejs
+2 -2
View File
@@ -2,9 +2,9 @@
<%- include("./partials/header") %>
<main class="container mx-auto p-4">
<h2 class="text-xl font-semibold mb-4">Welcome: <%= user.email %></h2>
<h2 class="text-xl text-white font-semibold mb-4">Welcome: <%= user.name %></h2>
<div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md">
<h3 class="text-lg font-medium mb-6">Financial Questionnaire</h3>
<h3 class="text-lg font-medium mb-6">Retirement Plan</h3>
<form action="/newPlan" method="post" class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Plan Name</label>
src/views/partials/footer.ejs
+1 -1
View File
@@ -1,5 +1,5 @@
<footer>
<footer class="mt-16">
<div class="fixed bottom-0 left-0 z-50 hidden lg:block w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500 dark:text-gray-400 text-sm">
<div class="container mx-auto">
<p>&copy; 2025 RCalculator. All rights reserved.</p>
src/views/partials/navBar.ejs
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="fixed bottom-0 left-0 z-50 lg:hidden w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 text-sm">
<div class="fixed bottom-0 z-50 lg:hidden w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 text-sm">
<div class="grid h-16 max-w-lg grid-cols-4 mx-auto font-medium">
<a href="/home" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 24 24">
src/views/planDetail.ejs
+74
View File
@@ -0,0 +1,74 @@
<%- include("./partials/fileHeader") %>
<%- include("./partials/header") %>
<main class="container mx-auto p-4">
<h2 class="text-xl text-white font-semibold mb-4">Welcome: <%= user.name %></h2>
<div class="max-w-lg mx-auto bg-white p-6 sm:p-8 rounded-xl shadow-lg space-y-6 dark:bg-gray-800">
<div class="text-center">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white"><%= plan.name %></h3>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-blue-700 dark:text-blue-400">Progress</span>
<span class="text-sm font-medium text-blue-700 dark:text-blue-400"><%= plan.progress %></span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
<div class="bg-blue-600 h-3 rounded-full dark:bg-blue-500" style="width: <%= plan.progress %>;"></div>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 pt-6 space-y-4">
<h4 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Assets:</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
<div>
<label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Number of Assets:</label>
<p class="mt-1 text-md text-gray-900 dark:text-white">16 MOCK</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Total Value:</label>
<p class="mt-1 text-md text-gray-900 dark:text-white">$165,000 MOCK</p>
</div>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 pt-6 space-y-4">
<h4 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Plan Details:</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
<div>
<label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Retirement Age:</label>
<p class="mt-1 text-md text-gray-900 dark:text-white"><%= plan.retirementAge %></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Target Monthly Expenses:</label>
<p class="mt-1 text-md text-gray-900 dark:text-white"><%= plan.retirementExpenses %></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Target Retirement Assets:</label>
<p class="mt-1 text-md text-gray-900 dark:text-white"><%= plan.retirementAssets %></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Target Retirement Liabilities:</label>
<p class="mt-1 text-md text-gray-900 dark:text-white"><%= plan.retirementLiabilities %></p>
</div>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 pt-6 space-y-4">
<h4 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Suggestions:</h4>
<div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
<p class="text-sm text-blue-700 dark:text-blue-300">
USE YOUR HEAD MOCK
</p>
</div>
</div>
</div>
</main>
<%- include("./partials/navBar") %>
<%- include("./partials/footer") %>
src/views/plans.ejs
+3 -3
View File
@@ -2,13 +2,13 @@
<%- include("./partials/header") %>
<main class="container mx-auto p-4">
<h2 class="text-xl text-white font-semibold mb-4">Welcome: <%= user.email %></h2>
<h2 class="text-xl text-white font-semibold mb-4">Welcome: <%= user.name %></h2>
<div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md space-y-4">
<h3 class="text-lg font-medium mb-6">My Retirement Plans</h3>
<a href="/newPlan" class="block max-w-sm p-2"><div class="border-2 text-center border-gray-600 bg-blue-600 text-white py-1 w-full rounded-md hover:bg-transparent hover:text-indigo-700 font-semibold">New Plan</div></a>
<a href="/newPlan" class="block max-w-sm p-2"><div class="text-center bg-blue-600 text-white py-1 w-full rounded-md hover:bg-blue-700 hover:text-white font-semibold">New Plan</div></a>
<hr class="mt-3">
<% plans.forEach(plan => { %>
<a href="<%= plan.link %>" class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<a href="/plans/<%= plan._id %>" class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"><%= plan.name %></h5>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
<div class="bg-green-600 h-2.5 rounded-full dark:bg-green-500" style="width: <%= plan.progress %> "></div>
src/views/questionnaire.ejs
+1 -1
View File
@@ -2,7 +2,7 @@
<%- include("./partials/header") %>
<main class="container mx-auto p-4">
<h2 class="text-xl font-semibold mb-4">Welcome: <%= user.email %></h2>
<h2 class="text-xl font-semibold mb-4">Welcome: <%= user.name %></h2>
<div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md">
<h3 class="text-lg font-medium mb-6">Financial Questionnaire</h3>
<form action="/questionnaire" method="post" class="space-y-4">
src/views/signup.ejs
-6
View File
@@ -19,12 +19,6 @@
class="border focus:border-gray-600 w-full rounded-md text-base px-2 py-1 focus:outline-none focus:ring-0 "
placeholder="Enter Email" />
</div>
<div class="mt-3">
<label for="name" class="block text-base mb-2">Name</label>
<input type="text" id="name" name="name"
class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
placeholder="Enter Name" />
</div>
<div class="mt-3">
<label for="password" class="block text-base mb-2">Password</label>
<input type="password" id="password" name="password"