70 lines
5.8 KiB
Plaintext
70 lines
5.8 KiB
Plaintext
<%- include("./partials/fileHeader") %>
|
|
<%- include("./partials/header") %>
|
|
|
|
<main class="container mx-auto p-4 pt-28">
|
|
<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>
|
|
<!-- Changed link to a button to open modal -->
|
|
<button id="openNewPlanModalBtn" class="block w-full 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></button>
|
|
<hr class="mt-3">
|
|
<% plans.forEach(plan => { %>
|
|
<a href="/plans/<%= plan._id %>" class="block max-w-sm p-6 border rounded-lg shadow-sm bg-gray-800 border-gray-700 hover:bg-gray-700">
|
|
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white"><%= plan.name %></h5>
|
|
<div class="w-full rounded-full h-2.5 mb-4 bg-black">
|
|
<div class=" h-2.5 rounded-full bg-green-500" style="width: <%= plan.progress > 100 ? 100 : plan.progress %>%;"></div>
|
|
</div>
|
|
<p class="font-normal text-gray-400"><%= plan.description %></p>
|
|
</a>
|
|
<% }) %>
|
|
</div>
|
|
|
|
<!-- New Plan Modal - Styled like createAsset.ejs -->
|
|
<dialog id="newPlanDialog" class="w-lg mx-auto bg-white p-8 mt-10 rounded-lg shadow-md">
|
|
<!-- Header: Title and Cancel button -->
|
|
<div class="flex flex-row justify-between items-center">
|
|
<h3 class="text-lg font-bold text-gray-900">Create New Retirement Plan</h3>
|
|
<form method="dialog" id="cancelNewPlanDialogForm">
|
|
<button type="submit" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer">Cancel</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Form Content -->
|
|
<div>
|
|
<form id="newPlanForm" class="space-y-4">
|
|
<p class="text-sm text-gray-400 text-left mb-4"><span class="text-red-500">*</span> Indicates a required field</p>
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700 text-left">Plan Name <span class="text-red-500">*</span></label>
|
|
<input type="text" name="name" id="planName" placeholder="e.g., My Awesome Plan" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
|
|
</div>
|
|
<div>
|
|
<label for="retirementAge" class="block text-sm font-medium text-gray-700 text-left">Desired Retirement Age <span class="text-red-500">*</span></label>
|
|
<input type="number" name="retirementAge" id="retirementAge" placeholder="e.g., 65" min="18" max="120" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
|
|
</div>
|
|
<div>
|
|
<label for="retirementExpenses" class="block text-sm font-medium text-gray-700 text-left">Estimated Monthly Retirement Expenses <span class="text-red-500">*</span></label>
|
|
<input title="Ongoing spending. Rent, bills, subscriptions, etc." type="number" name="retirementExpenses" id="retirementExpenses" min="0" placeholder="e.g., 3000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
|
|
</div>
|
|
<div>
|
|
<label for="retirementAssets" class="block text-sm font-medium text-gray-700 text-left">Estimated Retirement Assets <span class="text-red-500">*</span></label>
|
|
<input title="Owned valuables. Physical items, investments, etc." type="number" name="retirementAssets" id="retirementAssets" min="0" placeholder="e.g., 500000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
|
|
</div>
|
|
<div>
|
|
<label for="retirementLiabilities" class="block text-sm font-medium text-gray-700 text-left">Estimated Retirement Liabilities <span class="text-red-500">*</span></label>
|
|
<input title="Owed amounts. Loans, credit card balance, etc." type="number" name="retirementLiabilities" id="retirementLiabilities" min="0" placeholder="e.g., 50000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
|
|
</div>
|
|
<div id="newPlanError" class="text-red-500 text-sm mt-2" style="display: none;"></div>
|
|
<!-- Form Buttons: Save Plan and Reset -->
|
|
<div class="mt-6 flex flex-row justify-between">
|
|
<button type="button" id="resetNewPlanFormBtn" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Reset</button>
|
|
<button id="submitNewPlanBtn" type="submit" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Save Plan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</dialog>
|
|
</main>
|
|
|
|
<%- include("./partials/navBar") %>
|
|
<%- include("./partials/scriptLoader") %>
|
|
<script src="/static/scripts/planModals.js"></script>
|
|
<%- include("./partials/footer") %>
|