Skip to main content

📋 PREXITION

Aplikasi: Premix Intelligent Formulation (PREXITION)
Perusahaan: PT Global Vita Nutritech Indonesia
Tipe Project: Frontend React Web Application
Versi: 3.9.3
Tim Product Terkait: Debby Tantika Ardi
Tanggal Dokumentasi: Januari 2026

📑 Daftar Isi​

  1. Overview Project
  2. Tech Stack & Dependencies
  3. Struktur Folder Project
  4. Setup & Running Project
  5. Environment Variables
  6. Architecture & Pattern
  7. Key Components & Features
  8. API Integration
  9. State Management
  10. Routing & Navigation
  11. Authentication & Authorization
  12. Build & Deployment
  13. Development Guidelines
  14. Common Issues & Troubleshooting
  15. Dokumentasi & Resources

🔗 Akses Aplikasi​

Berikut adalah alamat akses cepat untuk environment aplikasi:

EnvironmentURL AksesDeskripsi
🚀 Productionhttps://prexition.gvn.co.idEnvironment utama pengguna
🧪 Developmenthttps://prexitiondev.gvn.co.idTesting & staging area
⚙️ Hangfirehttps://prexitionapi.gvn.co.id/hangfireDashboard Background Jobs

Overview Project​

Deskripsi​

PREXITION adalah aplikasi web frontend yang dibangun dengan React + TypeScript untuk mengelola Premix Intelligent Formulation. Aplikasi ini menangani:

  • 📊 Dashboard & Reporting
  • 🏭 Master Data Management (Items, Formula, Nutrition, dll)
  • 💼 Transaksi Bisnis (Product Costing, Scale Up Formula, dll)
  • 🔧 Sistem Konfigurasi & Parameter
  • 👥 User Management & Role-Based Access Control

Target Users​

  • Product Formulation Specialists
  • Supply Chain Managers
  • System Administrators
  • Finance/Cost Management Teams

Lifecycle Status​

  • Status: Production (v3.9.3)
  • Browser Support: Modern browsers (Chrome, Firefox, Safari, Edge)
  • Responsive: Mobile-friendly dengan PWA support

Tech Stack & Dependencies​

Framework & Language​

├── React 18.2.0          → UI Library
├── TypeScript 5.2.2      → Type-safe JavaScript
├── Vite 7.2.2            → Build tool & Dev server
└── React Router 7.9.6    → Client-side routing

UI & Styling​

├── Material-UI (MUI) 7.3.5      → Component library
├── Styled Components 6.1.17     → CSS-in-JS styling
├── Emotion 11.14.0              → CSS-in-JS framework
├── Bootstrap 5.3.2              → Utility classes
├── SASS 1.94.0                  → CSS preprocessing
└── Iconify 4.1.1                → Icon library

State Management & Data​

├── MobX 6.12.0           → Reactive state management
├── MobX-React-Lite 4.0.5 → React bindings untuk MobX
├── MobX-Cookie 4.0.5     → Cookie integration
└── LocalForage 1.10.0    → Local storage management

Form & Validation​

├── Formik 2.4.5          → Form state management
├── Yup 1.3.3             → Schema validation
└── React Number Format   → Number formatting

API & HTTP​

├── Axios 1.6.7           → HTTP client
└── Crypto-JS 4.2.0       → Encryption utilities

Utility Libraries​

├── React-PDF 10.2.0      → PDF rendering
├── Date-FNS 3.3.1        → Date utilities
├── Moment 2.30.1         → Date manipulation
├── i18next 23.8.2        → Internationalization
├── UUID 9.0.1            → ID generation
├── SweetAlert2 11.6.13   → Alert dialogs
└── React-Toastify 10.0.4 → Toast notifications

PWA & Performance​

├── vite-plugin-pwa 1.1.0 → Progressive Web App
└── NProgress 0.2.0       → Progress bar

Struktur Folder Project​

