HFHourFlowDemo

Demo explorer

A single map of the whole app — 17 screens across staff and portal, what each one does, and the buttons that live on it. Sign in below, then open any page to investigate it. Bookmark/demo to come back here.

Blank slate. The platform has no business data yet — every page below opens to an empty state. Start at Customers to add your first customer and contract, then log some time. To load rich sample data instead, run npm run db:seed.

Sign in to explore

No demo accounts exist yet. Seed demo data with npm run db:seed, or sign in on the login screen.

Demo accounts

RoleEmailPassword
Adminadmin@hourflow.localadmin123!
Managermanager@hourflow.localmanager123!
Techniciantech1@hourflow.local / tech2@hourflow.localtech123!
Customer portalportal@acme.exampleportal123!

Global controls

  • Global search
    Press Ctrl / ⌘ + K anywhere in the staff app to search customers, tickets, time entries and invoices.
  • Timer chip
    The running-timer pill in the top bar ticks live and links back to the Time page.
  • Notifications bell
    Top-bar bell shows the unread count; the sidebar item badges it too.
  • Sign out
    Top-right on every page — returns you here-ish (the login screen).

Overview

Where the whole operation is summarised.

Dashboard

/dashboard

Hours today/week/month, retainer capacity meters, hour-bank balances, overage, technician utilization, revenue and hours charts, latest alerts, active timers.

Buttons & actions
  • Open a customer from a capacity row
  • ‘View all’ jumps to Notifications
  • Charts show tooltips on hover
AdminManagerTechnician

Forecast

/forecast

Burn-rate projections: when each retainer or hour bank runs out, and which customers are on track to blow through their contract within 30 days.

Buttons & actions
  • Click a customer name to open their profile
AdminManager

Work

Logging and approving service time.

Time

/time

Your own time: run the live timer or log time by hand, then submit entries for approval.

Buttons & actions
  • Start / Pause / Resume / Stop the timer
  • ‘Log time’ opens the manual-entry modal
  • Submit, edit or delete a draft entry
AdminManagerTechnician

Approvals

/time/approvals

The manager queue of submitted entries. Approving runs the allocation engine (bank → retainer → overage/hourly).

Buttons & actions
  • Approve an entry
  • Reject with a required reason
AdminManager

Tickets

/tickets

Service tickets per customer, with logged-time totals.

Buttons & actions
  • Filter by status/customer
  • Change status or assignee inline
  • ‘New ticket’ modal
AdminManagerTechnician

Clients

Customers, contracts and prepaid hour banks.

Customers

/customers

Every customer with this month’s capacity meter and bank balances.

Buttons & actions
  • ‘New customer’ (Manager+)
  • Toggle archived customers
  • Open a customer profile
AdminManagerTechnician

Customer profile

/customers

Tabbed detail: overview, contract, hour banks, and billing settings for one customer.

Buttons & actions
  • Edit profile / archive (Manager+)
  • Create or edit the contract
  • Toggle the hour-bank module, purchase a bank
  • Change the rounding rule
AdminManagerTechnician

Money

Invoicing, payments and reporting.

Billing

/billing

Invoice list plus uninvoiced hour-bank purchases.

Buttons & actions
  • ‘Generate monthly invoices’ (per customer or all — idempotent)
  • ‘Create invoice’ for a bank purchase
  • ‘Export CSV’
  • Filter by status
AdminManager

Invoice detail

/billing

The printable invoice document and its actions.

Buttons & actions
  • Mark as sent
  • Record a payment
  • Void the invoice
  • Print / save as PDF
AdminManager

Reports

/reports

Ticket resolution summary — how long each ticket took (or is taking) to solve, with averages.

Buttons & actions
  • ‘Export CSV’
AdminManager

System

Alerts, audit trail and configuration.

Notifications

/notifications

Capacity, hour-bank, expiry and renewal alerts.

Buttons & actions
  • ‘Run checks now’ evaluates every rule
  • Mark one / all read
AdminManagerTechnician

Audit log

/audit

Every mutation — who, what, when — with entity and text filters.

Buttons & actions
  • Filter by entity
  • Filter by action/summary text
Admin

Settings

/settings

System defaults: VAT rate, internal cost rate, default rounding rule.

Buttons & actions
  • Save changes
Admin

Customer portal

The read-only view your customers get. Sign in as the portal account to explore.

Portal overview

/portal

The customer’s balances, monthly allowance meter and recent work.

Buttons & actions
  • Read-only
Customer

Portal time history

/portal/time

Approved and billed work, filterable by month.

Buttons & actions
  • Filter by month via the URL (?month=YYYY-MM)
Customer

Portal invoices

/portal/invoices

The customer’s own invoices and payment status.

Buttons & actions
  • Open an invoice
Customer

Portal invoice

/portal/invoices

A single printable invoice, scoped to the signed-in customer.

Buttons & actions
  • Print / save as PDF
Customer

Design system

The building blocks every page is assembled from.

Buttons

Status badges

graybluegreenamberredviolet
RUNNINGSUBMITTEDAPPROVEDBILLEDREJECTED

Form controls

Capacity meter

Healthy — 45% used
Near limit — 90% used
Overage — hazard stripes

Stat tiles

Hours this month
128h
Overage
5h
billable

Empty state

Nothing here yet

This is how empty tables and lists read.