Configuration
Relevant source files
The following files were used as context for generating this wiki page:Configuration for the SPK Kajek project is managed across both the frontend and backend, defining everything from the build process and styling to API behavior, security, and the core logic of the TOPSIS decision model. The system uses a combination of configuration files (e.g., .js, .ts, .json) for the application stack and hardcoded values within the source code for business logic parameters like data conversion maps and default credentials.
This separation allows for distinct configuration of the user interface, the server-side API, and the underlying decision-support data model. Key configurable aspects include frontend dependencies, styling themes, API security settings, and the mapping of qualitative criteria levels to quantitative values for TOPSIS calculations.
Backend Configuration
Sources: backend/main.py
The backend, built with FastAPI, has several key configuration areas managed within main.py. These include server behavior, security parameters, and file paths for data persistence.
API & Server
The FastAPI application is configured to handle Cross-Origin Resource Sharing (CORS) and defines constants for file-based data storage.
| Constant | Value | Description |
|---|---|---|
allow_origins | ["*"] | Allows requests from any origin, suitable for development. |
DATA_FILE | "TOPSIS_Input_Level.xlsx" | The primary Excel file for vendor data input. |
HISTORY_FILE | "calculation_history.json" | JSON file for storing past TOPSIS analysis results. |
USERS_FILE | "users.json" | JSON file for storing user accounts and credentials. |
| Sources: backend/main.py:16-19, 23-26 |
Security & Authentication
Authentication is managed using JSON Web Tokens (JWT) with specific security parameters. User passwords are not stored in plaintext; they are hashed using a strong algorithm.
The diagram below illustrates the JWT authentication flow.
Security Parameters:
| Parameter | Value | Description |
|---|---|---|
SECRET_KEY | your-secret-key-here... | The secret key for signing JWTs. Should be changed in production. |
ALGORITHM | "HS256" | The algorithm used for JWT signing. |
ACCESS_TOKEN_EXPIRE_MINUTES | 1440 (24 hours) | The validity period for an access token. |
| Password Hashing | PBKDF2-HMAC-SHA256 | Passwords are hashed with a salt and 100,000 iterations. |
| Default Username | admin | The default administrator username. |
| Default Password | admin123 | The default administrator password. |
| Sources: backend/main.py:29-31, 72-75, 110-111, frontend/src/components/DocumentationView.tsx:103-104 |
Frontend Configuration
The frontend is a React application built with Vite. Its configuration is defined in package.json, vite.config.ts, and tailwind.config.js.
Build & Development
Vite is used as the build tool and development server. The project scripts for running, building, and previewing the application are defined in package.json.
| Script | Command | Description |
|---|---|---|
dev | vite | Starts the development server. |
build | tsc && vite build | Type-checks with TypeScript and builds the application for production. |
preview | vite preview | Serves the production build locally for preview. |
| Sources: frontend/package.json:6-10, frontend/vite.config.ts |
The diagram below shows the frontend build process.
Dependencies
Key libraries and their roles are defined in package.json.
| Dependency | Purpose |
|---|---|
react | Core UI library. |
axios | HTTP client for making API requests. |
framer-motion | Animation library for UI effects. |
recharts | Charting library for data visualization. |
tailwindcss | Utility-first CSS framework for styling. |
three | 3D graphics library for Chart3D.tsx. |
lucide-react | Icon library. |
| Sources: frontend/package.json:22-33 |
Styling (Tailwind CSS)
Styling is managed by Tailwind CSS. The configuration in tailwind.config.js specifies which files to scan for utility classes and extends the default theme with custom colors for the application's dark mode.
// frontend/tailwind.config.js
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
dark: {
900: '#1a1f2e',
800: '#242b3d',
700: '#2d3548',
600: '#3d4556',
}
}
},
},
plugins: [],
}
Sources: frontend/tailwind.config.js:2-18
Custom Dark Theme Colors:
| Name | Hex Code | Usage |
|---|---|---|
dark-900 | #1a1f2e | Main background. |
dark-800 | #242b3d | Card backgrounds. |
dark-700 | #2d3548 | Elevated surfaces. |
dark-600 | #3d4556 | Borders and dividers. |
| Sources: frontend/tailwind.config.js:10-15 |
TOPSIS & Data Configuration
This is the core configuration for the decision support model, defining the criteria, weights, and data mappings used in the TOPSIS calculation.
Criteria & Weights
The system uses four criteria to evaluate VPS providers. Each has a type (Benefit or Cost) and a default weight.
| Criteria | Type | Default Weight |
|---|---|---|
| CPU | Benefit | 25% |
| RAM | Benefit | 25% |
| Disk I/O | Benefit | 25% |
| Harga (Price) | Cost | 25% |
| Sources: README.md:145-186, generate_excel_level.py:270-275 |
Additionally, the AnalysisView component defines several preset weight profiles to quickly switch between different analysis scenarios.
| Preset Name | CPU | RAM | Disk | Price |
|---|---|---|---|---|
| Performa Tinggi | 40% | 40% | 10% | 10% |
| Hemat Biaya | 10% | 10% | 10% | 70% |
| Seimbang | 25% | 25% | 25% | 25% |
| Storage Heavy | 10% | 20% | 60% | 10% |
| Sources: frontend/src/components/AnalysisView.tsx:142-147 |
Data Level Mapping
A key configuration is the conversion of abstract "Levels" (1-5) into concrete numerical values that can be used in the TOPSIS algorithm. This mapping is defined in the backend and in the Excel generation script.
This diagram shows how user-friendly levels are converted into numerical data for processing.
The following table details the specific mappings for each criterion:
| Level | CPU (Cores) | RAM (GB) | Disk I/O (MB/s) | Harga (USD) |
|---|---|---|---|---|
| 1 | 2 | 2 | 150 | 15 |
| 2 | 4 | 4 | 300 | 35 |
| 3 | 6 | 8 | 500 | 75 |
| 4 | 8 | 16 | 700 | 150 |
| 5 | 10 | 32 | 1000 | 250 |
| Sources: backend/main.py:421-424, 520-523, generate_excel_level.py:231-242, frontend/src/components/DocumentationView.tsx:257-269 |