prexitionfrontend/
│
├── 📄 Konfigurasi Project
│   ├── package.json              → Dependencies & scripts
│   ├── tsconfig.json             → TypeScript config
│   ├── tsconfig.node.json        → Node TS config
│   ├── vite.config.ts            → Vite configuration
│   ├── index.html                → Entry HTML
│   ├── Dockerfile                → Docker config
│   ├── Jenkinsfile               → CI/CD pipeline
│   └── README.md                 → Basic readme
│
├── 📂 public/                    → Static assets
│   ├── pdf.worker.mjs            → PDF worker
│   ├── Fonts/                    → Custom fonts
│   ├── icons/                    → App icons (Android, iOS, Windows)
│   └── images/                   → Static images
│       ├── avatars/              → User avatars
│       ├── captcha/              → Captcha images
│       ├── customizer/           → Theme customizer
│       ├── pages/                → Page backgrounds
│       └── screenshots/          → Screenshots
│
└── 📂 src/                       → SOURCE CODE
    │
    ├── 📄 main.tsx               → React entry point
    ├── 📄 env.d.ts               → Environment type definitions
    ├── 📄 vite-env.d.ts          → Vite type definitions
    │
    ├── 📂 app/                   → Application core
    │   │
    │   ├── 📂 api/
    │   │   └── agent.ts          → API client & requests
    │   │
    │   ├── 📂 common/            → Shared utilities
    │   │   ├── Constant.ts       → App constants
    │   │   ├── config/
    │   │   │   └── pdfConfig.ts  → PDF configuration
    │   │   ├── helpers/          → Utility functions
    │   │   │   ├── BatchName.ts  → Format Batching Name
    │   │   │   ├── Crypto.ts     → Encryption/decryption
    │   │   │   ├── Currency.ts   → Currency formatting
    │   │   │   ├── ErrorHandler.ts → Form BE Error Handler
    │   │   │   └── UomConversion.ts → UOM Conversion
    │   │   └── Lov/              → List of Values
    │   │       └── types.ts
    │   │
    │   ├── 📂 components/        → Reusable components
    │   │   ├── Captcha/          → Captcha component
    │   │   ├── dashboard/        → Dashboard components
    │   │   ├── Form/             → Form-related components
    │   │   ├── Master/           → Master data components
    │   │   │   └── Formula/
    │   │   ├── PDFTemplate/      → PDF templates
    │   │   ├── shared/           → Shared components
    │   │   └── Transaction/      → Transaction components
    │   │
    │   ├── 📂 core/              → Core functionality
    │   │   ├── components/       → Layout components
    │   │   ├── configs/          → App configurations
    │   │   ├── context/          → React Context providers
    │   │   ├── hooks/            → Custom React hooks
    │   │   ├── layouts/          → Layout wrappers
    │   │   ├── theme/            → MUI theme configuration
    │   │   └── utils/            → Core utilities
    │   │
    │   ├── 📂 hooks/             → Custom hooks
    │   │
    │   ├── 📂 layout/            → Main layouts
    │   │   ├── App.tsx           → Root layout
    │   │   ├── BlankLayout.tsx   → Blank/Minimal layout
    │   │   ├── UserLayout.tsx    → User dashboard layout
    │   │   ├── UserThemeOptions.ts
    │   │   └── components/       → Layout sub-components
    │   │
    │   ├── 📂 models/            → TypeScript types/interfaces
    │   │   ├── clsGlobalAPIModel.ts
    │   │   ├── DatatableModel.ts
    │   │   ├── ErrorModel.ts
    │   │   ├── GeneralModel.ts
    │   │   ├── menuModel.ts
    │   │   ├── ParameterModel.ts
    │   │   ├── ProgramModel.ts
    │   │   ├── roleModel.ts
    │   │   ├── systemAPIModel.ts
    │   │   ├── userModel.ts
    │   │   ├── ValidityRuleModel.ts
    │   │   ├── Dashboard/
    │   │   ├── master/           → Master data models
    │   │   ├── Oracle/           → Oracle-specific models
    │   │   └── Transaction/      → Transaction models
    │   │
    │   ├── 📂 router/            → Route definitions
    │   │   ├── AuthRoute.tsx     → Protected routes
    │   │   └── Routes.tsx        → Route configuration
    │   │
    │   ├── 📂 stores/            → MobX stores (State Management)
    │   │   ├── authStore.ts      → Authentication state
    │   │   ├── CommonStore.ts    → Shared state
    │   │   ├── DashboardStore.ts
    │   │   ├── GeneralStore.ts
    │   │   ├── LovStore.ts       → List of Values store
    │   │   ├── store.ts          → Root store
    │   │   ├── ValidityRuleStore.ts
    │   │   ├── master/           → Master data stores
    │   │   ├── oracle/           → Oracle stores
    │   │   ├── system/           → System stores
    │   │   └── transaction/      → Transaction stores
    │
    ├── 📂 assets/                → Asset files (images, icons)
    │
    ├── 📂 features/              → Feature pages
    │   ├── Home.tsx              → Home page
    │   ├── 📂 authentication/    → Login & role selection
    │   │   ├── ChoseRole.tsx
    │   │   └── login.tsx
    │   ├── 📂 errors/           → Error pages
    │   ├── 📂 master/           → Master data features
    │   │   ├── Approval/
    │   │   ├── Customer/
    │   │   ├── Distributor/
    │   │   ├── Formula/
    │   │   ├── Items/
    │   │   ├── MaterialPrice/
    │   │   ├── Nutrition/
    │   │   ├── NutritionItem/
    │   │   ├── NutritionType/
    │   │   ├── OtherVarCost/
    │   │   ├── ParameterConversion/
    │   │   └── ProductionType/
    │   ├── 📂 misc/             → Miscellaneous pages
    │   │   ├── 404.tsx
    │   │   ├── BadGatewayPage.tsx
    │   │   └── NotAuthorizedPage.tsx
    │   ├── 📂 system/           → System configuration
    │   │   ├── systemConfig.tsx
    │   │   └── Parameter/
    │   └── 📂 transaction/      → Transaction features
    │       ├── inquiry/
    │       ├── ProductCosting/
    │       ├── ProductDataSheet/
    │       ├── ScaleUpFormula/
    │       └── Spec/
    │
    ├── 📂 styles/               → Global styles
    │   ├── fonts.css            → Font definitions
    │   └── globals.css          → Global CSS
    │
    └── 📂 dev-dist/             → Build output (generated)
        └── Service Worker files

