Small cleanups tracked in docs/plans/parked-work.md:
1. Delete dead AbsenceQuickForm class — Round C replaced the per-row
✗ modal paradigm with the "Submit + Log Absences" button, but the
form class never got wired up. No view, URL, template, or test
ever referenced it.
2. Single-query team_workers_map via shared _build_team_workers_map
helper. Previously fired one SELECT per team because .filter(
active=True) on a prefetched M2M bypasses the prefetch cache.
Now uses Prefetch(to_attr='active_workers_cached'). Both
attendance_log() and absence_log() use the same helper.
3. absence_list permission check now uses _user_can_log_absences
instead of duplicating the same `is_admin OR supervised_teams`
logic inline.
4. Drop misleading var(--badge-neutral-bg, …) wrapper in custom.css —
the variable isn't declared so the fallback always wins. Use the
hex directly.
5. conflicting_worklogs() N+1 → single query: was firing one SELECT
per (worker, date) pair (25 queries on a 5×5 form). Now 2 queries
total via .filter(date__in=…, workers__in=…) + Python-side pair
set check.
6. Extract _apply_absence_filters helper — absence_list and
absence_export_csv were duplicating the same 7-param filter block
(with a TODO comment to factor it out). Now structurally enforced
in one place; list view keeps the raw param read-back for
template-context dropdown preselection.
7. Replace style="color: var(--badge-bonus-bg)" with class="text-success"
on the paid-check icon in site_report_detail.html — same WCAG
contrast bug we fixed on the absence templates (background colour
used as foreground).
All 157 tests still pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
#5 from checkpoint feedback: /workers/<id>/ now has an Absences tab
showing YTD totals (chip row) + 50 most-recent absences (table).
Admin dashboard adds a conditional 'X absent in last 7 days' alert
card (only renders when count > 0; links to filtered /absences/).
CLAUDE.md gets a new Absence model entry + URL routes + dedicated
'Absence-to-PayrollAdjustment cascade' section. Reason-badge CSS
moved to static/css/custom.css as single source of truth. 4 new tests.
The 4 action buttons at the top of /payroll/ were previously a mix
of btn-outline-info / btn-primary / btn-outline-success /
btn-outline-warning — three different treatments, with a lone solid
btn-primary (Batch Pay) pulling the eye disproportionately. Konrad
asked for a more uniform + pastel look.
New .btn-action-soft base class with per-button colour modifiers:
- Worker Lookup → soft blue (new --btn-action-lookup tokens)
- Batch Pay → soft amber (new --btn-action-pay tokens;
slightly deeper saturation to preserve its
"primary" role without breaking the uniform look)
- Add Adjustment → reuses --badge-bonus-* (green, "adding money"
semantic matches Bonus)
- Price Overtime → reuses --badge-overtime-* (mauve, same colour
as the Overtime badge on the Adjustments tab —
so the button matches the data it acts on)
All 4 now share:
- No border, solid pastel fill, contrasting text
- Same height, padding, border-radius (0.5rem)
- Subtle box-shadow lift on hover (filter: brightness)
- 1px press-down on active
- Accessible focus-visible outline in --accent
- Icons inherit text colour
Net CSS change: 4 new tokens (2 per theme × 2 themes) + 5 new
classes. Removes shadow-sm, btn-sm, btn-md-normal, fw-bold
one-offs — all handled by the base class.
docs/design-tokens.md updated to record the new token pairs.
Tests: 69/69.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Konrad caught that /payroll/?status=loans was still using Bootstrap
defaults (bg-primary for Loan, bg-info for Advance) while the other
three tabs had moved to the semantic palette. The Preview-payslip
modal's Active Loans card had the same inconsistency in its JS-built
badge.
- Added .advance-flag-badge as a sibling to .loan-flag-badge; both
just reference the existing --badge-loan-* / --badge-advance-*
tokens so no new colours introduced.
- /payroll/?status=loans row badge: bg-primary/bg-info → loan-flag-
badge/advance-flag-badge.
- Worker-lookup / Preview-payslip modal JS: same swap on the badge
className.
Loan-family items now wear the same amber/blue colour pair on every
tab + modal they appear on. Transactional status (Active/Paid Off)
stays on Bootstrap greens/yellows — they're lifecycle, not type.
docs/design-tokens.md updated to record the new class + every place
the --badge-loan-* / --badge-advance-* tokens now appear.
Tests: 69/69.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Root cause of Konrad's narrow-wrap screenshot: display:flex was set
on .adj-group-header (a <tr>), which causes the browser to remove
the row from table layout. A flex-mode <tr> ignores colspan and
shrinks to intrinsic content width — which is why a row with
colspan=10 ended up rendering at ~80-100px and wrapping the meta
text into a 5-char column.
Moved display:flex, align-items, gap, and padding onto the single
<td> child. The td is a normal block box and flexes correctly,
putting icon + label + meta in a horizontal row with the meta
pushed to the right via margin-left:auto (now working since its
parent is a real flex container).
Also added white-space:nowrap on .adj-group-meta so the meta never
wraps mid-phrase even if a narrow viewport squeezes the cell.
Inline comment documents the <tr> vs <td> distinction so future
sessions don't re-introduce the bug.
Tests: 69/69.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the 4-branch Bootstrap-state conditional on the Pending
and History tabs with the semantic .badge-type-{{ adj.type|type_slug }}
palette that the Adjustments tab has been using. Now "Loan" badges
are the same colour in every tab instead of Pending=yellow /
Adjustments=amber.
Also recolours the Pending-tab "Loan" worker flag to the same amber
(.loan-flag-badge class). "Overdue" flag stays red - it's an urgency
signal, not a type signal, and we deliberately keep transactional
state colours (Bootstrap bg-success/bg-warning/bg-danger) separate
from the type palette so a green badge can only mean "Bonus" and
never ambiguously "Paid".
Threads 'additive_types' (list(ADDITIVE_TYPES)) into the base
payroll_dashboard context so the +/- sign logic works on Pending
and History too (was previously only set in the Adjustments-tab
branch).
Tests: 69/69.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Konrad's feedback on the shipped Adjustments tab: "this interface
layout is very ugly. And the selection dropdown menus text is a bit
large." Plus: the 'Show as' toggle sits too close to the filter bar.
Design doc: docs/plans/2026-04-23-adjustments-filter-bar-v2-design.md
Changes:
1. All 5 filters become pill-popovers of identical shape
- Type / Workers / Teams: unchanged (already pills)
- Status: was <select> + <label>, now pill → popover with 3 radios
- Date: was inline inputs + preset links + '...' toggle, now pill →
popover with Single/Range mode toggle + picker(s) + presets + OK/Cancel
- Pill labels update to 'Status: Unpaid' / 'Date: 24 Apr 2026' /
'Date: 20 Apr – 26 Apr 2026' for at-a-glance state
- Apply + Clear pushed to right end via .adj-apply-group (margin-left: auto)
2. Popover density pass
- .adj-checkbox-list / .adj-radio-list font-size 0.8rem (~12.8px)
- .adj-cb-row padding trimmed to 0.15rem 0.25rem
- Checkbox visual size 0.9em
- Popover footer buttons 0.75rem font, 0.25rem 0.6rem padding
- Popover max-width 360px (was ~420px)
- 7-type popover drops from ~320px tall to ~240px
3. Spacing fix above 'Show as:' toggle
- .adj-groupby-toggle now has margin-top: 1rem + margin-bottom: 0.75rem
- Clear visual separation from the sticky filter bar
4. Filter-bar alignment
- align-items: center (was end, now all children are same height)
- Gap tightened to 0.5rem
Backend contract unchanged (query params identical). No test changes
(65/65 still pass). Committed popover JS uses the same
.adj-hidden-inputs pattern as the checkbox filters — Status + Date
each have their own commit/revert logic that rewrites their hidden
inputs on OK. XSS-safe throughout (replaceChildren() + textContent,
no innerHTML with user data).
Gated the generic checkbox-popover OK/Cancel handler to
['type', 'worker', 'team'] so the new Status/Date popovers aren't
accidentally re-committed via commitCheckboxes.
Code-review follow-ups on Task 5:
1. Chevron rotation — Bootstrap 5 collapse sets aria-expanded="false" on
the toggle when collapsed; two CSS rules off that attribute rotate
the chevron -90deg with a 150ms transition. No JS needed.
2. test_group_by_type now asserts groups[0]['label'] == 'Bonus', locking
in the descending-|net_sum| ordering promise (|800| > |100|).
60/60 tests still pass.
Adds _group_adjustments helper that buckets a flat queryset by type or
by worker_id, with signed net_sum (+ for additive, - for deductive)
and descending-magnitude ordering so the biggest-impact bucket sits
at the top.
Template branches on adj_groups: grouped view renders one <tbody>
per group with a Bootstrap-collapse-driven header row, wrapping
include of _adjustment_row.html for the actual rows (no duplication).
Flat view is the default when group_by is empty.
By Type headers get a 4px left-border accent in the matching badge
colour so grouped rows visually echo the badges below them.
Attribute-selector based ([data-type=Bonus] etc.) so the
CSS stays self-descriptive without per-type class explosion.
Adds |money_abs template filter for signed render ('-R 100.00' in
the template becomes money_abs(-100) -> '100.00' after the caller
emits its own sign; avoids 'R -100.00' which reads wrong).
Two new tests lock in the bucket structure + net_sum signing for
both axes. Tests 58 -> 60. url_replace template tag already shipped
in the CP1 pagination fix - reused here for the toggle hrefs.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Checkpoint-1 feedback from Konrad: the Choices.js chip pattern for
Type / Workers / Teams was visually intrusive once multiple options
were picked — the filter bar dominated the viewport.
Replacement: each filter is now a compact pill (like Feature 1's
inline-filter pills on the report page) that opens a popover with a
scrollable checkbox list, live-search, and Select All / Invert /
Clear action buttons. OK commits the pending state into hidden form
inputs; Cancel / Esc / click-outside revert. The existing Apply button
still submits the form normally.
Reuses Feature 1's .filter-pill / .filter-popover CSS vocabulary —
only new CSS is a scrollable checkbox-list rule and a pill-count
badge style. No new modals. Choices.js CDN stays loaded (other
tabs still use it).
Systematic-debugging: Konrad reported the project/team popovers showed
no options ('can not see any options') and wheel scroll fell through to
the page instead of scrolling the dropdown.
Root cause chain:
1. The 0bbf2ca/ffb3ef6 CSS on .filter-popover had `overflow: hidden`
(to hide anything past max-height) and the body had
`overflow-y: auto; flex: 1 1 auto`.
2. Choices.js renders its option list with the default
`.choices__list--dropdown { position: absolute; }`.
3. Absolutely-positioned elements do NOT contribute to an ancestor's
scrollHeight, so the body's overflow-y: auto never created a scroll
context — wheel events bubbled to the page.
4. The dropdown extended past the popover's bottom edge and got clipped
by the popover's overflow: hidden, so no options were visible.
Single-point fix:
- Remove `overflow: hidden` from .filter-popover (it was only there to
enforce the sticky footer, which the flex layout already does).
- Scoped CSS override on .choices__list--dropdown inside .filter-popover
to force `position: static` — dropdown now flows inline, the body
grows to contain it, and the sticky footer pushes below naturally.
The dropdown gets its own `max-height: 260px; overflow-y: auto` for
long option lists, which gives a clean internal scroll.
Specificity gotcha: Choices.js's rule is
`.choices__list--dropdown, .choices__list[aria-expanded]` — the second
branch has class+attribute specificity (0,0,2,0) that TIES with a naive
two-class override, and since Choices.js's stylesheet loads after ours,
source order gave them the win. The fix is to mirror the selector list,
lifting our specificity to (0,0,2,1) on the aria-expanded branch, which
wins cleanly without `!important`. Inline comment in custom.css explains
this for future reference.
Scoping: the override is gated to `.filter-popover` descendants, so
Choices.js widgets elsewhere in the app (worker / team / project picker
on edit pages, payroll modals, etc.) keep their default absolute-
positioned dropdown.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Konrad's Checkpoint-1 feedback: the popover 'kind of disappears against
the report page'. Previous 1px border + 0.28 opacity shadow read as
weak against the amber-tinted report cards.
Now: 2px accent-orange border + three-layer shadow (soft accent halo,
deep drop, near edge) so the popover reads as clearly detached. Light
theme gets its own shadow palette because white-on-white needs less
absolute darkness but more tinting to be visible.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Checkpoint 1 UX feedback (Konrad, 2026-04-23) surfaced three friction points
that all traced back to the same over-engineered "multi-stage commit" model:
1. When Choices.js opened its dropdown, it covered the popover's OK button.
User had to click in a thin strip "outside the multi-select but inside
the dropdown pane" to close Choices.js before OK became reachable.
2. Changing only a project/team didn't light up the global Apply button
(dirty-state diff bug on multi-selects), and even when it did, clicking
Apply didn't actually update the report tables. Also the Apply button
sat at the far right of the pill strip — easy to miss on desktop.
3. Single-month reports required changing BOTH From and To pickers; for a
low-frequency admin tool, that's a tax on the most common flow.
Instead of patching three bugs, collapsed the entire pending/dirty/Apply
model. Each popover's OK now:
- Rebuilds the URL from its OWN inputs only (keeping other filters intact)
- Navigates → full SSR page reload → report re-renders
The user reads the result of their change immediately; there's no "did I
remember to click Apply?" step.
Side-effect wins:
- 'dirty state', 'pending state', 'updateAllPillsDirty', 'revert...',
cross-filter auto-removal, and the toast system all become unnecessary.
Net -187 lines across template + CSS.
- The bug from (2) self-disappears because there's no dirty-diff step.
- Sticky popover footer (position: sticky; bottom: 0; z-index: 2) pins
OK to the popover edge even when Choices.js expands — solves (1).
- The To month picker is labelled "Until (optional)" with "Leave blank
for a single month" hint. Blank on submit → to_month = from_month.
Single-month URLs round-trip with a blank To input (so the form and
the data agree).
Cross-filter preserved: on popover open, the OTHER pill's URL selection
still disables invalid dropdown options. Just no runtime auto-remove —
unnecessary because the next OK submits and the server takes over.
Tested in the browser via preview MCP:
- All three pills open popovers on click
- Range URL shows both month pickers filled
- Single-month URL shows To blank
- OK with blank To → navigates to from_month=X&to_month=X
- Sticky footer keeps OK in viewport when Choices.js is open
- 45/45 tests still pass (no backend contract change)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Final chapter of the executive redesign. Renders the
team_project_activity context as a pivot: rows=teams, columns=projects,
cell=COUNT(DISTINCT work-log dates). Zero cells show em-dashes in muted
grey (not '0') so non-zero cells stand out. Row totals, column totals,
and grand total on the bottom row.
Adds a tiny dictlookup template filter (format_tags.py) — Django
templates can't index a dict by a dynamic variable key, and the pivot
cell lookup is cells_by_project_id[col.id]. Defensive None + TypeError
guards so a malformed context can't 500 the page.
.table-total-row CSS: 2px top border + inset background for the footer
row so totals visually separate from the data rows.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the old narrow four-card All-Time/YTD row (dropped in Task 9)
with two wider cards under a numbered 'Chapter I - Lifetime Context'
heading. Projects card gains Start, Working Days, Total Cost, and
Avg R / Working Day columns per the design. Teams card keeps name +
total.
Adds .chapter-heading and .chapter-num CSS for the orange numbered
markers (I, II, III, IV) and .report-numeric class that applies
tabular-nums across the number columns of every report table.
Renames the existing 'Selected Period' heading to Chapter II.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Chapter 0 of the executive redesign: four large cards at the top
showing Paid This Period, Outstanding Now (live, stamped with the
generation time), FoxFitt Avg/Day, and FoxFitt Avg/Month.
Drops the old four-small-cards All-Time/YTD row (YTD specifically
documented as redundant per design doc section 3). All-Time detail
moves into Chapter I in the next task.
New .stat-card--hero variant uses Poppins 1.85rem for the number,
uppercase tracked labels, subtle tertiary sub-lines. tabular-nums
keeps the R-amounts pixel-aligned across cards.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The b0d3829 overrides lost the cascade battle: the Choices.js CDN CSS
loads AFTER custom.css (inside the modal partial near </body>), so the
CDN's same-specificity rules won by load order. Dropdown still showed
white background + light-grey text in dark mode.
Fix: chain the root `.choices` class to every override (specificity
0,2,0 → 0,3,0) and add !important to color + background + border
properties that Choices.js hardcodes most aggressively. Now the
theme tokens always win regardless of load order.
Visual effect: dropdown option hover state now matches the selected
"Month(s)" button aesthetic (--bg-card-hover subtle lift with
--text-primary text) per Konrad's feedback.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Code review of Task 7 showed Choices.js shipping with white-bg +
light-grey-text defaults, which were unreadable in dark mode and
clashed with the app's premium aesthetic. The design doc section 10
scoped these overrides into the CSS work but they hadn't been written.
Adds ~70 lines to custom.css re-themeing every .choices__ selector to
use existing design tokens (--bg-card, --bg-inset, --text-primary,
--accent, --border-default, etc.). No hardcoded colours; both :root
and :root.light themes work automatically.
Key visual changes:
- Dropdown popup: dark-card background with shadow
- Options: primary text colour, accent hover highlight
- Selected chips: orange accent pill with white text
- Focus ring: 0.15rem accent glow on the input
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three pills under the header: date range, project(s), team(s). Shows
comma-joined names when multi-valued (project_name in context is
already a comma-joined string from Task 6). × buttons on the project
and team pills remove just that filter via a rebuilt querystring;
the calendar pill has no × (date range is required).
Helper context keys query_string_without_project / _without_team do
the rebuild in the view via QueryDict.setlist so multi-value keys
are properly stripped (pop() only removes the first occurrence).
Pill CSS uses existing design tokens (--bg-inset, --accent,
--text-primary, --border-default, --text-tertiary, --bg-card-hover)
so dark and light themes work without overrides.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Subtle background tint on hover to cue that the row is clickable.
Applied via .work-log-row class which Tasks 6-8 added to admin-only
rows in work_history.html, teams/detail.html, and projects/detail.html.
Supervisors never get the class, so hover never applies for them.
Deployment_timestamp cache-bust in base.html will beat Cloudflare's
edge cache (per CLAUDE.md Static Assets section).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Override Bootstrap's --bs-table-color to use theme text color so table
numbers (days, amounts, totals) are readable on dark backgrounds. Fix
Loan badge by removing text-dark class and using CSS to force black text
on bg-warning. Add dark mode overrides for disabled form controls, select
option dropdowns, btn-close filter, btn-secondary colors, and Bootstrap
text utility classes (.text-dark, .text-primary, .text-muted, etc.).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Move decorative gradient glows from ::before/::after pseudo-elements on
.app-main to a separate .app-glow div. The pseudo-elements were creating
a stacking context that trapped Bootstrap modals (z-index 1055) inside
.app-main, while the backdrop (z-index 1050) was appended to <body> —
causing the backdrop to render on top of the modal content.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the green accent with a warm orange/amber palette and switch to a
dark-first design. Add a fixed sidebar for desktop navigation and a bottom
tab bar for mobile, replacing the top navbar. Cards now use glass-morphism
with left accent bars, buttons use orange gradients, and decorative glow
effects add depth. All 8 page templates updated, both light and dark modes
tested across desktop and mobile viewports.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
