Diamond Stone: the Money area at a desk
Date: 2026-11-12. Revision 1. Drawn in docs/ui-shell-mockup.html under "Money: at a
desk".
The staff app is phone only, with one exception decided on 12 November 2026: the Money area has a desk layout. The owner also said the whole system is to be built, not a reduced first release, so this is planned in full now.
This document says who gets the desk layout, how the shell changes, each screen, the
new components it needs, the keyboard, and the safeguards. It adds to
docs/ACCOUNTS.md (what is posted and reported) and docs/ROLES.md section 4 (the
accountant); it does not change the accounting.
Not researched online. This is designed from the accountant's tasks as the plan lists them and from common practice in accounting software. It should be shown to the company's accountant before it is built.
1. Why, and the rule
The review walked each role through a working day. Every role could work on a phone
except one. The accountant imports bank statements, matches hundreds of lines, enters
journals of many lines, compares periods, exports schedules, and files returns on the
tax and bank portals, which are themselves desk websites. docs/ROLES.md already
said the accountant "works at a desk for long stretches, with documents".
The rule.
| Phone | Still the staff app's home. Everything can be read on a phone, and every approval, photograph and daily check is done there |
| Desk | The Money area, and only it, has a layout made for a wide screen, a keyboard and a mouse |
| The other areas at a desk | Open as the phone layout in a centred column. They work; they are not redesigned |
| Nothing is desk-only except | Importing a file, and exporting one |
2. Who
| Role | At a desk |
|---|---|
| Accountant | The whole Money area |
| Owner | The same, plus approvals and release; in practice mostly reports |
| Auditor | Read only: ledger, entries, sources, the audit pack |
| Administrator | Periods and settings for Money, no figures beyond their rights |
| Everyone else | No Money desk. Rights are the same as on the phone: the desk shows nothing a phone would not |
3. Screens it is made for
| Smallest | 1,024 px wide. Below that, the phone layout |
| Designed at | 1,280 and 1,440 px, a laptop and a monitor |
| Wider | The content stops growing at 1,600 px and centres |
| Zoom | Usable at 200 % browser zoom |
| Input | Keyboard first; mouse; touch still works |
| Offline | No. The desk layout needs a connection |
4. The shell at a desk
The same three ideas as on the phone, laid out for width. Nothing new is invented.
| Phone | Desk |
|---|---|
| Halo, a band of rings at the very top | The same band, the same rings, across the top. It still pulls open: a click opens a ring's work below it |
| Omnibar, a capsule at the bottom | A command field in the top band. Type to search, add, or go anywhere. Opens with Ctrl K. The screen's main action sits at the right of the band, where the capsule's action was |
| One column | Three panes: a list, the item being worked on, and its source (the bill's photograph, the bank line, the document) |
| Bottom sheets | Side panels from the right |
| The areas, behind the Omnibar | A rail down the left with Money's sections |
The rail's sections: Today · Bank · Sales (invoices, receipts, owed to us) · Purchases (bills, payments, owed by us) · Journal · Ledger · Stock value · Assets · VAT · Close · Reports · Audit · Settings.
Glass: the top band only. Tables and panes are solid, for contrast and speed.
Type: Rajdhani, as everywhere. Body 14 px, table rows 36 px, figures in aligned (tabular) numerals, amounts right-aligned, negatives with a minus and never by colour alone.
5. Each screen at a desk
| Screen | Left | Middle | Right | Main action |
|---|---|---|---|---|
| Today | The queue: bank lines, bills, invoices to send, receipts to apply, payments to prepare | Cash by account; due this week as a calendar; the six agreement lights | Close: the twelve steps; dates coming | Start the queue |
| Bank: import | Accounts with "matched to" dates | Drop a statement file. Columns are recognised and shown for checking: date, text, in, out, balance. Duplicates and gaps are flagged before anything is saved | The closing balance against the statement's | Import |
| Bank: match | Bank lines, unmatched first, many selectable at once | For the selected line: the best match, the next best, or split across several | The matched item's source | Match and next (Enter) |
| Bank: rules | Rules: "text contains…" to an account or a party | A rule and what it would have matched last month | Save | |
| Bills | Bills waiting | What was read from the photograph, as fields, with the order and the receipt it ties to | The photograph, zoomable | Post and next |
| Invoices | Delivered and not invoiced first; then all, by state | The invoice | The order and delivery proof | Send |
| Receipts | Receipts to apply | The amount, spread across the customer's open invoices, in the customer's currency, with any short amount proposed | The bank line and the customer's slip | Apply |
| Owed to us / by us | Parties, by age, in a table with columns for each age band | A party's statement | Messages sent; promises | Remind; prepare payment |
| Payment run | Bills due, selectable | The run: total, by bank account, balance after | Each bill's source | Send to the owner |
| Journal | Drafts; repeating entries | A grid of lines: account, description, debit, credit, tax, party. Totals and the difference stay in view | The attached document | Post, or send to approve |
| Ledger | The chart of accounts as a tree with balances | An account's movements, with a running balance | The entry, then its source record | Trace |
| Stock value; landed cost | Lots | A shipment's costs spread over its lots | The bills that make up the cost | Apply |
| VAT | Periods | The return, box by box; each box opens to the lines behind it | Exceptions; export evidence held or missing | Build the pack |
| Close | The twelve steps with counts | The step's items | Notes | Clear the step; close the month |
| Periods | Months as a grid: open, closed, locked | Who closed and when | Close; ask to reopen | |
| Reports | Reports by purpose | The report, with columns to compare periods or a budget; any figure opens to its lines | Export; print | |
| Audit | The pack's schedules; the auditor's requests | The schedule or the request | The evidence attached | Build; answer |
| Opening balances; import | What is loaded and what is missing | The file's rows, checked, with errors beside the row | Totals against the old system's | Load |
The screens not listed (cheques, petty cash, fixed assets, leases and loans, currencies, e-invoicing, payroll posting) follow the same three panes.
6. What stays on the phone
| Task | Why |
|---|---|
| Photographing a bill or a receipt | The camera is there |
| Checking a customer's payment slip | Arrives as a message |
| Approving a journal, a credit note, a payment run | The approver is rarely at a desk |
| Releasing payments | The owner, with a passkey |
| The day's figures | A glance |
And what a phone does more slowly but still does: matching a bank line, posting a bill, applying a receipt, one at a time.
7. New components
docs/COMPONENTS.md lists 96. The desk layout needs these more. The first four were
already missing for phone screens that use them.
| # | Component | Parts and behaviour |
|---|---|---|
| 97 | Table | First column pinned; sort; filter per column; choose columns; select rows; a totals row; inline edit where allowed; keyboard movement; export of what is shown; an empty and a loading state. On a phone it becomes a list of rows |
| 98 | Tree | The chart of accounts; open and close; balances roll up |
| 99 | Calendar and period grid | Days, or months as cells with a state |
| 100 | Board | Columns of cards (used by the sales pipeline; listed here because it was missing) |
| 101 | Split panes | Two or three, resizable, each scrolling alone; the divider is remembered |
| 102 | Document viewer | An image or PDF: zoom, rotate, page; the field being typed is outlined on the image where known |
| 103 | Rail | Sections with counts; collapses to icons |
| 104 | Command field | The Omnibar at a desk: search, add, go; recent items; shortcuts shown beside each result |
| 105 | Bulk bar | Appears when rows are selected: how many, the total, the actions |
| 106 | File drop | Drop or choose; type and size checked; scanned for viruses before it is read |
| 107 | Column mapper | A file's columns against ours, with a preview |
| 108 | Entry grid | Lines of debit and credit; an account picker that searches by number or name; an amount field that accepts a sum; the difference always visible |
| 109 | Date range | Presets (this month, last quarter, the financial year) and free dates |
| 110 | Side panel | The desk form of a bottom sheet |
| 111 | Print view | A page laid out for paper, for any table or report |
| 112 | Shortcut sheet | Every key, opened with ? |
8. Keyboard
Nothing needs a mouse.
| Key | Does |
|---|---|
| Ctrl K | The command field |
| ? | Shortcuts |
| ↑ ↓, or J K | Move in a list |
| Enter | The main action, then the next item |
| Space | Select a row |
| Tab | Next field; next pane with F6 |
| Ctrl Z | Undo the last reversible action |
| Esc | Close a panel; clear a selection |
| N | New, of whatever the list holds |
| / | Filter the list |
Focus is always visible. Order follows reading order, mirrored in Arabic.
9. Safeguards
The desk changes where work is done, not what is allowed.
| Safeguard | Detail |
|---|---|
| Same rights | The server decides; the desk shows nothing the phone would not |
| Preparer is not approver | Unchanged. Approval and release stay on the approver's phone |
| Signing in | By passkey on the computer, or by scanning a code with the phone that is already signed in. No password |
| Session | Ends after 15 minutes idle; a shared computer is assumed. "Confirm it is you" again before posting to a closed period, changing bank details, or exporting |
| Exports | Every export and print is recorded: who, what, when |
| Imports | Checked and shown before saving; an import can be undone as a whole until any line is matched |
| Periods | A closed month cannot be posted to; reopening needs the owner |
| Screen privacy | A key hides all amounts at once |
| Audit trail | Every change, as on the phone |
10. Bank statements
The largest unknown. The plan has no format.
| To settle | |
|---|---|
| Which banks | The company's accounts, to be listed |
| Formats | Whatever those banks export: usually a spreadsheet or CSV; some offer a standard format (MT940, CAMT.053). Ask each bank first |
| Per account | A saved column mapping, date format, sign convention and currency |
| Duplicates | A line is the same if account, date, amount, text and running balance agree |
| Gaps | The opening balance of a file must equal the last closing balance held |
| A direct feed | Later, if a bank offers one |
11. Other things the desk needs
- Arabic: mirrored: rail on the right, amounts still aligned to the trailing edge.
- Dark and light: as the app.
- Motion:
docs/MOTION.md, with less of it: panels slide, rows do not animate, no spring on a table. - Printing: reports and statements print from the print view; issued papers are still made by the document maker.
- Speed: a table of 5,000 rows scrolls smoothly; only the rows in view are drawn.
- Tested at 1,024, 1,280 and 1,440 px, in both languages, with keyboard only, and with a screen reader on the table and the entry grid.
12. How it is built
One app, not two. The Money routes choose the desk layout when the window is wide enough; the same records, the same server, the same rules. The phone and desk forms of a screen share their logic and differ only in layout. The sixteen components above join the shared set.
13. Decisions
- Which roles get the desk layout: accountant, owner, auditor (proposed).
- Whether any other area should follow later. Candidates: reports for the owner; the catalogue and the website editor for marketing. Not proposed now.
- The banks and their formats.
- Session length at a desk (15 minutes proposed).
- The accountant's review of section 5 before building.
14. In the build
The owner intends to build the whole system. docs/REVIEW.md section 9 ("the smallest
release worth having") is therefore read as the order of work, not a cut: the
ledger, this desk layout and the rest of Money are in scope. Until Money is live, the
books stay in the present accounting system and the app hands over an export.