Feature: Dashboard View

Relevant source files

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

• frontend/src/components/DashboardView.tsx
• backend/main.py
• frontend/src/App.tsx
• SUMMARY.md
• DASHBOARD_README.md
• frontend/src/components/Sidebar.tsx

The Dashboard View is the main landing page of the SPK Kajek application. It serves as a central hub, providing users with a high-level statistical overview, a preview of the latest vendor data, and a clear call-to-action to begin the TOPSIS analysis. This view is the default page presented to the user after successful authentication.

The primary purpose of this view is to offer an at-a-glance summary of the system's current state and guide the user toward the application's core functionalities, such as the Analysis View and Data Management View.

Sources: frontend/src/components/DashboardView.tsx, SUMMARY.md, frontend/src/App.tsx:16, 29

Architecture and Component Structure

The DashboardView is a functional React component that orchestrates several sub-components to create its layout. It is rendered by the main App.tsx component when the activeTab state is set to 'dashboard'.

Sources: frontend/src/App.tsx:16, 29, frontend/src/components/Sidebar.tsx:19

The overall structure is a responsive grid composed of three main sections:

1. Statistics Grid: A row of StatCard components displaying key metrics.
2. Main Content Grid: A two-column layout containing:
   • A preview table of the "Latest Vendors".
   • A sticky column with a TiltCard for the main call-to-action and a quick guide card.

The component composition of the Dashboard View is illustrated below.

Data Flow and State Management

Upon mounting, the DashboardView component initiates a data fetching process to populate its content. It uses a useEffect hook to call the api.getData() service, which sends a request to the backend.

Sources: frontend/src/components/DashboardView.tsx:21-31

Data Fetching Sequence

The component maintains a loading state, displaying a LiquidLoader while fetching data. Once the data is retrieved from the /api/data endpoint, the data state is updated, and the main view is rendered.

The sequence of events for data fetching is as follows:

State

The component manages two primary pieces of local state:

State	Type	Description
data	DataItem[]	An array of vendor data objects fetched from the API.
loading	boolean	A flag to indicate if data is currently being fetched.
Sources: frontend/src/components/DashboardView.tsx:18-19

Key UI Components

The DashboardView is built from several specialized child components that handle specific UI elements and interactions.

Statistics Cards (StatCard)

A grid of four StatCard components provides a high-level summary of the system. Each card is configured with different properties to display a specific metric.

Metric	Icon	Label	Value	Source
Total Vendors	Server	Total Vendor	The total number of vendors from the fetched data.	DashboardView.tsx:61-68
Active Criteria	Activity	Active Criteria	"4"	DashboardView.tsx:69-76
Price Range	DollarSign	Price Range	"$5 - $250"	DashboardView.tsx:77-84
Analysis Status	Trophy	Analysis Status	"Standby"	DashboardView.tsx:85-92

The StatCard itself is a SpotlightCard that uses a CountUp component to animate numerical values on load.

Sources: frontend/src/components/DashboardView.tsx:58-93, 396-424

Latest Vendors Table

This section displays a preview of the first five vendor entries from the fetched data. It provides a quick look at the available alternatives without navigating to the full data view.

The table includes the following columns:

• Vendor Name
• Plan
• CPU (Level)
• RAM (Level)
• Price (Level)

For the criteria columns (CPU, RAM, Price), it utilizes the LevelBadge component to visually represent the level (1-5) with a colored badge and a series of bars.

Sources: frontend/src/components/DashboardView.tsx:112-166

Call-to-Action Card (TiltCard)

This interactive card encourages the user to proceed with the analysis. It is wrapped in a TiltCard component, which provides a 3D perspective shift effect on mouse hover.

Key features:

• Purpose: Navigates the user to the analysis tab when clicked.
• Visuals: Uses a TiltCard for 3D hover effects and contains decorative gradient blobs.
• Navigation: The onClick handler calls the onNavigate('analysis') prop passed down from App.tsx.

// frontend/src/components/DashboardView.tsx:202-214
<button
    className="..."
    onClick={() => onNavigate('analysis')}
>
    <span className="relative z-10 flex items-center gap-2">
        Mulai Analisa
        <ArrowRight size={20} className="group-hover/btn:translate-x-1 transition-transform" />
    </span>
</button>

Sources: frontend/src/components/DashboardView.tsx:171-216, 332-362

Visuals and Animations

The DashboardView leverages Framer Motion and custom components to create a dynamic and visually engaging user experience.

• Initial Load: The entire view fades in using animate-in fade-in.
• Component Animation: The main content grid and CTA card use motion.div with initial and animate props for a staggered slide-in effect.
• Interactive Cards:
  • SpotlightCard: Creates a radial gradient effect that follows the mouse cursor.
  • TiltCard: Applies a 3D perspective transform based on mouse position, giving the card a tilting effect.
• Background: The view can feature a ParticleBackground for an animated, ambient effect.

Sources: frontend/src/components/DashboardView.tsx:52, 97-102, 171, 220-225, 283-362