new-project-89677014

byWaqas Elijah “Elijah” Kazim

Build a high-fidelity interactive UI screen for Pulse Budget, an AI-powered property budgeting SaaS for managing agents, surveyors, land managers, FM teams and service charge teams. This screen is the Annual Budget Review Workspace and must follow the locked Pulse Budget product behaviour. Product context Pulse Budget helps property teams build, reconcile, explain, approve and defend annual or tender budgets using AI. This is not a generic finance dashboard. It is a reconciliation-first, line-item-faithful, AI-assisted budget review workspace. The central object is the Budget Line Item. Every line item is a case file containing: * original source identity * previous budget * spend to date * committed/accrued spend * forecast year-end * gap * gap explanation * AI forecast * manager proposed value * approved value * AI assumption * manager assumption * spend documents * future evidence * comments * reviewer questions * approval status * audit history Core UI behaviour: Adaptive Progressive Workspace Do not build static equal columns. The layout must progressively shift based on user focus. State 1 — Budget overview Show: * compact left navigation * expanded budget outline * wide reconciliation budget table * right workspace closed or minimal State 2 — Category selected When a category is selected: * budget outline shrinks * budget table expands * table filters to the selected category * right workspace stays closed or preview-only State 3 — Line selected When a line item is selected: * budget outline collapses into a narrow icon/context rail * budget table compresses into a narrow context strip * table shows only essential context columns, such as Line Item, Gap, Manager Proposed, Status * right-side line workspace expands and becomes dominant State 4 — Full line workspace / Spend / Evidence / Comments / History When the user opens Spend, Evidence, Comments, History, or full line workspace: * outline collapses further or disappears * table remains only as a narrow context rail * line workspace becomes the main working area * all content must reflow inside its container * no horizontal overflow * no clipped values * no broken cards * no modal-heavy workflow Overall screen layout Use a premium iOS-style SaaS interface: * calm high-class SaaS feel * crisp typography * soft off-white background * white panels * thin dividers * subtle shadows * compact cards only * no huge dashboard cards * no noisy colours * no clutter * no generic enterprise finance dashboard look * colour only for operational meaning Colour rules: * blue = active / AI suggestion / selected state * green = accepted / healthy / approved * amber = needs review / warning * red = missing / risk / critical * grey = inactive / historical / neutral Top structure Include: * compact app logo/icon * property selector: “Highfield Residential” * budget year: “2025/26” * version: “Version 2” * status: “In Review” * global search * notification/help/avatar icons Below that, show the Annual Budget Review pipeline: Import → Reconcile → Analyse → Assumptions → Forecast → Review → Scenarios → Approval → Export The active stage should be Reconcile. Use a small status strip, not huge cards: * Proposed Budget: £6,839,450 * Total Gap: +£329,870 * Lines Needing Review: 27 * Missing Evidence: 6 * View review queue button Main adaptive workspace Left rail Use a compact app navigation rail with icons only. Budget outline / context rail In overview state, show a budget outline: * Total Budget * 1. Building Running Costs * 1.1 Utilities * 1.1.1 Electricity * 1.1.2 Gas * 1.1.3 Water & Sewage * 1.1.4 Waste Services * 1.2 Cleaning * 1.3 Security * 1.4 Lift Maintenance * 1.5 Fire Safety When line focus is active, collapse this into a narrow vertical icon/context rail. Central table In overview or category state, show a wider reconciliation table with: * Line Item * Previous Budget * Spend to Date * Forecast Year-End * Gap * AI Forecast * Manager Proposed * Approved * Status When a line is selected, compress the table into a context strip showing only: * Line Item * Gap * Manager Proposed * Status Selected line: 1.1.1 Electricity Use these sample rows: 1.1.1 Electricity Gap: +£18,750 Manager Proposed: £135,450 Status: Needs review 1.1.2 Gas Gap: +£6,200 Manager Proposed: £98,500 Status: Missing evidence 1.1.3 Water & Sewage Gap: +£1,500 Manager Proposed: £122,300 Status: In progress 1.1.4 Waste Services Gap: -£1,100 Manager Proposed: £86,900 Status: In progress 1.2 Cleaning Gap: +£5,200 Manager Proposed: £620,300 Status: In progress 1.3 Security Gap: +£62,600 Manager Proposed: £812,400 Status: Needs review Dominant right line workspace When 1.1.1 Electricity is selected, the right workspace becomes dominant. Header: * 1.1.1 Electricity * Status: Needs review * Imported from Utilities.xlsx * Tab: Running Costs * Row: 14 Line-level micro-pipeline: Identity → Spend Reconciliation → Gap Explanation → Assumption → Evidence → Discussion → Decision → Audit The active micro-stage should be Spend Reconciliation. Workspace tabs Use these tabs: Review | Spend | Evidence | Comments | History The active tab should be Spend. Spend tab content The Spend tab must clearly distinguish spend reconciliation from future evidence. Reconciliation Summary Show a compact summary row: * Previous Budget: £120,000 * Spend to Date: £48,320 * Committed / Accrued: £12,500 * Forecast Year-End: £138,750 * Gap: +£18,750 / +15.6% * Gap Type: Contractual increase Spend Evidence table This is where the invoices, statements, actuals and accruals that make up the spend are shown. Columns: * Date * Supplier * Document * Period * Amount * Status * Linked Rows: 30 Apr 2025 | EDF Energy | Invoice 10482 | Apr 2025 | £12,430 | Posted | Yes 31 Mar 2025 | EDF Energy | Invoice 10391 | Mar 2025 | £11,980 | Posted | Yes 28 Feb 2025 | EDF Energy | Invoice 10277 | Feb 2025 | £13,110 | Posted | Yes 31 Jan 2025 | EDF Energy | Statement | Jan 2025 | £10,800 | Posted | Yes Pending | Broker renewal | Quote expected | 2025/26 | — | Missing | No Add buttons: * Upload Document * Link Spend Document * Open Full Workspace * Continue to Gap Explanation AI Reconciliation Check Add a calm AI insight panel: “Spend to date is £48,320 across 4 linked documents. Forecast year-end of £138,750 appears to rely on current spend plus expected tariff uplift. Broker renewal quote is missing, so data quality is Low.” Also include an explanatory note: “Spend = actual invoices/statements and accruals. Evidence = contracts, quotes and future support for next-year assumption.” Evidence tab behaviour Evidence is separate from Spend. Evidence should contain: * supplier contract * broker renewal quote * supplier uplift letter * specification * future pricing evidence * client instruction * documents supporting next-year assumption Do not mix future evidence into the Spend table unless it is being used as committed/accrued spend. UX quality requirements * No huge cards * No noisy dashboard styling * No modals for line review * Use inline editing where relevant * Use smooth transitions between focus states * Use iOS-style motion and easing * The workspace must feel fluid and adaptive * All sections must render inside their containers correctly * No horizontal overflow * No clipped text * No broken table width * No oversized charts * No unnecessary graphs * Keep financial precision and property-sector seriousness Final visual feel The final UI should feel like: premium spreadsheet intelligence * line-level case file * AI reconciliation assistant * approval workflow It should not feel like: generic finance dashboard * oversized SaaS cards * modal-heavy admin tool * AI chatbot gimmick Build this as a high-resolution, polished, production-quality interface.