Skip to content

feat: mobile UX, Apple iOS design, E2E tests, security fixes#1

Open
Srbino wants to merge 8 commits into
DarecHub:masterfrom
Srbino:feature/ui-improvements-security-fixes-tests
Open

feat: mobile UX, Apple iOS design, E2E tests, security fixes#1
Srbino wants to merge 8 commits into
DarecHub:masterfrom
Srbino:feature/ui-improvements-security-fixes-tests

Conversation

@Srbino
Copy link
Copy Markdown

@Srbino Srbino commented Mar 22, 2026 •
edited
Loading

Summary

Comprehensive update: mobile UX fixes, Apple iOS design system, financial E2E tests, security fixes, and full documentation.

Mobile UX (5 priority fixes)

  • Touch targets enlarged to 44px minimum (Apple HIG) — icon-btn, modal-close, checkboxes, hamburger, drawer-close
  • Bottom nav readability — font 0.75rem (12px), icons 24px, height 60px
  • Wallet modal — collapsible "Za koho" section with live participant counter (reduces 8-screen scroll to 3)
  • Scroll indicators — CSS mask gradient on horizontally-scrollable wallet stats row
  • Inline styles → CSS classes in wallet modal for proper mobile override

Apple iOS Design System

  • Full oklch color palette based on iOS System Colors (Blue, Green, Red, Orange, Teal)
  • Clean neutral grays (no warm/cool tint), pure black dark mode (OLED-friendly)
  • SF Pro / -apple-system font stack, 15px base size
  • Soft radius (8-12px), diffused shadows
  • Lucide icons (local, CSP-safe) across all pages

Bug Fixes

  • Date parsing fix — api/wallet.php uses ?: instead of ?? (DateTime::createFromFormat returns false, not null)
  • HTML5 datetime-local — added Y-m-d\TH:i format support
  • SEC-1: Ownership checks on all edit/delete operations
  • CALC-3: CZK expense edit preserves original exchange_rate

E2E Wallet Test Suite (47 tests)

docker exec vol5_web php /var/www/html/tests/e2e_wallet_test.php

Tests validate against the live running app:

  • All CZK→EUR conversions from seed data (2500/25.21=99.17, etc.)
  • Balance correctness for all 10 users (hand-calculated expected values)
  • Balance invariant: sum of all balances = 0
  • Settlement algorithm: debtors match creditors exactly
  • Full CRUD lifecycle: add → edit → delete with balance consistency check
  • Edge cases: 1 cent/3 people, 99999.99 EUR, odd remainders (7/3)
  • Expense filtering (mine, boat1, boat2)
  • Audit log integrity

Documentation

  • CLAUDE.md — full project context (architecture, wallet logic, conventions)
  • README.md — comprehensive rewrite: project structure, API reference, wallet algorithm, security model, test instructions

Test plan

  • 47/47 E2E wallet tests pass (100%)
  • All seed data balances verified against hand calculations
  • Mobile touch targets verified in Chrome DevTools (iPhone SE, iPhone 14 Pro)
  • Light/dark mode color palette verified
  • Wallet modal collapsible section works for add (collapsed) and edit (auto-opened)

🤖 Generated with Claude Code

Srbino and others added 8 commits March 22, 2026 12:01
@Srbino
feat: mobile UI, security fixes, comprehensive test suite
6e66bb2 
UI/UX:
- Lucide icons (local, CSP-safe) in sidebar, bottom nav and pages
- 5-item bottom nav with slide-up drawer for mobile
- Bottom sheet modals on mobile, expense-card components
- Wallet stats row, icon buttons, amount-pill styles

Security fixes:
- SEC-1: Ownership check on all edit/delete/toggle operations
  (shopping, logbook, menu)
- SEC-2: expense_date validated via DateTime::createFromFormat()
- BUG-2: requireLogin() returns JSON for AJAX requests (no 302)
- BUG-4: switchTab() uses explicit el param (Safari compat)
- BUG-1: logbook departure/arrival_time PHP Warning fixed
- CALC-3: CZK expense edit preserves original exchange_rate
- CALC-4: formatMoney() override removed from wallet.php

Docker local environment:
- docker-compose.yml (PHP 8.2 + Apache + MySQL 8)
- docker/apache.conf, schema.sql, seed.sql

Test suite (229 + 216 tests, all passing):
- tests/wallet_test.php: 62 unit tests (split, CZK, settlement)
- tests/validation_test.php: 74 unit tests (date, category,
  email, NM, meal type, rate limiting)
- tests/integration_test.php: 93 HTTP integration tests
  (auth, wallet, shopping, logbook, menu, cars, checklist)
- tests/e2e_calculations_test.php: 90 DB-backed E2E tests
  (split integrity, balances, settlements, stress)
- tests/e2e_10user_test.php: 216 truth-table E2E tests
  (10 users, exact per-split values, CZK rate preservation)

task.md: documented all bugs SEC-1..4, CALC-1..5, BUG-1..15
with before/after code and test coverage
@Srbino
test: golden dataset + fuzz tests for financial calculations
3aeebe5 
- docker/seed_roadtrip.sql: realistic 10-day trip, 10 people, 2 boats,
  20 expenses (mix EUR/CZK), fixed rate 25.00 CZK/EUR for reproducibility.
  Each expense annotated with expected split values and balance contribution.

