387 lines
22 KiB
PHP
387 lines
22 KiB
PHP
{{--
|
|
Dashboard Condomino - Layout Modulare
|
|
Utilizza i componenti dashboard modulari per una gestione centralizzata
|
|
--}}
|
|
|
|
<x-layout.universal
|
|
pageTitle="Dashboard Condomino"
|
|
showSidebar="true"
|
|
showBreadcrumb="true">
|
|
<div class="space-y-6">
|
|
|
|
<!-- Banner Benvenuto -->
|
|
<x-dashboard.condomino.welcome-banner />
|
|
|
|
<!-- Statistiche Principali -->
|
|
<x-dashboard.condomino.stats :stats="$stats ?? []" />
|
|
|
|
<!-- Azioni Rapide -->
|
|
<x-dashboard.condomino.quick-actions />
|
|
|
|
<!-- Layout a due colonne per contenuti aggiuntivi -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<!-- Comunicazioni Recenti -->
|
|
<x-dashboard.condomino.recent-communications />
|
|
|
|
<!-- Rate in Scadenza -->
|
|
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Rate in Scadenza</h3>
|
|
<a href="{{ route('condomino.rate.index') }}"
|
|
class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400">
|
|
Visualizza tutte
|
|
</a>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
{{-- Rate fittizie per ora, da sostituire con dati reali --}}
|
|
|
|
<!-- Rata 1 -->
|
|
<div class="flex items-center justify-between p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white">
|
|
Rata Marzo 2024
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
Scadenza: 31 Marzo 2024
|
|
</p>
|
|
</div>
|
|
<div class="flex-shrink-0 ml-4 text-right">
|
|
<p class="text-lg font-bold text-red-600 dark:text-red-400">
|
|
€450,00
|
|
</p>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
|
|
Scadenza vicina
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rata 2 -->
|
|
<div class="flex items-center justify-between p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white">
|
|
Rata Aprile 2024
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
Scadenza: 30 Aprile 2024
|
|
</p>
|
|
</div>
|
|
<div class="flex-shrink-0 ml-4 text-right">
|
|
<p class="text-lg font-bold text-yellow-600 dark:text-yellow-400">
|
|
€450,00
|
|
</p>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
|
|
In arrivo
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
@if(false) {{-- Quando non ci sono rate in scadenza --}}
|
|
<div class="text-center py-8">
|
|
<div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fas fa-check-circle text-green-400 text-2xl"></i>
|
|
</div>
|
|
<p class="text-gray-500 dark:text-gray-400">Nessuna rata in scadenza</p>
|
|
<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Tutte le rate sono in regola!</p>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Prossime Assemblee -->
|
|
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Prossime Assemblee</h3>
|
|
<a href="{{ route('condomino.assemblee.index') }}"
|
|
class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400">
|
|
Visualizza tutte
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{{-- Assemblee fittizie per ora, da sostituire con dati reali --}}
|
|
|
|
<!-- Assemblea 1 -->
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<h4 class="text-sm font-medium text-gray-900 dark:text-white">
|
|
Assemblea Straordinaria
|
|
</h4>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
Lavori di ristrutturazione del tetto
|
|
</p>
|
|
<div class="flex items-center mt-3 text-xs text-gray-600 dark:text-gray-400">
|
|
<i class="fas fa-calendar mr-2"></i>
|
|
15 Marzo 2024 - 18:00
|
|
</div>
|
|
<div class="flex items-center mt-1 text-xs text-gray-600 dark:text-gray-400">
|
|
<i class="fas fa-map-marker-alt mr-2"></i>
|
|
Sala riunioni, Piano Terra
|
|
</div>
|
|
</div>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
Confermata
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Assemblea 2 -->
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<h4 class="text-sm font-medium text-gray-900 dark:text-white">
|
|
Assemblea Ordinaria
|
|
</h4>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
Approvazione bilancio 2024
|
|
</p>
|
|
<div class="flex items-center mt-3 text-xs text-gray-600 dark:text-gray-400">
|
|
<i class="fas fa-calendar mr-2"></i>
|
|
20 Aprile 2024 - 19:00
|
|
</div>
|
|
<div class="flex items-center mt-1 text-xs text-gray-600 dark:text-gray-400">
|
|
<i class="fas fa-map-marker-alt mr-2"></i>
|
|
Sala riunioni, Piano Terra
|
|
</div>
|
|
</div>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
Programmata
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if(false) {{-- Quando non ci sono assemblee --}}
|
|
<div class="text-center py-8">
|
|
<div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fas fa-calendar-times text-gray-400 text-2xl"></i>
|
|
</div>
|
|
<p class="text-gray-500 dark:text-gray-400">Nessuna assemblea programmata</p>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@endsection
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Ticket Aperti</dt>
|
|
<dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $stats['ticket_aperti'] }}</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div class="p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Rate Scadute</dt>
|
|
<dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $stats['rate_scadute'] }}</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div class="p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-6a1 1 0 00-1-1H9a1 1 0 00-1 1v6a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Documenti</dt>
|
|
<dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $stats['documenti_disponibili'] }}</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Azioni Rapide -->
|
|
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Azioni Rapide</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<a href="{{ route('condomino.tickets.create') }}"
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded text-center transition duration-200">
|
|
Nuovo Ticket
|
|
</a>
|
|
<a href="{{ route('condomino.documenti.index') }}"
|
|
class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded text-center transition duration-200">
|
|
Documenti
|
|
</a>
|
|
<a href="{{ route('condomino.unita.index') }}"
|
|
class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded text-center transition duration-200">
|
|
Le Mie Unità
|
|
</a>
|
|
<a href="{{ route('condomino.pagamenti.index') }}"
|
|
class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded text-center transition duration-200">
|
|
Pagamenti
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenuto principale in due colonne -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<!-- I Miei Ticket -->
|
|
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">I Miei Ticket</h3>
|
|
<a href="{{ route('condomino.tickets.index') }}" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
|
|
Vedi tutti
|
|
</a>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
@forelse($ticketRecenti as $ticket)
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex-1">
|
|
<h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
<a href="{{ route('condomino.tickets.show', $ticket) }}" class="hover:text-blue-600">
|
|
{{ $ticket->titolo }}
|
|
</a>
|
|
</h4>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
{{ $ticket->stabile->denominazione }}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col items-end space-y-1">
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
|
|
@switch($ticket->stato)
|
|
@case('Aperto') bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100 @break
|
|
@case('Preso in Carico') bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100 @break
|
|
@case('In Lavorazione') bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 @break
|
|
@default bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100
|
|
@endswitch">
|
|
{{ $ticket->stato }}
|
|
</span>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ $ticket->created_at->diffForHumans() }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<p class="text-gray-500 dark:text-gray-400 text-center py-4">Nessun ticket aperto</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ultimi Documenti -->
|
|
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Ultimi Documenti</h3>
|
|
<a href="{{ route('condomino.documenti.index') }}" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
|
|
Vedi tutti
|
|
</a>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
@forelse($ultimiDocumenti as $documento)
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex-1">
|
|
<h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
{{ $documento->nome_file }}
|
|
</h4>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
{{ $documento->tipo_documento }} - {{ $documento->documentable->denominazione ?? 'N/A' }}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col items-end space-y-1">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ $documento->created_at->diffForHumans() }}
|
|
</span>
|
|
<a href="{{ route('condomino.documenti.download', $documento) }}" class="text-blue-600 hover:text-blue-900 text-xs">
|
|
Download
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<p class="text-gray-500 dark:text-gray-400 text-center py-4">Nessun documento disponibile</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Le Mie Unità -->
|
|
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Le Mie Unità Immobiliari</h3>
|
|
<a href="{{ route('condomino.unita.index') }}" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
|
|
Gestisci
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
@forelse($unitaImmobiliari as $unita)
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<h4 class="font-medium text-gray-900 dark:text-gray-100">
|
|
{{ $unita->stabile->denominazione }}
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
{{ $unita->identificazione_completa }}
|
|
</p>
|
|
<div class="mt-3 flex justify-between items-center">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">
|
|
Millesimi: {{ $unita->millesimi_proprieta ?? 'N/A' }}
|
|
</span>
|
|
<a href="{{ route('condomino.unita.show', $unita) }}"
|
|
class="text-blue-600 hover:text-blue-900 text-sm">
|
|
Dettagli
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-span-full text-center py-8">
|
|
<p class="text-gray-500 dark:text-gray-400">Nessuna unità immobiliare associata</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Script per grafici (Chart.js) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
// Implementeremo i grafici quando avremo i dati delle rate e pagamenti
|
|
</script>
|
|
</x-layout.universal> |