Copy pack
Build from the verified source Master Prompt and Build Contract for this approval starter. Customize the roles and claim fields after the core workflow is preserved.
Master Prompt Build Contract
Master Prompt
# Master Build Prompt: ClaimFlow Approvals
Build ClaimFlow Approvals as a real-feeling internal web app where managers approve damaged inventory claims. The first version helps employees submit claims with proof, managers review a queue and make approve/reject/request-info decisions, finance prepares a monthly export, and every important action appears in an audit log. It is an internal workflow product, not a public landing page, analytics dashboard, marketplace, payment system, or accounting tool.
Builder target:
- Use Lovable or a similar visual app builder.
- Build a polished static/demo version first, with realistic placeholder claim data clearly treated as demo content.
- Keep the app small enough that the prompt can produce a coherent starter workflow in one pass.
Required facts to preserve:
- Employees submit a claim with item, quantity, reason, and photo/receipt attachment.
- Managers see a queue and open a claim detail page.
- Managers can approve or reject with a required reason.
- Claims move through Pending, Approved, Rejected, and Needs Info states.
- Finance can export a monthly report.
- Every action is recorded in an audit log.
- Different roles see different things.
Visual direction:
- Design it like a quiet operations approval desk: a full-width work queue, precise status labels, and a claim detail drawer that appears only when needed.
- Use the available browser width for the workflow preview. Do not place the whole product inside a fixed-width card.
- The queue should be the main working area, with an icon-led collapsible left rail for role and status controls and a slide-in claim detail drawer on the right.
- Avoid oversized hero copy, decorative gradients, fake operational metrics, public marketing sections, or celebratory approval language.
- The signature detail should feel like a stamped case file: selected rows, status chips, decision reason, and audit entries make the workflow state obvious.
UI style and color tokens:
- Case navy: #1B2A4A for navigation, selected rows, headings, and primary actions.
- Workbench background: #F4F1E8 for the app background.
- Paper surface: #FFFDF8 for cards, tables, and drawer surfaces.
- Rule line: #D8D3C6 for borders and table separators.
- Review amber: #C56A2D for active status filters and work-in-progress accents.
- Approved: #1F6B46 for approved status and approve action.
- Needs info: #255B85 for request-info status and action.
- Rejected/error: #A33A2B for rejected status and validation errors.
Typography and layout:
- Use a clean sans-serif with compact labels, tabular-looking quantities, and sentence-case UI copy.
- Use uppercase micro-labels only for operational labels such as ROLE, STATUS, CLAIM DETAIL, DECISION REASON, and AUDIT LOG.
- Desktop layout: full-width app shell with a left role/status rail that can collapse from label-and-icon mode into icon-only mode, central claim queue table, and off-canvas claim detail drawer from the right.
- Mobile layout: role/status filters above the claim list; detail opens as a full-width drawer or sheet with the same close control.
Required screens and components:
- App shell with an icon-led collapsible rail, a visible collapse/expand control, and role switcher icons for Manager queue, Employee view, and Finance view.
- Manager queue view: full claim queue, status/search controls, selected claim drawer, approve/reject/request-info controls, required decision reason, and audit log.
- Employee view: only the signed-in employee's submitted claims, proof/status tracking, proof update affordance, and no approve/reject/request-info manager controls.
- Finance view: finalized approved/rejected claims, monthly export readiness, export action, and no manager decision controls.
- Status filters for All, Pending, Needs info, Approved, and Rejected, each with a recognizable status icon and count.
- Search by claim ID, employee, department, item, or assigned manager.
- Claim queue table with employee, claim ID, department, item, attachment indicator, quantity, and status; use small employee, item, proof, and status icons so this does not look like a generic table.
- Slide-in claim detail drawer with claim ID, employee, department, item, quantity, submitted date, manager, reason, attachment placeholder, current status, decision reason field, info-request note field, approve/reject/request-info actions, close button, and audit log.
- Finance export panel that shows whether the monthly report is ready.
Required interactions:
- The left rail collapses and expands; in collapsed mode, role and status controls remain clickable through icon-only buttons with accessible labels or tooltips.
- Switching role views changes the active work area, not only the label: Manager shows the decision queue, Employee shows submitted-claim/proof tracking, and Finance shows finalized claims plus export status.
- Filtering by status updates the queue.
- Searching updates the queue.
- Clicking a claim row slides in the claim detail drawer from the right.
- The drawer has a visible close button that returns focus to the wide queue.
- Approve claim changes the selected claim status to Approved and adds an audit entry.
- Reject claim requires a decision reason before submission; if blank, show a clear validation error.
- Request info changes the selected claim status to Needs Info and adds an audit entry with the note or a default note.
- Prepare export shows an Export ready state and switches attention to the finance export context.
Interaction and motion:
- Claim rows should show a subtle hover lift or background change so they feel selectable.
- 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 workflow feel playful.
- Avoid transition-all, bouncing motion, slow ease-in entrances, or decorative animation loops.
Required states:
- Default manager queue with mixed claim statuses.
- Left rail expanded and collapsed states.
- Manager, Employee, and Finance role views with visibly different work areas and permission boundaries.
- Empty filtered/search result with direct copy explaining no claims match.
- Drawer closed and drawer open states.
- Reject validation error when no reason is provided.
- Approved, Rejected, and Needs Info state updates.
- Audit entry added after each decision.
- Export ready state.
- Permission-denied placeholder for a role trying to perform an action outside its view, without building full auth.
Data model for the demo:
- claimId
- employee
- department
- item
- quantity
- reason
- attachmentName
- manager
- status
- submittedAt
- auditEntries
Non-goals:
- No public landing page.
- No marketplace.
- No analytics dashboard or fake operational metrics.
- No payment flow, checkout, Stripe, payouts, accounting integration, or bank sync.
- No full procurement, inventory ERP, or compliance/legal review system.
Acceptance criteria:
- The app has a collapsible icon-led left rail, and users can still switch Manager queue, Employee view, Finance view, and status filters when the rail is collapsed.
- Switching Manager, Employee, and Finance changes the visible workspace, row scope, drawer actions, and role-specific helper surface.
- A manager can open the queue, filter/search claims, open a claim drawer, approve a claim, reject only after adding a reason, request more info, and see audit entries update.
- An employee can see only their submitted claims, track proof/status, and update proof without seeing manager decision controls.
- Finance can see finalized approved/rejected claims and export readiness without seeing manager decision controls.
- Finance can prepare a monthly export state without payment or accounting scope.
- Role boundaries are visible even though the demo does not implement full authentication.
- The preview uses full workspace width and keeps the detail drawer off-canvas until a row is selected.
- The page clearly avoids public marketing, payment, accounting, and fake metrics scope. 