feat(planning): gestion des statuts automatiques, suppression de spectacles et améliorations d'affichage

- Statuts camions calculés automatiquement selon les shows assignés
- Gestion manuelle limitée aux statuts "En panne" et "En maintenance"
- Bouton pour supprimer un spectacle directement depuis la grille ou le panneau
- Ajustement de la largeur dynamique des évènements et camions dans les créneaux
- Nouveau style pour les badges de statut et indices visuels des actions
- Indications sur les statuts automatiques dans le formulaire camion

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/app.css

@@ -1,12 +1,12 @@
 :host {
-  --content-padding: 10px;
-}
-header {
   display: block;
-  height: 60px;
+  width: 100vw;
-  padding: var(--content-padding);
+  height: 100vh;
-  box-shadow: 0px 5px 25px var(--shadow-color);
+  overflow: hidden;
 }
-.content {
+
-  padding: var(--content-padding);
+main {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }

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

@@ -0,0 +1,84 @@
+.background {
+    width: 100%;
+    height: 100vh;
+    background: #f5f4f0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.dashboard {
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    background: #fff;
+    border-bottom: 1px solid #ede8e0;
+    flex-shrink: 0;
+}
+
+.dashboard-title {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: #aaa;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: 0;
+    white-space: nowrap;
+}
+
+.dashboard-cards {
+    display: flex;
+    gap: 8px;
+}
+
+.dashboard-card {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 14px;
+    background: #fdf6ed;
+    border: 1.5px solid #ede8e0;
+    border-radius: 20px;
+    text-decoration: none;
+    color: inherit;
+    transition: border-color 0.15s ease, background 0.15s ease;
+    cursor: pointer;
+}
+
+.dashboard-card:hover {
+    border-color: #d4a574;
+    background: #faf0e4;
+}
+
+.card-icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #d4a574;
+    flex-shrink: 0;
+}
+
+.card-content h2 {
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: #2c2c2c;
+    margin: 0;
+}
+
+.card-content p {
+    display: none;
+}
+
+.card-arrow {
+    display: none;
+}
+
+.outlet-wrapper {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}

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

@@ -0,0 +1,23 @@
+<div class="background">
+    <div class="dashboard">
+        <h1 class="dashboard-title">Tableau de bord</h1>
+        <div class="dashboard-cards">
+            <a routerLink="planning" class="dashboard-card">
+                <div class="card-icon">
+                    <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"/>
+                        <line x1="3" y1="10" x2="21" y2="10" stroke-width="2"/>
+                    </svg>
+                </div>
+                <div class="card-content">
+                    <h2>Planning</h2>
+                </div>
+            </a>
+        </div>
+    </div>
+    <div class="outlet-wrapper">
+        <router-outlet></router-outlet>
+    </div>
+</div>

src/app/components/pages/dashboard/dashboard.ts

@@ -1,16 +1,11 @@
 import { Component } from '@angular/core';
