171 lines
6.3 KiB
PHP
171 lines
6.3 KiB
PHP
@props([
|
|
'breadcrumbs' => [
|
|
['label' => 'Dashboard', 'icon' => 'fa-home', 'route' => '#'],
|
|
['label' => 'Anagrafica unica', 'icon' => 'fa-id-card', 'route' => '#'],
|
|
],
|
|
'condominium' => null,
|
|
'subject' => null,
|
|
'indicators' => [
|
|
['label' => 'Unità collegate', 'value' => '—', 'icon' => 'fa-building', 'tone' => 'primary'],
|
|
['label' => 'Rate scadute', 'value' => '—', 'icon' => 'fa-receipt', 'tone' => 'warning'],
|
|
['label' => 'Ticket aperti', 'value' => '—', 'icon' => 'fa-headset', 'tone' => 'info'],
|
|
],
|
|
'showBreadcrumbs' => true,
|
|
])
|
|
|
|
@php
|
|
$condominium = $condominium ?? [
|
|
'name' => 'Condominio Demo',
|
|
'code' => 'CDM-001',
|
|
'address' => 'Via Esempio 1, Roma',
|
|
'units' => 24,
|
|
];
|
|
|
|
$subject = $subject ?? [
|
|
'name' => 'Michele Barone',
|
|
'code' => 'SUB-2149',
|
|
'roles' => ['Proprietario', 'Cliente'],
|
|
'status' => 'Attivo',
|
|
'phone' => '+39 06 000000',
|
|
'email' => 'm.barone@example.com',
|
|
];
|
|
@endphp
|
|
|
|
<div class="netgescon-card context-header space-y-6">
|
|
@if($showBreadcrumbs)
|
|
<div class="flex flex-wrap items-center gap-3 text-sm text-slate-500">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
@foreach($breadcrumbs as $crumb)
|
|
<div class="flex items-center gap-2 text-slate-600">
|
|
@isset($crumb['icon'])
|
|
<i class="fas {{ $crumb['icon'] }} text-blue-500"></i>
|
|
@endisset
|
|
<span>{{ $crumb['label'] }}</span>
|
|
</div>
|
|
@if(! $loop->last)
|
|
<i class="fas fa-angle-right text-xs"></i>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
<div class="ml-auto flex items-center">
|
|
<button type="button" class="netgescon-btn netgescon-btn-outline-primary netgescon-btn-sm">
|
|
<i class="fas fa-arrows-rotate mr-2"></i>
|
|
Cambia condominio
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="flex flex-col gap-6 lg:flex-row lg:items-center">
|
|
<div class="flex flex-1 items-center gap-4">
|
|
<div class="avatar-circle bg-blue-600 text-white">
|
|
{{ collect(explode(' ', $subject['name']))->map(fn($part) => substr($part, 0, 1))->take(2)->implode('') }}
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-slate-900 mb-1">{{ $subject['name'] }}</h2>
|
|
<div class="flex flex-wrap items-center gap-2 text-sm">
|
|
<span class="pill pill-muted">Codice {{ $subject['code'] }}</span>
|
|
@foreach($subject['roles'] as $role)
|
|
<span class="pill pill-primary">{{ $role }}</span>
|
|
@endforeach
|
|
<span class="pill pill-success flex items-center gap-2">
|
|
<i class="fas fa-circle text-xs"></i>{{ $subject['status'] }}
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-4 text-sm text-slate-500 mt-3">
|
|
<span class="flex items-center gap-2"><i class="fas fa-phone text-emerald-500"></i>{{ $subject['phone'] }}</span>
|
|
<span class="flex items-center gap-2"><i class="fas fa-envelope text-blue-500"></i>{{ $subject['email'] }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:w-5/12">
|
|
<div class="bg-slate-50 border border-slate-200 rounded-3xl p-4">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-1">Condominio attivo</p>
|
|
<h3 class="text-lg font-semibold text-slate-900">{{ $condominium['name'] }}</h3>
|
|
<p class="text-sm text-slate-500">Codice {{ $condominium['code'] }}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="pill pill-primary">{{ $condominium['units'] }} unità</span>
|
|
<p class="text-sm text-slate-500 mt-2">{{ $condominium['address'] }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
@foreach($indicators as $indicator)
|
|
<div class="indicator-card indicator-card-{{ $indicator['tone'] ?? 'primary' }}">
|
|
<div class="flex items-center gap-4">
|
|
<div class="icon-wrapper">
|
|
<i class="fas {{ $indicator['icon'] ?? 'fa-circle-info' }}"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-1">{{ $indicator['label'] }}</p>
|
|
<h4 class="text-xl font-semibold text-slate-900 mb-0">{{ $indicator['value'] }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
@once
|
|
@push('styles')
|
|
<style>
|
|
.context-header .avatar-circle {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.indicator-card {
|
|
border-radius: 22px;
|
|
padding: 1.1rem 1.4rem;
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.indicator-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 15px 30px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.indicator-card .icon-wrapper {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(37, 99, 235, 0.1);
|
|
color: #2563eb;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.indicator-card-warning .icon-wrapper {
|
|
background: rgba(245, 158, 11, 0.15);
|
|
color: #d97706;
|
|
}
|
|
|
|
.indicator-card-info .icon-wrapper {
|
|
background: rgba(14, 165, 233, 0.15);
|
|
color: #0ea5e9;
|
|
}
|
|
|
|
.indicator-card-success .icon-wrapper {
|
|
background: rgba(16, 185, 129, 0.15);
|
|
color: #10b981;
|
|
}
|
|
</style>
|
|
@endpush
|
|
@endonce
|