feat(planning): gestion des camions, filtres et layout

- Dashboard réduit en barre de navigation compacte
- Mini calendrier démarrant le lundi (NZ_DATE_CONFIG)
- Bouton "Nouveau spectacle" déplacé dans la barre du haut
- Assignation / désassignation de camions sur les spectacles
- Création et modification de camions depuis le planning
- Plaque d'immatriculation + sélecteur de statut dans le formulaire camion
- Scroll du panneau droit corrigé (:host flex)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/app.config.ts

@@ -3,7 +3,7 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './routes';
 
-import { fr_FR, provideNzI18n } from 'ng-zorro-antd/i18n';
+import { fr_FR, provideNzI18n, NZ_DATE_CONFIG } from 'ng-zorro-antd/i18n';
 import { registerLocaleData } from '@angular/common';
 import fr from '@angular/common/locales/fr';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
@@ -17,6 +17,7 @@ export const appConfig: ApplicationConfig = {
         provideBrowserGlobalErrorListeners(),
         provideZoneChangeDetection({ eventCoalescing: true }),
         provideRouter(routes), provideNzI18n(fr_FR), provideAnimationsAsync(), provideHttpClient(),
+        { provide: NZ_DATE_CONFIG, useValue: { firstDayOfWeek: 1 } },
         provideApi('/api')
     ]
 };

src/app/components/pages/dashboard/dashboard.css

@@ -3,51 +3,57 @@
     height: 100vh;
     background: #f5f4f0;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
 
 .dashboard {
-    padding: 40px;
-    max-width: 900px;
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    background: #fff;
+    border-bottom: 1px solid #ede8e0;
+    flex-shrink: 0;
 }
 
 .dashboard-title {
-    font-size: 1.6rem;
-    font-weight: 600;
-    color: #2c2c2c;
-    margin-bottom: 32px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: #aaa;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: 0;
+    white-space: nowrap;
 }
 
 .dashboard-cards {
     display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
+    gap: 8px;
 }
 
 .dashboard-card {
     display: flex;
     align-items: center;
-    gap: 16px;
-    padding: 20px 24px;
-    background: #fff;
-    border: 1px solid #ede8e0;
-    border-radius: 10px;
+    gap: 8px;
+    padding: 6px 14px;
+    background: #fdf6ed;
+    border: 1.5px solid #ede8e0;
+    border-radius: 20px;
     text-decoration: none;
     color: inherit;
-    min-width: 280px;
-    transition: box-shadow 0.15s ease, border-color 0.15s ease;
+    transition: border-color 0.15s ease, background 0.15s ease;
     cursor: pointer;
 }
 
 .dashboard-card:hover {
     border-color: #d4a574;
-    box-shadow: 0 4px 16px rgba(212, 165, 116, 0.15);
+    background: #faf0e4;
 }
 
 .card-icon {
-    width: 48px;
-    height: 48px;
-    background: #fdf6ed;
-    border-radius: 10px;
+    width: 20px;
+    height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -55,29 +61,24 @@
     flex-shrink: 0;
 }
 
-.card-content {
-    flex: 1;
-}
-
 .card-content h2 {
-    font-size: 1rem;
+    font-size: 0.82rem;
     font-weight: 600;
     color: #2c2c2c;
-    margin: 0 0 4px;
-}
-
-.card-content p {
-    font-size: 0.82rem;
-    color: #888;
     margin: 0;
 }
 
