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

console: the nav navigates, and the screens act

Browse Source 
"New lead" sat in the sidebar. A sidebar is for moving between places;
filing a lead is an action, and an action in a list of destinations is
the one item that does not behave like its neighbours — everything above
and below it changes what you are looking at, and it did something.

It now sits on the overview and on every queue, beside the lists it adds
to, which is also where somebody is standing when they realise they have
a lead to file. Same role gate as before: shown only to a user who holds
an entry door.

The sidebar's own button CSS went with it rather than being left for
someone to wonder about.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yashas 2026-09-08 18:31:07 +05:30
parent 33bf65c5f5
commit de8b158ca9
5 changed files with 65 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/layout/Shell.css
View File

@ -195,41 +195,6 @@
animation: zk-rise 0.28s var(--ease) both;
}
/* ── Primary action ────────────────────────────────────────── */
.shell__add {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 2px 22px;
padding: 11px 14px;
border-radius: var(--r-md);
text-decoration: none;
font-size: 0.86rem;
font-weight: 500;
color: var(--zk-white);
background: var(--grad-blue);
box-shadow: var(--sh-sm);
transition: box-shadow var(--t), transform var(--t-fast), background var(--t);
}
.shell__add:hover {
background: var(--grad-blue-hover);
box-shadow: var(--sh-md);
transform: translateY(-1px);
}
.shell__add:active {
transform: none;
box-shadow: var(--sh-xs);
}
.shell__add svg {
width: 15px;
height: 15px;
flex: none;
}
/* ── Narrow viewports: the rail lies down and scrolls ──────── */
@media (max-width: 900px) {
.shell__body {

19
src/layout/Shell.jsx
View File

@ -1,6 +1,6 @@
import { NavLink, Outlet } from 'react-router-dom'
import { ENTRY, NAV_GROUPS } from '../api/config.js'
import { entryDoorsFor, rolesOf, visibleStages } from '../api/permissions.js'
import { NAV_GROUPS } from '../api/config.js'
import { rolesOf, visibleStages } from '../api/permissions.js'
import { useStageCounts } from '../api/portfolio.jsx'
import { useZino } from '../api/provider.jsx'
import UserMenu from './UserMenu.jsx'
@ -36,7 +36,6 @@ export default function Shell() {
// The sidebar shows the queues this role WORKS in. Reporting on the rest
// lives on the overview, which counts the whole book for everyone.
const stages = visibleStages(roles)
const canFile = entryDoorsFor(roles, ENTRY).length > 0
const { counts, ready } = useStageCounts()
// One queue row. Extracted because the live groups and the folded Closed
@ -98,15 +97,11 @@ export default function Shell() {
All leads
</NavLink>
{canFile ? (
<NavLink to="/add" className="shell__add">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor" strokeWidth="1.7"
strokeLinecap="round" />
</svg>
New lead
</NavLink>
) : null}
{/* "New lead" used to sit here. A sidebar is for moving between
places; filing a lead is an ACTION, and an action in a list of
destinations is the one item that does not behave like its
neighbours. It lives on the screens where leads are looked at —
the overview and the queues — beside the thing it adds to. */}
{NAV_GROUPS.filter((g) => g.kind !== 'end').map((group) => {
const inGroup = stages.filter((s) => s.kind === group.kind)

29
src/screens/Overview.jsx
View File

@ -2,8 +2,8 @@ import { useMemo } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { usePortfolio } from '../api/portfolio.jsx'
import { useZino } from '../api/provider.jsx'
import { STAGES, phaseOf } from '../api/config.js'
import { rolesOf, visibleStages } from '../api/permissions.js'
import { ENTRY, STAGES, phaseOf } from '../api/config.js'
import { entryDoorsFor, rolesOf, visibleStages } from '../api/permissions.js'
import { describeError } from '../api/errors.js'
import './screens.css'
@ -58,6 +58,7 @@ export default function Overview() {
const { user } = useZino()
const navigate = useNavigate()
const roles = rolesOf(user)
const canFile = entryDoorsFor(roles, ENTRY).length > 0
const state = usePortfolio()
const m = useMemo(() => {
@ -167,11 +168,25 @@ export default function Overview() {
<h1 className="page__title">Portfolio overview</h1>
<p className="page__sub">Motor and SME renewals · organisation-wide</p>
</div>
{state.at ? (
<span className="stamp">
Updated {state.at.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' })}
</span>
) : null}
{/* The action sits with the thing it acts on. It was in the sidebar,
which is for moving between places — an action among destinations
is the one item that does not behave like its neighbours. */}
<div className="page__right">
{state.at ? (
<span className="stamp">
Updated {state.at.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' })}
</span>
) : null}
{canFile ? (
<Link to="/add" className="newlead">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor"
strokeWidth="1.7" strokeLinecap="round" />
</svg>
New lead
</Link>
) : null}
</div>
</header>
<div className="kpis">

17
src/screens/Pipeline.jsx
View File

@ -1,7 +1,8 @@
import { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { useZino } from '../api/provider.jsx'
import { CHANNELS, RV_LEADS, STAGES, phaseOf } from '../api/config.js'
import { CHANNELS, ENTRY, RV_LEADS, STAGES, phaseOf } from '../api/config.js'
import { entryDoorsFor, rolesOf } from '../api/permissions.js'
import { describeError } from '../api/errors.js'
/** Short absolute date plus how long ago — a queue needs both: the absolute
@ -70,7 +71,8 @@ import './screens.css'
export default function Pipeline() {
const { stageUid } = useParams()
const navigate = useNavigate()
const { client } = useZino()
const { client, user } = useZino()
const canFile = entryDoorsFor(rolesOf(user), ENTRY).length > 0
// "all" is not a stage — it is every lead in one list, so an operator
// wanting to find one does not have to guess which queue it is in.
//
@ -173,6 +175,15 @@ export default function Pipeline() {
<strong>{isAll ? shownRows.length : state.total}</strong>
<span>{(isAll ? shownRows.length : state.total) === 1 ? 'lead' : 'leads'}</span>
</div>
{canFile ? (
<Link to="/add" className="newlead">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor"
strokeWidth="1.7" strokeLinecap="round" />
</svg>
New lead
</Link>
) : null}
</div>
) : null}
</header>

22
src/screens/screens.css
View File

@ -1393,3 +1393,25 @@
.grid__row.is-done .grid__name { color: var(--zk-muted); font-weight: 400; }
.grid__row.is-done:hover { color: var(--zk-ink); }
.grid__row.is-done:hover .grid__name { color: var(--zk-blue-dark); }
/* ---- file a lead ----
Moved off the sidebar. A nav is for moving between places; this adds
something, and it now sits beside the lists it adds to. */
.newlead {
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
padding: 9px 16px;
border-radius: var(--r-pill);
text-decoration: none;
font-size: 0.84rem;
font-weight: 500;
color: var(--zk-white);
background: var(--grad-blue);
box-shadow: var(--sh-sm);
transition: box-shadow var(--t), transform var(--t-fast), background var(--t);
}
.newlead svg { width: 14px; height: 14px; }
.newlead:hover { background: var(--grad-blue-hover); box-shadow: var(--sh-md); transform: translateY(-1px); }
.newlead:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }