Play video
Pause video

SOP Order
Workflow System

An order task & progress control system driven by SOP templates

2026

SOP Order Workflow System — template flow editor screen
Scroll
Project Type Order Process Control System (Internal Ops Tool)
Timeline 2026
Core Tech Astro, Vue Flow, Drizzle
Integration Complements Existing ERP

Project Overview

The Order Process Control System is an internal ops tool built for a client already running an ERP. Their ERP is great at bookkeeping and documents, but lacks cross-department process control — who does which steps, in what order, for a given order. That is exactly the gap this system fills.

At its core is a visual SOP template editor: a Vue Flow node canvas that turns shipping, purchasing, transfer, processing, and accounting operations into flowcharts, configuring main-line steps, exception branches, and cross-template jumps, and assigning an owner and order-number prefix to each step. Once a template is published, orders auto-expand into tasks from a template snapshot, assigned to people and tracked, with status strictly governed by a state machine.

The frontend runs on Astro 5 SSR with Vue 3 interactive components; the data layer uses better-sqlite3 + Drizzle ORM for a lightweight footprint, with Zod validation throughout and four-tier RBAC for permissions. The whole project is spec-driven, mapping acceptance criteria AC-01–13 and business rules BR-01–14 point by point so delivery passes acceptance by design.

4 Role Tiers (Admin, Supervisor, Operator, Viewer)
13 SOP Templates Across Shipping/Purchasing/Transfer/Processing/Accounting
100% Implemented Against Spec AC / BR Criteria

Core Features

01

Visual SOP Flow Editor

A Vue Flow node canvas for dragging main-line and exception steps, configuring optional exceptions, exception flows, and cross-template jumps; each step assigns an owner and order-number prefix, with versioned publishing.

02

Template Snapshot & Order Generation

Each order locks a snapshot of the current SOP template, so later template revisions never affect in-flight orders — every order always runs the flow it started with, ensuring consistency and auditability.

03

Task & Progress Tracking

The snapshot auto-expands each step into a task assigned to owners and secondary owners; the home dashboard tallies active / paused / completed / cancelled in real time.

04

State Machine & Exception Handling

Order status is driven by a state machine (active, paused/exception, completed, cancelled), with exception branches, order blocking (blocked by another order), and post-completion cross-template transitions.

05

Four-Tier RBAC

Admin / Supervisor / Operator / Viewer tiers precisely control template editing, order operations, and view scope, with a nav role switcher to preview each perspective.

06

Order Event Trail

Every action writes to an orderEvents log for full traceability; admins can review recent events on the home page to keep a pulse on the whole flow.

07

Complements Existing ERP

SOP templates map to ERP document types (ordering, sales, purchasing, billing…) and connect via order-number prefixes, filling the cross-department process-control gap the ERP lacks.

08

Spec-Driven Development

Built against a system spec and a client requirements document, implementing acceptance criteria AC-01–13 and business rules BR-01–14 point by point — delivery passes acceptance by design.

Technical Details

Vue Flow Visual Flow Editor

SOP templates are edited on a Vue Flow node canvas: main-line steps connect with solid edges, exception steps branch with dashed ones, distinguishing four edge semantics — optional exception, exception flow, and cross-template jump. Each node sets an owner, order-number prefix, and properties, and once published becomes the blueprint orders execute against.

Drizzle ORM + SQLite Data Layer

The data layer pairs Drizzle ORM with better-sqlite3, defining users, orders, tasks, sopTemplates, and orderEvents as type-safe schemas. SQLite lets this internal tool run with no extra database service and a single-file store, keeping deployment and backups trivial — ideal for a private deployment alongside the client’s existing systems.

Domain-Driven: State Machine & Events

Business logic lives in src/domain/, using a state machine to manage the order lifecycle (active → paused/exception → completed/cancelled), with order blocking (blockedByOrderId) and post-completion cross-template transitions. Every transition emits a domain event to orderEvents, forming a fully auditable operation trail.

Template Snapshot Mechanism

When an order is created, it takes a snapshot of the SOP template and locks it in. Even if the template is later revised or retired, in-flight orders keep running their original steps and owners — avoiding the "flow changed, old orders drifted" data-consistency risk. This is the key to a process-control system’s auditability.

Zod Validation & Type Safety

Every API endpoint validates input with a Zod schema aligned with TypeScript types, keeping end-to-end type safety from Astro API routes down to the Drizzle data layer — stopping errors before they ever hit the database.

RBAC Permission Model

src/lib/permissions implements authorization for four role tiers (admin / supervisor / operator / viewer), governing template editing, order operations, and event viewing. Middleware guards at both the page and API layers, rejecting unauthenticated or over-privileged requests.

Tech Stack

Frontend

  • Astro 5 SSR
  • Vue 3 Islands
  • Vue Flow Diagram
  • TailwindCSS 4 Styling

Data Layer

  • better-sqlite3
  • Drizzle ORM
  • Zod Validation
  • nanoid IDs

Domain Logic

  • State Machine
  • Template Snapshot
  • orderEvents Log
  • RBAC Permissions

Deployment / Integration

  • Node SSR Private Deploy
  • Complements Existing ERP
  • Spec-Driven (AC / BR)
  • Role-Switch Demo

CONTACT US

Have a similar project? Let's talk.

Whether it's an internal ops system, digitizing SOP workflows, order/work-order control, or reinforcing an existing ERP's processes, we can tailor the right solution for you.

Contact Us