◫ Preact Commerce Order Console

A commerce operations workspace for fulfillment, payment state, risk review, customer context, notes, tracking, and precise refunds.

---

✨ Highlights

• Order Queue: Searches orders and filters fulfillment, shipment, risk, payment, and refund states.
• Operational Detail: Combines customer history, shipping, tracking, totals, line items, and timeline context.
• Fulfillment Workflow: Updates order progress while automatically appending an auditable event.
• Precise Refunds: Supports partial and full refunds with reason validation and remaining-balance checks.
• Money-Safe Arithmetic: Uses Decimal.js instead of binary floating-point math for totals and refunds.
• Risk Context: Keeps payment and fraud signals visible before high-impact order actions.
• Internal Notes: Adds operational notes without mixing them into customer-facing shipment details.
• Durable Mock State: Validates fixtures, persists actions in IndexedDB, and restores the original order set.
• Responsive Operations UI: Preserves a fast queue-to-detail workflow from wide desktops to mobile screens.

🧱 Project Structure

public/
|-- favicon.svg
`-- sample-orders.json
src/
|-- app.tsx
|-- index.css
|-- main.tsx
|-- components/
|   |-- order-detail.tsx
|   `-- order-list.tsx
|-- domain/
|   `-- orders.ts
`-- services/
    `-- order-store.ts

🛠️ Tech Stack

• Preact 10, TypeScript 6, Vite 8, and Tailwind CSS 4
• Decimal.js, Fuse.js, Zod, nanoid, Preact Signals, Lucide icons, and date-fns
• IndexedDB persistence through idb-keyval

📦 Included Demo Data

public/sample-orders.json includes five synthetic orders across fulfillment, shipment, risk, payment, partial-refund, channel, customer-history, and tracking states. Line items, addresses, totals, notes, and timelines make every major workflow testable immediately.

All customers, addresses, payments, shipments, and amounts are synthetic. Actions move no real inventory or funds.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• Monetary validation and arithmetic stay in the domain/service layer instead of relying on formatted UI strings.
• Refunds cannot exceed the remaining paid balance and every accepted refund adds a timeline record.
• All fulfillment and refund actions are local mock operations and move no real inventory or funds.
• Replace src/services/order-store.ts with authenticated order, inventory, payment, and fulfillment endpoints while preserving domain contracts.
• Recalculate refundable amounts on the server and use provider idempotency keys before creating a real refund.
• Use currency-aware minor units or a decimal representation consistently across API and storage boundaries.
• Require appropriate permissions and recent confirmation for refunds, address changes, and shipment transitions.
• Keep customer-visible events separate from internal notes and redact sensitive payment data at every layer.
• Mobile preserves a scan-friendly horizontal order queue before the full detail workspace.

🧪 Build & Checks

npm run format:check
npm run build
npm run preview
npm audit --omit=dev

🌐 Vercel Deployment

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.