gitea_admin/zurich_kotak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

console: make the renewal-exposure buckets filter the table

Browse Source 
The three buckets (Lapsed / Within 7 days / 8 to 30 days) were static counts
above a combined table. They now double as the filter: click one to narrow the
table to that bucket, click again — or use the Clear affordance — to show every
open renewal by soonest due. The active bucket fills with its own tint, an
empty bucket is disabled, and the empty state is filter-aware. One predicate
map drives both the counts and the filter so they cannot drift.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Yashas 2026-09-09 16:05:21 +05:30
parent 42af54b3e2
commit bd4ced41ac
2 changed files with 84 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/screens/Overview.jsx
View File

@ -47,6 +47,16 @@ function inr(n) {
return '₹' + Math.round(n).toLocaleString('en-IN')
}
/* The renewal-exposure buckets, as predicates on days-to-expiry, so the filter
and the three counts stay one definition. */
const EXPO_BUCKETS = {
lapsed: (d) => d < 0,
week: (d) => d >= 0 && d <= 7,
month: (d) => d > 7 && d <= 30,
}
const EXPO_LABEL = { lapsed: 'Lapsed', week: 'Within 7 days', month: '8 to 30 days' }
function expoLabel(k) { return EXPO_LABEL[k] || '' }
function expiryTone(d) {
if (d === null) return 'later'
if (d < 0) return 'lapsed'
@ -63,6 +73,8 @@ export default function Overview() {
// Filing a lead happens over this page, not instead of it — see
// NewLeadDialog. The overview behind it keeps its counts and its poll.
const [adding, setAdding] = useState(false)
// Which renewal-exposure bucket the table is narrowed to, or null for all.
const [expo, setExpo] = useState(null)
const state = usePortfolio()
const m = useMemo(() => {
@ -158,6 +170,10 @@ export default function Overview() {
const mine = new Set(visibleStages(roles).map((s) => s.uid))
// The exposure table, narrowed to the chosen bucket (or the soonest-due
// across all buckets when no filter is set).
const expoRows = expo ? m.attention.filter((r) => EXPO_BUCKETS[expo](r._d)) : m.attention
if (state.status === 'error') {
const said = describeError(state.error)
return (
@ -302,26 +318,43 @@ export default function Overview() {
</div>
<h2 className="sec">Renewal exposure<span className="sec__hint">open leads by time to expiry</span></h2>
<div className="buckets">
<div className="bucket bucket--lapsed">
<strong>{m.exposure.lapsed.length}</strong><span>Lapsed</span>
</div>
<div className="bucket bucket--urgent">
<strong>{m.exposure.week.length}</strong><span>Within 7 days</span>
</div>
<div className="bucket bucket--soon">
<strong>{m.exposure.month.length}</strong><span>8 to 30 days</span>
</div>
{/* The three buckets double as the filter: click one to narrow the
table to it, click again (or Clear) to show every open renewal. A
bucket with nothing in it is not clickable — there is nothing to
show. */}
<div className="buckets" role="group" aria-label="Filter by time to expiry">
{[
['lapsed', 'lapsed', m.exposure.lapsed.length, 'Lapsed'],
['week', 'urgent', m.exposure.week.length, 'Within 7 days'],
['month', 'soon', m.exposure.month.length, '8 to 30 days'],
].map(([key, variant, count, label]) => (
<button
key={key}
type="button"
className={`bucket bucket--${variant}` + (expo === key ? ' is-active' : '')}
aria-pressed={expo === key}
disabled={!count}
onClick={() => setExpo(expo === key ? null : key)}
>
<strong>{count}</strong><span>{label}</span>
</button>
))}
</div>
{m.attention.length ? (
{expo ? (
<button type="button" className="expo__clear" onClick={() => setExpo(null)}>
Showing {expoLabel(expo)} only · Clear filter
</button>
) : null}
{expoRows.length ? (
<div className="gridwrap">
<table className="grid grid--tight">
<thead>
<tr><th>Lead</th><th>Expiry</th><th>Stage</th><th className="num">Premium</th></tr>
</thead>
<tbody>
{m.attention.slice(0, 8).map((r) => {
{expoRows.slice(0, expo ? 50 : 8).map((r) => {
const id = r.instance_id ?? r.id
return (
<tr
@ -351,7 +384,9 @@ export default function Overview() {
</table>
</div>
) : (
<p className="empty">No renewals due within 30 days.</p>
<p className="empty">
{expo ? 'No open leads in this bucket.' : 'No renewals due within 30 days.'}
</p>
)}
</div>

36
src/screens/screens.css
View File

@ -1059,6 +1059,42 @@
.bucket--soon { border-left-color: var(--zk-blue-mid); }
.bucket--soon strong { color: var(--zk-blue-dark); }
/* The buckets are filter toggles. Reset the button chrome, keep the card look,
and add hover / pressed / disabled states. */
.bucket {
width: 100%;
font: inherit;
text-align: left;
color: inherit;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast),
box-shadow var(--t-fast), transform var(--t-fast);
}
.bucket:hover:not(:disabled) { box-shadow: var(--sh-sm); }
.bucket:active:not(:disabled) { transform: translateY(1px); }
.bucket:focus-visible { outline: none; box-shadow: var(--ring); }
.bucket:disabled { cursor: default; opacity: 0.55; }
/* Pressed: fill with the bucket's own tint so the active filter is unmistakable. */
.bucket--lapsed.is-active { background: var(--zk-danger-tint); border-color: var(--zk-danger-line); border-left-color: var(--zk-danger); }
.bucket--urgent.is-active { background: var(--zk-amber-tint); border-color: var(--zk-amber-line); border-left-color: var(--zk-amber); }
.bucket--soon.is-active { background: var(--zk-tint-blue); border-color: var(--zk-blue-mid); border-left-color: var(--zk-blue-mid); }
/* The clear affordance under the buckets when a filter is on. */
.expo__clear {
margin: 10px 0 0;
padding: 0;
border: 0;
background: none;
cursor: pointer;
font: inherit;
font-size: var(--fs-2xs);
font-weight: 500;
color: var(--zk-blue-dark);
}
.expo__clear:hover { text-decoration: underline; }
.expo__clear:focus-visible { outline: none; text-decoration: underline; box-shadow: var(--ring); border-radius: var(--r-xs); }
/* Stage distribution. A bar per stage, scaled to the largest — enough to see
where the book is banked without pulling in a charting library. */
.dist { display: flex; flex-direction: column; gap: 3px; }