-.card-arrow {
-    color: #ccc;
-    flex-shrink: 0;
-    transition: color 0.15s ease;
+.card-content p {
+    display: none;
 }
 
-.dashboard-card:hover .card-arrow {
-    color: #d4a574;
+.card-arrow {
+    display: none;
+}
+
+.outlet-wrapper {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }

src/app/components/pages/dashboard/dashboard.html

@@ -4,7 +4,7 @@
         <div class="dashboard-cards">
             <a routerLink="planning" class="dashboard-card">
                 <div class="card-icon">
-                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                         <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke-width="2"/>
                         <line x1="16" y1="2" x2="16" y2="6" stroke-width="2" stroke-linecap="round"/>
                         <line x1="8" y1="2" x2="8" y2="6" stroke-width="2" stroke-linecap="round"/>
@@ -13,13 +13,11 @@
                 </div>
                 <div class="card-content">
                     <h2>Planning</h2>
-                    <p>Grille hebdomadaire des spectacles et camions</p>
                 </div>
-                <svg class="card-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                    <path d="M9 18L15 12L9 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
             </a>
         </div>
     </div>
-    <router-outlet></router-outlet>
+    <div class="outlet-wrapper">
+        <router-outlet></router-outlet>
+    </div>
 </div>

src/app/components/pages/planning/planning.css

@@ -1,7 +1,14 @@
 /* ── Layout général ─────────────────────────────────────── */
+:host {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+}
+
 .background {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     background: #f5f4f0;
     overflow: hidden;
     display: flex;
@@ -135,6 +142,28 @@
     color: #fff;
 }
 
+.new-show-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 16px;
+    background: linear-gradient(135deg, #d4a574, #c49563);
+    border: none;
+    border-radius: 20px;
+    font-size: 12px;
+    font-family: 'Be Vietnam Pro', sans-serif;
+    font-weight: 700;
+    color: #fff;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+}
+
+.new-show-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);
+}
+
 /* ── Grille semaine ─────────────────────────────────────── */
 .week-calendar {
     flex: 1;
@@ -482,12 +511,9 @@
 
 /* ── Panneau droit — Détails ────────────────────────────── */
 .details {
-    flex: 1;
     padding: 12px 14px 16px;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-    min-height: 0;
 }
 
 .sidebar-header {
@@ -502,8 +528,6 @@
 }
 
 .sidebar-content {
-    flex: 1;
-    overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 10px;
@@ -584,6 +608,95 @@
     margin-top: 2px;
 }
 
+.show-trucks-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 7px;
+    align-items: center;
+}
+
+.truck-tag {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    background: rgba(96, 93, 200, 0.1);
+    border: 1px solid rgba(96, 93, 200, 0.3);
+    border-radius: 12px;
+    padding: 2px 6px 2px 8px;
+    font-size: 10px;
+    font-weight: 600;
+    color: #605DC8;
+}
+
+.truck-edit, .truck-remove {
+    border: none;
+    background: none;
+    color: #605DC8;
+    cursor: pointer;
+    padding: 0 2px;
+    font-size: 11px;
+    line-height: 1;
+    opacity: 0.5;
+    transition: opacity 0.1s;
+}
+
+.truck-edit:hover, .truck-remove:hover {
+    opacity: 1;
+}
+
+.truck-edit-card {
+    border: none;
+    background: none;
+    color: #605DC8;
+    cursor: pointer;
+    font-size: 13px;
+    opacity: 0.5;
+    transition: opacity 0.1s;
+    padding: 0;
+}
+
+.truck-edit-card:hover {
+    opacity: 1;
+}
+
+.truck-select {
+    border: 1px dashed #ddd;
+    background: transparent;
+    border-radius: 12px;
+    padding: 2px 8px;
+    font-size: 10px;
+    color: #999;
+    cursor: pointer;
+    outline: none;
+    font-family: 'Be Vietnam Pro', sans-serif;
+    transition: all 0.15s;
+}
+
+.truck-select:hover {
+    border-color: #605DC8;
+    color: #605DC8;
+}
+
+.truck-create-btn {
+    border: 1px dashed #605DC8;
+    background: transparent;
+    border-radius: 12px;
+    padding: 2px 8px;
+    font-size: 10px;
+    font-weight: 600;
+    color: #605DC8;
+    cursor: pointer;
+    font-family: 'Be Vietnam Pro', sans-serif;
+    transition: all 0.15s;
+    opacity: 0.7;
+}
+
+.truck-create-btn:hover {
+    opacity: 1;
+    background: rgba(96, 93, 200, 0.08);
+}
+
 .sidebar-btn {
     display: flex;
     align-items: center;

src/app/components/pages/planning/planning.html

@@ -39,6 +39,12 @@
                             </svg>
                         </button>
                     </div>
+                    <button class="new-show-btn" (click)="showModal()">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                            <path d="M12 5v14M5 12h14" stroke-width="2.5" stroke-linecap="round"/>
+                        </svg>
+                        Nouveau spectacle
+                    </button>
                 </div>
 
                 <div class="week-calendar" #weekCalendar>
@@ -151,6 +157,24 @@
                                         </div>
                                         <p *ngIf="show.place">{{ show.place }}</p>
                                         <p *ngIf="show.description">{{ show.description }}</p>
+                                        <div class="show-trucks-row">
+                                            @for (truck of getTrucksForShow(show.id!); track truck.id) {
+                                                <span class="truck-tag">
+                                                    {{ truck.type }}
+                                                    <button class="truck-edit" (click)="openEditTruckModal(truck)">✎</button>
+                                                    <button class="truck-remove" (click)="removeTruck(truck.id!)">×</button>
+                                                </span>
+                                            }
+                                            @if (getAvailableTrucks().length > 0) {
+                                                <select class="truck-select" (change)="onTruckAssign($event, show.id!)">
+                                                    <option value="">+ Assigner</option>
+                                                    @for (truck of getAvailableTrucks(); track truck.id) {
+                                                        <option [value]="truck.id">{{ truck.type }}</option>
+                                                    }
+                                                </select>
+                                            }
+                                            <button class="truck-create-btn" (click)="showTruckModal(show.id!)">+ Nouveau</button>
+                                        </div>
                                     </div>
                                 }
                             </div>
@@ -175,7 +199,10 @@
                                     <div class="show-card truck-card">
                                         <div class="show-card-header">
                                             <strong>{{ truck.type || 'Camion' }}</strong>
-                                            <span class="truck-statut" *ngIf="truck.statut">{{ truck.statut }}</span>
+                                            <div style="display:flex; align-items:center; gap:6px;">
+                                                <span class="truck-statut" *ngIf="truck.statut">{{ truck.statut }}</span>
+                                                <button class="truck-edit-card" (click)="openEditTruckModal(truck)">✎</button>
+                                            </div>
                                         </div>
                                         <p *ngIf="truck.sizes">Taille : {{ truck.sizes }}</p>
                                         <p *ngIf="truck.maxExplosiveCapacity">Capacité : {{ truck.maxExplosiveCapacity }} kg</p>
@@ -185,28 +212,6 @@
                         }
                     </div>
 
