Panduan Pengembangan Frontend (fscm_frontend) link

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 link

  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) link

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

• Otomatis menyisipkan header Authorization: Bearer <token> dari Cookies.get("jwtToken").
• Default Content-Type: application/json.
• Menangani error koneksi dan status HTTP non-OK.

Konfigurasi Environment link

.env:

  VITE_API_LINK=http://127.0.0.1:5157/api/
VITE_SECRET_KEY=FSCM_PROD_99_ZIDAN_SECRET_K3Y_2026
  

Constants.js:

  export const APPLICATION_NAME = "Sistem Informasi - PT FSCM";
export const APPLICATION_ID  = "APP01";
export const ROOT_LINK       = import.meta.env.BASE_URL + "/fscm";
export const API_LINK        = import.meta.env.VITE_API_LINK;
export const PAGE_SIZE       = 10;
  

Fitur Tab Navigation link

App.jsx mengimplementasikan sistem navigasi multi-tab (seperti browser/IDE). Setiap halaman yang dikunjungi terbuka sebagai tab terpisah. Pengguna bisa berpindah antar tab dan menutupnya secara individual.

Enkripsi Kredensial Login link

Kredensial login (username & password) dienkripsi di sisi klien menggunakan crypto-js (AES) melalui Encryptor.js sebelum dikirim ke backend. Backend mendekripsi menggunakan EncryptionHelper.Decrypt().

Cara Menambahkan Halaman Baru link

1. Buat Komponen Halaman link

Buat folder baru di src/component/page/nama-fitur/ dengan file Index.jsx:

  // src/component/page/nama-fitur/Index.jsx
export default function NamaFitur() {
  return <div>Halaman Baru</div>;
}
  

2. Daftarkan Route di CreateRoute.jsx link

Buka src/component/util/CreateRoute.jsx dan tambahkan definisi route baru:

  const NamaFitur = lazy(() => import("../page/nama-fitur/Index"));

// Tambahkan ke dalam array routeList:
{ path: "/nama-fitur", element: <NamaFitur />, title: "Nama Fitur" },
  

3. Panggil API Backend link

Gunakan UseFetch.js dari src/component/util/:

  import UseFetch from "../util/UseFetch";
import { API_LINK } from "../util/Constants";

const data = await UseFetch(API_LINK + "NamaController", {
  method: "GET",
});
  

4. Tambahkan Menu di Database link

Agar halaman muncul di Sidebar, tambahkan record baru di tabel sso_msmenu dengan men_link sesuai path route, app_id dan rol_id yang sesuai.

Komponen Reusable (component/part/) link

Terdapat 34 komponen siap pakai untuk menjaga konsistensi UI: Accordion, Alert, AutoComplete, Button, Card, CheckBox, DashboardChart, DateInput, Dropdown, Editor, FileUpload, Filter, FormatNumber, Icon, Input, Label, Loading, Modal, OptionSelect, Paging, PagingTr, PreviewDocument, RadioBox, SearchBar, SearchableSelect, Table, TableWithRowSpan, TandaTanganDigital, TextArea, TimeInput, dan lainnya.

Daftar Lengkap 82 Modul Halaman (component/page/) link

Berikut semua fitur yang tersedia di frontend, dikelompokkan berdasarkan domain:

Dashboard & Beranda: beranda-admin, beranda-all, beranda-barang-urgent, beranda-booking-kedatangan, beranda-cek-gudang, beranda-cek-qc, beranda-dn, beranda-gudang, beranda-kedatangan, beranda-monitoring-outstanding, beranda-ncr, beranda-ncr-produksi, beranda-qc, beranda-retur-barang, beranda-schedule-testing, beranda-supplier, beranda-supplier-ng, beranda-supplier-retur.

Master Data: master-barang, master-jenis-ng, master-kategori-barang, master-stok, master-supplier, master-supplier-outstanding-po, master-user.

Transaksi Barang & Gudang: barang-import, barang-receiving, barang-urgent, kedatangan-barang, pengecekan-gudang, booking-kedatangan.

Quality (QC/QA/NCR): ncr, ncr-produksi, ncr-vehicle, pengecekan-qc, pengecekan-qcc, quality, sortir-approval, customer-claim, schedule-testing.

Outstanding & Monitoring: outsanding-po, outstanding-barang-supplier, outstanding-dn, outstanding-history-dn, outstanding-kapasitas, outstanding-memo-tarik, outstanding-performance, outstanding-stock, outstanding-summary, feedback-monitoring-outstanding, feedback-memo-tarik, history-memo-tarik.

Approval & Admin: adjustment-approval, approval-pending, approve-btb, master-approval, proc-approve, upload-ttd.

5R/Safety: 5s-all-findings, 5s-area, 5s-closed, 5s-confirm, 5s-create, 5s-dashboard, 5s-dept, 5s-employee, 5s-findings-dept, 5s-historical, 5s-my-findings, 5s-my-profile, 5s-pengumuman-penilaian, 5s-penilaian, 5s-report.

Supplier & Vendor: btb, checkin-checkout, dn, vendor-development, bopofc, cycle, machine-capacity.

Auth & System: login, logout, register, reset-password, not-found, profile, notifikasi, purchase-request.

Vite Config link

  export default defineConfig({
  plugins: [react(), basicSsl()],
  base: "/fscm/",
  server: { port: 5173, host: "0.0.0.0" },
  build: {
    rollupOptions: {
      plugins: [javascript_obfuscator({...})] // Obfuskasi kode produksi
    }
  }
});