From 67395cd35ef672aa77575fc0dbbf2e57c25fe24b Mon Sep 17 00:00:00 2001
From: louispaulb <louis.targo@gmail.com>
Date: Sat, 6 Jun 2026 10:19:03 -0400
Subject: [PATCH] =?UTF-8?q?feat(dispatch):=20pastille=20couleur=20par=20ty?=
 =?UTF-8?q?pe=20+=20badge=20=C2=AB=20en=20retard=20=C2=BB=20dans=20le=20po?=
 =?UTF-8?q?ol=20&=20le=20d=C3=A9tail?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BottomPanel : pastille couleur (jobColor → type legacy) par ligne + badge ⏰ EN RETARD
  sur les groupes de date passée (le pool est déjà groupé/trié par date)
- RightPanel : badge « en retard » près de la date planifiée (hors Completed)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/ops/src/modules/dispatch/components/BottomPanel.vue | 5 +++++
 apps/ops/src/modules/dispatch/components/RightPanel.vue  | 3 +++
 2 files changed, 8 insertions(+)

diff --git a/apps/ops/src/modules/dispatch/components/BottomPanel.vue b/apps/ops/src/modules/dispatch/components/BottomPanel.vue
index 0bc9b42..be39412 100644
--- a/apps/ops/src/modules/dispatch/components/BottomPanel.vue
+++ b/apps/ops/src/modules/dispatch/components/BottomPanel.vue
@@ -25,6 +25,9 @@ const jobColor = inject('jobColor')
 const btColW = inject('btColW')
 const startColResize = inject('startColResize')
 
+// Aujourd'hui (fuseau Québec) → un groupe de date PASSÉE = tickets « en retard » (à traiter/fermer).
+const todayISO = new Date().toLocaleDateString('en-CA', { timeZone: 'America/Toronto' })
+
 // ── Lasso selection ───────────────────────────────────────────────────────────
 const btLasso = ref(null)
 const btScrollRef = ref(null)
@@ -142,6 +145,7 @@ function btLassoEnd () {
         <div class="sb-bottom-date-sep">
           <span class="sb-bottom-date-label">{{ group.label }}</span>
           <span class="sb-bottom-date-count">{{ group.jobs.length }}</span>
+          <span v-if="group.date && group.date < todayISO" :style="{ marginLeft:'8px', color:'#e53935', fontWeight:700, fontSize:'10px', letterSpacing:'.3px' }" title="Date dépassée — à replanifier ou fermer">⏰ EN RETARD</span>
         </div>
         <table class="sb-bottom-table">
           <tbody>
@@ -159,6 +163,7 @@ function btLassoEnd () {
                 <span class="sb-bt-prio-dot" :style="'background:'+prioColor(job.priority)" :title="prioLabel(job.priority)"></span>
               </td>
               <td class="sb-bt-name" :style="'width:'+btColW('name',200)">
+                <span :style="{ display:'inline-block', width:'9px', height:'9px', borderRadius:'2px', marginRight:'6px', verticalAlign:'middle', flex:'0 0 auto', background: jobColor(job) }" :title="job.legacyDept || job.jobType || ''"></span>
                 <span class="sb-bt-name-text">{{ job.subject }}</span>
               </td>
               <td class="sb-bt-addr" :style="'width:'+btColW('addr',180)">{{ shortAddr(job.address) || '—' }}</td>
diff --git a/apps/ops/src/modules/dispatch/components/RightPanel.vue b/apps/ops/src/modules/dispatch/components/RightPanel.vue
index 6ec5141..39cb116 100644
--- a/apps/ops/src/modules/dispatch/components/RightPanel.vue
+++ b/apps/ops/src/modules/dispatch/components/RightPanel.vue
@@ -16,6 +16,7 @@ const emit = defineEmits([
 const store = inject('store')
 const TECH_COLORS = inject('TECH_COLORS')
 const jobColor = inject('jobColor')
+const todayISO = new Date().toLocaleDateString('en-CA', { timeZone: 'America/Toronto' }) // pour le badge « en retard »
 const getTagColor = inject('getTagColor')
 const onCreateTag = inject('onCreateTag')
 const onUpdateTag = inject('onUpdateTag')
@@ -72,6 +73,8 @@ const onDeleteTag = inject('onDeleteTag')
       <div class="sb-rp-field"><span class="sb-rp-lbl">Date planifiée</span>
         {{ panel.data?.job?.scheduledDate || '—' }}
         <span v-if="panel.data?.job?.endDate"> → {{ panel.data.job.endDate }}</span>
+        <span v-if="panel.data?.job?.scheduledDate && panel.data.job.scheduledDate < todayISO && panel.data?.job?.status !== 'Completed'"
+              :style="{ marginLeft:'6px', color:'#fff', background:'#e53935', borderRadius:'4px', padding:'0 5px', fontSize:'10px', fontWeight:700 }">⏰ en retard</span>
       </div>
       <div v-if="panel.data?.job?.assignedTech" class="sb-rp-field">
         <span class="sb-rp-lbl">Date de fin</span>