-                    <div class="sidebar-block">
-                        <h4>
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                <circle cx="12" cy="12" r="3" stroke-width="2"/>
-                                <path d="M12 1v6m0 6v6M1 12h6m6 0h6" stroke-width="2" stroke-linecap="round"/>
-                            </svg>
-                            Actions rapides
-                        </h4>
-                        <button class="sidebar-btn" (click)="showModal()">
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                <path d="M12 5v14M5 12h14" stroke-width="2" stroke-linecap="round"/>
-                            </svg>
-                            Créer un spectacle
-                        </button>
-                        <button class="sidebar-btn">
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-width="2"/>
-                                <polyline points="14 2 14 8 20 8" stroke-width="2"/>
-                            </svg>
-                            Voir rapports
-                        </button>
-                    </div>
 
                 </div>
             </div>
@@ -282,4 +287,72 @@
             </div>
         </div>
     </ng-container>
+</nz-modal>
+
+<nz-modal
+        [nzVisible]="isTruckModalVisible()"
+        (nzVisibleChange)="isTruckModalVisible.set($event)"
+        [nzFooter]="null"
+        [nzWidth]="440"
+        (nzOnCancel)="handleTruckCancel()">
+    <ng-container *nzModalContent>
+        <div class="create-form">
+            <div class="create-form-title">
+                <div class="create-form-icon" style="background: linear-gradient(135deg, #605DC8, #4e4aaa)">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <rect x="1" y="3" width="15" height="13" rx="2" ry="2" stroke-width="1.5"/>
+                        <path d="M16 8h5l3 3v5h-4" stroke-width="1.5"/>
+                        <circle cx="5.5" cy="18.5" r="2.5" stroke-width="1.5"/>
+                        <circle cx="18.5" cy="18.5" r="2.5" stroke-width="1.5"/>
+                    </svg>
+                </div>
+                <div>
+                    <h3>{{ editTruckId ? 'Modifier le camion' : 'Nouveau camion' }}</h3>
+                    <p>{{ editTruckId ? 'Modifiez les informations du camion' : 'Renseignez les informations du camion' }}</p>
+                </div>
+            </div>
+
+            <div class="form-field">
+                <label class="form-label">Plaque d'immatriculation <span class="form-required">*</span></label>
+                <input class="form-input" placeholder="Ex: AB-123-CD"
+                       [(ngModel)]="newTruck.type" name="truckType"/>
+            </div>
+
+            <div class="form-row-2">
+                <div class="form-field">
+                    <label class="form-label">Dimensions</label>
+                    <input class="form-input" placeholder="Ex: 12m x 2.5m"
+                           [(ngModel)]="newTruck.sizes" name="truckSizes"/>
+                </div>
+                <div class="form-field">
+                    <label class="form-label">Capacité max (kg)</label>
+                    <input class="form-input" type="number" placeholder="Ex: 500"
+                           [(ngModel)]="newTruck.maxExplosiveCapacity" name="truckCapacity"/>
+                </div>
+            </div>
+
+            <div class="form-field">
+                <label class="form-label">Statut</label>
+                <select class="form-input" [(ngModel)]="newTruck.status" name="truckStatus">
+                    <option value="">-- Choisir un statut --</option>
+                    <option value="Disponible">Disponible</option>
+                    <option value="Indisponible">Indisponible</option>
+                    <option value="En panne">En panne</option>
+                    <option value="En maintenance">En maintenance</option>
+                    <option value="En déplacement">En déplacement</option>
+                </select>
+            </div>
+
+            <div class="form-actions">
+                <button class="form-btn-cancel" (click)="handleTruckCancel()">Annuler</button>
+                <button class="form-btn-submit" [disabled]="!newTruck.type" (click)="handleTruckOk()"
+                        style="background: linear-gradient(135deg, #605DC8, #4e4aaa)">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path d="M12 5v14M5 12h14" stroke-width="2.5" stroke-linecap="round"/>
+                    </svg>
+                    {{ editTruckId ? 'Enregistrer' : 'Créer le camion' }}
+                </button>
+            </div>
+        </div>
+    </ng-container>
 </nz-modal>

