Feature: Data Management (CRUD)

Relevant source files

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

• frontend/src/components/DataView.tsx
• backend/main.py
• generate_excel_level.py
• SUMMARY.md
• README.md
• DASHBOARD_README.md

The Data Management feature provides full Create, Read, Update, and Delete (CRUD) capabilities for the Cloud VPS vendor alternatives used in the TOPSIS decision support system. It enables users to manage the core dataset directly from the web interface, which then interacts with a backend API to persist changes to the primary data source, an Excel file.

This system is designed with a 2-way integration in mind, allowing data modifications either through the UI or by directly editing the source Excel file. The frontend component responsible for this functionality is DataView.tsx, which communicates with a set of dedicated API endpoints in the FastAPI backend.

Sources: README.md, SUMMARY.md, frontend/src/components/DataView.tsx

Architecture

The data management functionality follows a three-tier architecture, separating the presentation layer, business logic, and data storage.

• Frontend: A React component (DataView.tsx) that presents the data in a table and provides forms for adding, editing, and deleting vendor information.
• Backend: A FastAPI application (main.py) that exposes REST API endpoints to handle CRUD requests from the frontend.
• Data Layer: The primary source of truth is the TOPSIS_Input_Level.xlsx Excel file. The backend uses the pandas and openpyxl libraries to read from and write to this file.

Sources: SUMMARY.md, backend/main.py:22-23, frontend/src/components/DataView.tsx

This diagram illustrates the high-level architectural flow for data management.

Data Source and Model

The core data for the application is stored in an Excel file named TOPSIS_Input_Level.xlsx. This file contains the alternatives (vendors) and their criteria ratings in a level-based format (1-5).

Sources: README.md, backend/main.py:22, generate_excel_level.py

Excel File Structure

The data is primarily located in the 1. Input Level sheet. The structure is generated by the generate_excel_level.py script.

Column	Description	Data Type	Example
No	Unique identifier for the row.	Integer	1
Vendor	The name of the Cloud VPS provider.	String	DigitalOcean
Nama Paket (Plan)	The specific plan or package name.	String	Basic Droplet
CPU_Level	The performance level for CPU (1-5).	Integer	2
RAM_Level	The performance level for RAM (1-5).	Integer	2
DiskIO_Level	The performance level for Disk I/O (1-5).	Integer	3
Price_Level	The cost level for Price (1-5).	Integer	1

Sources: backend/main.py:291-293, generate_excel_level.py:126-143

Data Model

The backend API uses a Pydantic BaseModel to validate and structure the data for create and update operations.

This diagram shows the relationship between the API's data model and the Excel data source.

Backend API Endpoints

The FastAPI backend provides several endpoints in main.py to manage vendor data. These endpoints interact directly with the TOPSIS_Input_Level.xlsx file.

Sources: backend/main.py, SUMMARY.md

Method	Endpoint	Description	Request Body
GET	/api/data	Retrieves all vendor data from the Excel file.	N/A
POST	/api/data	Adds a new vendor to the Excel file.	VendorData
PUT	/api/data/{vendor_no}	Updates an existing vendor identified by its No.	VendorData
DELETE	/api/data/{vendor_no}	Deletes a vendor from the Excel file identified by its No.	N/A

Sources: backend/main.py:289, 304, 331, 356

VendorData Model

This Pydantic model is used for data validation in POST and PUT requests.

# File: backend/main.py:46-53

class VendorData(BaseModel):
    vendor: str
    nama_paket: str
    cpu_level: int
    ram_level: int
    diskio_level: int
    price_level: int

Sources: backend/main.py:46-53

Data Flow and CRUD Operations

The following diagrams illustrate the sequence of events for each CRUD operation, initiated from the DataView.tsx component.

Read (Get All Vendors)

This flow is triggered when the DataView component mounts to display the list of vendors.

Create (Add New Vendor)

This flow occurs when a user fills out the "Add Vendor" form and submits it.

Update (Edit Vendor)

This flow is initiated when a user edits an existing vendor's details in the data table.

Delete (Remove Vendor)

This flow starts when a user clicks the delete button for a specific vendor and confirms the action.

Summary

The Data Management (CRUD) feature is a cornerstone of the SPK Kajek application, providing essential control over the dataset of alternatives. By leveraging a React frontend, a FastAPI backend, and a simple Excel file for storage, it offers a robust and user-friendly way to maintain the data that drives the TOPSIS analysis. The API-driven approach ensures a clean separation of concerns and allows for flexible data manipulation, either through the UI or by direct file editing.

Sources: README.md, SUMMARY.md, DASHBOARD_README.md