Navigating the app

Nyumba Zetu reuses the same handful of interface patterns everywhere. Learn them once and every module behaves predictably.

Branch context

The top of the sidebar is named after the branch you are currently working in. Branch scoping is not a filter you can ignore — lists, KPIs, reports and totals are all computed for the active branch.

Sidebar structure

The sidebar is grouped by how work flows, not by database tables:

1. Workspace (named after your branch) — Home, Dashboard, Leases, Residents.
2. Finance — Receivables, Payables, Collections, Accounting, TPS, Reports.
3. Operations — Communications, Operations, CRM, Admin.
4. Super Admin — cross-organisation tooling, visible only to platform administrators.

Groups with children expand in place. Items marked Beta are live but still evolving; items marked New were added recently.

Page chrome

Most detail and list pages share the same furniture:

• Breadcrumb — the path back up the hierarchy. Detail pages are addressed by UUID, so the URL in your address bar is safe to copy and share with a colleague.
• Page header — title, description, and the primary action. Pages deliberately expose one primary action; everything else lives in the overflow menu. Disabled actions explain why on hover.
• Tab strip — where a module has genuinely distinct pages (for example Collections' Overview · Worklist · Strategies). Modules with a single page hide the strip.
• Settings gear — where a screen has configurable behaviour, a gear button opens the category-scoped settings panel for it instead of sending you to a global settings page.
• Refresh — one control, in the same place with the same icon on every screen that has one. On Home and Dashboard it forces the figures to be recomputed rather than served from the fifteen-minute cache, which is the whole point of pressing it.
• Detail drawers — a record opened from a list slides over the page rather than replacing it, and carries an open full page link when it has a page of its own.

Record chips

A reference to another record — a unit, a lease, a resident, an invoice, a payment, an owner, an expense — renders as a chip wherever it appears. Click it to open that record; hover or focus it to get a peek, a small card with the few facts you usually wanted instead of a full page load. Chips read the same way in a grid cell, in a drawer and in a page header, so a reference is recognisable before you read it.

Working with grids

Most lists are AG-Grid tables with server-side paging.

View modes

Where a list has more than one useful shape, a view switcher appears in the title bar:

• Grid — the table.
• Kanban — cards grouped by status, for workflow-shaped data such as applications or service requests.
• Calendar — date-shaped data such as lease starts and ends, reservations, or scheduled tasks. A row can plot more than one event (a lease shows both its start and end chip), with a legend above the calendar.

Detail drawers

Clicking a row can open an off-canvas drawer with the record summary and its actions, without losing your place in the list. Drawers support the same actions as the full detail page for the common cases; open the full page when you need tabs, timelines or documents.

Search

• Global search in the top bar finds records across modules by name, code or reference.
• In-grid search filters the current list only.
• Ask Nyumba Zetu (/rag, platform administrators) answers natural-language questions over your data.

Notifications and messages

• The bell shows system notifications — approvals waiting on you, job outcomes, failures.
• Mailbox and Chat hold operator-to-operator and operator-to-resident conversations.
• Delivery Tracker shows the outcome of every SMS and email the platform sent on your behalf.

Appearance

• Dark mode — toggle it from the user menu at the bottom of the sidebar. The choice is stored per browser, so it follows you between sessions on the same device.
• Branding — colours, logo and product name are set per organisation. Financial status colours (green paid, red arrears, orange due-soon, blue informational) are fixed for every tenant so numbers read the same way everywhere.
• Density and responsiveness — every screen works on a phone; wide tables scroll horizontally inside their own container rather than pushing the page sideways.

Staying current

The app polls for new releases while you have it open and shows an update banner when a newer version is available. Reload when you see it — long-lived tabs can otherwise hold stale code against a newer API.

When your session or the connection drops

Your session. You are signed in for twelve hours, and the app renews the session quietly in the background before it runs out — you should not be interrupted mid-task. If it does expire, you are told so plainly and signed back in where you left off, rather than being dropped onto an error.

The connection. If the platform stops responding, a strip appears at the bottom of the screen explaining that rather than leaving panels blank, with a Reload button. It waits a couple of seconds first, so a momentary blip does not flash a warning at you.

If a whole page cannot load, you are taken to a plain page with no sidebar or menu — every one of those links would fail the same way — and as soon as the platform answers again you are taken back to the page you were trying to reach.

Keyboard and productivity

• Esc closes drawers and dialogs.
• Grid navigation follows standard AG-Grid keys — arrows to move, Enter to open, Space to select.
• Most "add" flows accept Ctrl/Cmd + Enter to save.

Next