03 / Vue + TypeScript + Laravel

A quote worth
trusting.

Explore a service catalog, request a quote, review it, and turn it into a synthetic order. Trace every decision through the workflow.

Build it step by step with Chason Arthur ↗

Loading the portal. If it does not open, reload with JavaScript enabled or read the tutorial and source below.

Computer tutorial script and chapter outline

Chapter: {{ currentChapter.title }} {{ currentChapter.objective }} Navigation only; workflow state is unchanged.

Temporary recording scene. Your first original synthetic session is held only in this tab’s memory. Saved table, category and appearance preferences are unchanged. Restore below; reloading discards both sessions.

SYNTHETIC ACCOUNT {{ dealer.id }} · {{ dealer.name }} · {{ dealer.region }} territory

01Catalog
02Quote
03Review
04Synthetic order

Simulated role preview

01 / Select

Service catalog

Your quote

Your cart is empty. Select a catalog item and set its quantity to begin.

{{ line.name }}{{ line.sku }} × {{ line.quantity }}
{{ money(line.total) }}

Estimated subtotal{{ money(cartTotal) }}

USD, synthetic prices. No shipping, tax, payment or fulfillment. The Laravel API re-prices from its own catalog.

Switch to Buyer preview to request a quote.

{{ quote.id }}{{ quote.status }}

Quoted subtotal {{ money(quote.subtotalCents) }}. Valid for 24 hours in this fixture.

Reviewer approval is the next step.

Fail the next conversion before commit

Try a recovery scenario: stock and quote stay intact, then retry the same request.

Switch to Buyer preview to convert.

Synthetic receipt

{{ money(order.totalCents) }} · {{ order.quoteId }}

Simulation accepted. No real order, payment or external send occurred.

Restart opens a confirmation and preserves the first original session for an in-memory restore. Cart, quotes and audit records never enter browser storage. Reload clears the private checkpoint.

Decision trail

Every transition has a reason.

PAGE-MEMORY FIXTURE

No workflow events yet. Request a quote to start the trail.

{{ event.event.replaceAll('_',' ') }}{{ event.entityId }}{{ new Date(event.at).toLocaleTimeString() }}

Evidence / implementation boundaries

The interface is the beginning.

Compiled Vue + TypeScript

One route loads its own bundled Vue runtime. DataTables owns the catalog DOM; Vue owns the surrounding cart and workflow.

Read the TypeScript

Protected Laravel API

Tenant-scoped lookup, server role policy, integer-cent pricing, transactions, stock locks, idempotency keys and audit history. Disabled by default; no demo login is published.

Read the transaction service

Measured, with limits

Executed SQLite and MySQL tests, raw before/after plans, and a warm single-client query comparison. Hosted CI passed; persistent identity and production concurrency remain separate.

Read test and benchmark evidence

This project demonstrates implementation. It does not establish years of experience, a degree, people management, client references, production scale or completed procurement scope.