📋 Portfolio Project: Enterprise KPI & Performance Monitoring System

⚠️ Confidentiality Notice: Specific details omitted to maintain confidentiality. Code samples are conceptual implementations.


🎯 Project Overview

Project Type: Enterprise KPI & Performance Monitoring System

Role: Full-Stack Developer

Industry: Human Resources / Performance Management

Status: Production - actively used by HR team and management


💡 Summary

Built a performance management system enterprise-level end-to-end, including:

  • KPI Tracking System with criteria, indicators, and weight-based scoring
  • GPS-Based Attendance with location validation
  • Multi-Level Reporting for individual, group, and division
  • Role-Based Dashboards with real-time data visualization
  • External System Integration with data synchronization
  • ID Encryption for URL and data security

The system is actively used by HR team, supervisors, and management.


🛠️ Technology Stack

Backend

TechnologyPurpose
Laravel 11Core PHP Framework
PHP 8.2+Server-side Language
MySQLRelational Database
Spatie PermissionRole & Permission Management
HashidsID Encryption for Security
Maatwebsite ExcelExcel Import/Export
DomPDFPDF Generation

Frontend

TechnologyPurpose
Vue.js 3Reactive UI Framework
Inertia.js 2.0Modern SPA Architecture
Vite 6.2Modern Build Tool
Tailwind CSS 3Utility-First Styling
Element PlusEnterprise UI Components

Data Visualization

TechnologyPurpose
ECharts 5.6Advanced Charting Library
Vue EChartsVue Wrapper for ECharts
Chart.jsAlternative Charts

📊 Project Scale

40+
Controllers
21+
Database Models
32+
Migrations
350+
API Routes
75+
Vue.js Pages
6
User Roles
14+
Sync Commands
Multiple
Report Types

✨ Key Features Developed

📊 1. KPI Management System

Performance tracking system with criteria and indicators.

  • Division Management - CRUD divisions with hierarchy
  • Criteria & Indicators - KPI criteria with percentage weights
  • Multi-level Scoring - Score 1-5 per indicator
  • Weight-based Calculation - Automatic weighted calculation
  • Role-based Criteria - Different criteria per role

Technical Highlight:

// Criteria with allowed roles
class Criteria extends Model {
    protected $fillable = [
        'division_id', 'name', 'weight',
        'sort_order', 'allowed_roles'
    ];

    public function indicators() {
        return $this->hasMany(Indicator::class);
    }

    public function calculateScore($values) {
        // Weight-based score calculation
    }
}

📝 2. Multi-Type Report System

Report system with various types and targets.

Report Types:

TypeDescription
IndividualReport per employee
GroupReport per team/group
ManagementAggregated management report
ResumeSummary per unit/division
  • • Report creation with date range
  • • Daily scoring per criteria/indicator
  • • Report finalization workflow
  • • Batch report completion for SPV and HRD
  • • Export Excel & PDF

🔐 3. Secure ID System

ID encryption system for URL and data security.

  • Hashids Integration - Encode/decode IDs
  • Secure URLs - Does not expose database IDs
  • Route Protection - Validate encrypted IDs

Technical Highlight:

// Secure ID implementation
use Hashids\Hashids;

trait HasEncryptedId {
    public function getEncryptedIdAttribute() {
        $hashids = new Hashids(config('app.key'), 10);
        return $hashids->encode($this->id);
    }

    public static function findByEncryptedId($encryptedId) {
        $hashids = new Hashids(config('app.key'), 10);
        $decoded = $hashids->decode($encryptedId);
        return static::find($decoded[0] ?? null);
    }
}

👥 4. Role-Based Dashboard

RoleDashboard Features
ITFull access, system config
HRDEmployee management, reports
DireksiExecutive overview, analytics
SPVTeam management, approvals
ViewRead-only access
  • • Dynamic dashboard per role
  • • Widget-based layout
  • • Real-time statistics
  • • ECharts visualizations

📊 5. Advanced Data Visualization

  • • Performance trend charts
  • • Division comparison charts
  • • Attendance statistics
  • • KPI score distributions
  • • Interactive filtering

🔄 6. External System Synchronization

  • • Console commands for data sync
  • • Division sync from external system
  • • Employee data sync
  • • Attendance data sync
  • • Automated scheduling

📋 7. Activity & Incident Tracking

  • • Record daily activities
  • • Important incidents
  • • Important reports with comments
  • • Activity export to PDF

💼 9. Employee & Supervisor Management

  • • Employee CRUD with division assignment
  • • Supervisor hierarchy management
  • • SPV assignment for oversight
  • • Password management

🏗️ Architecture Decisions

Vite + Inertia.js 2.0 Architecture

Challenge: Need modern build tooling with fast HMR and SPA experience.

Solution: Vite as build tool with Inertia.js 2.0 for SPA architecture.

Result: Superior developer experience with hot reload <100ms, optimized production build.

ID Encryption with Hashids

Challenge: Do not expose database IDs in URL for security.

Solution: Hashids integration at model layer.

Result: Secure URLs that cannot be enumerated, consistent across application.

Multi-Database Sync

Challenge: Data integration from multiple external systems.

Solution: Console commands with scheduling for data synchronization.

Result: Up-to-date data from external systems with automated sync.


🔧 Technical Challenges Solved

1. Role-Based Content Display

Challenge: Different criteria visibility per role.

Solution: allowed_roles column in criteria with dynamic filtering.

2. Complex Score Calculation

Challenge: Weight-based scoring with multiple criteria and indicators.

Solution: Aggregation methods in Eloquent with proper grouping.

3. External Data Sync

Challenge: Keep data synchronized with external systems.

Solution: Artisan commands with external_id tracking for conflict resolution.

4. Performance with Large Datasets

Challenge: Report generation with large data.

Solution: Database indexing (custom migration), chunked processing, lazy collections.


🎯 Skills Demonstrated

CategorySkills
Full-Stack DevelopmentLaravel 11 + Vue.js 3 + Inertia.js 2.0
Modern ToolingVite, Tailwind CSS 3
Data VisualizationECharts, Chart.js
SecurityID Encryption, RBAC, Location Verification
Database DesignPerformance-optimized schema
System IntegrationExternal data synchronization
ReportingExcel/PDF generation

💡 Key Learnings

  1. 1. Performance Indexes: Database indexes for KPI calculations are crucial - can be 10x performance difference.
  2. 2. ID Security: Hashids for URL security adds protection layer without significant complexity.
  3. 3. Vite Migration: Migration from Laravel Mix to Vite provides much better developer experience.
  4. 4. Data Sync Complexity: External system sync requires proper external_id tracking and conflict resolution.

Specific implementation details have been omitted to maintain confidentiality.