BanGUI/Docs/Tasks.md

BanGUI — Task List

This document breaks the entire BanGUI project into development stages, ordered so that each stage builds on the previous one. Every task is described in prose with enough detail for a developer to begin work. References point to the relevant documentation.

Reference: Docs/Refactoring.md for full analysis of each issue.

---

Open Issues

1. History Screen — Move Jail & IP Address Filters Into the Time Range Bar

Goal: Unify all History-page filters into a single bordered bar so that Jail and IP Address sit inside the same card/border as Time Range and Filter, separated by vertical dividers.

Current state:

• DashboardFilterBar (frontend/src/components/DashboardFilterBar.tsx) renders a single bordered card (cardStyles.card) that contains two groups — Time Range (toggle buttons) and Filter (origin toggle buttons) — separated by a vertical <Divider>.
• In HistoryPage (frontend/src/pages/HistoryPage.tsx, lines 476–510) the Jail <Input> and IP Address <Input> are rendered outside that bar as separate cards, each wrapped in their own cardStyles.card div, laid out horizontally via styles.filterRow (flexbox row with gap).

Desired state:

• The Jail and IP Address inputs must move inside the DashboardFilterBar card border (or the equivalent combined container) so the entire filter strip looks like one cohesive section.
• Each new group (Jail, IP Address) is separated from its neighbor by a vertical divider (|), using the same <Divider vertical /> + styles.divider pattern already used between Time Range and Filter.
• Inside each group the label text ("Jail", "IP Address") must appear to the left of its input field (i.e. flexDirection: "row" with alignItems: "center", not above it). This matches the existing group style where the title text sits to the left of the toolbar buttons.
• The visual order inside the bar is: Time Range | Filter | Jail | IP Address.

Files to change:

1. frontend/src/components/DashboardFilterBar.tsx

   • Accept two new optional props (e.g. jailSlot?: React.ReactNode and ipSlot?: React.ReactNode, or pass the value+onChange pairs directly). Keep the component reusable — the Dashboard page uses the same component but does not need the Jail/IP inputs, so these slots must be optional.
   • After the existing Filter group, conditionally render a <div className={styles.divider}> + <Divider vertical /> followed by a new group for Jail, and repeat for IP Address.
   • Each new group should follow the existing styles.group layout: a row with the label <Text weight="semibold" size={300}> on the left and the <Input> on the right, separated by gap: tokens.spacingHorizontalM.

2. frontend/src/pages/HistoryPage.tsx

   • Remove the two standalone Jail and IP Address <div> cards (currently wrapped in styles.filterLabel + cardStyles.card).
   • Instead, pass the Jail and IP Address controls into <DashboardFilterBar> via the new props/slots.
   • The styles.filterLabel style can be removed if no longer used elsewhere.

Acceptance criteria:

• All four filter groups (Time Range, Filter, Jail, IP Address) render inside a single bordered bar.
• Each group is separated by a vertical divider identical to the existing one between Time Range and Filter.
• The labels "Jail" and "IP Address" sit to the left of their respective input fields (horizontal layout), not above them.
• The Dashboard page's usage of DashboardFilterBar is unaffected (no Jail/IP inputs shown there).
• Existing filter functionality (debounced input, query params, pagination reset) remains unchanged.

Status: completed