64 lines
2.6 KiB
PHP
64 lines
2.6 KiB
PHP
@props(['prediction'])
|
||
|
||
@if ($prediction)
|
||
@php
|
||
$action = $prediction['action'] ?? 'no_signal';
|
||
$headline = match ($action) {
|
||
'fill_now' => 'Fill up now',
|
||
'wait' => 'Wait',
|
||
default => 'No signal',
|
||
};
|
||
$score = (float) ($prediction['confidence_score'] ?? 0);
|
||
$circumference = 125.6; // 2π × 20
|
||
$offset = round($circumference * (1 - $score / 100), 1);
|
||
$label = $prediction['confidence_label'] ?? 'low';
|
||
$labelColour = match ($label) {
|
||
'high' => 'bg-green-100 text-green-700',
|
||
'medium' => 'bg-amber-100 text-amber-700',
|
||
default => 'bg-zinc-100 text-zinc-500',
|
||
};
|
||
@endphp
|
||
|
||
<div class="rounded-2xl border border-[#e5ded7] bg-[#faf6f3] p-5 shadow-sm">
|
||
<div class="mb-3 flex items-start justify-between">
|
||
<div>
|
||
<p class="mb-1 text-[10px] font-bold uppercase tracking-widest text-[#89726c]">
|
||
Recommendation
|
||
</p>
|
||
<h2 class="text-3xl font-black leading-tight text-[#8B4860]">
|
||
{{ $headline }}
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="flex flex-col items-center gap-1">
|
||
<div class="relative h-12 w-12">
|
||
<svg class="h-full w-full -rotate-90" viewBox="0 0 48 48">
|
||
<circle cx="24" cy="24" r="20" stroke="#eeeae5" stroke-width="4" fill="transparent" />
|
||
<circle
|
||
cx="24" cy="24" r="20"
|
||
stroke="#8B4860" stroke-width="4" fill="transparent"
|
||
stroke-dasharray="{{ $circumference }}"
|
||
stroke-dashoffset="{{ $offset }}"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
<span class="absolute inset-0 flex items-center justify-center text-[11px] font-black text-[#4a3f3b]">
|
||
{{ (int) $score }}%
|
||
</span>
|
||
</div>
|
||
<span class="text-[9px] font-bold uppercase tracking-wider text-[#89726c]">Confidence</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-sm font-medium leading-relaxed text-[#6b5a55]">
|
||
{{ $prediction['reasoning'] ?? '' }}
|
||
</p>
|
||
|
||
<div class="mt-3">
|
||
<span class="rounded-full px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-wide {{ $labelColour }}">
|
||
{{ ucfirst($label) }} confidence
|
||
</span>
|
||
</div>
|
||
</div>
|
||
@endif
|