Ty Clifford
6686388834
Account creation and guarded onboarding flow. Current-cash starting balance with automatic rollover enabled. Dynamic bill generation, shared/custom categories, recurring targets, and optional same-day onboarding transactions. Optional dormant reserve and additional categories. Mailgun email or authenticator-app 2FA configuration. Responsive dark/light UI with no overflow at 390px. Fixed administrator session-ID creation bug. Core implementation: [OnboardingService.php (line 59)](/Users/tyemeclifford/Documents/GH/budget/app/OnboardingService.php:59), [onboarding.php (line 19)](/Users/tyemeclifford/Documents/GH/budget/views/onboarding.php:19), and [index.php (line 143)](/Users/tyemeclifford/Documents/GH/budget/public/index.php:143). Verification passed: financial self-test, onboarding integration test, full browser walkthrough, mobile layout, routing guards, and zero browser console errors. Live email delivery requires actual Mailgun credentials and was not sent during testing.
185 lines
9.9 KiB
PHP
185 lines
9.9 KiB
PHP
<?php
|
||
$monthLabel = date('F Y', strtotime($month . '-01'));
|
||
$lastDay = date('Y-m-t', strtotime($month . '-01'));
|
||
$categoryOptions = [
|
||
'Utilities',
|
||
'Housing',
|
||
'Communications',
|
||
'Subscriptions',
|
||
'Insurance',
|
||
'Transportation',
|
||
'Debt',
|
||
'Food',
|
||
'Health',
|
||
'Childcare',
|
||
'Education',
|
||
];
|
||
$extraCategories = ['TV', 'Cellular', 'Internet', 'Disney+', 'Netflix', 'Luxury', 'Entertainment', 'Travel'];
|
||
?>
|
||
<section class="onboarding-intro">
|
||
<p class="eyebrow">A clean starting point</p>
|
||
<h1>Let’s plan from what you have now.</h1>
|
||
<p>The day of the month does not matter. We will use today’s available money as the starting point for <?= h($monthLabel) ?>, then carry any unused remainder forward.</p>
|
||
</section>
|
||
|
||
<div class="onboarding-progress" aria-label="Onboarding progress">
|
||
<?php foreach (['Cash now', 'Bill count', 'Build bills', 'Preferences'] as $index => $label): ?>
|
||
<div class="<?= $index === 0 ? 'active' : '' ?>" data-onboarding-progress="<?= $index + 1 ?>">
|
||
<span><?= $index + 1 ?></span><strong><?= h($label) ?></strong>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
<form method="post" class="onboarding-form card" data-onboarding-form data-symbol="<?= h($symbol) ?>">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="action" value="onboarding.complete">
|
||
|
||
<section class="onboarding-step active" data-onboarding-step="1">
|
||
<div class="step-copy">
|
||
<span class="step-number">01</span>
|
||
<div>
|
||
<p class="eyebrow">Start with the truth</p>
|
||
<h2>How much money do you have in total right now?</h2>
|
||
<p>Include the cash you consider usable across checking, cash, and other active accounts. This is your manual starting point, not a forecast.</p>
|
||
</div>
|
||
</div>
|
||
<label class="hero-money-field">
|
||
<span>Current available cash</span>
|
||
<div class="money-input"><span><?= h($symbol) ?></span><input type="number" name="current_cash" min="0" step="0.01" inputmode="decimal" required autofocus placeholder="0.00" data-current-cash></div>
|
||
<small>Anything left at month-end can roll into the next month automatically.</small>
|
||
</label>
|
||
<div class="onboarding-actions">
|
||
<span></span>
|
||
<button class="button primary" type="button" data-onboarding-next>Continue to bills <?= icon('plus') ?></button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="onboarding-step" data-onboarding-step="2" hidden>
|
||
<div class="step-copy">
|
||
<span class="step-number">02</span>
|
||
<div>
|
||
<p class="eyebrow">Map the obligations</p>
|
||
<h2>How many bills do you have in total?</h2>
|
||
<p>We will generate one simple setup card for each bill. Enter zero if you would rather add bills from the dashboard later.</p>
|
||
</div>
|
||
</div>
|
||
<label class="bill-count-field">
|
||
<span>Number of bills</span>
|
||
<input type="number" name="bill_count" min="0" max="50" step="1" inputmode="numeric" required value="0" data-bill-count>
|
||
<small>Up to 50 can be created during onboarding.</small>
|
||
</label>
|
||
<div class="onboarding-actions">
|
||
<button class="button secondary" type="button" data-onboarding-back>Back</button>
|
||
<button class="button primary" type="button" data-onboarding-next>Generate bill fields</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="onboarding-step" data-onboarding-step="3" hidden>
|
||
<div class="step-copy">
|
||
<span class="step-number">03</span>
|
||
<div>
|
||
<p class="eyebrow">Turn bills into targets</p>
|
||
<h2>Build the first month’s bill plan.</h2>
|
||
<p>Keep a category specific to the bill, or consolidate related bills such as electric, water, sewage, and gas under Utilities.</p>
|
||
</div>
|
||
</div>
|
||
<label class="check-row onboarding-check-all">
|
||
<input type="checkbox" data-mark-all-paid>
|
||
<span><strong>Mark every entered bill as paid today</strong><small>Each payment will reduce the available balance and create a transaction dated <?= h(date('F j, Y', strtotime($today))) ?> with the note “onboarding.”</small></span>
|
||
</label>
|
||
<div class="onboarding-bills" data-bill-rows></div>
|
||
<div class="onboarding-actions">
|
||
<button class="button secondary" type="button" data-onboarding-back>Back</button>
|
||
<button class="button primary" type="button" data-onboarding-next>Continue to preferences</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="onboarding-step" data-onboarding-step="4" hidden>
|
||
<div class="step-copy">
|
||
<span class="step-number">04</span>
|
||
<div>
|
||
<p class="eyebrow">Set aside and finish</p>
|
||
<h2>Add useful categories and decide what stays out of sight.</h2>
|
||
<p>These choices are optional. Everything can be changed later from the administrator dashboard.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="onboarding-preference-grid">
|
||
<div class="onboarding-option-panel">
|
||
<div class="option-heading">
|
||
<span class="metric-icon blue"><?= icon('expense') ?></span>
|
||
<div><h3>Additional categories</h3><p>Create common categories now, even if they are not connected to a bill yet.</p></div>
|
||
</div>
|
||
<div class="category-chip-grid">
|
||
<?php foreach ($extraCategories as $category): ?>
|
||
<label><input type="checkbox" name="extra_categories[]" value="<?= h($category) ?>"><span><?= h($category) ?></span></label>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="onboarding-option-panel dead-option">
|
||
<div class="option-heading">
|
||
<span class="metric-icon purple"><?= icon('vault') ?></span>
|
||
<div><h3>Dormant account</h3><p>Move money out of the usable budget without losing it. The hidden balance can be restored to income or a bill later.</p></div>
|
||
</div>
|
||
<label class="check-row">
|
||
<input type="checkbox" name="enable_dead_account" value="1" data-enable-onboarding-dead>
|
||
<span><strong>Set money aside now</strong><small>Unchecked by default. This reduces the money available for the month.</small></span>
|
||
</label>
|
||
<label data-onboarding-dead-fields hidden>
|
||
Amount to make dormant
|
||
<div class="money-input"><span><?= h($symbol) ?></span><input type="number" name="dead_amount" min="0" step="0.01" inputmode="decimal" placeholder="0.00" data-dead-amount></div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="onboarding-review">
|
||
<div><span>Starting cash</span><strong data-review-cash><?= h($symbol) ?>0.00</strong></div>
|
||
<div><span>Paid during setup</span><strong data-review-paid><?= h($symbol) ?>0.00</strong></div>
|
||
<div><span>Made dormant</span><strong data-review-dead><?= h($symbol) ?>0.00</strong></div>
|
||
<div class="review-remaining"><span>Ready to budget</span><strong data-review-remaining><?= h($symbol) ?>0.00</strong></div>
|
||
</div>
|
||
<p class="onboarding-warning" data-onboarding-warning hidden>Payments and dormant money exceed the cash you entered. Adjust an amount before finishing.</p>
|
||
|
||
<div class="onboarding-actions">
|
||
<button class="button secondary" type="button" data-onboarding-back>Back</button>
|
||
<button class="button primary" type="submit" data-onboarding-submit>Finish and open dashboard</button>
|
||
</div>
|
||
</section>
|
||
</form>
|
||
|
||
<template id="onboarding-bill-template">
|
||
<article class="onboarding-bill-card">
|
||
<div class="bill-card-heading">
|
||
<span class="bill-index" data-bill-index>1</span>
|
||
<div><h3 data-bill-title>Bill 1</h3><p>Creates a progress-tracked budget target.</p></div>
|
||
</div>
|
||
<div class="bill-fields">
|
||
<label>Bill name<input type="text" maxlength="255" required placeholder="Electric" data-bill-field="name"></label>
|
||
<label>Usual amount<div class="money-input"><span><?= h($symbol) ?></span><input type="number" min="0" step="0.01" inputmode="decimal" required placeholder="0.00" data-bill-field="amount"></div></label>
|
||
<label>Due date<input type="date" min="<?= h($month . '-01') ?>" max="<?= h($lastDay) ?>" value="<?= h($today) ?>" data-bill-field="due_date"></label>
|
||
<label>Repeats
|
||
<select data-bill-field="recurrence">
|
||
<option value="monthly" selected>Every month</option>
|
||
<option value="yearly">Every year</option>
|
||
<option value="none">One time</option>
|
||
</select>
|
||
</label>
|
||
<label class="bill-category-field">Category
|
||
<select data-bill-field="category">
|
||
<option value="__bill__">Use the bill name</option>
|
||
<?php foreach ($categoryOptions as $category): ?>
|
||
<option value="<?= h($category) ?>"><?= h($category) ?></option>
|
||
<?php endforeach; ?>
|
||
<option value="__custom__">Custom category…</option>
|
||
</select>
|
||
</label>
|
||
<label class="bill-custom-category" data-custom-category hidden>Custom category<input type="text" maxlength="191" placeholder="My category" data-bill-field="custom_category"></label>
|
||
</div>
|
||
<label class="check-row bill-paid-row">
|
||
<input type="checkbox" value="1" data-bill-field="paid_now">
|
||
<span><strong>This bill was paid today</strong><small>Deduct the amount now and add an “onboarding” transaction to history.</small></span>
|
||
</label>
|
||
</article>
|
||
</template>
|