-import {RouterOutlet} from "@angular/router";
+import { RouterLink, RouterOutlet } from "@angular/router";
 
 @Component({
   selector: 'app-dashboard',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, RouterLink],
-  template: `
+  templateUrl: './dashboard.html',
-    <p>
+  styleUrl: './dashboard.css'
-      dashboard works!
-        <router-outlet></router-outlet>
-    </p>
-  `,
-  styles: ``
 })
 export class Dashboard {
 

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;
@@ -288,8 +317,6 @@
 /* ── Événements dans la grille ──────────────────────────── */
 .show-event {
     position: absolute;
-    left: 3px;
-    right: 3px;
     height: 42px;
     background: linear-gradient(135deg, #d4a574, #c49563);
     color: #fff;
@@ -319,8 +346,6 @@
 
 .truck-event {
     position: absolute;
-    left: 3px;
-    right: 3px;
     height: 42px;
     background: linear-gradient(135deg, #605DC8, #4e4aaa);
     color: #fff;
@@ -482,12 +507,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 +524,6 @@
 }
 
 .sidebar-content {
-    flex: 1;
-    overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 10px;
@@ -584,6 +604,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;
@@ -760,3 +869,58 @@
     opacity: 0.45;
     cursor: not-allowed;
 }
+
+/* ── Hint dans le formulaire ────────────────────────────── */
+.form-hint {
+    font-size: 10px;
+    color: #bbb;
+    margin-top: 5px;
+    font-style: italic;
+    line-height: 1.4;
+}
+
+/* ── Badge statut camion dans truck-tag ─────────────────── */
+.truck-tag-statut {
+    font-size: 9px;
+    font-weight: 700;
+    padding: 1px 5px;
+    border-radius: 8px;
+    background: rgba(96, 93, 200, 0.12);
+    color: #605DC8;
+}
+
+/* ── Couleurs selon statut ──────────────────────────────── */
+.statut-disponible {
+    color: #3aaa6e !important;
+}
+
+.statut-indisponible {
+    color: #e05252 !important;
+}
+
+.statut-en-déplacement {
+    color: #d4a574 !important;
+}
+
+.statut-en-panne {
+    color: #e05252 !important;
+}
+
+.statut-en-maintenance {
+    color: #888 !important;
+}
+
+.show-delete-btn {
+    border: none;
+    background: none;
+    color: #ccc;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    padding: 0 2px;
+    transition: color 0.15s;
+}
+
+.show-delete-btn:hover {
+    color: #e05252;
+}

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>
@@ -56,7 +62,6 @@
                                 <div class="day-date">{{ date.getDate() }}</div>
                             </div>
                             <div class="day-slots">
-                                <!-- Ligne "maintenant" sur la colonne du jour actuel -->
                                 @if (isToday(date)) {
                                     <div class="now-line" [style.top.px]="getNowTopPx()"></div>
                                 }
@@ -65,16 +70,20 @@
                                      (click)="selectDay(date)">
                                     @for (show of getShowsForSlot(date, hour); track show.id) {
                                         <div class="show-event"
-                                             [style.top.px]="show.date ? getEventTopPx(show.date) : 0">
+                                             [style.top.px]="show.date ? getEventTopPx(show.date) : 0"
+                                             [style.left]="'calc(' + (show.colIndex / show.colCount * 100) + '% + 3px)'"
+                                             [style.right]="'calc(' + ((show.colCount - show.colIndex - 1) / show.colCount * 100) + '% + 3px)'">
                                             <span class="show-event-name">{{ show.name }}</span>
                                             <span class="show-event-time" *ngIf="show.date">{{ formatShowTime(show.date) }}</span>
                                         </div>
                                     }
                                     @for (truck of getTrucksForSlot(date, hour); track truck.id) {
                                         <div class="truck-event"
-                                             [style.top.px]="truck.showId ? 0 : 0">
+                                             [style.top.px]="truck.showId ? 0 : 0"
+                                             [style.left]="'calc(' + (truck.colIndex / truck.colCount * 100) + '% + 3px)'"
+                                             [style.right]="'calc(' + ((truck.colCount - truck.colIndex - 1) / truck.colCount * 100) + '% + 3px)'">
                                             <span class="truck-event-name">{{ truck.type || 'Camion' }}</span>
-                                            <span class="truck-event-statut" *ngIf="truck.statut">{{ truck.statut }}</span>
+                                            <span class="truck-event-statut">{{ getComputedTruckStatus(truck) }}</span>
                                         </div>
                                     }
                                 </div>
@@ -147,10 +156,34 @@
                                     <div class="show-card">
                                         <div class="show-card-header">
                                             <strong>{{ show.name }}</strong>
-                                            <span class="show-time" *ngIf="show.date">{{ formatShowTime(show.date) }}</span>
+                                            <div style="display:flex; align-items:center; gap:6px;">
+                                                <span class="show-time" *ngIf="show.date">{{ formatShowTime(show.date) }}</span>
+                                                <button class="show-delete-btn" (click)="deleteShow(show.id!)">×</button>
+                                            </div>
                                         </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 }}
+                                                    <span class="truck-tag-statut" [class]="'statut-' + getComputedTruckStatus(truck).toLowerCase().replace(' ', '-')">
+                                                        {{ getComputedTruckStatus(truck) }}
+                                                    </span>
+                                                    <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 +208,12 @@
                                     <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" [class]="'statut-' + getComputedTruckStatus(truck).toLowerCase().replace(' ', '-')">
+                                                    {{ getComputedTruckStatus(truck) }}
+                                                </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,29 +223,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>
         </div>
@@ -282,4 +297,71 @@
             </div>
         </div>
     </ng-container>
-</nz-modal>
+</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>
+
+            <!-- Statut : uniquement En panne et En maintenance sont modifiables manuellement -->
+            <div class="form-field">
+                <label class="form-label">Statut manuel</label>
+                <select class="form-input" [(ngModel)]="newTruck.status" name="truckStatus">
+                    <option value="">-- Automatique --</option>
+                    <option value="En panne">En panne</option>
+                    <option value="En maintenance">En maintenance</option>
+                </select>
+                <p class="form-hint">Les statuts Disponible, Indisponible et En déplacement sont calculés automatiquement selon le show assigné.</p>
+            </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() {
@@ -79,7 +85,7 @@ export class Planning implements OnInit, AfterViewInit {
         if (!this.newShow.name) return;
         const dto: PyroFetesDTOShowRequestCreateShowDto = {
             ...this.newShow,
-            date: this.newShowDate ? this.newShowDate.toISOString() : undefined,
+            date: this.newShowDate ? this.formatDateLocal(this.newShowDate) : undefined,
         };
         await firstValueFrom(this.showsServices.pyroFetesEndpointsShowCreateShowEndpoint(dto));
         await this.fetchShows();
@@ -88,6 +94,16 @@ export class Planning implements OnInit, AfterViewInit {
         this.isVisible.set(false);
     }
 
+    private formatDateLocal(date: Date): string {
+        const pad = (n: number) => n.toString().padStart(2, '0');
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:00`;
+    }
+
+    async deleteShow(showId: number): Promise<void> {
+        await firstValueFrom(this.showsServices.pyroFetesEndpointsShowDeleteShowEndpoint(showId));
+        await this.fetchShows();
+    }
+
     handleCancel(): void {
         this.newShow = {};
         this.newShowDate = null;
@@ -201,15 +217,43 @@ export class Planning implements OnInit, AfterViewInit {
         this.selectedDay = date;
     }
 
-    // Both filters off → show everything. One active → only that type. Both active → both types.
+    // ── Filtres ──────────────────────────────────────────────────
+    // Aucun filtre actif → rien ne s'affiche. Chaque filtre affiche uniquement son type.
     get shouldShowShows(): boolean {
-        return !this.isCamionFilterActive || this.isShowFilterActive;
+        return this.isShowFilterActive;
     }
 
     get shouldShowCamions(): boolean {
-        return !this.isShowFilterActive || this.isCamionFilterActive;
+        return this.isCamionFilterActive;
     }
 
+    // ── Statut automatique des camions ───────────────────────────
+    // Priorité : En panne / En maintenance (manuel) → toujours respectés
+    // Sinon calculé selon le show associé et l'heure actuelle
+    getComputedTruckStatus(truck: PyroFetesDTOTruckResponseReadTruckDto): string {
+        // Statuts manuels prioritaires, jamais écrasés
+        if (truck.statut === 'En panne' || truck.statut === 'En maintenance') {
+            return truck.statut;
+        }
+
+        // Pas de show assigné → disponible
+        if (!truck.showId) return 'Disponible';
+
+        // Cherche le show associé
+        const show = this.shows().find(s => s.id === truck.showId);
+        if (!show?.date) return 'Disponible';
+
+        const showDate = new Date(show.date);
+        const now = new Date();
+        const diffMs = showDate.getTime() - now.getTime();
+        const diffH = diffMs / (1000 * 60 * 60);
+
+        if (diffH < 0) return 'Disponible';       // show passé → camion libre
+        if (diffH < 1) return 'En déplacement';   // moins d'1h avant le show
+        return 'Indisponible';                     // show futur (>= 1h)
+    }
+
+    // ── Slots et grille ──────────────────────────────────────────
     getShowsForDay(date: Date): PyroFetesDTOShowResponseReadShowDto[] {
         if (!this.shouldShowShows) return [];
         return this.shows().filter(show => {
@@ -221,9 +265,33 @@ export class Planning implements OnInit, AfterViewInit {
         });
     }
 
-    getShowsForSlot(date: Date, hour: string): PyroFetesDTOShowResponseReadShowDto[] {
+    getShowsForSlot(date: Date, hour: string): (PyroFetesDTOShowResponseReadShowDto & { colIndex: number; colCount: number })[] {
         if (!this.shouldShowShows) return [];
         const h = hour === '' ? 0 : parseInt(hour);
+        const shows = this.shows().filter(show => {
+            if (!show.date) return false;
+            const d = new Date(show.date);
+            return d.getFullYear() === date.getFullYear() &&
+                d.getMonth() === date.getMonth() &&
+                d.getDate() === date.getDate() &&
+                d.getHours() === h;
+        });
+        const trucksPresent = this.shouldShowCamions && this.getTrucksRawForSlot(date, h).length > 0;
+        const colCount = trucksPresent ? 2 : 1;
+        return shows.map(s => ({ ...s, colIndex: 0, colCount }));
+    }
+
+    getTrucksForSlot(date: Date, hour: string): (PyroFetesDTOTruckResponseReadTruckDto & { colIndex: number; colCount: number })[] {
+        if (!this.shouldShowCamions) return [];
+        const h = hour === '' ? 0 : parseInt(hour);
+        const trucks = this.getTrucksRawForSlot(date, h);
+        const showsPresent = this.shouldShowShows && this.getShowsRawForSlot(date, h).length > 0;
+        const colCount = showsPresent ? 2 : 1;
+        return trucks.map(t => ({ ...t, colIndex: showsPresent ? 1 : 0, colCount }));
+    }
+
+    // helpers internes
+    private getShowsRawForSlot(date: Date, h: number): PyroFetesDTOShowResponseReadShowDto[] {
         return this.shows().filter(show => {
             if (!show.date) return false;
             const d = new Date(show.date);
@@ -234,9 +302,7 @@ export class Planning implements OnInit, AfterViewInit {
         });
     }
 
-    getTrucksForSlot(date: Date, hour: string): PyroFetesDTOTruckResponseReadTruckDto[] {
+    private getTrucksRawForSlot(date: Date, h: number): PyroFetesDTOTruckResponseReadTruckDto[] {
-        if (!this.shouldShowCamions) return [];
-        const h = hour === '' ? 0 : parseInt(hour);
         const showsInSlot = this.shows().filter(show => {
             if (!show.date) return false;
             const d = new Date(show.date);
@@ -272,6 +338,89 @@ export class Planning implements OnInit, AfterViewInit {
         return this.getTrucksForDay(this.selectedDay);
     }
 
+    getTrucksForShow(showId: number): PyroFetesDTOTruckResponseReadTruckDto[] {
+        return this.trucks().filter(t => t.showId === showId);
+    }
+
+    // Retourne uniquement les camions dont le statut calculé est "Disponible"
+    getAvailableTrucks(): PyroFetesDTOTruckResponseReadTruckDto[] {
+        return this.trucks().filter(t => this.getComputedTruckStatus(t) === 'Disponible');
+    }
+
+    // ── Actions camions ──────────────────────────────────────────
+    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',
@@ -284,8 +433,8 @@ export class Planning implements OnInit, AfterViewInit {
         return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
     }
 
-    isCamionFilterActive = false;
+    isCamionFilterActive = true;
-    isShowFilterActive = false;
+    isShowFilterActive = true;
 
     camionFilter(): void {
         this.isCamionFilterActive = !this.isCamionFilterActive;

src/styles.css

@@ -9,9 +9,13 @@
 * {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
-body {
+html, body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
   font-family: 'Be Vietnam Pro', sans-serif;
 }
 :root {