partial update create kpi and progress bar

This commit is contained in:
2025-07-04 18:27:32 +07:00
parent 0ef03fe7cb
commit fa554446ca
19 changed files with 2150 additions and 45 deletions

View File

@@ -320,6 +320,8 @@ use Illuminate\Support\Facades\Auth;
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
</style>
@endsection
@@ -359,6 +361,58 @@ use Illuminate\Support\Facades\Auth;
<b>Dealer {{ $mechanic->dealer_name }}</b><br><br>
<a href="#">Total {{ $count_transaction_dealers }} Pekerjaan terkirim pada dealer</a><br>
<a href="#">Anda telah posting {{ $count_transaction_users }} pekerjaan</a>
<!-- KPI Information -->
<div class="mt-3">
@if($kpiData['has_target'])
<div class="row">
<div class="col-6">
<small class="text-muted">Target {{ $kpiData['period'] }}</small><br>
<strong class="text-primary">{{ number_format($kpiData['target']) }} Pekerjaan</strong>
</div>
<div class="col-6">
<small class="text-muted">Pencapaian</small><br>
<strong class="text-{{ $kpiData['status_color'] }}">{{ number_format($kpiData['actual']) }} Pekerjaan</strong>
</div>
</div>
<div class="mt-2">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">Progress</small>
<small class="text-{{ $kpiData['status_color'] }} font-weight-bold">{{ $kpiData['percentage'] }}%</small>
</div>
<div class="progress" style="height: 8px;">
@php
$progressWidth = min(100, $kpiData['percentage']);
@endphp
<div class="progress-bar bg-{{ $kpiData['status_color'] }}"
role="progressbar"
style="width: {{ $progressWidth }}%"
aria-valuenow="{{ $kpiData['percentage'] }}"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<div class="mt-1">
@if($kpiData['status'] == 'exceeded')
<small class="text-success"><i class="fa fa-check-circle"></i> Target tercapai!</small>
@elseif($kpiData['status'] == 'good')
<small class="text-info"><i class="fa fa-arrow-up"></i> Performa baik</small>
@elseif($kpiData['status'] == 'fair')
<small class="text-warning"><i class="fa fa-exclamation-triangle"></i> Perlu peningkatan</small>
@elseif($kpiData['status'] == 'poor')
<small class="text-danger"><i class="fa fa-times-circle"></i> Perlu perbaikan</small>
@else
<small class="text-secondary"><i class="fa fa-clock"></i> Belum ada data</small>
@endif
</div>
</div>
@else
<div class="text-center py-2">
<i class="fa fa-info-circle text-muted"></i>
<small class="text-muted">Belum ada target KPI untuk {{ $kpiData['period'] }}</small>
</div>
@endif
</div>
</div>
<div class="col-4">
<div class="text-center mt-2">
@@ -1665,6 +1719,8 @@ use Illuminate\Support\Facades\Auth;
$(this).val('0.00');
}
});
});
// Handle when input loses focus - set default if empty