Setup & Running Project​

Prerequisites​

  • Node.js: v16+ (recommended v18 LTS)
  • yarn v1.22+
  • Git: untuk version control

Installation​

# Clone repository
git clone <repository-url>
cd prexitionfrontend

# Install dependencies
yarn install

# Jalankan Development Server
yarn dev

# Build untuk Production
yarn build

# Preview hasil Build secara lokal
yarn preview

# Server akan running di: http://localhost:3002

Available Scripts​

CommandDeskripsi
yarn devJalankan dev server (port 3002)
yarn dev:productionDev mode dengan NODE_ENV=production
yarn buildBuild untuk production
yarn lintESLint checking
yarn previewPreview production build

Environment Variables​

File Konfigurasi​

Buat file .env di root project dengan variabel berikut:

# ===== API & WSO Configuration =====
VITE_USERNAME=<username-untuk-wso>
VITE_PASSWORD=<password-untuk-wso>
VITE_WSO_URL=https://prexition-wso.example.com
VITE_API_URL=https://prexitionapidev.gvn.co.id
VITE_SECRET=<secret-key-untuk-encryption>

# ===== Parameter IDs (untuk LOV) =====
VITE_ID_ITEM_TEMPLATE=<id>
VITE_ID_TYPE=<id>
VITE_ID_STATUS=<id>
VITE_ID_UOM=<id>
VITE_ID_LIST_STATUS=<id>
VITE_ID_CONTEXT=<id>
VITE_ID_ORGANIZATIO=<id>
VITE_ID_COSTTYPE=<id>
VITE_ID_LOVSHPNONSHP=<id>
VITE_ID_LOVFLUSHING=<id>

