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 TypeOrder Process Control System (Internal Ops Tool)
Timeline2026
Core TechAstro, Vue Flow, Drizzle
IntegrationComplements 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.

4Role Tiers (Admin, Supervisor, Operator, Viewer)
13SOP 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

FAQ

Why use a lightweight database like SQLite instead of MySQL or PostgreSQL?

This system is designed as an internal ops tool that complements the client's existing ERP — it doesn't need to handle e-commerce-level concurrent traffic. Using better-sqlite3 with Drizzle ORM turns the entire data layer into a single-file store, with no separate database service to set up, making deployment and backups simple. This is especially well suited to a private deployment running alongside the client's internal systems.

What is a "template snapshot," and why does a process-control system need it?

A template snapshot locks in the exact version of the SOP flow at the moment an order is created. Without this, revising the template later would force in-flight orders to switch to the new flow mid-execution, leaving them unable to find their original steps. With the snapshot locked in, every order always runs through the flow it started with — a critical design for a process-control system that needs to stay fully auditable.

The client already has an ERP — why build a separate system instead of adding features to the ERP?

The client's ERP is strong at bookkeeping and issuing documents, but lacks the cross-department process control needed to define who handles which steps, in what order, for a given order. That kind of custom workflow logic typically involves multi-department permissions and complex exception branches — directly modifying the ERP core would be risky and hard to maintain. We built this as a standalone system instead, mapping SOP templates to the ERP's document types (ordering, sales, purchasing, etc.) and linking them via order-number prefixes, filling the process-control gap without touching the ERP's core.

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