From 17c40c66a63a0569b94f4f7e7162ad9592022bd6 Mon Sep 17 00:00:00 2001
From: Alberto Martinez <349769123@users.noreply.cursor.com>
Date: Tue, 8 Sep 2026 22:12:23 +0000
Subject: [PATCH] feat: ver el programa de obra como Gantt (no la grilla de
 ceros)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
## Qué pasaba

El Excel que importaste es **por partida** (erogaciones semanales). Eso llena **Partidas** y el **Gantt**, no las barras de concepto. La pestaña que se abría era **Conceptos**, con 0–0 en cada semana.

Además el Gantt que ya existía tenía el encabezado de semanas mal alineado.

## Cambio

- **Gantt es la primera pestaña** y se abre sola si el programa es solo por partida.
- Cada partida es una barra de la primera a la última semana con monto (tooltip con total).
- En Conceptos, si no hay barras, se explica que hay que mirar Gantt o Partidas.

## Cómo probar

1. Mergear y recargar (solo front; no hay Liquibase).
2. Abrir Programa de obra en la obra ya importada: debe entrar en **Gantt** con barras (A001, A002, …) sobre Sem 1–9.
3. Partidas: montos semanales (no ceros).
4. Conceptos: sigue en 0 y el aviso; es normal en este Excel.

<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a href="https://cursor.com/agents/bc-d8a5d34a-ead9-4912-8296-322cff799783?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a href="https://cursor.com/background-agent?bcId=bc-d8a5d34a-ead9-4912-8296-322cff799783&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>
---
 web-panel/components/WorkProgramGantt.vue     | 200 ++++++++++++------
 .../components/WorkProgramImportDialog.vue    |   4 +-
 web-panel/pages/programa-obra.vue             |  91 +++++---
 web-panel/utils/workProgramGantt.ts           |  37 ++++
 4 files changed, 240 insertions(+), 92 deletions(-)
 create mode 100644 web-panel/utils/workProgramGantt.ts

diff --git a/web-panel/components/WorkProgramGantt.vue b/web-panel/components/WorkProgramGantt.vue
index d532f4a..585134f 100644
--- a/web-panel/components/WorkProgramGantt.vue
+++ b/web-panel/components/WorkProgramGantt.vue
@@ -1,28 +1,39 @@
 <template>
   <div class="gantt-panel">
-    <div class="gantt-header">
-      <span v-for="p in periods" :key="p.id" class="gantt-col-head">{{ p.label }}</span>
-    </div>
-    <div v-for="row in bars" :key="row.id" class="gantt-row">
-      <div class="gantt-row-label">
-        <span class="identifier">{{ row.code }}</span>
-        <span>{{ row.label }}</span>
+    <Message v-if="!rows.length" severity="info" :closable="false">
+      {{ emptyHint }}
+    </Message>
+    <div v-else class="gantt" :style="{ '--weeks': String(periods.length || 1) }">
+      <div class="gantt-head">
+        <div class="gantt-label-col">{{ drillChapterId ? "Concepto" : "Partida" }}</div>
+        <div class="gantt-scale">
+          <span v-for="p in periods" :key="p.id" class="gantt-week">{{ p.label }}</span>
+        </div>
       </div>
-      <div class="gantt-track">
-        <div
-          v-for="seg in row.segments"
-          :key="`${row.id}-${seg.period_index}`"
-          class="gantt-bar"
-          :style="barStyle(seg)"
-          :title="`${row.code} · ${seg.label}`"
-        />
+      <div v-for="row in rows" :key="row.id" class="gantt-row">
+        <div class="gantt-label-col">
+          <span class="identifier">{{ row.code }}</span>
+          <span class="gantt-name">{{ row.label }}</span>
+        </div>
+        <div class="gantt-scale gantt-track">
+          <span v-for="p in periods" :key="`t-${p.id}`" class="gantt-tick" />
+          <div
+            v-if="row.span"
+            class="gantt-bar"
+            :style="{ left: `${row.span.leftPct}%`, width: `${row.span.widthPct}%` }"
+            :title="row.span.title"
+          >
+            <span v-if="row.span.widthPct > 12" class="gantt-bar-text">{{ row.span.caption }}</span>
+          </div>
+        </div>
       </div>
     </div>
