Arsitektur Sistem FSCM

Dokumen ini menjelaskan gambaran umum bagaimana sistem aplikasi dirancang dan berinteraksi antara komponen-komponen utamanya.

Topologi Aplikasi

Proyek ini terbagi ke dalam empat wilayah (repository) utama:

  1. fscm_frontend — React 18 + Vite 5, SPA (Single Page Application). Berjalan di browser pengguna. Menggunakan Bootstrap 5 untuk UI, native fetch API untuk HTTP, dan SignalR untuk real-time.
  2. btb_backend — .NET 8 (C#), Service-Repository Pattern. Server API utama dengan 41 Controller, 17+ SignalR Hub, dan dual auth (JWT + ApiKey). Menggunakan Dapper untuk akses database via Stored Procedure.
  3. Fscm.DatabaseMigration — .NET 8 Console App dengan DbUp. Mengelola skema database secara terpisah dari backend utama.
  4. Vendor API / Infor — Sistem ERP pusat perusahaan (Master Data). Diakses oleh backend via HttpClient dengan Basic Auth.

Alur Data Secara Umum 

  ┌──────────────┐     HTTPS/WSS      ┌──────────────┐     Dapper/SP     ┌──────────────┐
│   Frontend   │ ◄──────────────► │   Backend    │ ◄─────────────► │  SQL Server  │
│  (React 18)  │   JWT Bearer      │  (.NET 8)    │                  │  (Database)  │
└──────────────┘                    └──────┬───────┘                  └──────────────┘
                                          │ HttpClient
                                          │ Basic Auth
                                          ▼
                                   ┌──────────────┐
                                   │  Infor API   │
                                   │  (Vendor)    │
                                   └──────────────┘
  1. Pengguna berinteraksi dengan Frontend (React) melalui peramban.
  2. Frontend memanggil endpoint API yang disediakan oleh Backend (btb_backend) dengan menyertakan JWT Token.
  3. Backend memverifikasi token melalui pipeline middleware: JwtBlacklistMiddleware → Authentication → Authorization → RateLimiter.
  4. Jika otorisasi lolos, Backend mengakses Database Lokal (SQL Server) melalui layer Service → Repository (menggunakan Dapper + Stored Procedures).
  5. Untuk data yang butuh sinkronisasi dengan Infor, Backend memiliki dua jalur:
    • Real-time: Langsung hit API Infor via VendorApiRepository (HttpClient + Basic Auth).
    • Batch/Lokal: Mengambil data dari tabel staging Dojo* yang sudah disinkronisasi via SQL Server Agent/Job.

Middleware Pipeline (Urutan di Program.cs) 

  Request masuk
  → CORS ("AllowFrontend")
  → Static Files (wwwroot/uploads)
  → JwtBlacklistMiddleware (cek token blacklist)
  → Authentication (JWT Bearer / ApiKey)
  → Authorization (Role-based)
  → RateLimiter (loginPolicy: 5 req/5 detik)
  → SignalR Hubs (17 endpoint WebSocket)
  → Controllers (41 endpoint REST API)