RS
rangga
saputra
online
~/articles/siap-next-gen-security-management-system

SIAP: Next-Gen Security Management System

April 05, 2026|0 views|Web Development
#React.js#Next.js#AI Agent#Fullstack

Platform manajemen keamanan berbasis web yang dirancang khusus untuk tim keamanan (Security Guard). Sistem ini mengintegrasikan absensi digital, monitoring patroli real-time, pelaporan insiden, dan analitik performa dalam satu platform terpadu β€” dapat diakses dari browser desktop maupun perangkat mobile (PWA).

SIAP: Next-Gen Security Management System

SIAP: Bukan Sekedar "Siap Pak!" 🫑

Kalau lo main ke hotel tempat gw kerja dan ngobrol sama tim security, ada satu kata yang bakal selalu lo denger: "SIAP!". Mau ada arahan, patroli, atau sekadar sapaan, mereka selalu bilangnya SIAP. hahahaa

Dari situ gw kepikiran, kenapa nggak sekalian aja gw jadiin nama sistem? Akhirnya lahir lah si SIAP (Sistem Informasi Absensi & Patroli).

Jujur, gw tipikal IT yang nggak bisa diem suka iseng buat berinovasi, gw yang nggak betah sama hal-hal monotonβ€”basically, I hate doing the same manual stuff over and over again gw memutuskan buat develop sesuatu yang bisa bikin operasional lebih efficient dan transparant. Apa yang bisa gw develop, gw sikat sendiri tanpa harus nunggu vendor luar.

Gw develop SIAP ini juga dari hasil pengembangan aplikasi DISCOPS, Yang struktur datanya sendiri sudah gw research dan kembangin dari jaman di kantor lama, tapi baru bisa gw fully implement secara maksimal di kantor yang sekarang untuk SIAP tempur!

How about DISCOPS looks like? Nanti deh ye om, soalnye itu internal system yang isinya cukup sensitif, jadi butuh banyak filter sebelum bisa gw share ke public πŸ€ͺ.


The MVP: More Than Just Attendance πŸš€

SIAP gw rancang dengan fitur-fitur MVP yang bener-bener solve real-world problems untuk di lapangan :aseeeekkk.

SIAP

🎭 Face Biometric (Anti-Titip Absen)

Gw implementasi Face Biometric untuk verifikasi identitas secara real-time. Face-api.js on the client-side memastikan yang melakukan absensi adalah orang yang bersangkutan, bukan sekadar foto.

πŸ† Leaderboards

Gw pengen ada kompetisi sehat. System bakal nge-rank anggota secara otomatis berdasarkan performa riil.

  • Top Performer: Apresiasi buat yang paling rajin.
  • Needs Attention: Filter otomatis buat 3 anggota yang butuh pembinaan.
  • Scoring Logic: Kalkulasi dari Kehadiran (35pts), Patroli (30pts), hingga penalty buat yang telat atau alpha.

🚨 Incident & SOS

Fitur safety itu harga mati. Begitu ada kejadian di lapangan, petugas bisa kirim Incident Report atau tekan tombol SOS. Notifikasi bakal terkirim secara instan ke seluruh Admin & Supervisor. Real-time, no delay.

πŸ€– AI Agent & WhatsApp Auto-Report

Ini bagian paling fancy. Gw tanem AI Agent gw si R.A.V.A yang bertugas melakukan analisa data secara otomatis. RAVA ini yang bakal generate summary laporan harian dan langsung Auto-Report to WhatsApp melalui API. Jadi, manajemen nggak perlu ribet buka dashboard cuma buat cek status harian. Everything served right to your phone sir. hehe

πŸ“Š Comprehensive Export Report

SIAP juga di dukung export laporan multi-format (Excel & PDF) untuk:

  • Rekap Absensi & Permintaan (Izin/Sakit/Cuti).
  • Log Patroli & Histori Insiden.
  • Laporan SOS.

The Tech Stack πŸ› οΈ

Racikan gado2 yang gw pake buat mastiin performa yang snappy dan scalable.

βš›οΈ

Next.js 16

Menggunakan App Router buat performa SSR & SEO yang ngebut.

πŸ“˜

TypeScript 5

Full type-safety dengan Strict Mode buat cegah runtime error.

🎨

Tailwind 4 & Radix

Styling modern nan cepat dipadukan dengan headless Radix UI / Lucide Icons.

πŸ—„οΈ

Supabase + Prisma 6

Power duo PostgreSQL dan ORM yang solid buat database dan auth.

πŸ€–

Custom AI & WA API

Auto-reporting pakai WA Gateway dan notifikasi Resend Emails.

πŸ“Š

jsPDF & ExcelJS

Generate laporan kompleks ke format PDF & Excel on-the-fly.


Directory Structure πŸ“‚

SIAP/
β”œβ”€β”€ app/
β”‚   β”œβ”€β”€ (auth)/              # Halaman login (admin & mobile)
β”‚   β”œβ”€β”€ (dashboard)/         # Dashboard admin (absensi, patroli, laporan, dll.)
β”‚   β”œβ”€β”€ (mobile)/            # PWA mobile untuk petugas lapangan
β”‚   └── api/                 # REST API endpoints
β”‚       β”œβ”€β”€ auth/            # login, logout, refresh, me, forgot/reset-password
β”‚       β”œβ”€β”€ attendance/      # check-in, check-out, requests
β”‚       β”œβ”€β”€ admin/           # users, schedules, locations, activity-logs
β”‚       β”œβ”€β”€ patrol/          # routes, checkpoints, sessions
β”‚       β”œβ”€β”€ incidents/       # pelaporan insiden
β”‚       β”œβ”€β”€ sos/             # SOS alert
β”‚       └── leaderboard/     # scoring & export
β”œβ”€β”€ components/
β”‚   β”œβ”€β”€ layouts/             # Sidebar, Navbar, layout wrappers
β”‚   β”œβ”€β”€ admin/               # Semua komponen dashboard admin
β”‚   └── mobile/              # Komponen PWA mobile
β”œβ”€β”€ lib/
β”‚   β”œβ”€β”€ auth/                # JWT, middleware, token blacklist
β”‚   β”œβ”€β”€ db/                  # Prisma client
β”‚   β”œβ”€β”€ email/               # Email templates (Resend)
β”‚   β”œβ”€β”€ utils/               # GPS utils, rate limiter, anomaly detection
β”‚   └── validations/         # Zod schemas
β”œβ”€β”€ prisma/
β”‚   β”œβ”€β”€ schema.prisma        # Database schema
β”‚   └── seed.ts              # Data seeder
└── public/                  # Assets, PWA manifest, service worker
Mobile Dashboard View

πŸ” Mobile Login

Mobile Login View

πŸ“± Mobile Dashboard

SIAP bukan cuma soal aplikasi digital. Ini soal membangun culture kerja yang transparan, kompetitif, dan data-driven. Dengan bantuan AI, kita bisa lebih fokus ke decision making daripada sibuk narik data manual.

Mau liat DISCOPS kayak gimana? Stay tuned, gw filter dulu datanya biar nggak bocor! ✌️

Rangga Saputra

Rangga Saputra

Sysdev addict & Cybersecurity Enthusiast

I love sharing practical insights on tech, cybersecurity, and infrastructure. πŸ‘¨β€πŸ’»

Contact