### Cara Mengakses di Code
```typescript
// Import dari vite
const apiUrl = import.meta.env.VITE_API_URL;
const secret = import.meta.env.VITE_SECRET;

Architecture & Pattern​

Architecture Overview​

┌─────────────────────────────────────────┐
│         React Components (UI)           │
├─────────────────────────────────────────┤
│    State Management (MobX Stores)       │
├─────────────────────────────────────────┤
│      API Integration (Axios)            │
├─────────────────────────────────────────┤
│   Backend API (RESTAPI) with .NET Core  │
└─────────────────────────────────────────┘

Design Patterns​

1. Component Pattern​

  • Functional Components: Semua component menggunakan React Hooks
  • Custom Hooks: Diletakkan di src/app/hooks/ dan src/app/core/hooks/
  • Reusable Components: Umum digunakan components di src/app/components/shared/

2. State Management (MobX)​

// Contoh MobX Store
class AuthStore {
  @observable isLoggedIn = false;
  
  @action
  async login(username: string, password: string) {
    // Login logic
  }
  
  @computed
  get isAuthenticated() {
    return this.isLoggedIn;
  }
}

// Usage di component
import { useLocalObservable } from 'mobx-react-lite';

3. Folder Structure per Feature​

Setiap feature (master, transaction, dll) memiliki struktur:

Feature/
├── components/       → Components spesifik feature
├── store.ts          → State management
├── models/           → TypeScript types
├── api.ts            → API calls
└── index.tsx         → Main page/component

4. API Integration Pattern​

// src/app/api/agent.ts
export const api = {
  // Master Data
  master: {
    getItems: () => axiosInstance.get('/api/items'),
    createItem: (data) => axiosInstance.post('/api/items', data),
  },
  // Transactions
  transaction: {
    getProductCosting: (id) => axiosInstance.get(`/api/costing/${id}`),
  },
};

Key Components & Features​

Dashboard​

  • File: src/features/Home.tsx, src/app/components/dashboard/
  • Deskripsi: Main dashboard dengan statistik dan overview
  • Components: GridStatistic, Charts, KPI cards

Master Data Management​

Modules untuk mengelola master data:

ModuleFolderFungsi
Itemsmaster/Items/CRUD item/produk
Formulamaster/Formula/Manajemen formula produk
Nutritionmaster/Nutrition/Data nutrisi
Customermaster/Customer/Data pelanggan
Distributormaster/Distributor/Data distributor
MaterialPricemaster/MaterialPrice/Harga material
Approvalmaster/Approval/Workflow approval

Transaction Modules​

Modules untuk transaksi bisnis:

ModuleFolderFungsi
Product Costingtransaction/ProductCosting/Perhitungan cost produk
Scale Up Formulatransaction/ScaleUpFormula/Scale up resep formula
Product Data Sheettransaction/ProductDataSheet/Data sheet produk
Specificationtransaction/Spec/Spesifikasi produk
Inquirytransaction/inquiry/Pencarian data

Form Components​

  • Location: src/app/components/Form/
  • Menggunakan: Formik + Yup validation
  • Pattern: Controlled components dengan validation real-time

PDF Features​

  • Library: @react-pdf/renderer, react-pdf
  • Config: src/app/common/config/pdfConfig.ts
  • Templates: src/app/components/PDFTemplate/

API Integration​

API Client Setup​

File: src/app/api/agent.ts

// Axios instance dengan interceptors
const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 30000,
});

// Request interceptor (add auth token, encryption, etc)
axiosInstance.interceptors.request.use(config => {
  // Add headers, tokens
  return config;
});

// Response interceptor (handle errors)
axiosInstance.interceptors.response.use(
  response => response,
  error => {
    // Handle errors globally
    return Promise.reject(error);
  }
);

Proxy Configuration​

File: vite.config.ts

server: {
  proxy: {
    "/api": {
      target: "https://prexitionapidev.gvn.co.id",
      changeOrigin: true,
    },
    "/gateway": "https://apim.kalbenutritionals.com:8243",
  }
}

Error Handling​

  • Helper: src/app/common/helpers/ErrorHandler.ts
  • Toast Notifications: react-toastify
  • Alert Dialogs: sweetalert2

State Management​

MobX Stores Architecture​

Root Store: src/app/stores/store.ts

export class RootStore {
  authStore: AuthStore;
  commonStore: CommonStore;
  dashboardStore: DashboardStore;
  masterStore: MasterStore;
  transactionStore: TransactionStore;
  
  constructor() {
    // Initialize stores
  }
}

Store Usage di Components​

// 1. Create store instance
const rootStore = new RootStore();

// 2. Use di component
const MyComponent = observer(() => {
  const { authStore } = rootStore;
  
  return <div>{authStore.userName}</div>;
});

// 3. Actions untuk update state
authStore.setUserData(userData);

Store Files​

stores/
├── store.ts                    → Root store
├── authStore.ts               → Authentication state
├── CommonStore.ts             → Common/shared state
├── DashboardStore.ts          → Dashboard data
├── GeneralStore.ts            → General app state
├── LovStore.ts                → List of Values
├── ValidityRuleStore.ts       → Validation rules
├── master/                    → Master data stores
├── oracle/                    → Oracle integration
├── system/                    → System configuration
└── transaction/               → Transaction stores

Routing & Navigation​

Route Configuration​

File: src/app/router/Routes.tsx

const routes = [
  {
    path: '/',
    element: <UserLayout />,
    children: [
      { path: 'dashboard', element: <Home /> },
      { path: 'master/items', element: <Items /> },
      { path: 'master/formula', element: <Formula /> },
      // ... more routes
    ]
  },
  {
    path: '/login',
    element: <BlankLayout />,
    children: [
      { path: '', element: <LoginPage /> },
    ]
  },
  // ... catch all
];

Protected Routes​

File: src/app/router/AuthRoute.tsx

// Component yang melindungi akses berdasarkan authentication
<AuthRoute>
  <ProtectedPage />
</AuthRoute>
// Menggunakan React Router
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate('/dashboard');

Authentication & Authorization​

Authentication Flow​

Login Page
    ↓
Validate Credentials (WSO)
    ↓
Get JWT Token
    ↓
Store Token (Cookie/LocalStorage)
    ↓
Fetch User Data & Roles
    ↓
Select Role (ChoseRole page)
    ↓
Redirect to Dashboard

Authentication Store​

File: src/app/stores/authStore.ts

class AuthStore {
  @observable
  isLoggedIn = false;
  
  @observable
  currentUser: User | null = null;
  
  @action
  async login(username: string, password: string) {
    // Call WSO API
    // Store token
  }
  
  @action
  logout() {
    // Clear token & user data
  }
}

Permission Checking​

// User roles dan permissions disimpan di authStore
// Permission check dilakukan di component atau route level
if (userRole === 'ADMIN') {
  // Show admin features
}

Build & Deployment​

Development Build​

yarn build

Output: dist/ folder dengan production-ready files

Build Optimization​

  • Tree-shaking: TypeScript & Vite sudah enable
  • Code Splitting: React Router lazy loading
  • Asset Optimization: Vite automatic optimization

Docker Deployment​

File: Dockerfile

FROM node:18-alpine AS builder
# Build stage

FROM nginx:alpine AS runtime
# Runtime dengan nginx

Build & Run:

docker build -t prexition:latest .
docker run -p 3002:80 prexition:latest

CI/CD Pipeline​

File: Jenkinsfile

Pipeline steps:

  1. Clone repository
  2. Install dependencies
  3. Build application
  4. Run tests & linting
  5. Deploy to staging/production

Environment-specific Config​

# Development
yarn dev

# Production
yarn dev:production
yarn build

Development Guidelines​

Coding Standards​

TypeScript​

// ✅ DO: Type everything
interface UserProps {
  id: string;
  name: string;
  email: string;
}

const User: React.FC<UserProps> = ({ id, name, email }) => {
  return <div>{name}</div>;
};

// ❌ DON'T: Any types
const User = ({ id, name }: any) => {
  return <div>{name}</div>;
};

Component Structure​

// 1. Imports
import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';

// 2. Types/Interfaces
interface Props {
  title: string;
  onSubmit: (data: any) => void;
}

// 3. Component
const MyComponent = observer(({ title, onSubmit }: Props) => {
  // Hooks
  const [count, setCount] = useState(0);
  
  // Event handlers
  const handleClick = () => {
    setCount(count + 1);
  };
  
  // Render
  return <div onClick={handleClick}>{title}: {count}</div>;
});

export default MyComponent;

Form Components (Formik + Yup)​

import * as Yup from 'yup';
import { Formik, Form, Field } from 'formik';

const validationSchema = Yup.object({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6).required('Required'),
});

const MyForm = () => (
  <Formik
    initialValues={{ email: '', password: '' }}
    validationSchema={validationSchema}
    onSubmit={(values) => {
      // Submit logic
    }}
  >
    {({ errors, touched }) => (
      <Form>
        <Field name="email" type="email" />
        {errors.email && touched.email && <span>{errors.email}</span>}
        {/* More fields */}
      </Form>
    )}
  </Formik>
);

Naming Conventions​

TypeConventionExample
ComponentsPascalCaseUserList.tsx, FormDialog.tsx
FunctionscamelCasefetchUserData(), handleClick()
VariablescamelCaseuserData, isLoading
ConstantsUPPER_SNAKE_CASEAPI_TIMEOUT, MAX_RETRIES
InterfacesPascalCase with IIUser, IApiResponse
Fileskebab-case or PascalCaseuser-list.ts, UserList.tsx

File Organization per Feature​

Feature/
├── index.tsx               → Main component/page
├── Feature.tsx             → Main logic
├── Feature.styles.ts       → Styled components
├── Feature.types.ts        → TypeScript interfaces
├── Feature.constants.ts    → Constants
├── Feature.utils.ts        → Utility functions
├── components/             → Sub-components
│   └── SubComponent.tsx
├── hooks/                  → Custom hooks
│   └── useFeature.ts
└── store.ts               → MobX store

Error Handling Best Practices​

try {
  const response = await api.fetchData();
  handleSuccess(response);
} catch (error) {
  const errorMessage = error instanceof AxiosError
    ? error.response?.data?.message
    : error.message;
  
  toast.error(errorMessage);
  console.error('Error details:', error);
}

Comments & Documentation​

/**
 * Formats currency value to IDR format
 * @param value - Numeric value to format
 * @param decimals - Number of decimal places (default: 2)
 * @returns Formatted currency string
 * @example
 * formatCurrency(1000000) // "Rp1.000.000,00"
 */
export const formatCurrency = (
  value: number,
  decimals: number = 2
): string => {
  // Implementation
};

🏗 Menambahkan LOV Baru (Step-by-Step)​

Ikuti langkah-langkah berikut untuk mengintegrasikan dataset LOV baru ke dalam sistem:

  1. Definisikan API Request Buka src/app/api/agent.ts dan buat fungsi request baru di dalam kategori yang sesuai (misal: Oracle atau Master).

    // src/app/api/agent.ts
    const Oracle = {
        // ... request lainnya
        codeshp: (params: URLSearchParams) => requests.get('/oracle/codeshp', params),
    };

  2. Update LovOfName Type Tambahkan identifier unik untuk LOV baru Anda pada file tipe global agar dikenal oleh sistem TypeScript.

    // src/app/common/lov/types.ts
    export type LovOfName = "codeshp" | "item" | "akasia" | "specApproved";

  3. Konfigurasi LovStore (Fetch Logic) Buka LovStore.ts, cari fungsi fetch, dan tambahkan case baru di dalam blok switch untuk mengarahkan nama LOV ke API request yang telah dibuat di langkah 1.

    // src/app/stores/LovStore.ts
    switch(nameoflov) {
        case "codeshp":
            response = await agent.Oracle.codeshp(param) as DatatableResponse<T[]>;
            break;
        // Tambahkan case lainnya di sini
    }

  4. Registrasi Store di Root Store Daftarkan instance LovStore baru di store.ts dengan menyertakan interface model data yang sesuai agar mendapatkan dukungan type-safety.

    // src/app/stores/store.ts
    export class RootStore {
        // ... store lainnya
        lovStoreAkasia: new LovStore<AkasiaModel>(),
        LOVScaleUpAFGU: new LovStore<ScaleUpFormulaLovDTO>(),
        LOVSpecApproved: new LovStore<SpecApprovedModel>(),
    }

  5. Update Shared Component LOV Langkah terakhir adalah mendaftarkan store baru tersebut ke dalam komponen UI agar bisa digunakan di form. Edit file di src/app/components/shared/Lov/index.tsx.

    a. Ambil store dari context:

    const { lovStoreAkasia, LOVSpecApproved } = useStore();

    b. Mapping Nama ke Store: Tambahkan mapping pada const currentStore di dalam useMemo agar komponen tahu store mana yang harus digunakan berdasarkan properti name.

      const currentStore = useMemo(() => {
        const storeMap: Record<LovOfName, LovStore<any>> = {
            item: lovStoreItems,
            akasia: lovStoreAkasia,
            codeshp: lovStoreCodeShp,
            specApproved: LOVSpecApproved, // Mapping identifier ke instance store
        };
        return storeMap[props.name];
    }, [props.name, ...]);

  6. Contoh Implementasi di UI (Page/Feature) Setelah mendaftarkan LOV di store, gunakan komponen <Lov /> pada file fitur Anda. Komponen ini sudah terintegrasi dengan Material-UI (MUI) DataGrid dan mendukung pencarian otomatis. Contoh Penggunaan:

    <Lov
      // Identifier unik untuk row data (biasanya GUID dari database)
      rowId={(row) => row.txtGUID}
      // State untuk mengontrol buka/tutup modal
      open={state.aliasModal} 
      // Handler untuk menutup modal
      setShow={() => setState(prev => ({ ...prev, aliasModal : false }))}
      // Nama LOV yang sudah didaftarkan di LovOfName & LovStore
      lovName="codeshp"
      // Callback saat user memilih item dari tabel
      setSelect={(item: any) => {
          setFieldValue('txtItemCodeAlias', item.ItemCode);
      }}
      // Definisi kolom DataGrid yang akan ditampilkan di dalam modal
      columns={[
          { 
              field: 'ItemCode', 
              headerName: 'Item Code',
              minWidth: 140,
          },
          { 
              field: 'Description', 
              headerName: 'Description',
              minWidth: 350,
          },
          { 
              field: 'ItemType', 
              headerName: 'Type',
              minWidth: 160,
          },
      ]}
    />
    PropTipeDeskripsi
    lovNameLovOfNameKey identifier yang menghubungkan komponen dengan instance store & API terkait.
    rowIdfunctionFungsi untuk menentukan primary key dari data (penting untuk seleksi row DataGrid).
    openbooleanState boolean untuk visibilitas modal (biasanya dipicu dari klik button/input).
    setSelectfunctionLogic yang dijalankan setelah user memilih data (misal: setFieldValue pada Formik).
    columnsarrayKonfigurasi kolom MUI DataGrid (header, field, width).

Common Issues & Troubleshooting​

Issue 1: Dev Server tidak bisa diakses​

Masalah: http://localhost:3002 tidak bisa dibuka
Solusi:
1. Pastikan port 3002 tidak digunakan program lain
2. Ubah port di vite.config.ts jika port sudah digunakan
3. Gunakan --host flag: yarn dev -- --host

Issue 2: API Proxy tidak bekerja​

Masalah: API calls return 404 atau CORS error
Solusi:
1. Verifikasi proxy config di vite.config.ts
2. Pastikan target URL benar dan accessible
3. Check environment variables di .env
4. Lihat browser console untuk error details

Issue 3: MobX store tidak terupdate​

Masalah: Component tidak re-render saat store berubah
Solusi:
1. Pastikan component wrapped dengan observer()
2. Gunakan @observable untuk state
3. Gunakan @action untuk mutations
4. Verifikasi import path dan store initialization

Issue 4: Build fails dengan TypeScript errors​

Masalah: npm run build gagal dengan TS errors
Solusi:
1. Run: npm run lint untuk melihat error details
2. Fix type definitions di model files
3. Pastikan semua imports benar
4. Check tsconfig.json settings

Issue 5: Environment variables tidak terbaca​

Masalah: import.meta.env.VITE_* return undefined
Solusi:
1. Nama variabel harus diawali VITE_
2. Pastikan .env file ada di root folder
3. Restart dev server setelah update .env
4. Check: console.log(import.meta.env) untuk debugging

Issue 6: PWA tidak bisa install​

Masalah: Service worker registration fails
Solusi:
1. Verifikasi vite-plugin-pwa config
2. Build project: npm run build
3. Check console.log untuk registration errors
4. PWA hanya bekerja di HTTPS (production)

Issue 7: MobX State tidak Re-render​

Masalah: Component lupa dibungkus dengan observer.
Solusi:

import { observer } from 'mobx-react-lite';

const MyComponent = observer(() => {
  // logic...
});

Debugging Tips​

1. Browser DevTools​

- F12 atau Ctrl+Shift+I untuk buka DevTools
- Tab Console untuk JS errors
- Tab Network untuk API calls
- Tab Application > Storage untuk cookies/localStorage
- Tab Sources untuk set breakpoints

2. React DevTools​

- Install React DevTools extension
- Inspect components dalam component tree
- View props dan state
- Profile component performance

3. MobX DevTools​

- Install MobX DevTools extension
- Monitor store changes
- Time-travel debugging

4. Logging​

// Console logging
console.log('Debug:', variable);
console.error('Error:', error);
console.table(data); // Pretty print array/object

// Debugger breakpoint
debugger; // Will pause execution

Dokumentasi & Resources​

Internal Documentation​

External Resources​

React Ecosystem​

State Management​

UI Framework​

Form & Validation​

Tools & Build​

Utility Libraries​

PWA & Service Worker​

Migration & Upgrade Guide​

Updating Dependencies​

# Check outdated packages
npm outdated

# Update specific package
npm update package-name@latest

# Update all packages
npm update

# Security audit
npm audit fix

Support & Contact​

Tim Development​

  • Frontend Lead: Dana Mulyana
  • BackEnd Lead: Ilham Paqi Andriyansah

Issue Tracking​

  • GitHub
  • Dokumentasikan issue dengan clear steps to reproduce

Knowledge Base​

  • Discussion channel (Teams)

Change Log​

VersiTanggalChanges
3.0.02025Current version
2.x.x-Previous versions

Dokumen ini dibuat untuk memudahkan handover dan memastikan kontinuitas development.
Untuk update atau pertanyaan, silakan contact tim development.

Last Updated: Desember 2025 Dokumentasi Project PREXITION - PT Global Vita Nutritech Indonesia