Hard rules: - All CSS lives in

Filters and Saved Views

Han: Stakeholder Summary

The bottom line

Users can find the rows they care about in the customers, orders, and shipments lists without scrolling, paging, or re-applying the same filters every visit — and the shipments map shows what the shipments list was showing.

Four decisions we need from stakeholders

Each item below is a scope boundary we’ve picked. Confirm or push back before kickoff.
1Single-value filters as the v1 ceiling
Every pill takes one value (e.g. “Region is West,” not “West OR Central”). Multi-value selection waits until a user reports being blocked by it. Confirm ship single-value first?
2Saved views are private per user, per organization
No user sees another user’s views; no “org default view.” The earlier product carried a sharing flag for years without shipping the sharing UX, which we read as low demand. Confirm private-only for v1, or plan org-wide sharing into the same release?
3Desktop and laptop only for v1
No mobile bottom-sheet, no tablet-optimized layout, no touch-first interaction. No planning document identifies filter management as a tablet workflow today. Confirm desktop-only is acceptable, or is tablet parity inside this release?
4Remove the reports-list Filters button rather than wire it up
The reports list’s Filters button does nothing today because the underlying data has nothing meaningful to filter reports by yet. Choice is remove (honest) vs. leave visible but broken. Confirm removal is the right call?

What problem are we solving?

When a user opens the customers list, orders list, or shipments list, there is no good way to narrow rows down to the ones they care about right now. To find “the open orders over $10,000 assigned to me” or “the shipments headed to the West region,” they scroll, page through results, or rely on browser find-on-page.

Common filter combinations have to be re-applied by hand on every visit because there is nowhere to save them. On the shipments map, every shipment is shown regardless of what the user was just looking at in the list, so the map and the list feel disconnected. And on the reports list there is a Filters button that does nothing when clicked — a broken control sitting there visibly.

What this opens up

What the user experience looks like

  1. The user opens any of the three in-scope lists and sees a familiar toolbar with a Filters control and, once at least one filter is active, a Save view as control.
  2. Clicking Filters opens a horizontal strip of pills below the toolbar — one pill per available filter for that list.
  3. Clicking a pill opens a small panel where the user picks one value from a searchable list. As soon as a value is picked, the list narrows.
  4. The user can save the current pill combination as a named tab that appears above the list and is one click away on every future visit.
  5. On the shipments list, clicking View on map carries the same filters across so the map shows the same shipments the list was showing.
flowchart TD
    A[User opens the customers, orders, or shipments list] --> B[Clicks Filters]
    B --> C[Pill strip appears, one pill per available filter]
    C --> D[Clicks a pill, picks a value]
    D --> E[List narrows to matching rows]
    E --> F{Want to reuse this combination?}
    F -->|No, one-off lookup| G[Done — the web address captures the state]
    F -->|Yes, I use this often| H[Clicks Save view as and names it]
    H --> I[A named tab appears above the list]
    I --> J[On a future visit, clicks the tab to recall the same filters]
    E --> K{On the shipments list?}
    K -->|Yes| L[Clicks View on map]
    L --> M[Map opens showing the same shipments]
    K -->|No| G
    style A fill:#ece6fe,stroke:#4d0aed,color:#4d0aed
    style E fill:#eefbe0,stroke:#2f6b00,color:#2f6b00
    style I fill:#eefbe0,stroke:#2f6b00,color:#2f6b00
    style M fill:#eefbe0,stroke:#2f6b00,color:#2f6b00
      

Data flow — today vs. after this change

Today

Across all three lists in scope, the user opens the list and has no way to narrow it down, no way to save the filters they use often, and no way to carry a filtered view across to the shipments map.

flowchart LR
    U([User]) -->|opens a list| L[Customers, orders, or shipments list]
    L --> A[Every row in the organization is shown]
    A -.->|no way to filter| P1[Scroll or page through to find rows]
    U -.->|same filters every visit| P2[No way to save a common combination]
    U -.->|wants map of the same shipments| M[Shipments map shows all shipments, ignoring the list]
    style U fill:#ece6fe,stroke:#4d0aed,color:#4d0aed
    style P1 fill:#ffe2d6,stroke:#b03000,color:#b03000
    style P2 fill:#ffe2d6,stroke:#b03000,color:#b03000
    style M fill:#ffe2d6,stroke:#b03000,color:#b03000
      

After — the everyday path

The user opens any of the three lists, clicks Filters to reveal the pill strip, and picks values. The list narrows as each value is picked, and the web address updates — refresh, bookmark, or share the link, and the same filtered list reopens.

flowchart LR
    U([User]) -->|opens a list| L[Customers, orders, or shipments list]
    L -->|clicks Filters| P[Pill strip opens]
    P -->|picks a value in a pill| F[List narrows to matching rows]
    F --> Z[Web address captures the filters so a refresh, bookmark, or shared link recalls the same view]
    style U fill:#ece6fe,stroke:#4d0aed,color:#4d0aed
    style F fill:#eefbe0,stroke:#2f6b00,color:#2f6b00
    style Z fill:#eefbe0,stroke:#2f6b00,color:#2f6b00
      

After — save the current filters as a named tab

Clicking Save view as (only available when at least one filter is active) names the current combination. The system records it privately for the current user, inside the current organization, on the current list, and immediately adds a tab above the list. On a future visit, one click recalls the same filters. Renaming, updating, or deleting the view is done from a menu next to the tab strip.

flowchart LR
    U([User]) -->|filters are active| F[Filtered list]
    F -->|clicks Save view as, names it| N[System records the named view for this user, this organization, this list]
    N --> T[A new tab appears in the tab strip above the list]
    T -->|on a future visit, clicks the tab| R[Same filters re-applied in one click]
    style U fill:#ece6fe,stroke:#4d0aed,color:#4d0aed
    style T fill:#eefbe0,stroke:#2f6b00,color:#2f6b00
    style R fill:#eefbe0,stroke:#2f6b00,color:#2f6b00
      

After — carry the shipments list’s filters across to the map

On the shipments list, clicking View on map while filters are active carries the same filter values into the map’s web address. The map renders the matching shipments with known locations — the same West-region shipments the user was looking at, not every shipment in the organization. Navigating back returns the user to the same filtered list they left.

flowchart LR
    U([User]) -->|on the filtered shipments list| F[Filtered shipments list]
    F -->|clicks View on map| M[Shipments map opens with the same filters]
    M --> S[Map renders the same shipments the list was showing]
    style U fill:#ece6fe,stroke:#4d0aed,color:#4d0aed
    style S fill:#eefbe0,stroke:#2f6b00,color:#2f6b00
      

What is intentionally not in this slice

If any of these cuts would block your team, flag it before kickoff.