Copy pack
Build from the verified source Master Prompt and Build Contract for this starter. Keep edits inside the verified scope, then customize the brand and workflow.
Master Prompt Build Contract
Master Prompt
# Master Build Prompt: InvoiceDesk Tracker
Build InvoiceDesk Tracker as a real-feeling internal dashboard for a small finance team. The first version helps the team review incoming invoices, see vendor and amount details, track due dates, update approval status, write notes, watch the overdue queue, and prepare a monthly CSV export. It is not a payment product and not an accounting system.
Builder target:
- Use Lovable or a similar visual app builder.
- Build a polished static/demo version first, with realistic placeholder invoice data clearly treated as demo content.
- Keep the product small enough that a founder can paste this prompt and get a coherent starter dashboard in one pass.
Required facts to preserve:
- Internal dashboard for a small finance team.
- Invoice intake list with vendor, amount, due date, status, owner, and notes indicator.
- Statuses include Pending, Needs info, Approved, Overdue, and Exported.
- A selected invoice detail drawer shows invoice ID, vendor, amount, due date, status, notes, attachment placeholder, and last updated metadata.
- The dashboard includes an overdue queue and a monthly CSV export action.
- The app uses demo data only unless the builder adds a backend later.
Visual direction:
- Design it like a quiet operational finance workspace, not a SaaS marketing page.
- Use a dense but calm full-width layout: left navigation, compact top controls, invoice queue table as the main work area, and a right-side invoice detail drawer that slides in only after a row is selected.
- Use restrained 6-8px radii, thin grid lines, clear focus states, and table spacing that makes repeated review easy.
- Avoid oversized hero copy, decorative gradients, fake KPI cards, stock imagery, and celebratory finance language.
- The signature detail should feel like a ledger: selected rows and status chips should make the invoice state obvious without shouting.
UI style and color tokens:
- Ledger green: #193D2F for navigation, headings, selected rows, and primary actions.
- Workbench background: #ECEFE7 for the app background.
- Paper surface: #F8FAF5 for panels, table surfaces, and detail cards.
- Grid line: #CBD4C4 for table separators and panel borders.
- Approved: #24603B for approved status.
- Pending: #725F1A for pending status.
- Needs info: #255B85 for information-request status.
- Overdue or error: #9D3C2F for overdue rows and validation errors.
Typography and layout:
- Use a clean sans-serif for body and controls.
- Use compact labels, tabular numbers for amounts, and sentence-case UI copy.
- Use uppercase micro-labels only for data labels such as STATUS, DUE DATE, OWNER, and EXPORT MONTH.
- Desktop layout: left rail plus full-width invoice queue; the selected invoice detail appears as an off-canvas drawer from the right, not as a permanently fixed column.
- Mobile layout: filters above the list, invoice rows as compact cards, and the selected invoice detail opens as a full-width drawer or sheet with the same close control.
- Avoid fixed-width page wrappers for the main preview; let the workspace use the available browser width while keeping readable spacing.
Interaction and motion:
- Invoice rows should show a subtle hover lift or background change so they feel selectable.
- Clicking an invoice row opens the detail drawer from the right.
- The detail drawer must have a visible close button at the top.
- Use transform and opacity transitions for the drawer, around 240-320ms, with a crisp ease-out or drawer-style curve such as cubic-bezier(0.32, 0.72, 0, 1).
- Add subtle active press feedback to buttons, such as scale(0.98), without making the finance dashboard feel playful.
- Avoid transition-all, slow ease-in entrances, bouncing motion, or decorative animation loops.
Required screens and components:
- App shell with left navigation for Inbox, Overdue, Approved, and Exports.
- Top bar with search, status filter, current month selector, and Prepare export button.
- Invoice queue table with vendor, invoice ID, amount, due date, owner, status, and notes indicator.
- Selected invoice detail drawer with status controls, note editor, attachment placeholder, close button, and last updated line.
- Overdue queue state that highlights invoices past due and invoices blocked by missing info.
- Monthly export panel or feedback state showing how many invoices are included in the CSV.
Required interactions:
- Filter invoices by All, Pending, Needs info, Approved, and Overdue.
- Search by vendor name or invoice ID.
- Select an invoice row and slide in the detail drawer.
- Close the detail drawer and return focus to the invoice queue.
- Approve invoice changes the selected invoice status to Approved and shows a small saved-state confirmation.
- Request info changes the selected invoice status to Needs info and adds a visible note cue.
- Save note keeps the note visible on the selected invoice.
- Prepare export shows Export ready for the current month with a success state and a clear no-real-download/demo-data label.
Required states:
- Default invoice list with mixed statuses.
- Empty filtered list with direct copy explaining no invoices match that view.
- Loading or saving state for status updates and note saving.
- Saved note confirmation.
- Export ready state.
- Export error state for demo failure or missing month.
- Permission-denied placeholder for actions a viewer role cannot perform, without building full auth.
Data model for the demo:
- invoiceId
- vendor
- amount
- dueDate
- status
- owner
- note
- attachmentName
- updatedAt
Non-goals:
- No payments, payment processing, Stripe, checkout, or payout flow.
- No bank sync.
- No accounting integration.
- No real compliance claims.
- No fabricated revenue, savings, productivity, or automation metrics.
- No public marketing site, pricing page, testimonials, or lead magnet.
Acceptance criteria:
- A finance teammate can open the dashboard, find an invoice, click the row to open the sliding detail drawer, review its details, update status, save a note, close the drawer, and prepare the monthly export.
- The visual style feels like an internal finance tool with a ledger-inspired palette and compact table-first layout.
- All visible controls that look clickable should respond with a state change in the demo.
- Every status has a clear color and text label.
- The page clearly avoids payment and accounting-system scope. 