fscm development docs

Arsitektur Sistem

Mon, 01 Jan 0001 00:00:00 +0000

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:

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.
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.
Fscm.DatabaseMigration — .NET 8 Console App dengan DbUp. Mengelola skema database secara terpisah dari backend utama.
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)    │
                                   └──────────────┘

Pengguna berinteraksi dengan Frontend (React) melalui peramban.
Frontend memanggil endpoint API yang disediakan oleh Backend (btb_backend) dengan menyertakan JWT Token.
Backend memverifikasi token melalui pipeline middleware: JwtBlacklistMiddleware → Authentication → Authorization → RateLimiter.
Jika otorisasi lolos, Backend mengakses Database Lokal (SQL Server) melalui layer Service → Repository (menggunakan Dapper + Stored Procedures).
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)

Manajemen Pengguna & Otorisasi

Mon, 01 Jan 0001 00:00:00 +0000

Sistem FSCM menggunakan JWT (JSON Web Token) untuk autentikasi dan Role-Based Access Control (RBAC) untuk otorisasi menu secara dinamis melalui database.

1. Analisis Database (Tabel SSO)

Aplikasi ini mengadopsi model Single Sign-On (SSO) sederhana menggunakan beberapa tabel utama:

sso_msuser: Menyimpan data pengguna (kredensial sandi). Tabel ini menggunakan Composite Primary Key yaitu (usr_id, rol_id, app_id). Artinya, satu entitas fisik (Karyawan/Supplier) bisa memiliki beberapa peran (Role) yang berbeda di dalam beberapa aplikasi.
sso_msrole: Menyimpan referensi Role (seperti Admin, Approver, Supplier, dsb) melalui rol_id. Beberapa contoh role krusial:
- ROL02 (SUPPLIER): Role untuk pihak eksternal/Vendor.
- ROL01 (Admin): Pengelola sistem keseluruhan.
- ROL03 (MEMBER PPIC FILTER): Pengelola inventaris dan jadwal produksi.
- ROL27 (SECURITY): Satpam/Keamanan yang mengurus Check-in/Check-out truk vendor di gerbang.
- QA / QC / PROCUREMENT: Divisi terkait yang mengontrol kualitas barang dan order pembelian.
sso_msmenu: Tabel krusial yang mendefinisikan menu. Menu didefinisikan secara eksplisit untuk setiap peran dan aplikasi (app_id dan rol_id).

2. Asal-Usul Pengguna (Cara Pendaftaran)

Proses pembuatan user (akun login) TIDAK BISA sembarangan. Prosesnya harus diawali dari adanya data master.

Migrasi Database

Mon, 01 Jan 0001 00:00:00 +0000

Panduan Migrasi Database (Fscm.DatabaseMigration)

Proyek ini menggunakan alat terpisah bernama Fscm.DatabaseMigration untuk melakukan perubahan skema database (DDL) atau penyisipan data awal (DML). Proyek ini dibangun menggunakan .NET dan pustaka DbUp.

Keuntungan menggunakan DbUp adalah setiap perubahan disimpan dalam bentuk file .sql murni yang terurut berdasarkan waktu pembuatannya (timestamp).

Struktur Proyek `Fscm.DatabaseMigration`

Program.cs: Kode utama yang menjalankan DbUp, membaca koneksi database dari appsettings.json atau Environment Variable, dan mengeksekusi semua script SQL yang belum pernah dijalankan.
scripts/: Folder tempat semua file .sql disimpan.
create-migration.sh / .bat: Script bantuan (utility) untuk mempercepat pembuatan file .sql kosong dengan format nama yang benar (menggunakan timestamp).
appsettings.json: File tempat mendefinisikan string koneksi (DefaultConnection) menuju local database.

Cara Menambahkan Tabel atau Perubahan Database

Jika kamu perlu membuat tabel baru, menambahkan kolom, atau membuat Store Procedure, ikuti langkah berikut:

Pengembangan Backend

Mon, 01 Jan 0001 00:00:00 +0000

