UI/UX Design

SOP Management System

A full-stack document management portal for managing the full lifecycle of Standard Operating Procedures — from creation and multi-level approval through versioning, socialization, and archival.

Category Web Application
Timeline 3 Months
Role Full-Stack Developer
Result 250+ SOPs managed at launch

Project Overview

The company needed a centralised platform to manage all Standard Operating Procedures across 18 departments. Previously, SOPs were managed manually via email and shared folders — leading to version confusion, no audit trail, and compliance risks.

I designed and built the entire system from scratch: a normalized 14-table MySQL schema, a PHP backend with session-based authentication and role enforcement, and a responsive frontend with a rich text editor, notification system, and PDF export. The platform enforces a real multi-level approval workflow (Draft → Under Review → Approved → Active → Archived) with automatic version history and email socialization on every document publish

The Challenge

Multi-Level Approval Workflow

Implementing a state machine with 5 document statuses, multiple approval gates, and role-based transition rules — while maintaining version integrity on every edit.

Document Versioning & Immutability

Active documents are immutable — edits must create a new version, archive the old one, and restart the approval workflow. Version gaps must be tracked and filled on restoration.

Role-Based Access & Confidentiality

AThree user roles (Admin, Approver, Viewer) with a granular permission matrix. Confidential documents are filtered at the query level — only visible to users from the same department or Admin.

Solution & Approach

I implemented a session-based PHP authentication system with bcrypt password hashing, IP-based session validation, and rate-limited login with account lockout. Documents follow a strict state machine enforced at every API endpoint — preventing unauthorized status transitions regardless of how the request is made.

The PDF export uses browser print-to-PDF with custom CSS — generating professional multi-page documents with a company logo header, department info, revision history table, related documents section, and a formal 4-column approval signature table on the last page, fully in Indonesian business format.

Email socialization uses PHPMailer with web-shared hosting SMTP. When a document is published, an Admin can send a branded HTML email to selected departments, with a custom banner image, change-point highlights, and a direct link to the document portal.

Key Features

  • 5-stage document workflow: Draft → Under Review → Approved → Active → Archived with role-based transitions
  • Automatic version control — every major edit creates a new version, preserves full history
  • Minor edit mode — update metadata (tags, confidentiality, related documents) on Active documents without a version bump
  • Three-role RBAC: Admin, Approver, and Viewer with granular permission matrix
  • Confidential document access control — department-scoped visibility
  • PDF export with professional header, revision history, related documents, and approval signature table
  • Email socialization on publish with branded HTML template, banner upload, and change highlights
  • In-app notification system with bell icon and unread count badge
  • Global search across title, description, content, tags, author, department, and document ID
  • File attachment support (Visio, PDF, images) with MIME validation
  • Periodic review calendar for compliance tracking
  • Activity audit log — 12 action types tracked with IP address and JSON details
  • Auto-backup system triggered on admin login with 30-day retention
  • Related Documents linking between SOPs with clickable chips in detail view and PDF

Interested in a similar solution?

Let's talk about your system management requirements and build something practical together.

Get In Touch Back to Projects