src/app/components/pages/planning/planning.ts

@@ -5,6 +5,7 @@ import {FormsModule} from '@angular/forms';
 import {
     PyroFetesDTOShowRequestCreateShowDto,
     PyroFetesDTOShowResponseReadShowDto,
+    PyroFetesDTOTruckRequestCreateTruckDto,
     PyroFetesDTOTruckResponseReadTruckDto,
     ShowsService,
     TrucksService
@@ -32,6 +33,11 @@ export class Planning implements OnInit, AfterViewInit {
     newShow: PyroFetesDTOShowRequestCreateShowDto = {};
     newShowDate: Date | null = null;
 
+    isTruckModalVisible = signal<boolean>(false);
+    newTruck: PyroFetesDTOTruckRequestCreateTruckDto = {};
+    newTruckShowId: number | null = null;
+    editTruckId: number | null = null;
+
     readonly slotHeight = 48;
 
     async ngOnInit() {
@@ -272,6 +278,87 @@ export class Planning implements OnInit, AfterViewInit {
         return this.getTrucksForDay(this.selectedDay);
     }
 
+    getTrucksForShow(showId: number): PyroFetesDTOTruckResponseReadTruckDto[] {
+        return this.trucks().filter(t => t.showId === showId);
+    }
+
+    getAvailableTrucks(): PyroFetesDTOTruckResponseReadTruckDto[] {
+        return this.trucks().filter(t => !t.showId);
+    }
+
+    async assignTruck(truckId: number, showId: number): Promise<void> {
+        await firstValueFrom(this.trucksService.pyroFetesEndpointsTruckUpdateTruckEndpoint(
+            truckId, { showId }
+        ));
+        await this.fetchTrucks();
+    }
+
+    async removeTruck(truckId: number): Promise<void> {
+        await firstValueFrom(this.trucksService.pyroFetesEndpointsTruckUpdateTruckEndpoint(
+            truckId, { showId: 0 }
+        ));
+        await this.fetchTrucks();
+    }
+
+    async onTruckAssign(event: Event, showId: number): Promise<void> {
+        const select = event.target as HTMLSelectElement;
+        const truckId = parseInt(select.value);
+        if (!truckId) return;
+        await this.assignTruck(truckId, showId);
+        select.value = '';
+    }
+
+    showTruckModal(showId: number): void {
+        this.editTruckId = null;
+        this.newTruckShowId = showId;
+        this.newTruck = {};
+        this.isTruckModalVisible.set(true);
+    }
+
+    openEditTruckModal(truck: PyroFetesDTOTruckResponseReadTruckDto): void {
+        this.editTruckId = truck.id ?? null;
+        this.newTruckShowId = truck.showId ?? null;
+        this.newTruck = {
+            type: truck.type ?? undefined,
+            sizes: truck.sizes ?? undefined,
+            maxExplosiveCapacity: truck.maxExplosiveCapacity ?? undefined,
+            status: truck.statut ?? undefined,
+        };
+        this.isTruckModalVisible.set(true);
+    }
+
+    async handleTruckOk(): Promise<void> {
+        if (!this.newTruck.type) return;
+        if (this.editTruckId !== null) {
+            await firstValueFrom(this.trucksService.pyroFetesEndpointsTruckUpdateTruckEndpoint(
+                this.editTruckId, {
+                    type: this.newTruck.type,
+                    sizes: this.newTruck.sizes,
+                    maxExplosiveCapacity: this.newTruck.maxExplosiveCapacity?.toString(),
+                    statut: this.newTruck.status,
+                    showId: this.newTruckShowId ?? undefined
+                }
+            ));
+        } else {
+            await firstValueFrom(this.trucksService.pyroFetesEndpointsTruckCreateTruckEndpoint({
+                ...this.newTruck,
+                showId: this.newTruckShowId ?? undefined
+            }));
+        }
+        await this.fetchTrucks();
+        this.newTruck = {};
+        this.newTruckShowId = null;
+        this.editTruckId = null;
+        this.isTruckModalVisible.set(false);
+    }
+
+    handleTruckCancel(): void {
+        this.newTruck = {};
+        this.newTruckShowId = null;
+        this.editTruckId = null;
+        this.isTruckModalVisible.set(false);
+    }
+
     formatSelectedDay(date: Date): string {
         const days = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
         const months = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',