# NETGESCON - INTERFACCIA UNIVERSALE UNIFICATA
## 📋 OVERVIEW
Documentazione completa dell'implementazione dell'interfaccia universale unificata di NetGesCon, un sistema avanzato che fornisce un layout responsive e dinamico che si adatta automaticamente al ruolo dell'utente.
## 🎨 ARCHITETTURA INTERFACCIA ESISTENTE
### 🏗️ Layout Universale Bootstrap
**File principale**: `resources/views/layouts/app-universal.blade.php`
#### Struttura HTML
```html
```
## 🔐 SISTEMA PERMESSI INTEGRATO
### 👥 Gestione Ruoli e Permessi
**Integrazione**: Sistema permessi si integra perfettamente con l'interfaccia
#### Helper Blade per Controllo Permessi
```php
{{-- In qualsiasi vista Blade --}}
@can('manage_stabili')
Nuovo Stabile
@endcan
@cannot('view_financial_data')
Non hai i permessi per visualizzare i dati finanziari.
@endcannot
{{-- Controllo permessi con parametri --}}
@can('edit_stabile', $stabile)
Modifica
@endcan
```
#### Middleware per Controllo Accessi
```php
// Route con middleware permessi
Route::group(['middleware' => ['auth', 'permission:manage_stabili']], function () {
Route::resource('admin/stabili', StabiliController::class);
});
// Middleware personalizzato per ruoli
Route::group(['middleware' => ['auth', 'role:admin|super-admin']], function () {
Route::get('/admin/settings', [SettingsController::class, 'index']);
});
```
### 📋 Menu Dinamici Basati su Ruoli
#### Configurazione Menu
**File**: `config/menu.php`
```php
[
'dashboard' => [
'label' => 'Dashboard',
'icon' => 'fas fa-tachometer-alt',
'route' => 'dashboard',
'permission' => 'view_dashboard',
'roles' => ['admin', 'condomino', 'fornitore']
],
'stabili' => [
'label' => 'Stabili',
'icon' => 'fas fa-building',
'permission' => 'manage_stabili',
'roles' => ['admin', 'super-admin'],
'submenu' => [
'index' => [
'label' => 'Lista Stabili',
'route' => 'admin.stabili.index',
'permission' => 'view_stabili'
],
'create' => [
'label' => 'Nuovo Stabile',
'route' => 'admin.stabili.create',
'permission' => 'create_stabili'
]
]
],
// Altri menu...
]
];
```
#### Builder Menu Dinamico
```php
$item) {
// Controllo permessi
if (isset($item['permission']) && !$user->can($item['permission'])) {
continue;
}
// Controllo ruoli
if (isset($item['roles']) && !$user->hasAnyRole($item['roles'])) {
continue;
}
// Build submenu se presente
if (isset($item['submenu'])) {
$item['submenu'] = self::buildSubmenu($item['submenu'], $user);
// Se nessun submenu è accessibile, salta il menu principale
if (empty($item['submenu'])) {
continue;
}
}
$menu[$key] = $item;
}
return $menu;
}
private static function buildSubmenu($submenuConfig, $user)
{
$submenu = [];
foreach ($submenuConfig as $key => $item) {
if (isset($item['permission']) && !$user->can($item['permission'])) {
continue;
}
$submenu[$key] = $item;
}
return $submenu;
}
}
```
## 📱 RESPONSIVE DESIGN E MOBILE
### 🔧 Breakpoints Bootstrap
```css
/* Mobile First Approach */
/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
.sidebar {
width: 100%;
transform: translateX(-100%);
}
.main-content {
margin-left: 0;
}
.launcher-bar .breadcrumb {
display: none;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
.sidebar {
width: 200px;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.sidebar {
position: relative;
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.sidebar {
width: 250px;
}
}
```
### 📱 JavaScript per Mobile
```javascript
// Toggle sidebar su mobile
document.addEventListener('DOMContentLoaded', function() {
const sidebarToggle = document.getElementById('sidebarToggle');
const sidebar = document.querySelector('.sidebar');
const overlay = document.createElement('div');
overlay.className = 'sidebar-overlay d-md-none';
sidebarToggle?.addEventListener('click', function() {
sidebar.classList.toggle('show');
if (sidebar.classList.contains('show')) {
document.body.appendChild(overlay);
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1040;
`;
} else {
overlay.remove();
}
});
// Chiudi sidebar quando si clicca sull'overlay
overlay.addEventListener('click', function() {
sidebar.classList.remove('show');
overlay.remove();
});
});
// Auto-collapse submenu su mobile
function handleSubmenuToggle() {
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
dropdownToggles.forEach(toggle => {
toggle.addEventListener('click', function(e) {
e.preventDefault();
const submenu = this.nextElementSibling;
const isVisible = submenu.classList.contains('show');
// Chiudi tutti gli altri submenu
document.querySelectorAll('.nav-submenu.show').forEach(menu => {
if (menu !== submenu) {
menu.classList.remove('show');
}
});
// Toggle submenu corrente
submenu.classList.toggle('show', !isVisible);
});
});
}
handleSubmenuToggle();
```
## 🎨 PERSONALIZZAZIONE E TEMI
### 🎨 CSS Custom Properties
```css
:root {
/* Colori brand NetGesCon */
--netgescon-primary: #0d6efd;
--netgescon-secondary: #6c757d;
--netgescon-success: #198754;
--netgescon-danger: #dc3545;
--netgescon-warning: #ffc107;
--netgescon-info: #0dcaf0;
/* Sidebar colors */
--sidebar-bg: #f8f9fa;
--sidebar-text: #495057;
--sidebar-hover-bg: #e9ecef;
--sidebar-active-bg: var(--netgescon-primary);
--sidebar-active-text: white;
/* Layout spacing */
--sidebar-width: 250px;
--launcher-height: 60px;
--content-padding: 1.5rem;
}
/* Dark theme (per il futuro) */
[data-theme="dark"] {
--sidebar-bg: #212529;
--sidebar-text: #adb5bd;
--sidebar-hover-bg: #343a40;
}
```
### 🔧 Sistema Configurazione UI
```php
env('NETGESCON_THEME', 'light'),
'sidebar' => [
'width' => env('SIDEBAR_WIDTH', '250px'),
'collapsible' => env('SIDEBAR_COLLAPSIBLE', true),
'auto_hide_mobile' => env('SIDEBAR_AUTO_HIDE_MOBILE', true),
],
'launcher' => [
'show_breadcrumb' => env('LAUNCHER_SHOW_BREADCRUMB', true),
'show_notifications' => env('LAUNCHER_SHOW_NOTIFICATIONS', true),
'show_quick_actions' => env('LAUNCHER_SHOW_QUICK_ACTIONS', true),
],
'branding' => [
'logo_url' => env('NETGESCON_LOGO_URL', '/images/logo-netgescon.png'),
'app_name' => env('NETGESCON_APP_NAME', 'NetGesCon'),
'tagline' => env('NETGESCON_TAGLINE', 'Gestione Condominiale Avanzata'),
]
];
```
## 🧪 TESTING E QUALITÀ
### 🔬 Test Case Interfaccia
```php
create(['role' => 'admin']);
$condomino = User::factory()->create(['role' => 'condomino']);
// Test admin vede menu stabili
$this->actingAs($admin)
->get('/dashboard')
->assertSee('Stabili')
->assertSee('Nuovo Stabile');
// Test condomino non vede menu stabili
$this->actingAs($condomino)
->get('/dashboard')
->assertDontSee('Stabili')
->assertDontSee('Nuovo Stabile');
}
/** @test */
public function layout_universale_e_responsive()
{
$user = User::factory()->create();
$response = $this->actingAs($user)->get('/dashboard');
$response->assertStatus(200)
->assertSee('sidebar')
->assertSee('launcher-bar')
->assertSee('main-content');
}
/** @test */
public function permessi_controllano_accesso_menu()
{
$user = User::factory()->create();
$user->revokePermissionTo('manage_stabili');
$this->actingAs($user)
->get('/admin/stabili')
->assertStatus(403);
}
}
```
### 📊 Performance Monitoring
```javascript
// Performance monitoring per UI
class UIPerformanceMonitor {
static init() {
// Misura tempo caricamento sidebar
performance.mark('sidebar-start');
window.addEventListener('load', () => {
performance.mark('sidebar-end');
performance.measure('sidebar-load', 'sidebar-start', 'sidebar-end');
const sidebarTime = performance.getEntriesByName('sidebar-load')[0];
console.log(`Sidebar load time: ${sidebarTime.duration}ms`);
// Alert se troppo lento
if (sidebarTime.duration > 1000) {
console.warn('Sidebar loading too slow');
}
});
}
static measureMenuToggle() {
const toggleButtons = document.querySelectorAll('.dropdown-toggle');
toggleButtons.forEach(button => {
button.addEventListener('click', (e) => {
const start = performance.now();
// Misura tempo toggle submenu
setTimeout(() => {
const end = performance.now();
const duration = end - start;
if (duration > 100) {
console.warn(`Menu toggle slow: ${duration}ms`);
}
}, 0);
});
});
}
}
UIPerformanceMonitor.init();
```
## 🚀 PROSSIMI MIGLIORAMENTI
### 📋 Roadmap Interfaccia
#### ✅ Implementato
- Layout universale Bootstrap responsive
- Sidebar dinamica con permessi
- Launcher bar con azioni rapide
- Menu configurabili
- Sistema ruoli integrato
#### 🔄 In Corso
- Testing cross-browser approfondito
- Ottimizzazione performance mobile
- Accessibilità WCAG 2.1
#### ⏳ Pianificato
- **Dark theme** completo
- **Personalizzazione UI** per cliente
- **Animazioni** avanzate
- **PWA** (Progressive Web App)
- **Offline mode** base
### 🎯 Obiettivi Qualità
- **Performance**: Caricamento < 2 secondi
- **Accessibilità**: WCAG 2.1 AA compliance
- **Mobile**: 100% funzionalità su smartphone
- **Cross-browser**: IE11+, Chrome, Firefox, Safari, Edge
## 📞 SUPPORTO E MANUTENZIONE
### 🔧 Debug e Troubleshooting
```php
// Helper per debug interfaccia
if (app()->environment('local')) {
// Mostra info debug nella sidebar
echo "";
}
```
### 📈 Monitoring Produzione
- **Error tracking**: Sentry per errori JavaScript
- **Performance**: New Relic per monitoring performance
- **User analytics**: Google Analytics per utilizzo interfaccia
- **Uptime**: Pingdom per availability
L'interfaccia universale di NetGesCon rappresenta uno dei punti di forza del sistema, fornendo un'esperienza utente moderna, responsive e altamente personalizzabile che si adatta dinamicamente al ruolo dell'utente.