586 lines
34 KiB
PHP
Executable File
586 lines
34 KiB
PHP
Executable File
@extends('admin.layouts.netgescon')
|
|
|
|
@section('page-title', 'Scheda Anagrafica')
|
|
|
|
@section('breadcrumb')
|
|
<span>Rubrica Unica</span>
|
|
<i class="fas fa-chevron-right text-xs"></i>
|
|
<span>Scheda soggetto</span>
|
|
@endsection
|
|
|
|
@php
|
|
$condominium = $condominium ?? [
|
|
'name' => 'Condominio Via Germanico 12',
|
|
'code' => 'COND-0021',
|
|
'address' => 'Via Germanico 12, 00192 Roma',
|
|
'units' => 42,
|
|
];
|
|
|
|
$subject = $subject ?? [
|
|
'id' => 2149,
|
|
'name' => 'Michele Barone',
|
|
'code' => 'SUB-2149',
|
|
'roles' => ['Proprietario', 'Cliente'],
|
|
'status' => 'Attivo',
|
|
'phone' => '+39 0639731100',
|
|
'email' => 'm.barone@mclink.it',
|
|
'codice_fiscale' => 'BRNMHL69M11H501K',
|
|
'partita_iva' => '09878630582',
|
|
'documento' => 'Patente RM3549466G',
|
|
];
|
|
|
|
$unitAssociations = $unitAssociations ?? [
|
|
['label' => 'Scala A · Interno 5', 'millesimi' => 45, 'tipo' => 'Proprietario', 'note' => 'Locale abitativo', 'piano' => '2', 'uso' => 'Abitazione'],
|
|
['label' => 'Scala B · Locale Tecnico', 'millesimi' => null, 'tipo' => 'Manutentore', 'note' => 'Locale contatori', 'piano' => 'T', 'uso' => 'Locale tecnico'],
|
|
['label' => 'Box 18', 'millesimi' => null, 'tipo' => 'Pertinenza', 'note' => 'Pertinenza collegata a Scala A', 'piano' => '-1', 'uso' => 'Box'],
|
|
];
|
|
|
|
$indicators = $indicators ?? [
|
|
['label' => 'Unità collegate', 'value' => count($unitAssociations), 'icon' => 'fa-building', 'tone' => 'indigo'],
|
|
['label' => 'Rate scadute', 'value' => '€ 1.240', 'icon' => 'fa-file-invoice-dollar', 'tone' => 'orange'],
|
|
['label' => 'Ticket aperti', 'value' => 1, 'icon' => 'fa-headset', 'tone' => 'cyan'],
|
|
['label' => 'Stato anagrafica', 'value' => $subject['status'], 'icon' => 'fa-shield-check', 'tone' => 'emerald'],
|
|
];
|
|
|
|
$tabs = $tabs ?? [
|
|
'overview' => 'Panoramica',
|
|
'addresses' => 'Indirizzi & recapiti',
|
|
'fiscal' => 'Dati fiscali',
|
|
'relations' => 'Relazioni condominiali',
|
|
'crm' => 'CRM & attività',
|
|
'documents' => 'Documenti',
|
|
'channels' => 'Canali digitali',
|
|
'financial' => 'Pagamenti & banche',
|
|
'rentals' => 'Affitti collegati',
|
|
];
|
|
|
|
$breadcrumbs = $breadcrumbs ?? [
|
|
['label' => 'Dashboard', 'icon' => 'fa-home', 'route' => '#'],
|
|
['label' => 'Anagrafica', 'icon' => 'fa-address-book', 'route' => '#'],
|
|
['label' => 'Scheda soggetto', 'icon' => 'fa-id-card', 'route' => null],
|
|
];
|
|
|
|
$actions = ($actions ?? collect())->count() ? $actions : collect([
|
|
['label' => 'Nuova nota CRM', 'icon' => 'fa-note-sticky', 'color' => 'primary'],
|
|
['label' => 'Invia email', 'icon' => 'fa-envelope', 'color' => 'success'],
|
|
['label' => 'Invia SMS', 'icon' => 'fa-sms', 'color' => 'warning'],
|
|
['label' => 'Allega documento', 'icon' => 'fa-paperclip', 'color' => 'dark'],
|
|
['label' => 'Crea accesso web', 'icon' => 'fa-globe', 'color' => 'info'],
|
|
]);
|
|
|
|
$sidebarStats = ($sidebarStats ?? collect())->count() ? $sidebarStats : collect([
|
|
['label' => 'Rate scadute', 'value' => '€ 1.240', 'hint' => '2 posizioni aperte', 'tone' => 'danger'],
|
|
['label' => 'Documenti mancanti', 'value' => '3', 'hint' => 'CF, IBAN, Documento identità', 'tone' => 'warning'],
|
|
['label' => 'Ticket aperti', 'value' => '1', 'hint' => 'Richiesta manutenzione caldaia', 'tone' => 'info'],
|
|
]);
|
|
|
|
$tasks = ($tasks ?? collect())->count() ? $tasks : collect([
|
|
['title' => 'Verificare codice fiscale importato', 'due' => 'Oggi', 'priority' => 'high'],
|
|
['title' => 'Aggiornare IBAN per SDD', 'due' => 'Domani', 'priority' => 'medium'],
|
|
['title' => 'Confermare accesso al portale', 'due' => 'Settimana prossima', 'priority' => 'low'],
|
|
]);
|
|
|
|
$alerts = $alerts ?? [];
|
|
@endphp
|
|
|
|
@section('content')
|
|
<div class="space-y-8 netgescon-fade-in pb-10">
|
|
@if(!empty($alerts))
|
|
<div class="netgescon-card bg-amber-50 border border-amber-200 text-amber-800">
|
|
<ul class="list-disc ml-5 space-y-1 text-sm">
|
|
@foreach($alerts as $alert)
|
|
<li>{{ $alert }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
<x-anagrafica.context-header
|
|
:breadcrumbs="$breadcrumbs"
|
|
:condominium="$condominium"
|
|
:subject="$subject"
|
|
:indicators="$indicators"
|
|
:show-breadcrumbs="false"
|
|
/>
|
|
|
|
<div class="scheda-grid">
|
|
<section class="scheda-grid__main">
|
|
<div class="netgescon-card scheda-card h-full flex flex-col">
|
|
<div class="scheda-toolbar">
|
|
<a
|
|
href="{{ url('/admin/rubrica') }}"
|
|
class="netgescon-btn netgescon-btn-outline-primary"
|
|
>
|
|
<i class="fas fa-arrow-left mr-2"></i>
|
|
Torna alla Rubrica Unica
|
|
</a>
|
|
<span class="text-sm text-slate-500">
|
|
Ricerca e selezione nominativi ora avviene dalla Rubrica.
|
|
</span>
|
|
</div>
|
|
<div class="scheda-tabs" role="tablist">
|
|
@foreach($tabs as $key => $label)
|
|
<button
|
|
class="scheda-tab {{ $loop->first ? 'is-active' : '' }}"
|
|
type="button"
|
|
data-tab-target="tab-{{ $key }}"
|
|
>
|
|
{{ $label }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="scheda-panels" id="scheda-tab-content">
|
|
@foreach($tabs as $key => $label)
|
|
<div class="scheda-panel {{ $loop->first ? 'is-active' : '' }}" id="tab-{{ $key }}">
|
|
@switch($key)
|
|
@case('overview')
|
|
<div class="grid gap-6 lg:grid-cols-2">
|
|
<div class="soft-card">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div>
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-1">Generalità</p>
|
|
<h4 class="text-xl font-semibold text-slate-900">{{ $subject['name'] }}</h4>
|
|
</div>
|
|
<span class="pill pill-success">{{ implode(' · ', $subject['roles'] ?? []) ?: 'Contatto' }}</span>
|
|
</div>
|
|
<dl class="space-y-3 text-sm">
|
|
<div class="flex items-center justify-between border-b pb-3">
|
|
<dt class="text-slate-500">Codice fiscale</dt>
|
|
<dd class="font-semibold text-slate-900">{{ $subject['codice_fiscale'] ?? '—' }}</dd>
|
|
</div>
|
|
<div class="flex items-center justify-between border-b pb-3">
|
|
<dt class="text-slate-500">Partita IVA</dt>
|
|
<dd class="font-semibold text-slate-900">{{ $subject['partita_iva'] ?? '—' }}</dd>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<dt class="text-slate-500">Documento identità</dt>
|
|
<dd class="font-semibold text-slate-900">{{ $subject['documento'] ?? '—' }}</dd>
|
|
</div>
|
|
</dl>
|
|
<button class="netgescon-btn netgescon-btn-outline-secondary mt-6">
|
|
<i class="fas fa-pen mr-2"></i>Modifica generalità
|
|
</button>
|
|
</div>
|
|
<div class="soft-card">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-3">Unità associate</p>
|
|
<div class="space-y-4">
|
|
@forelse($unitAssociations as $unit)
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="font-semibold text-slate-900">{{ $unit['label'] ?? 'Unità' }}</p>
|
|
<p class="text-sm text-slate-500">
|
|
{{ $unit['note'] ?? ($unit['uso'] ?? 'Uso non indicato') }}
|
|
@if(!empty($unit['millesimi']))
|
|
· Millesimi {{ rtrim(rtrim(number_format($unit['millesimi'], 2, ',', ''), '0'), ',') }}
|
|
@endif
|
|
</p>
|
|
</div>
|
|
<span class="pill pill-primary">{{ $unit['tipo'] ?? 'Collegato' }}</span>
|
|
</div>
|
|
@empty
|
|
<p class="text-sm text-slate-500">Nessuna unità collegata dal dataset import.</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@break
|
|
|
|
@case('addresses')
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div class="soft-card">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Sede legale</p>
|
|
<h4 class="text-lg font-semibold text-slate-900">Via Augusto Riboty 1</h4>
|
|
<p class="text-slate-500 mb-4">00195 Roma (RM) · Italia</p>
|
|
<label class="flex items-center gap-2 text-sm text-slate-600">
|
|
<input type="checkbox" checked class="w-4 h-4 text-blue-600 border-slate-300 rounded" />
|
|
Sincronizza con indirizzo operativo
|
|
</label>
|
|
</div>
|
|
<div class="soft-card">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Fatturazione</p>
|
|
<div class="flex items-center gap-3 bg-orange-50 border border-orange-200 rounded-2xl px-4 py-3 mb-4 text-orange-800">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<span class="font-semibold">Da validare: CAP mancante.</span>
|
|
</div>
|
|
<p class="text-slate-500 text-sm">Per import correnti da Gescon verrà mostrato il dettaglio versione.</p>
|
|
</div>
|
|
</div>
|
|
@break
|
|
|
|
@case('fiscal')
|
|
<div class="grid gap-6 lg:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
|
|
<div class="soft-card">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-3">Certificazione unica</p>
|
|
<ul class="space-y-3 text-sm text-slate-600">
|
|
<li class="flex items-center justify-between border-b pb-3"><span>Categoria previdenziale</span><strong class="text-slate-900">33</strong></li>
|
|
<li class="flex items-center justify-between border-b pb-3"><span>Codice fiscale rappresentante</span><strong class="text-slate-900">BRNMHL69M11H501K</strong></li>
|
|
<li class="flex items-center justify-between"><span>Escludi CU</span><span class="pill pill-muted">No</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="soft-card">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-3">Adempimenti</p>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<span class="timeline-dot success"></span>
|
|
<div>
|
|
<p class="font-semibold text-slate-900 mb-0">PEC collegata</p>
|
|
<p class="text-sm text-slate-500">m.barone@mclink.it</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<span class="timeline-dot warning"></span>
|
|
<div>
|
|
<p class="font-semibold text-slate-900 mb-0">Dichiarazione estera non caricata</p>
|
|
<p class="text-sm text-slate-500">Richiedere documento entro 15/12</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@break
|
|
|
|
@case('relations')
|
|
<div class="soft-card overflow-hidden p-0">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-slate-200 text-sm">
|
|
<thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left">Unità</th>
|
|
<th class="px-6 py-3 text-left">Ruolo</th>
|
|
<th class="px-6 py-3 text-left">Periodo</th>
|
|
<th class="px-6 py-3 text-left">Millesimi</th>
|
|
<th class="px-6 py-3 text-left">Stato</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100 text-slate-700">
|
|
<tr>
|
|
<td class="px-6 py-4">Scala A / Interno 5</td>
|
|
<td class="px-6 py-4"><span class="pill pill-primary">Proprietario</span></td>
|
|
<td class="px-6 py-4">01/2015 → Oggi</td>
|
|
<td class="px-6 py-4">45,000</td>
|
|
<td class="px-6 py-4"><span class="pill pill-success">Attivo</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4">Scala B / Locale Tecnico</td>
|
|
<td class="px-6 py-4"><span class="pill pill-warning">Manutentore</span></td>
|
|
<td class="px-6 py-4">06/2022 → 06/2025</td>
|
|
<td class="px-6 py-4">—</td>
|
|
<td class="px-6 py-4"><span class="pill pill-warning">In scadenza</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
@break
|
|
|
|
@case('crm')
|
|
<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-0">Timeline attività</p>
|
|
<button class="netgescon-btn netgescon-btn-primary">
|
|
<i class="fas fa-plus mr-2"></i>Nuova attività
|
|
</button>
|
|
</div>
|
|
<div class="timeline">
|
|
<div class="soft-card">
|
|
<div class="flex flex-wrap items-center gap-3 mb-2">
|
|
<span class="pill pill-info">Email</span>
|
|
<strong class="text-slate-900">Invio AVVISO rate luglio</strong>
|
|
<small class="text-slate-500">06/07/2011 · Operatore: Michele</small>
|
|
</div>
|
|
<p class="text-slate-600 text-sm">"Ciao Michele, come stai per quel problema"</p>
|
|
</div>
|
|
<div class="soft-card">
|
|
<div class="flex flex-wrap items-center gap-3 mb-2">
|
|
<span class="pill pill-success">Chiamata</span>
|
|
<strong class="text-slate-900">Richiesta sollecito pagamento</strong>
|
|
<small class="text-slate-500">18/02/2011 · Operatore: Michele</small>
|
|
</div>
|
|
<p class="text-slate-600 text-sm">Cliente conferma pagamento entro 5 giorni.</p>
|
|
</div>
|
|
</div>
|
|
@break
|
|
|
|
@case('documents')
|
|
<div class="grid gap-6 md:grid-cols-3">
|
|
<div class="soft-card text-center">
|
|
<i class="fas fa-id-card text-2xl text-blue-600 mb-4"></i>
|
|
<p class="font-semibold text-slate-900 mb-1">Documento identità</p>
|
|
<p class="text-sm text-slate-500 mb-4">Scadenza 27/11/2017</p>
|
|
<button class="netgescon-btn netgescon-btn-outline-secondary">Carica nuovo</button>
|
|
</div>
|
|
<div class="soft-card md:col-span-2">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-4">Documenti allegati</p>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-semibold text-slate-900 mb-1">Contratto di locazione.pdf</p>
|
|
<p class="text-sm text-slate-500">Caricato il 12/09/2024 · 2.4 MB</p>
|
|
</div>
|
|
<button class="netgescon-btn netgescon-btn-outline-primary netgescon-btn-sm" title="Scarica">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@break
|
|
|
|
@case('channels')
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div class="soft-card">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-4">Email & PEC</p>
|
|
<ul class="space-y-3 text-sm text-slate-600">
|
|
<li class="flex items-center justify-between"><span>Fatture elettroniche</span><strong class="text-slate-900">m.barone@mclink.it</strong></li>
|
|
<li class="flex items-center justify-between"><span>Avvisi generali</span><strong class="text-slate-900">m.barone@mclink.it</strong></li>
|
|
<li class="flex items-center justify-between"><span>PEC</span><strong class="text-slate-900">m.barone@pec.it</strong></li>
|
|
</ul>
|
|
</div>
|
|
<div class="soft-card">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-3">SMS & notifiche</p>
|
|
<p class="text-sm text-slate-600 mb-4">Configura canali per campagne rapide o invii di emergenza.</p>
|
|
<button class="netgescon-btn netgescon-btn-success">Configura preferenze</button>
|
|
</div>
|
|
</div>
|
|
@break
|
|
|
|
@case('financial')
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div class="soft-card">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-2">IBAN e mandati</p>
|
|
<p class="font-semibold text-slate-900 mb-1">IT60 X054 2811 1010 0000 0123 456</p>
|
|
<p class="text-sm text-slate-500 mb-3">ABI 05428 · CAB 11101 · Banca Nazionale</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="pill pill-success">Verificato</span>
|
|
<span class="pill pill-muted">SDD</span>
|
|
</div>
|
|
</div>
|
|
<div class="soft-card">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Storico pagamenti</p>
|
|
<ul class="space-y-3 text-sm">
|
|
<li class="flex items-center justify-between"><span>Fattura rate trimestre Q3</span><strong class="text-emerald-600">Pagata 12/10/2025</strong></li>
|
|
<li class="flex items-center justify-between"><span>Saldo straordinario ascensore</span><strong class="text-rose-600">In sospeso</strong></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
@break
|
|
|
|
@case('rentals')
|
|
<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(320px,360px)]">
|
|
<div class="soft-card">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Contratti collegati</p>
|
|
<p class="text-sm text-slate-600 mb-4">
|
|
In questa sezione mostreremo tutti i contratti di locazione associati al soggetto
|
|
e, quando appartiene a uno stabile, la vista riepilogativa dell'intero complesso.
|
|
</p>
|
|
<ul class="space-y-3 text-sm">
|
|
<li class="flex items-center justify-between border-b pb-3">
|
|
<span class="text-slate-500">Unità collegata</span>
|
|
<strong class="text-slate-900">Scala A / Interno 5</strong>
|
|
</li>
|
|
<li class="flex items-center justify-between border-b pb-3">
|
|
<span class="text-slate-500">Contratto attivo</span>
|
|
<span class="pill pill-success">Dal 01/09/2023</span>
|
|
</li>
|
|
<li class="flex items-center justify-between">
|
|
<span class="text-slate-500">Canone attuale</span>
|
|
<strong class="text-slate-900">€ 980 / mese</strong>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="soft-card bg-slate-50 border-dashed border-slate-300">
|
|
<p class="text-xs uppercase tracking-wide text-slate-500 mb-3">Prossimi passi</p>
|
|
<p class="text-sm text-slate-600 mb-4">
|
|
Collega rapidamente gli affitti esistenti oppure crea un nuovo contratto e
|
|
sincronizzalo con la gestione affitti dello stabile.</p>
|
|
<div class="flex flex-col gap-3">
|
|
<button class="netgescon-btn netgescon-btn-primary">
|
|
<i class="fas fa-link mr-2"></i>Collega affitto esistente
|
|
</button>
|
|
<a href="{{ route('admin.affitti.index') }}" class="netgescon-btn netgescon-btn-outline-secondary">
|
|
<i class="fas fa-building mr-2"></i>Apri gestione affitti stabile
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@break
|
|
|
|
@default
|
|
<div class="soft-card">
|
|
<p class="text-slate-500">Contenuto in preparazione.</p>
|
|
</div>
|
|
@endswitch
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="scheda-grid__rail">
|
|
<x-anagrafica.action-rail
|
|
:actions="$actions"
|
|
:stats="$sidebarStats"
|
|
:tasks="$tasks"
|
|
/>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
.scheda-grid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.scheda-grid {
|
|
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
.scheda-grid__list,
|
|
.scheda-grid__main,
|
|
.scheda-grid__rail {
|
|
width: 100%;
|
|
}
|
|
|
|
.scheda-grid__rail {
|
|
position: sticky;
|
|
top: 1.5rem;
|
|
align-self: start;
|
|
}
|
|
|
|
.scheda-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.scheda-card {
|
|
border-radius: 28px;
|
|
padding: 1.75rem;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.scheda-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.scheda-tab {
|
|
border-radius: 999px;
|
|
border: 1px solid #e0e7ff;
|
|
background: #fff;
|
|
color: #475569;
|
|
font-weight: 600;
|
|
padding: 0.45rem 1.2rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.scheda-tab.is-active {
|
|
background: linear-gradient(135deg, #2563eb, #7c3aed);
|
|
border-color: transparent;
|
|
color: #fff;
|
|
box-shadow: 0 12px 24px rgba(59, 130, 246, 0.25);
|
|
}
|
|
|
|
.scheda-panel {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.scheda-panel.is-active {
|
|
display: flex;
|
|
}
|
|
|
|
.soft-card {
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 24px;
|
|
padding: 1.5rem;
|
|
background: #fff;
|
|
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.pill {
|
|
border-radius: 999px;
|
|
padding: 0.2rem 0.85rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pill-primary { background: rgba(37, 99, 235, 0.15); color: #1d4ed8; }
|
|
.pill-success { background: rgba(16, 185, 129, 0.15); color: #047857; }
|
|
.pill-warning { background: rgba(251, 191, 36, 0.2); color: #92400e; }
|
|
.pill-muted { background: rgba(148, 163, 184, 0.2); color: #475569; }
|
|
|
|
.timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.timeline-item {
|
|
display: flex;
|
|
gap: 0.9rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.timeline-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-top: 0.35rem;
|
|
}
|
|
|
|
.timeline-dot.success { background: #10b981; }
|
|
.timeline-dot.warning { background: #f97316; }
|
|
.timeline-dot.info { background: #0ea5e9; }
|
|
|
|
@media (max-width: 640px) {
|
|
.scheda-tabs {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.scheda-tab {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.scheda-toolbar {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const tabs = document.querySelectorAll('.scheda-tab');
|
|
const panels = document.querySelectorAll('.scheda-panel');
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
const targetId = tab.getAttribute('data-tab-target');
|
|
|
|
tabs.forEach(t => t.classList.remove('is-active'));
|
|
panels.forEach(panel => panel.classList.remove('is-active'));
|
|
|
|
tab.classList.add('is-active');
|
|
document.getElementById(targetId)?.classList.add('is-active');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|