Templates

Margin ​

A standalone original job economics template. Responsive, local interactive states and Motion. Fictitious data; no external accounts connected.

margin.JOB ECONOMICS
WORK ORDER / SAMPLE 2048

Where did the margin go?

Climate system replacement · Sample property · Completed

Estimate vs actual

▧ Estimate ● Actual ▧ Over estimate

Labor$700 → $1020
Materials$800 → $980
Specialist$350 → $350
Permits$190 → $190
Reserve$160 → $160
Transport$100 → $100
Total cost$2300 → $2800

What happened

  1. Oct 2QuotedTarget 32%
  2. Oct 5Discount approvedSample concession
  3. Oct 8Installed12h vs 8h planned
  4. Oct 11CallbackFollow-up visit
  5. Oct 14InvoicedReady for review

Result

Contract target 32%

20.0%
Revenue
$3,500
Actual cost
$2800
Gross profit
$700

Profit bridge

Labor overrun−$320
Materials overrun−$180

Template guide ​

  • Use the standalone page as a Vue3 layout or adapt its scoped .lab tokens to your app. Existing motion handles entrance states and reduced-motion cleanup.
  • Light/dark, narrow layouts and Loading/Empty/Ready can be tested from the header.
  • Actions update this example session only. Add your own persistence, source validation and authorization before production use. No API, secret handling, telemetry or financial execution is bundled.
  • Original code and fictitious data. Pattern credit: Nizam. No source images, brands or code copied.