-    <Message v-if="!bars.length" severity="info" :closable="false">Sin partidas programadas.</Message>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ganttSpan, periodHasAmount, periodHasConceptBar } from "~/utils/workProgramGantt";
+
 type Period = { id: number; period_index: number; label: string; start_date?: string; end_date?: string };
 type ChapterRow = {
   id: number;
@@ -34,65 +45,136 @@ type ChapterRow = {
 const props = defineProps<{
   periods: Period[];
   chapters: ChapterRow[];
-  drillConcepts?: { id: number; code: string; description: string; chapter_id: number | null; periods: { period_index: number; start_pct: number; end_pct: number }[] }[];
+  drillConcepts?: {
+    id: number;
+    code: string;
+    description: string;
+    chapter_id: number | null;
+    periods: { period_index: number; start_pct: number; end_pct: number }[];
+  }[];
   drillChapterId?: number | null;
 }>();
 
-const periodCount = computed(() => props.periods.length || 1);
+const money = new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN", maximumFractionDigits: 0 });
 
-const bars = computed(() => {
+const emptyHint = computed(() => {
+  if (props.drillChapterId) {
+    return "Esta partida no tiene barras de concepto. El Excel por partida programa montos semanales; véalas en Gantt (todas las partidas) o en la pestaña Partidas.";
+  }
+  return "Sin partidas con erogación. Importe el Excel por partida o capture montos en Partidas.";
+});
+
+const rows = computed(() => {
   if (props.drillChapterId && props.drillConcepts?.length) {
     return props.drillConcepts
       .filter((c) => c.chapter_id === props.drillChapterId)
-      .map((c) => ({
-        id: c.id,
-        code: c.code,
-        label: c.description,
-        segments: props.periods
+      .map((c) => {
+        const active = props.periods
           .map((p) => {
-            const slot = c.periods.find((x) => x.period_index === p.period_index);
-            if (!slot || (slot.start_pct === 0 && slot.end_pct === 0)) return null;
-            return { period_index: p.period_index, label: p.label, start_pct: slot.start_pct, end_pct: slot.end_pct };
+            const bar = periodHasConceptBar(c.periods, p);
+            return bar ? p.period_index : null;
           })
-          .filter(Boolean) as { period_index: number; label: string; start_pct: number; end_pct: number }[],
-      }));
-  }
-  return props.chapters.map((ch) => ({
-    id: ch.id,
-    code: ch.code,
-    label: ch.name,
-    segments: props.periods
-      .map((p) => {
-        const slot = ch.periods.find((x) => x.period_index === p.period_index);
-        if (!slot || Number(slot.amount) <= 0) return null;
-        return { period_index: p.period_index, label: p.label, start_pct: 0, end_pct: 100 };
+          .filter((n): n is number => n != null);
+        const span = ganttSpan(active, props.periods.length);
+        return {
+          id: c.id,
+          code: c.code,
+          label: c.description,
+          span: span
+            ? {
+                ...span,
+                caption: `${span.first}–${span.last}`,
+                title: `${c.code} · Sem ${span.first} a ${span.last}`,
+              }
+            : null,
+        };
       })
-      .filter(Boolean) as { period_index: number; label: string; start_pct: number; end_pct: number }[],
-  }));
-});
+      .filter((row) => row.span);
+  }
 
-function barStyle(seg: { period_index: number; start_pct: number; end_pct: number }) {
-  const n = periodCount.value;
-  const colW = 100 / n;
-  const left = (seg.period_index - 1) * colW + (seg.start_pct / 100) * colW;
-  const width = Math.max(1, ((seg.end_pct - seg.start_pct) / 100) * colW);
-  return { left: `${left}%`, width: `${width}%` };
-}
+  return props.chapters
+    .map((ch) => {
+      const weeks = props.periods
+        .map((p) => ({ p, amount: periodHasAmount(ch.periods, p) }))
+        .filter((x) => x.amount > 0);
+      const span = ganttSpan(weeks.map((x) => x.p.period_index), props.periods.length);
+      const total = weeks.reduce((s, x) => s + x.amount, 0);
+      return {
+        id: ch.id,
+        code: ch.code,
+        label: ch.name,
+        span: span
+          ? {
+              ...span,
+              caption: money.format(total),
+              title: `${ch.code} ${ch.name} · Sem ${span.first}–${span.last} · ${money.format(total)}`,
+            }
+          : null,
+      };
+    })
+    .filter((row) => row.span);
+});
 </script>
 
 <style scoped>
-.gantt-panel { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0; }
-.gantt-header { display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem; font-size: 0.7rem; color: var(--text-color-secondary); }
-.gantt-col-head { text-align: center; }
-.gantt-row { display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem; align-items: center; min-height: 2rem; }
-.gantt-row-label { display: flex; flex-direction: column; font-size: 0.8rem; overflow: hidden; }
-.gantt-track { position: relative; height: 1.25rem; background: var(--surface-100); border-radius: 4px; }
+.gantt-panel { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
+.gantt { display: flex; flex-direction: column; gap: 0.35rem; overflow: auto; }
+.gantt-head,
+.gantt-row {
+  display: grid;
+  grid-template-columns: minmax(11rem, 16rem) minmax(24rem, 1fr);
+  gap: 0.75rem;
+  align-items: center;
+}
+.gantt-label-col {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: 0.8rem;
+}
+.gantt-name {
+  color: var(--text-color-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.gantt-scale {
+  display: grid;
+  grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
+  position: relative;
+  min-height: 1.6rem;
+}
+.gantt-week {
+  text-align: center;
+  font-size: 0.7rem;
+  color: var(--text-color-secondary);
+}
+.gantt-track {
+  background: var(--surface-100);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.gantt-tick {
+  border-right: 1px solid color-mix(in srgb, var(--surface-border) 70%, transparent);
+}
+.gantt-tick:last-child { border-right: none; }
 .gantt-bar {
   position: absolute;
-  top: 2px;
-  bottom: 2px;
+  top: 4px;
+  bottom: 4px;
   background: var(--primary-color);
-  border-radius: 3px;
-  opacity: 0.85;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 4px;
+}
+.gantt-bar-text {
+  font-size: 0.65rem;
+  color: var(--primary-color-text, #fff);
+  padding: 0 0.35rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>
diff --git a/web-panel/components/WorkProgramImportDialog.vue b/web-panel/components/WorkProgramImportDialog.vue
index 012b26f..667844a 100644
--- a/web-panel/components/WorkProgramImportDialog.vue
+++ b/web-panel/components/WorkProgramImportDialog.vue
@@ -82,7 +82,7 @@ type Preview = {
 };
 
 const props = defineProps<{ visible: boolean; projectId: number; projectName: string }>();
-const emit = defineEmits<{ "update:visible": [boolean]; imported: [] }>();
+const emit = defineEmits<{ "update:visible": [boolean]; imported: [{ format: string }] }>();
 
 const { api } = useApi();
 const toast = useToast();
@@ -144,7 +144,7 @@ async function confirm() {
     fd.append("file", pending.value);
     await api(`/v1/projects/${props.projectId}/work-program/import?create_chapters=true`, { method: "POST", body: fd });
     toast.add({ severity: "success", summary: "Programa importado", life: 2500 });
-    emit("imported");
+    emit("imported", { format: preview.value.format });
     visibleModel.value = false;
     preview.value = null;
     pending.value = null;
diff --git a/web-panel/pages/programa-obra.vue b/web-panel/pages/programa-obra.vue
index 8cb960e..1c0cc95 100644
--- a/web-panel/pages/programa-obra.vue
+++ b/web-panel/pages/programa-obra.vue
@@ -29,13 +29,23 @@
 
     <template v-else>
       <TabView v-model:active-index="activeTab" class="programa-tabs">
-        <TabPanel header="Conceptos">
-          <WorkProgramGrid
-            mode="concept"
+        <TabPanel header="Gantt">
+          <div class="gantt-toolbar mb-2">
+            <Select
+              v-model="ganttChapterId"
+              :options="ganttChapterOptions"
+              option-label="label"
+              option-value="value"
+              placeholder="Todas las partidas"
+              show-clear
+              class="gantt-select"
+            />
+          </div>
+          <WorkProgramGantt
             :periods="periods"
-            :rows="conceptRows"
-            :project-id="loadedProjectId"
-            @updated="reload"
+            :chapters="ganttChapters"
+            :drill-chapter-id="ganttChapterId"
+            :drill-concepts="ganttConcepts"
           />
         </TabPanel>
         <TabPanel header="Partidas">
@@ -54,23 +64,17 @@
             </div>
           </div>
         </TabPanel>
-        <TabPanel header="Gantt">
-          <div class="gantt-toolbar mb-2">
-            <Select
-              v-model="ganttChapterId"
-              :options="ganttChapterOptions"
-              option-label="label"
-              option-value="value"
-              placeholder="Todas las partidas"
-              show-clear
-              class="gantt-select"
-            />
-          </div>
-          <WorkProgramGantt
+        <TabPanel header="Conceptos">
+          <Message v-if="partidaOnly" severity="info" :closable="false" class="mb-2">
+            Este programa se importó por partida (erogaciones). Las barras de concepto quedan en 0.
+            El Gantt y la pestaña Partidas muestran las semanas programadas.
+          </Message>
+          <WorkProgramGrid
+            mode="concept"
             :periods="periods"
-            :chapters="ganttChapters"
-            :drill-chapter-id="ganttChapterId"
-            :drill-concepts="ganttConcepts"
+            :rows="conceptRows"
+            :project-id="loadedProjectId"
+            @updated="reload"
           />
         </TabPanel>
         <TabPanel v-if="showCostTab" header="Programado vs costos">
@@ -172,13 +176,27 @@ const ganttChapterOptions = computed(() =>
   })),
 );
 
+const partidaOnly = computed(() => {
+  const hasPartida = partidaChapters.value.some((c) =>
+    ((c.periods as { amount?: number }[]) || []).some((p) => Number(p.amount) > 0),
+  );
+  const hasConcept = conceptItems.value.some((c) =>
+    ((c.periods as { start_pct?: number; end_pct?: number }[]) || []).some(
+      (p) => Number(p.start_pct) > 0 || Number(p.end_pct) > 0,
+    ),
+  );
+  return hasPartida && !hasConcept;
+});
+
 const ganttChapters = computed(() =>
-  partidaChapters.value.map((c) => ({
-    id: Number(c.id),
-    code: String(c.code || ""),
-    name: String(c.name || ""),
-    periods: ((c.periods as { period_id: number; period_index: number; amount: number }[]) || []),
-  })),
+  partidaChapters.value
+    .filter((c) => matches(c.code, c.name))
+    .map((c) => ({
+      id: Number(c.id),
+      code: String(c.code || ""),
+      name: String(c.name || ""),
+      periods: ((c.periods as { period_id: number; period_index: number; amount: number }[]) || []),
+    })),
 );
 
 const ganttConcepts = computed(() =>
@@ -219,14 +237,25 @@ async function loadProgram(id: number) {
       const [concepts, partidas, vs] = await Promise.all([
         api<{ items: Record<string, unknown>[] }>(`/v1/projects/${id}/work-program/concepts`),
         api<{ chapters: Record<string, unknown>[] }>(`/v1/projects/${id}/work-program/partidas`),
-        api<{ by_period: Record<string, unknown>[]; by_chapter: Record<string, unknown>[] }>(
-          `/v1/projects/${id}/work-program/vs-cost`,
-        ),
+        showCostTab.value
+          ? api<{ by_period: Record<string, unknown>[]; by_chapter: Record<string, unknown>[] }>(
+            `/v1/projects/${id}/work-program/vs-cost`,
+          ).catch(() => ({ by_period: [], by_chapter: [] }))
+          : Promise.resolve({ by_period: [], by_chapter: [] }),
       ]);
       conceptItems.value = concepts.items || [];
       partidaChapters.value = partidas.chapters || [];
       vsCostPeriods.value = vs.by_period || [];
       vsCostChapters.value = vs.by_chapter || [];
+      const hasPartida = (partidas.chapters || []).some((c) =>
+        ((c.periods as { amount?: number }[]) || []).some((p) => Number(p.amount) > 0),
+      );
+      const hasConcept = (concepts.items || []).some((c) =>
+        ((c.periods as { start_pct?: number; end_pct?: number }[]) || []).some(
+          (p) => Number(p.start_pct) > 0 || Number(p.end_pct) > 0,
+        ),
+      );
+      if (hasPartida && !hasConcept) activeTab.value = 0;
     } else {
       conceptItems.value = [];
       partidaChapters.value = [];
diff --git a/web-panel/utils/workProgramGantt.ts b/web-panel/utils/workProgramGantt.ts
new file mode 100644
index 0000000..a9962eb
--- /dev/null
+++ b/web-panel/utils/workProgramGantt.ts
@@ -0,0 +1,37 @@
+/** period_index is 1-based (Sem 1 … Sem N). */
+export function ganttSpan(
+  activeIndexes: number[],
+  periodCount: number,
+): { leftPct: number; widthPct: number; first: number; last: number } | null {
+  const n = Number(periodCount) || 0;
+  const idxs = activeIndexes.filter((i) => Number.isFinite(i) && i >= 1 && (n <= 0 || i <= n));
+  if (!idxs.length || n <= 0) return null;
+  const first = Math.min(...idxs);
+  const last = Math.max(...idxs);
+  return {
+    first,
+    last,
+    leftPct: ((first - 1) / n) * 100,
+    widthPct: ((last - first + 1) / n) * 100,
+  };
+}
+
+export function periodHasAmount(
+  periods: { period_id?: number; period_index?: number; amount?: number }[],
+  week: { id: number; period_index: number },
+): number {
+  const slot = periods.find((x) => x.period_index === week.period_index || x.period_id === week.id);
+  return Number(slot?.amount || 0);
+}
+
+export function periodHasConceptBar(
+  periods: { period_index?: number; start_pct?: number; end_pct?: number }[],
+  week: { period_index: number },
+): { start_pct: number; end_pct: number } | null {
+  const slot = periods.find((x) => x.period_index === week.period_index);
+  if (!slot) return null;
+  const start = Number(slot.start_pct || 0);
+  const end = Number(slot.end_pct || 0);
+  if (start === 0 && end === 0) return null;
+  return { start_pct: start, end_pct: Math.max(start, end) };
+}