Panduan Pengembangan Backend (`btb_backend`)

Backend dibangun menggunakan .NET 8 (C#) dengan arsitektur Service-Repository Pattern.

Struktur Folder Proyek

  btb_backend/
├── Controllers/          → 41 controller (routing HTTP)
├── Services/
│   ├── Interfaces/       → Kontrak/Interface service
│   └── Implementations/  → Implementasi logika bisnis
├── Repositories/
│   ├── Interfaces/       → Kontrak/Interface repository
│   └── Implementations/  → Implementasi akses data (Dapper)
├── DTOs/                 → Data Transfer Object (request/response)
├── Models/               → Entity/Model domain
├── Hubs/                 → SignalR Hub (real-time WebSocket)
├── Helpers/              → Utility & middleware pendukung
├── Program.cs            → Entry point, DI, middleware pipeline
├── JwtBlacklistMiddleware.cs → Middleware blacklist token JWT
├── appsettings.json      → Konfigurasi aplikasi
└── wwwroot/uploads/      → File statis (surat jalan, checksheet)

Lapisan Arsitektur

Controllers (/Controllers): Menangani routing HTTP dan memanggil Service. Dilarang menaruh logika bisnis berat atau query database di sini.
Services (/Services): Logika bisnis utama. Menerima data dari Controller, melakukan validasi/kalkulasi, dan memanggil Repository.
Repositories (/Repositories): Lapisan akses data. Berkomunikasi dengan SQL Server menggunakan Dapper dan raw SqlCommand untuk memanggil Stored Procedure. (Catatan: Proyek ini TIDAK menggunakan Entity Framework Core.)
DTOs (/DTOs): Kelas model untuk request dan response payload.
Hubs (/Hubs): Endpoint SignalR (WebSocket) untuk fitur real-time.
Helpers (/Helpers): Berisi utility penting:
- ApiAuthHandler.cs — Autentikasi via header X-API-KEY untuk akses portal eksternal (Supplier).
- EncryptionHelper.cs — Dekripsi AES-CBC kredensial login dari frontend.
- JwtHelper.cs — Utilitas pembuatan dan validasi JWT.
- SanitizerHelper.cs — Sanitasi input untuk keamanan.
- HasPermissionRequirement.cs & RequiresPermissionAttribute.cs — Atribut otorisasi berbasis permission.

Skema Autentikasi Ganda (JWT + ApiKey)

Backend mendukung dua skema autentikasi yang didaftarkan di Program.cs:

Pengembangan Frontend

Mon, 01 Jan 0001 00:00:00 +0000

Panduan Pengembangan Frontend (`fscm_frontend`)

Frontend dibangun menggunakan React 18 yang di-bundle dengan Vite 5. Antarmuka (UI) memanfaatkan Bootstrap 5, dan komunikasi HTTP menggunakan native fetch API melalui wrapper UseFetch.js.

Struktur Folder Proyek

  fscm_frontend/
├── .env                          → Variabel environment (API_LINK, SECRET_KEY)
├── index.html                    → HTML entry point
├── vite.config.js                → Konfigurasi Vite (port, base path, obfuscation)
├── package.json                  → Dependensi npm
└── src/
    ├── App.jsx                   → Shell utama, auth logic, tab navigation
    ├── main.jsx                  → React DOM entry point
    ├── index.css                 → Styling global
    ├── assets/                   → Aset statis (gambar, font)
    └── component/
        ├── backbone/             → Komponen layout (7 file)
        │   ├── Header.jsx        → Header dengan logo, nama user, tombol logout
        │   ├── SideBar.jsx       → Sidebar navigasi dinamis
        │   ├── Menu.jsx          → Render menu tree hierarkis
        │   ├── Layout.jsx        → Wrapper layout utama
        │   ├── Container.jsx     → Container konten
        │   ├── ContentBody.jsx   → Body area konten
        │   └── ContentTitle.jsx  → Judul halaman
        ├── page/                 → Modul halaman fitur (82 folder)
        ├── part/                 → Komponen UI reusable (34 file)
        └── util/                 → Utility & helper (15 file)
            ├── UseFetch.js       → HTTP client wrapper (native fetch + JWT auto-attach)
            ├── CreateMenu.js     → Pemanggil API menu + transformasi
            ├── CreateRoute.jsx   → Definisi semua route (~70 route, lazy-loaded)
            ├── MenuMapper.js     → Transformasi data menu flat → tree hierarkis
            ├── ProtectedRoute.jsx→ Guard route berbasis hak akses menu
            ├── Constants.js      → Konstanta (API_LINK, ROOT_LINK, APP_ID)
            ├── Encryptor.js      → Enkripsi AES kredensial login (crypto-js)
            ├── CheckAccess.js    → Pengecekan hak akses user terhadap path
            ├── SweetAlert.js     → Wrapper SweetAlert2
            ├── Formatting.js     → Format angka/tanggal
            ├── ValidateForm.js   → Validasi form
            └── UploadFile.js     → Helper upload file

Mekanisme HTTP Client (`UseFetch.js`)

Frontend TIDAK menggunakan Axios sebagai mekanisme utama. Sistem menggunakan native browser fetch API yang dibungkus dalam UseFetch.js:

Sinkronisasi Infor (Vendor API)

Mon, 01 Jan 0001 00:00:00 +0000

Sinkronisasi Infor (Vendor API)

Sistem database lokal (FSCM) berintegrasi dengan Infor (Vendor API) sebagai System of Record / Master Data pusat.

Apakah Frontend Akses Infor Langsung?

Tidak. Secara arsitektur, frontend (fscm_frontend) tidak boleh melakukan request HTTP langsung ke Infor. Semua komunikasi dengan Infor wajib dijembatani oleh backend (btb_backend). Alasannya:

Keamanan: Kredensial basic auth (FSCM_Cirebon:noberiC_MCSF) dan base URL Infor disembunyikan di layer backend.
CORS: Kebanyakan API internal vendor tidak mengizinkan akses direct dari browser.
Data Formatting: Backend bertugas merapikan dan memformat response JSON dari Infor agar sesuai kebutuhan visual frontend.

Pemetaan Implementasi API (Berdasarkan Dokumen Spesifikasi)

Berdasarkan dokumen spesifikasi API Specification FSCM 29062026.DOCX, berikut adalah status implementasi endpoint pada kelas VendorApiRepository.cs di backend:

Skema & Struktur Database

Mon, 01 Jan 0001 00:00:00 +0000

Skema & Struktur Database (FSCM Lokal)

Berdasarkan analisis file dump SQL DB_Digitalisasi_Dashboard_FSCM, database aplikasi dirancang dengan arsitektur penamaan (naming convention) yang sangat terstruktur. Setiap tabel di dalam sistem menggunakan awalan (prefix) tertentu untuk mengelompokkan fungsinya.

Berikut adalah 4 kelompok utama tabel di dalam database sistem ini:

1. Tabel SSO (Single Sign-On & Akses) - `sso_`

Kelompok tabel ini bertugas murni untuk mengurus otentikasi, otorisasi, manajemen menu, dan jejak (session) login pengguna.

Estimasi Pengumpulan Bahan (BOM)

Mon, 01 Jan 0001 00:00:00 +0000

Proyek Lanjutan: Estimasi Pengumpulan Bahan (BOM) oleh Gudang

Dokumen ini memuat konsep arsitektur, pemodelan basis data, alur sinkronisasi data Infor, serta panduan implementasi untuk fitur Estimasi Pengumpulan Bahan (BOM) oleh petugas gudang.

Referensi Mockup Excel

1. Pembagian Peran (PPC/PPIC vs Gudang)

Peran	Tugas	Di Fitur Ini
PPC / PPIC (Production Planning & Inventory Control)	Perencana. Menganalisis pesanan pelanggan, memeriksa kapasitas mesin, merilis Work Order (WO) / Production Order ke sistem.	Menentukan produk jadi apa yang harus dibuat (`Finished Goods`, prefix `F`) dan berapa jumlahnya (`QTY Plan`). Data WO diambil dari API PRO Infor.
Petugas Gudang (Warehouse Picker)	Eksekutor lapangan. Mencari, mengumpulkan, dan memverifikasi bahan fisik di gudang.	Melihat daftar WO di dashboard → Klik Start → Mengumpulkan bahan BOM satu per satu → Mencatat `QTY_ACT` → Melaporkan masalah jika ada → Klik Finish → Transfer ke area Produksi.

2. API Eksternal yang Dibutuhkan (dari Mockup)

Berdasarkan mockup, terdapat 6 sumber data/API yang diperlukan:

fscm development docs

Arsitektur Sistem

Arsitektur Sistem FSCM link

Topologi Aplikasi link

Alur Data Secara Umum link

Middleware Pipeline (Urutan di Program.cs) link

Manajemen Pengguna & Otorisasi

Manajemen Pengguna & Otorisasi Menu link

1. Analisis Database (Tabel SSO) link

2. Asal-Usul Pengguna (Cara Pendaftaran) link

Migrasi Database

Panduan Migrasi Database (Fscm.DatabaseMigration) link

Struktur Proyek Fscm.DatabaseMigration link

Cara Menambahkan Tabel atau Perubahan Database link

Pengembangan Backend

Panduan Pengembangan Backend (btb_backend) link

Struktur Folder Proyek link

Lapisan Arsitektur link

Skema Autentikasi Ganda (JWT + ApiKey) link

Pengembangan Frontend

Panduan Pengembangan Frontend (fscm_frontend) link

Struktur Folder Proyek link

Mekanisme HTTP Client (UseFetch.js) link

Sinkronisasi Infor (Vendor API)

Sinkronisasi Infor (Vendor API) link

Apakah Frontend Akses Infor Langsung? link

Pemetaan Implementasi API (Berdasarkan Dokumen Spesifikasi) link

Skema & Struktur Database

Skema & Struktur Database (FSCM Lokal) link

1. Tabel SSO (Single Sign-On & Akses) - sso_ link

Estimasi Pengumpulan Bahan (BOM)

Proyek Lanjutan: Estimasi Pengumpulan Bahan (BOM) oleh Gudang link

Referensi Mockup Excel link

1. Pembagian Peran (PPC/PPIC vs Gudang) link

2. API Eksternal yang Dibutuhkan (dari Mockup) link

Arsitektur Sistem FSCM

Topologi Aplikasi

Alur Data Secara Umum

Middleware Pipeline (Urutan di `Program.cs`)

Manajemen Pengguna & Otorisasi Menu

1. Analisis Database (Tabel SSO)

2. Asal-Usul Pengguna (Cara Pendaftaran)

Panduan Migrasi Database (Fscm.DatabaseMigration)

Struktur Proyek `Fscm.DatabaseMigration`

Cara Menambahkan Tabel atau Perubahan Database

Panduan Pengembangan Backend (`btb_backend`)

Struktur Folder Proyek

Lapisan Arsitektur

Skema Autentikasi Ganda (JWT + ApiKey)

Panduan Pengembangan Frontend (`fscm_frontend`)

Struktur Folder Proyek

Mekanisme HTTP Client (`UseFetch.js`)

Sinkronisasi Infor (Vendor API)

Apakah Frontend Akses Infor Langsung?

Pemetaan Implementasi API (Berdasarkan Dokumen Spesifikasi)

Skema & Struktur Database (FSCM Lokal)

1. Tabel SSO (Single Sign-On & Akses) - `sso_`

Proyek Lanjutan: Estimasi Pengumpulan Bahan (BOM) oleh Gudang

Referensi Mockup Excel

1. Pembagian Peran (PPC/PPIC vs Gudang)

2. API Eksternal yang Dibutuhkan (dari Mockup)