- tests/golden_dataset_test.php: 161 tests comparing app output against
  independently computed reference values (computed via direct SQL, not app
  logic). Verifies exact paid/share/balance per user, all 9 settlement
  transactions by amount, and CZK conversion accuracy.

- tests/fuzz_test.php: 1819 property-based tests across 1800 random
  scenarios (1000 splits, 500 CZK conversions, 300 settlements) + edge
  cases. Uses fixed mt_srand(42) for reproducibility. Tests invariants:
  SUM==amount, each split>=0, all non-first splits identical, settlements
  reduce residual to ~0.
@Srbino
feat: comprehensive UI modernisation across all pages
5659abd 
- CSS: added avatar, FAB, progress-bar, stat-card-inner, balance-row,
  settlement-item-v2, shop-item-card, log-entry-card, menu-day-card,
  cl-section accordion, and shop-category-header components

- Dashboard: initials avatars for crew, balance card with progress bar,
  nav-cards with coloured icon tiles, countdown context label

- Wallet: expense-card category icons (Lucide per category), balance-row
  cards replacing plain table (avatar + progress bar), settlement-item-v2
  with avatars and arrow icons

- Shopping: card-based item list grouped by category with Lucide category
  icons, bought-toggle checkboxes, hide-bought filter, FAB for mobile

- Checklist: replaced emoji with Lucide icons, accordion sections
  (collapsible), pencil edit icon, FAB for mobile

- Logbook: stat-cards with icon wrappers, log-entry cards replacing table
  (date column + route + NM badge + note)

- Menu: day-cards replacing table, initials avatar for cook, edit icon

- Cars: car icon header, progress bar for capacity, steering-wheel icon
  for driver, initials avatars for passengers, user-x for unassigned

- Crews: Lucide phone/mail icons replacing unicode, initials avatars,
  sailboat icon in card header

- Itinerary: Lucide icons in timeline dots (car/sailboat/anchor/map-pin),
  colour-coded type badges per entry type
@Srbino
fix: mobile nav – hamburger in top bar, scroll fix, drawer slides dow…
4a28e49 
…n from top

- Hamburger moved from bottom-nav to top-bar (right side, next to logout)
- Bottom nav reduced to 4 items (no More button)
- Drawer now slides down from top-bar instead of up from bottom
- main-content uses padding-bottom (not margin) so page scrolls fully
- mobile-menu overlay starts below top-bar (no z-index overlap)
- iOS safe-area-inset-bottom respected in padding
@Srbino
fix: modal footer always visible – flex column layout, body scrolls
c5a055f 
Modal je nyní display:flex flex-direction:column. modal-body má flex:1
a overflow-y:auto takže scrolluje obsah. modal-footer má flex-shrink:0
takže tlačítka Uložit/Zrušit jsou vždy viditelná i při dlouhém obsahu
(10 checkboxů posádky, apod.)
@Srbino
fix: show user avatar photo in expense cards instead of initials
493dad5 
- wallet API: přidán paid_by_avatar (u.avatar) do SELECT
- expense card JS: pokud má paid_by_avatar, zobrazí <img>, jinak initials span
@Srbino
fix: load lucide + app.js in <head> so getInitials is available globally
d0062b2 
Skripts přesunuty z footer.php do header.php – stránkové <script> bloky
(wallet.php, crews.php apod.) se spouštějí až po načtení app.js, takže
getInitials() a ostatní globální funkce jsou vždy dostupné.
@Srbino @claude
feat: mobile UX fixes, Apple iOS design system, E2E wallet tests, CLA…
120ba86 
…UDE.md

Mobile UX (5 priority fixes):
- Touch targets enlarged to 44px minimum (icon-btn, modal-close, checkboxes, hamburger, drawer-close)
- Bottom nav: font 0.75rem, icons 24px, height 60px for readability
- Wallet modal: collapsible "Za koho" section with participant counter
- Scroll indicators: CSS mask gradient on wallet stats row
- Inline styles replaced with CSS classes in wallet modal

Design system:
- Apple iOS inspired color palette (oklch): System Blue primary, clean neutral grays
- Pure black dark mode (OLED-friendly), iOS system semantic colors
- SF Pro font stack, 15px base size, 8-12px radius, soft diffused shadows

Bug fixes:
- api/wallet.php: date parsing uses ?: instead of ?? (DateTime returns false, not null)
- Added Y-m-d\TH:i format support for HTML5 datetime-local inputs

Tests:
- E2E wallet test suite (47 tests) validating splits, balances, settlements, CRUD, edge cases
- Tests run against live app via HTTP: docker exec vol5_web php tests/e2e_wallet_test.php

Documentation:
- CLAUDE.md: full project context for AI assistants
- README.md: comprehensive rewrite with architecture, API reference, wallet logic, security

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Srbino Srbino changed the title feat: mobile UI, security fixes, comprehensive test suite (445 tests) feat: mobile UX, Apple iOS design, E2E tests, security fixes Mar 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Srbino