panels-origin/web-panel/components/WorkProgramCostCompare.vue

<template>
  <div>
    <div v-if="summary.length" class="kpi-row mb-3">
      <div class="kpi-card">
        <span class="kpi-label">Programado total</span>
        <strong>{{ money(totalScheduled) }}</strong>
      </div>
      <div class="kpi-card">
        <span class="kpi-label">Ejecutado total</span>
        <strong>{{ money(totalExecuted) }}</strong>
      </div>
      <div class="kpi-card">
        <span class="kpi-label">Δ acumulado</span>
        <strong :class="deltaClass">{{ money(totalExecuted - totalScheduled) }}</strong>
      </div>
    </div>

    <DataTable :value="summary" scrollable scroll-height="40vh" size="small" table-style="min-width: 52rem">
      <Column field="label" header="Semana" />
      <Column field="scheduled_amount" header="Programado">
        <template #body="{ data }">{{ money(data.scheduled_amount) }}</template>
      </Column>
      <Column field="executed_amount" header="Ejecutado">
        <template #body="{ data }">{{ money(data.executed_amount) }}</template>
      </Column>
      <Column header="Δ">
        <template #body="{ data }">
          <span :class="Number(data.executed_amount) > Number(data.scheduled_amount) ? 'cost-critical-text' : ''">
            {{ money(Number(data.executed_amount) - Number(data.scheduled_amount)) }}
          </span>
        </template>
      </Column>
    </DataTable>

    <div class="section-title mt-4 mb-2">Por partida</div>
    <DataTable :value="byChapter" size="small" scrollable scroll-height="28vh">
      <Column field="chapter_code" header="Código" style="width: 6rem" />
      <Column field="chapter_name" header="Partida" />
      <Column field="scheduled_amount" header="Programado">
        <template #body="{ data }">{{ money(data.scheduled_amount) }}</template>
      </Column>
      <Column field="executed_amount" header="Ejecutado">
        <template #body="{ data }">{{ money(data.executed_amount) }}</template>
      </Column>
      <Column field="budget_amount" header="Presupuesto">
        <template #body="{ data }">{{ money(data.budget_amount) }}</template>
      </Column>
    </DataTable>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  byPeriod: { label: string; scheduled_amount: number; executed_amount: number }[];
  byChapter: { chapter_code: string; chapter_name: string; scheduled_amount: number; executed_amount: number; budget_amount: number }[];
}>();

const summary = computed(() => props.byPeriod || []);
const byChapter = computed(() => props.byChapter || []);

const totalScheduled = computed(() => summary.value.reduce((s, r) => s + Number(r.scheduled_amount || 0), 0));
const totalExecuted = computed(() => summary.value.reduce((s, r) => s + Number(r.executed_amount || 0), 0));
const deltaClass = computed(() => (totalExecuted.value > totalScheduled.value ? "cost-critical-text" : ""));

function money(v: number) {
  return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(Number(v || 0));
}
</script>

<style scoped>
.kpi-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.kpi-card {
  flex: 1;
  min-width: 9rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.kpi-label { font-size: 0.75rem; color: var(--text-color-secondary); }
.section-title { font-weight: 600; font-size: 0.9rem; }
</style>