50,000+
Data Rows RenderedLag-free virtualized table rendering via React Virtuoso
Active
Build StatusCore modules in active engineering delivery
4,328
SKUs MigratedZero reconciliation error via shadow dual-write
65
Granular PermissionsDual-layer RBAC + Individual user overrides
3-Stage
Sequential ApprovalPS/SS → RPM → SPM with digital canvas signatures
3
Languages SupportedID, EN, ZH (instant runtime i18n switch)
The Operational Mandate
Context & High-Stakes Constraints
PT Intisel's operations ran on a patchwork of spreadsheets and a legacy PHP tool that nobody wanted to touch. The mandate: rebuild it as a single source of truth with proper audit trails, role-based access, and the ability to scale across departments.
Constraints: zero downtime during migration, full data integrity guarantees, and the system had to be operable by non-technical staff.
02PRODUCTION INTERFACES
The Live System in Action
Explore high-fidelity production interfaces — from operational analytics dashboards and role governance matrices to vendor workflows and real-time collaboration tools.
🔒databank.intisel.id
01 / 05Official Brand Presentation
Official Platform Architecture & Overview
Official enterprise architecture overview and executive summary flyer illustrating the end-to-end telecommunication vendor management and field operation workflow.
◆ Enterprise Telecom Data Architecture◆ End-to-End Field Operations Pipeline◆ Executive Summary Presentation
03CAPABILITIES & WORKFLOW
4 Architectural Pillars & Core Capabilities
Built to automate mission-critical operations — unifying domain workflows, core services, and interactive user experiences.
Field Operations & Project Support
Installation status tracking, multi-tier Job Order (JO) approval workflows, Official Handover Certificates (BAST), and site coordinate verification.
Procurement & Subcontractor Management
Centralized database for outsource purchase orders, phased payment terms (Down Payment, Milestone 1, Final Settlement), and task item quota validation.
Huawei ISDP Scraping & Automation
Headless browser scraping pipeline intercepting and extracting real-time datasets from the Huawei ISDP portal without manual labor.
Workforce Geolocation & Payroll
GPS geofenced daily attendance with cryptographically verified server-time, automated national holiday detection, and integrated overtime payroll calculation.
8 Mission-Critical Enterprise Modules
From multi-tier inventory to mobile warehouse dispatch — every workflow is backed by cryptographic audit trails and real-time ledger consistency.
MODULE // 01 OF 08Core Operations
Databank Management
Central operational tracking engine covering end-to-end telecom workflows from initial PO issuance to final acceptance invoice.
- PO Tracker: Comprehensive monitoring of PO numbers, line items, descriptions, quantities, unit prices, and total valuations.
- Implementation Document (Impl Doc): Real-time field documentation tracking, assigned technician PICs, and delivery progress.
- ESAR & Invoice Tracker: Milestone tracking for acceptance certificates and enterprise client billing invoices.
- Flagged Data: Automated detection filter identifying reconciliation anomalies and data discrepancies.
- Bulk Excel Import & Export: High-speed ingestion of .xlsx spreadsheets and multi-criteria filtered data export.
- Auto-Merge ISDP: Intelligent reconciliation engine matching external Huawei ISDP tasks to internal Databank records.
Sequential 3-Stage Execution Lifecycle
Multi-tier operational workflow enforcing phased execution, role verification, and automated state safeguards to guarantee integrity.
Stage 01PS / SS
Project Support / Site Support
Verifies technical field documentation, site coordinates, and item allocations against original PO quotas.
Technical Audit & Level 1 Canvas Signature
Stage 02RPM / VRPM
Regional Project Manager
Validates regional budget allocations, delivery timelines, and subcontractor service agreements.
Level 2 Sequential Authorization
Stage 03SPM
Senior Project Manager
Provides final executive approval before Job Order publication and transaction settlement locking.
Final Executive Seal & Issuance
Automatic PO Row Locking & Rejection Unlock
When 1 to 10 PO lines are selected for a Job Order, their state locks to 'Approving' to prevent double-booking. If any approval stage issues a rejection, all associated PO lines are automatically released back to the active pool.
04SYSTEM ANATOMY & ARCHITECTURE
System Architecture & Modular Topology
Engineered for high availability, fault tolerance, and clear domain separation across frontend interfaces, service layers, and data stores.
Pattern: Decoupled Client-Server (Monorepo)
Protocol: RESTful API (JSON with JWT)
Frontend SPA
React 19 + Vite 7Single Page Application powered by React Virtuoso virtualized table engine, multi-language i18next (ID/EN/ZH), and client-side jsPDF + React-to-Print generation.
Gateway & Security
Helmet CSP + Strict CORSHardened security perimeter with strict Content Security Policy, anti-clickjacking frameguard, Gzip compression, and Passport JWT / RBAC guards.
Backend Service
NestJS 11 + ExpressEnterprise modular architecture with Prisma 7.3 ORM, pgPool connection pooling, and Playwright Chromium background automation.
Data & Storage
PostgreSQL + Local UploadsStrictly typed PostgreSQL database with modular multi-file schemas and secure local storage for digital signatures and user assets.
External Services
Huawei ISDP + Google MapsAutomated headless scraping pipeline for the Huawei ISDP portal paired with Google Maps Geocoding API for coordinate validation.
Curated Technology Stack
A modern engineering stack combining high-throughput user interfaces, modular backend architecture, and resilient data layers.
Frontend Application
React 19Core UI Library
Vite 7High-speed Build Tool & Dev Server
React Router v7Client-side Routing
React VirtuosoVirtualized Table (50k+ Rows)
AxiosHTTP Client & Interceptors
i18nextMulti-Language (ID, EN, ZH)
jsPDF & React-to-PrintPDF Generation & Print Layouts
Framer MotionFluid UI Animations
XLSXExcel Import / Export Engine
Backend Services
NestJS 11Modular Enterprise Framework
Express 4HTTP Engine
Prisma 7.3Type-safe ORM & Migrations
PostgreSQL 14+Relational Database
@prisma/adapter-pgConnection Pool Adapter
Passport JWTStateless Auth Strategy
BcryptPassword Hashing
Class ValidatorStrict DTO Validation
Automation, Storage & Tools
Playwright (Chromium)Headless Browser Scraper
SharpImage & Signature Compression
MulterFile Upload Handling
Date-HolidaysIndonesian National Holidays Engine
Docker ComposeContainerized Orchestration
GitHub ActionsCI/CD Deployment Pipelines
Google Maps APIGPS Geolocation Verification
Codebase Structure & Data Models
Clear boundary separation between system components, paired with modular schemas and structured repositories.
📁 databank-backend/ (NestJS 11)
├──src/auth/ — JWT strategy, Passport guards, RBAC decorators
├──src/databank/ — CRUD Databank, PO, Impl Doc, ESAR, Datafab
├──src/outsource/ — Outsource master, PO DB, JO Approval, BAST Form
├──src/scraper/ — Playwright headless scraper for Huawei ISDP
├──src/attendance/ — GPS geofence clock in/out, server time, payroll
├──prisma/schema/ — Modular schemas: databank, outsource, user, role, permission, attendance
Database Entities & Schema Models
databank.prisma
Telecom work items, PO tracking, site lists, crew productivity, and external ISDP datasets.
outsource.prisma
Subcontractor partner directories, outsource POs, payment terms, 3-stage JO approvals, and BAST handover forms.
user.prisma & role.prisma & permission.prisma
User identity schemas, bcrypt credentials, High/Medium/Low role matrices, and 65 granular system permissions.
attendance.prisma
GPS geolocation coordinates, server-verified timestamps, absence tracking, and overtime payroll calculation.
05SECURITY, API & PRODUCTION IMPACT
Hardened Perimeter & Proven Impact
Enterprise-grade security policies, documented API contracts, and the quantifiable outcomes achieved during production deployment.
API Endpoints & Routing Architecture
Authentication (/auth)
POST/auth/loginJWT login credentials verification & profile payload
GET/auth/profileActive session validation & permissions refresh
Databank (/databank)
GET/databankPaginated records with multi-column search & Excel filters
POST/databank/importBulk data ingestion from Microsoft Excel (.xlsx)
GET/databank/sync-polineshipBatch synchronization for PO line item records
GET/databank/trigger-isdp-mergeTrigger background Huawei ISDP auto-merge bot
Outsource & Approval (/outsource)
GET/outsource/jo-formFetch Job Orders with Stage 1, 2, and 3 approval statuses
POST/outsource/jo-formGenerate new Job Order from 1-10 POs (auto-lock rows)
POST/outsource/jo-form/:id/approveApprove or Reject with digital canvas signature payload
POST/outsource/bast-form/:id/approveDigital signature verification for official BAST form
Scraper & Attendance (/scraper & /attendance)
POST/scraper/runTrigger Playwright headless scraping automation
GET/scraper/statusReal-time scraper telemetry, progress, and logs
GET/attendance/server-timeAuthoritative server timestamp preventing clock tampering
POST/attendance/clock-inClock-in submission with GPS geofence radius check
Enterprise Security & Governance Standards
Helmet HTTP Security Headers
Strict Content Security Policy (CSP), anti-clickjacking frameguard, MIME-sniffing prevention, and X-Powered-By runtime concealment.
Strict CORS Whitelist
Restricts HTTP access exclusively to verified production domains and legitimate local development environments.
Data Tampering Prevention
NestJS Global Validation Pipe configured with whitelist: true and forbidNonWhitelisted: true to reject unmapped DTO properties.
Synchronized Cell Locking
Client-server synchronized permission checks enforcing strict read-only lockouts on inline table cells without active edit rights.
Engineering Challenges & Production Results
How critical technical bottlenecks were overcome and verified under real production conditions.
Challenge // 01
Migrating live financial data without a maintenance window. Solved with a dual-write pattern: new system shadows the old for 30 days while reconciliation runs nightly.
Challenge // 02
Permission UX. RBAC matrices are usually a nightmare for end users — we built a 'show me what this role can do' inspector that renders the policy in plain English.