Refactor settings UI for improved first-time setup experience
- Introduced conditional display logic for the first-time setup section based on the presence of household members. - Enhanced navigation with tabbed interface for settings, allowing easier access to different configuration areas. - Maintained existing functionality while improving layout and user interaction for profile creation.
This commit is contained in:
parent
6d10cb4726
commit
c9828d8ff3
@ -17,6 +17,8 @@ $canManage = count($people) === 0
|
||||
&& ($activePerson['role'] ?? '') === ROLE_HEAD
|
||||
&& isHohVerified()
|
||||
);
|
||||
$hasPeople = count($people) > 0;
|
||||
$showSetup = !$hasPeople;
|
||||
|
||||
$permanenceOptions = [
|
||||
'permanent' => 'Permanent',
|
||||
@ -32,8 +34,25 @@ $permanenceOptions = [
|
||||
<h2 class="mb-3">Family settings</h2>
|
||||
<p class="text-muted">People and chore currency defaults apply across the whole hub. Heads of household verify with a PIN when switching profiles at the top of the page.</p>
|
||||
|
||||
<?php if (count($people) === 0): ?>
|
||||
<div class="card mb-4 border-primary" id="firstSetupCard">
|
||||
<div class="row g-4 align-items-start">
|
||||
<div class="col-lg-3">
|
||||
<div class="nav nav-pills flex-lg-column gap-2" id="settingsSectionTabs" role="tablist" aria-orientation="vertical">
|
||||
<?php if ($showSetup): ?>
|
||||
<button class="nav-link active text-start" id="settings-tab-setup" data-bs-toggle="pill" data-bs-target="#settings-pane-setup" type="button" role="tab" aria-controls="settings-pane-setup" aria-selected="true">First-time setup</button>
|
||||
<?php endif; ?>
|
||||
<button class="nav-link text-start <?= !$showSetup ? 'active' : '' ?>" id="settings-tab-calendar" data-bs-toggle="pill" data-bs-target="#settings-pane-calendar" type="button" role="tab" aria-controls="settings-pane-calendar" aria-selected="<?= !$showSetup ? 'true' : 'false' ?>">Calendar and dates</button>
|
||||
<button class="nav-link text-start" id="settings-tab-economy" data-bs-toggle="pill" data-bs-target="#settings-pane-economy" type="button" role="tab" aria-controls="settings-pane-economy" aria-selected="false">Chore economy</button>
|
||||
<button class="nav-link text-start" id="settings-tab-stores" data-bs-toggle="pill" data-bs-target="#settings-pane-stores" type="button" role="tab" aria-controls="settings-pane-stores" aria-selected="false">Grocery stores</button>
|
||||
<?php if ($hasPeople): ?>
|
||||
<button class="nav-link text-start" id="settings-tab-people" data-bs-toggle="pill" data-bs-target="#settings-pane-people" type="button" role="tab" aria-controls="settings-pane-people" aria-selected="false">People</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="tab-content" id="settingsSectionTabContent">
|
||||
<?php if ($showSetup): ?>
|
||||
<div class="tab-pane fade show active" id="settings-pane-setup" role="tabpanel" aria-labelledby="settings-tab-setup" tabindex="0">
|
||||
<div class="card border-primary">
|
||||
<div class="card-header bg-primary text-white">First-time setup</div>
|
||||
<div class="card-body">
|
||||
<p>Create the first <strong>Head of household</strong> profile so you can manage family members and settings.</p>
|
||||
@ -59,13 +78,14 @@ $permanenceOptions = [
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="tab-pane fade <?= !$showSetup ? 'show active' : '' ?>" id="settings-pane-calendar" role="tabpanel" aria-labelledby="settings-tab-calendar" tabindex="0">
|
||||
<div class="card">
|
||||
<div class="card-header">Calendar and dates</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted small">Used for the <strong>Calendar</strong> tab agenda (today, due dates, and bill reminders). US timezones only.</p>
|
||||
<?php if (!$canManage && count($people) > 0): ?>
|
||||
<?php if (!$canManage && $hasPeople): ?>
|
||||
<p class="text-muted">Switch to a verified Head of household to edit these settings.</p>
|
||||
<?php endif; ?>
|
||||
<form id="calendarSettingsForm" class="row g-3">
|
||||
@ -128,11 +148,12 @@ $permanenceOptions = [
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
</div>
|
||||
<div class="tab-pane fade" id="settings-pane-economy" role="tabpanel" aria-labelledby="settings-tab-economy" tabindex="0">
|
||||
<div class="card">
|
||||
<div class="card-header">Chore economy</div>
|
||||
<div class="card-body">
|
||||
<?php if (!$canManage && count($people) > 0): ?>
|
||||
<?php if (!$canManage && $hasPeople): ?>
|
||||
<p class="text-muted">Switch to a verified Head of household to edit these settings.</p>
|
||||
<?php endif; ?>
|
||||
<form id="familySettingsForm" class="row g-3">
|
||||
@ -249,11 +270,13 @@ $permanenceOptions = [
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$storesList = normalizeStoresList(readJsonFile('stores.json'));
|
||||
?>
|
||||
<div class="card mb-4">
|
||||
<div class="tab-pane fade" id="settings-pane-stores" role="tabpanel" aria-labelledby="settings-tab-stores" tabindex="0">
|
||||
<div class="card">
|
||||
<div class="card-header">Grocery stores</div>
|
||||
<div class="card-body">
|
||||
<p class="small text-muted">Each store has its own list in the <strong>Grocery list</strong> tab.</p>
|
||||
@ -293,9 +316,11 @@ $permanenceOptions = [
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (count($people) > 0): ?>
|
||||
<div class="card mb-4">
|
||||
<?php if ($hasPeople): ?>
|
||||
<div class="tab-pane fade" id="settings-pane-people" role="tabpanel" aria-labelledby="settings-tab-people" tabindex="0">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span>People</span>
|
||||
</div>
|
||||
@ -368,5 +393,9 @@ $permanenceOptions = [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user