Home

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• SUMMARY.md
• backend/main.py
• frontend/src/components/DocumentationView.tsx
• DASHBOARD_README.md
• QUICKSTART.md
• generate_excel_level.py
• backend/topsis_service.py

The SPK Kajek project is a Decision Support System (DSS) designed to assist PT Kajek Indonesia in selecting the optimal Cloud VPS (Virtual Private Server). It employs the TOPSIS (Technique for Order Preference by Similarity to Ideal Solution) method to rank server alternatives based on a set of predefined criteria. The system features a modern, interactive web dashboard for data visualization, analysis, and management.

The application is built with a decoupled frontend and backend. The frontend is a Single Page Application (SPA) developed with React and TypeScript, providing a responsive and dynamic user experience. The backend is a REST API built with Python and FastAPI, handling the core TOPSIS calculations, data management, and user authentication.

Sources: README.md:11-15, SUMMARY.md:7-8, frontend/src/components/DocumentationView.tsx:18-23

System Architecture

The project follows a modern client-server architecture, separating the user interface (frontend) from the business logic and data layer (backend). The frontend communicates with the backend via a REST API over HTTP, exchanging data in JSON format. The data persistence layer uses a combination of an Excel file for vendor data and JSON files for user accounts and calculation history.

Sources: SUMMARY.md:10-48, backend/main.py:22-25

The diagram below illustrates the high-level architecture of the system.

Core Technology Stack

The system is built using a combination of modern web technologies for the frontend and a robust Python stack for the backend.

Frontend Technologies

Technology	Purpose
React 18	UI Framework for building the Single Page Application (SPA)
TypeScript	Adds static typing to JavaScript for improved code quality
Vite	Build tool and development server for fast performance
Tailwind CSS	A utility-first CSS framework for styling
Framer Motion	Library for creating fluid animations
Recharts	Composable charting library for data visualization
Axios	HTTP client for making API requests to the backend
Three.js	3D graphics library for advanced visualizations

Sources: SUMMARY.md:151-160, DASHBOARD_README.md:6-15

Backend Technologies

Technology	Purpose
FastAPI	High-performance Python web framework for building REST APIs
Python 3.8+	Core programming language for the backend
Pandas	Data manipulation and analysis library
OpenPyXL	Library for reading and writing Excel files (.xlsx)
Pydantic	Data validation and settings management
python-jose (JWT)	Implements JSON Web Tokens for user authentication

Sources: SUMMARY.md:162-170, backend/main.py

The TOPSIS Method

TOPSIS is the core analytical engine of this DSS. It selects the best alternative by identifying the one that is closest to the "ideal positive" solution and farthest from the "ideal negative" solution.

Sources: README.md:11, frontend/src/components/DocumentationView.tsx:20-23

Calculation Flow

The TOPSIS algorithm is implemented as a series of sequential steps, from the initial data matrix to the final ranking score.

Criteria & Level System

The system evaluates VPS providers based on four key criteria. CPU, RAM, and Disk I/O are "benefit" criteria (higher is better), while Harga (Price) is a "cost" criterion (lower is better). Each criterion is assigned a level from 1 to 5, which is then converted into a standardized numerical value for calculation.

Criteria	Type	Default Weight
CPU	Benefit	25%
RAM	Benefit	25%
Disk I/O	Benefit	25%
Harga	Cost	25%

Sources: SUMMARY.md:140-147, README.md:69-71

The mapping from levels to standard values is as follows:

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: README.md:75-125, backend/main.py:372-376, generate_excel_level.py:30-55

Data Management

The application's data is stored in local files, managed by the FastAPI backend.

• Vendor Data: TOPSIS_Input_Level.xlsx contains the list of VPS providers and their specifications, using the level system.
• User Accounts: users.json stores user credentials, including hashed passwords.
• Calculation History: calculation_history.json logs the results of past TOPSIS analyses.

Sources: backend/main.py:22-25, SUMMARY.md:41-44

This diagram shows the entities and their relationships.

API and Authentication

Access to the system is secured via a JWT-based authentication flow. User passwords are not stored in plaintext; they are hashed using the PBKDF2-HMAC-SHA256 algorithm.

Sources: backend/main.py:81-98, 169-206, frontend/src/components/DocumentationView.tsx:77-85

Login Flow

The sequence diagram below shows the user authentication process.

Key API Endpoints

The backend exposes several endpoints for the frontend to consume.

Method	Endpoint	Description
POST	/api/login	Authenticates a user and returns a JWT token.
GET	/api/data	Retrieves all vendor data from the Excel file.
POST	/api/data	Adds a new vendor to the dataset.
PUT	/api/data/{vendor_no}	Updates an existing vendor's data.
DELETE	/api/data/{vendor_no}	Deletes a vendor from the dataset.
POST	/api/calculate	Runs the TOPSIS calculation with given weights.
POST	/api/calculate-detail	Returns step-by-step matrices for the TOPSIS calculation.
GET	/api/history	Retrieves the list of saved calculation histories.
POST	/api/history	Saves a new calculation result to the history.
GET	/api/profile	Gets the current authenticated user's profile.
PUT	/api/profile	Updates the current user's profile information.
POST	/api/change-password	Changes the current user's password.

Sources: backend/main.py, SUMMARY.md:89-102

Application Views

The user interface is organized into several distinct views, accessible via the sidebar navigation.

View	Component	Description
Dashboard	DashboardView.tsx	The main landing page with an overview, statistics, and a "scrollytelling" guide.
Analysis	AnalysisView.tsx	Allows users to configure criteria weights, execute the TOPSIS analysis, and view results.
Calculation	CalculationView.tsx	Displays the step-by-step matrices of the TOPSIS calculation for transparency.
Data	DataView.tsx	Provides a full data table with CRUD (Create, Read, Update, Delete) operations for vendors.
History	HistoryView.tsx	Shows a log of past calculations, allowing for trend analysis and comparison.
Settings	SettingsView.tsx	Enables users to manage their profile and change their password.
Documentation	DocumentationView.tsx	An in-app documentation page explaining the system's features and logic.

Sources: SUMMARY.md:63-75, README.md:200-229, DASHBOARD_README.md:120-176

Quick Start

The application can be launched using a single script or by running the frontend and backend servers manually in separate terminals.

1. Prerequisites: Node.js 18+, Python 3.8+, and pip.
2. Installation: Clone the repository, then run pip install -r requirements.txt in the backend directory and npm install in the frontend directory.
3. Execution:
   • Recommended: Run the ./start.sh script from the project root.
   • Manual:
     • In one terminal, run uvicorn main:app --reload from the backend directory.
     • In a second terminal, run npm run dev from the frontend directory.
4. Access: The application will be available at http://localhost:5173.

Sources: QUICKSTART.md:11-70, README.md:128-180