# Unit Map > Source: https://design.nanatec.co.ke/components/unit-map/ > A building as an interactive explorer — each floor a row of unit cards with the unit's number, its state, a small photograph and the faces of the people who live there. Hover for rent and lease, select for the side panel. > Status: beta > Since: v0.0.36 Not a floor-plan diagram: an information system with a human layer. Thin borders, strong numbers and restrained colour carry the structure; the photographs and avatars say which home is which and who lives there. ## Preview Hover a unit for its rent and lease. Select one for the side panel. ```html ``` ## The card ``` ┌──────────────────────────┐ │ thumbnail │ 16:9, lazy-loaded, one size on every card ├──────────────────────────┤ │ A-304 ▣ Occupied │ the number, and the state in words with an icon │ 2 Bed · 2 Bath │ rooms, or the kind of unit │ (JK)(MK)+1 John Kamau │ stacked avatars, then the tenant or the balance └──────────────────────────┘ ``` - **Avatars** show who lives there without opening the unit. Up to three faces overlap; past that the last becomes a count, `+2`. Without a photograph a tenant gets their initials. An empty unit shows a dashed seat. - **Thumbnails** are small on purpose: the larger picture is in the hover card and the panel. Once any unit has an `image`, every card makes room for one so a row keeps one height; `no-images` drops them all. - **States** never rely on colour alone — each has its own label and icon. ## States | Value | Reads as | Colour | |---|---|---| | `vacant` or `available` | Available | Neutral, with a dashed seat | | `occupied` | Occupied | The brand colour | | `reserved` | Reserved | Amber | | `maintenance` | Maintenance | Orange | | `arrears` or `overdue` | Overdue | Red | | `notice` | Notice given | Purple | These come from the `unit` set of [Status](/components/status/), so a `` elsewhere on the page uses the same words and colours. A unit on notice or overdue still counts as occupied: it has a tenant. ## Hover and select Hovering a card lifts it, brings the thumbnail slightly closer and spreads the avatars; after a moment a card opens beside it with the larger photograph, the kind of unit, every tenant, the rent and the lease. Keyboard focus opens the same card. Selecting a unit fires `nana-unit-select`. With `panel`, it also opens a side panel instead of sending the reader away: the photograph, the tenants with their roles, rent per month, the lease, any balance, and two actions that fire `nana-unit-action` with `view` or `lease`. Put your own buttons in the `panel-actions` slot to replace them. Escape or the close button fires `nana-panel-close`. ## Explorer `explorer` turns the map into a property explorer: a rail with the building's counts by state — each one a filter — and its floors to jump between, a search across units and tenants, and the panel on selection. On a narrow screen the rail folds away and the panel drops under the plan. ```html ``` ## Balances on the cards `detail="balance"` puts each unit's balance beside the avatars — owed in red, credit, or paid up. With a state picked in the legend, the rest fade back. ```html ``` ## Unit shape | Field | Meaning | |---|---| | `id` | Your key for the unit; comes back in every event | | `label` | The unit's number, as it is written on the door | | `floor` | `0` is the ground, negatives are basements | | `status` | A value from the table above | | `tenants` | Everyone on the lease, as `{ name, avatar?, role? }`; the first is the primary tenant | | `tenant`, `avatar` | A shorthand for a single tenant | | `image` | A photograph of the unit | | `bedrooms`, `bathrooms` | Shown as "2 Bed · 2 Bath"; `0` bedrooms is a studio | | `kind` | What the unit is when rooms do not say it — "Shop", "Office" | | `rent` | Monthly rent, in `currency` | | `leaseStart`, `leaseEnd` | ISO dates | | `balance` | Positive is owed, negative is credit | | `note` | Read out with the unit and shown in the panel | ## Keyboard The plan is one tab stop. Arrow keys move along a floor and up and down between floors; Home and End go to the ends of a floor, Page Up and Page Down to the top and bottom of the building. Enter or Space selects, and Escape closes the hover card, then the panel. ## A drawn floor plan For a building with dozens of units on a floor, a drawing of the floor itself — each apartment a shape you can click — places a unit faster than any grid. That needs the building's geometry, which this component does not have; pair it with your own SVG plan and drive the same `selected` and `highlight` from both. Photographs on this page are from [Pexels](https://www.pexels.com). ## Installation ```bash npm install @nana-tec/ui-components ``` Or copy the source in and own it: ```bash npx @nana-tec/ui add unit-map ``` ## Usage ```js import "@nana-tec/ui-components/unit-map"; ``` ```js const map = document.querySelector("nana-unit-map"); map.units = await api.units(buildingId); map.addEventListener("nana-unit-select", (e) => history.replaceState(null, "", `#${e.detail.unit.id}`)); map.addEventListener("nana-unit-action", (e) => { if (e.detail.action === "lease") openLease(e.detail.unit.id); }); ``` ## API ## Storybook See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-unit-map--docs