netgescon-master/resources/views/admin/layouts/netgescon.blade.php

275 lines
12 KiB
PHP

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>NetGescon - {{ $title ?? 'Dashboard Amministratore' }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- NetGescon Admin CSS -->
<link rel="stylesheet" href="{{ asset('css/netgescon-admin.css') }}">
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc;
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
.netgescon-layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.netgescon-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
height: 64px;
}
.netgescon-body {
display: flex;
flex: 1;
margin-top: 64px;
margin-bottom: 48px;
}
.netgescon-sidebar {
position: fixed;
left: 0;
top: 64px;
bottom: 48px;
width: 256px;
z-index: 40;
overflow-y: auto;
}
.netgescon-main {
margin-left: 256px;
flex: 1;
overflow-y: auto;
height: calc(100vh - 112px);
padding: 0;
}
.netgescon-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
height: 48px;
}
@media (max-width: 768px) {
.netgescon-sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.netgescon-sidebar.open {
transform: translateX(0);
}
.netgescon-main {
margin-left: 0;
}
}
</style>
</head>
<body>
<div class="netgescon-layout">
<!-- Header superiore blu NetGescon - FISSO -->
<header class="netgescon-header bg-blue-600 text-white shadow-lg">
<div class="px-4 sm:px-6 lg:px-8 h-full">
<div class="flex items-center justify-between h-full">
<!-- Logo e brand NetGescon -->
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-building text-2xl mr-3 text-white"></i>
<span class="text-xl font-bold text-white">NetGescon</span>
</div>
<!-- Badges info -->
<div class="ml-6 space-x-2 hidden lg:flex">
<span class="bg-blue-500 px-2 py-1 rounded text-xs text-white">Condominio Milano Centro</span>
<span class="bg-green-500 px-2 py-1 rounded text-xs text-white">ORDINARIA 2025</span>
<span class="bg-orange-500 px-2 py-1 rounded text-xs text-white">BLK-ALLINEAMENTO 2024/25</span>
</div>
</div>
<!-- Ricerca e azioni -->
<div class="flex items-center space-x-4">
<!-- Barra di ricerca -->
<div class="relative hidden md:block">
<input type="text"
placeholder="Cerca in NetGescon..."
class="bg-blue-500 text-white placeholder-blue-200 px-4 py-2 rounded-lg border-none focus:outline-none focus:ring-2 focus:ring-blue-300 w-64">
<i class="fas fa-search absolute right-3 top-3 text-blue-200"></i>
</div>
<!-- Icone azioni -->
<div class="flex space-x-2">
<button class="p-2 hover:bg-blue-500 rounded text-white">
<i class="fas fa-calendar"></i>
</button>
<button class="p-2 hover:bg-blue-500 rounded text-white">
<i class="fas fa-envelope"></i>
</button>
<button class="p-2 hover:bg-blue-500 rounded text-white">
<i class="fas fa-file-alt"></i>
</button>
<button class="p-2 hover:bg-blue-500 rounded relative text-white">
<i class="fas fa-bell"></i>
<span class="absolute -top-1 -right-1 bg-red-500 text-xs rounded-full h-5 w-5 flex items-center justify-center text-white">1</span>
</button>
<button class="p-2 hover:bg-blue-500 rounded text-white">
<i class="fas fa-moon"></i>
</button>
<button class="p-2 hover:bg-blue-500 rounded text-white">
<i class="fas fa-question-circle"></i>
</button>
<!-- User dropdown -->
<div class="relative ml-4">
<button id="user-menu-button"
class="flex items-center space-x-2 text-white hover:bg-blue-500 px-3 py-2 rounded"
onclick="toggleUserMenu()">
<i class="fas fa-user-circle text-lg"></i>
<span class="hidden md:block">{{ Auth::user()->name ?? 'Admin' }}</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<!-- Dropdown menu -->
<div id="user-menu" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden">
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<i class="fas fa-user mr-2"></i>
Profilo Utente
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<i class="fas fa-cog mr-2"></i>
Impostazioni
</a>
<div class="border-t border-gray-100"></div>
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit" class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<i class="fas fa-sign-out-alt mr-2"></i>
Logout
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="netgescon-body">
<!-- Sidebar NetGescon - FISSO -->
<aside class="netgescon-sidebar bg-slate-800 text-white shadow-xl">
@include('components.menu.sidebar-netgescon')
</aside>
<!-- Main content area - SCROLLABILE -->
<main class="netgescon-main bg-gray-50">
<!-- Breadcrumb -->
<div class="bg-white border-b px-6 py-3 sticky top-0 z-30">
<div class="flex items-center space-x-2 text-sm text-gray-600">
<i class="fas fa-home text-blue-500"></i>
<span>Home</span>
@hasSection('breadcrumb')
<i class="fas fa-chevron-right text-xs"></i>
@yield('breadcrumb')
@endif
</div>
</div>
<!-- Page content -->
<div class="p-6">
@yield('content')
</div>
</main>
</div>
<!-- Footer NetGescon - FISSO -->
<footer class="netgescon-footer bg-gray-100 border-t px-6 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4 text-sm text-gray-600">
<span>© 2025 NetGescon v2.1.0</span>
<span class="flex items-center">
<i class="fas fa-circle text-green-500 mr-2 text-xs"></i>
Server Online
</span>
</div>
<!-- Status indicators -->
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-1">
<div class="w-3 h-3 bg-red-500 rounded-full flex items-center justify-center">
<i class="fas fa-exclamation text-white text-xs"></i>
</div>
<span class="text-xs text-gray-600">1</span>
</div>
<div class="flex items-center space-x-1">
<div class="w-3 h-3 bg-orange-500 rounded-full flex items-center justify-center">
<i class="fas fa-clock text-white text-xs"></i>
</div>
<span class="text-xs text-gray-600">0</span>
</div>
<div class="flex items-center space-x-1">
<div class="w-3 h-3 bg-green-500 rounded-full flex items-center justify-center">
<i class="fas fa-check text-white text-xs"></i>
</div>
<span class="text-xs text-gray-600">V</span>
</div>
<span class="text-xs text-gray-500">Miki Admin | 00:41</span>
</div>
</div>
</footer>
</div>
<!-- NetGescon JS -->
<script src="{{ asset('js/netgescon-admin.js') }}"></script>
<!-- User menu dropdown script -->
<script>
function toggleUserMenu() {
const menu = document.getElementById('user-menu');
menu.classList.toggle('hidden');
}
// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
const button = document.getElementById('user-menu-button');
const menu = document.getElementById('user-menu');
if (!button.contains(event.target) && !menu.contains(event.target)) {
menu.classList.add('hidden');
}
});
</script>
@stack('scripts')
</body>
</html>