From bbe825313abd220bb563abda5999ea4dedd0eefa Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Thu, 14 Aug 2025 15:49:46 -0600
Subject: [PATCH 01/18] =?UTF-8?q?Se=20agreg=C3=B3=20las=20gr=C3=A1ficas=20?=
 =?UTF-8?q?a=20Tramites?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  32 +-
 package.json                                  |   2 +
 .../js/Components/Dashboard/Charts/Bars.vue   |  34 ++
 .../js/Components/Dashboard/Charts/Lines.vue  |  32 ++
 .../js/Components/Dashboard/Charts/Pie.vue    |  29 +
 .../Dashboard/Charts/StackedBar.vue           |  42 ++
 .../Components/Dashboard/Form/DateRange.vue   | 118 +++++
 resources/js/Layouts/DashboardLayout.vue      |  17 +-
 resources/js/Pages/Dashboard/Tramites.vue     | 494 ++++++++++++++++++
 routes/web.php                                |  83 +--
 10 files changed, 837 insertions(+), 46 deletions(-)
 create mode 100644 resources/js/Components/Dashboard/Charts/Bars.vue
 create mode 100644 resources/js/Components/Dashboard/Charts/Lines.vue
 create mode 100644 resources/js/Components/Dashboard/Charts/Pie.vue
 create mode 100644 resources/js/Components/Dashboard/Charts/StackedBar.vue
 create mode 100644 resources/js/Components/Dashboard/Form/DateRange.vue
 create mode 100644 resources/js/Pages/Dashboard/Tramites.vue

diff --git a/package-lock.json b/package-lock.json
index 9fbf9e7..e8c9c45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "template-laravel-vuejs",
+    "name": "maquetador-graficas",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
@@ -8,12 +8,14 @@
                 "@inertiajs/vue3": "^1.0.0-beta.2",
                 "@soketi/soketi": "^1.6.0",
                 "@vueuse/core": "^9.6.0",
+                "chart.js": "^4.5.0",
                 "dotenv": "^16.3.1",
                 "express": "^4.18.2",
                 "laravel-echo": "^1.14.2",
                 "pusher-js": "^7.5.0",
                 "sweetalert2": "^11.4.8",
                 "toastr": "^2.1.4",
+                "vue-chartjs": "^5.3.2",
                 "vue-i18n": "^9.2.2",
                 "vue-multiselect": "^3.0.0-alpha.2"
             },
@@ -523,6 +525,12 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@kurkle/color": {
+            "version": "0.3.4",
+            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+            "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+            "license": "MIT"
+        },
         "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.2.tgz",
@@ -1678,6 +1686,18 @@
             "resolved": "https://registry.npmjs.org/charm/-/charm-0.1.2.tgz",
             "integrity": "sha512-syedaZ9cPe7r3hoQA9twWYKu5AIyCswN5+szkmPBe9ccdLrj4bYaCnLVPTLd2kgVRc7+zoX4tyPgRnFKCj5YjQ=="
         },
+        "node_modules/chart.js": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+            "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@kurkle/color": "^0.3.0"
+            },
+            "engines": {
+                "pnpm": ">=8"
+            }
+        },
         "node_modules/chokidar": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -5451,6 +5471,16 @@
                 }
             }
         },
+        "node_modules/vue-chartjs": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
+            "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "chart.js": "^4.1.1",
+                "vue": "^3.0.0-0 || ^2.7.0"
+            }
+        },
         "node_modules/vue-i18n": {
             "version": "9.7.1",
             "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.7.1.tgz",
diff --git a/package.json b/package.json
index cf5cb41..1778756 100644
--- a/package.json
+++ b/package.json
@@ -22,12 +22,14 @@
         "@inertiajs/vue3": "^1.0.0-beta.2",
         "@soketi/soketi": "^1.6.0",
         "@vueuse/core": "^9.6.0",
+        "chart.js": "^4.5.0",
         "dotenv": "^16.3.1",
         "express": "^4.18.2",
         "laravel-echo": "^1.14.2",
         "pusher-js": "^7.5.0",
         "sweetalert2": "^11.4.8",
         "toastr": "^2.1.4",
+        "vue-chartjs": "^5.3.2",
         "vue-i18n": "^9.2.2",
         "vue-multiselect": "^3.0.0-alpha.2"
     }
diff --git a/resources/js/Components/Dashboard/Charts/Bars.vue b/resources/js/Components/Dashboard/Charts/Bars.vue
new file mode 100644
index 0000000..2c4513a
--- /dev/null
+++ b/resources/js/Components/Dashboard/Charts/Bars.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { Bar } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+} from 'chart.js'
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+)
+
+const props = defineProps({
+  chartData: Object,
+  chartOptions: Object
+})
+</script>
+
+<template>
+  <Bar :data="chartData" :options="chartOptions" />
+</template>
diff --git a/resources/js/Components/Dashboard/Charts/Lines.vue b/resources/js/Components/Dashboard/Charts/Lines.vue
new file mode 100644
index 0000000..9b5a718
--- /dev/null
+++ b/resources/js/Components/Dashboard/Charts/Lines.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { Line } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale,
+} from 'chart.js'
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale
+)
+
+const props = defineProps({
+  chartData: Object,
+  chartOptions: Object
+})
+</script>
+
+<template>
+  <Line :data="chartData" :options="chartOptions" />
+</template>
diff --git a/resources/js/Components/Dashboard/Charts/Pie.vue b/resources/js/Components/Dashboard/Charts/Pie.vue
new file mode 100644
index 0000000..3d4073a
--- /dev/null
+++ b/resources/js/Components/Dashboard/Charts/Pie.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { Pie } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement)
+
+const props = defineProps({
+  chartData: {
+    type: Object,
+    required: true
+  },
+  chartOptions: {
+    type: Object,
+    default: () => ({ responsive: true, maintainAspectRatio: false })
+  }
+})
+</script>
+
+<template>
+  <div class="pie-chart-wrapper" style="position: relative; width:100%; height:300px;">
+    <Pie :data="chartData" :options="chartOptions" />
+  </div>
+</template>
diff --git a/resources/js/Components/Dashboard/Charts/StackedBar.vue b/resources/js/Components/Dashboard/Charts/StackedBar.vue
new file mode 100644
index 0000000..2ebd952
--- /dev/null
+++ b/resources/js/Components/Dashboard/Charts/StackedBar.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { Bar } from "vue-chartjs";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+} from "chart.js";
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+);
+
+const props = defineProps({
+  chartData: {
+    type: Object,
+    required: true,
+  },
+  chartOptions: {
+    type: Object,
+    default: () => ({
+      responsive: true,
+      scales: {
+        x: { stacked: true },
+        y: { stacked: true },
+      },
+    }),
+  },
+});
+</script>
+
+<template>
+  <Bar :data="chartData" :options="chartOptions" />
+</template>
diff --git a/resources/js/Components/Dashboard/Form/DateRange.vue b/resources/js/Components/Dashboard/Form/DateRange.vue
new file mode 100644
index 0000000..aace826
--- /dev/null
+++ b/resources/js/Components/Dashboard/Form/DateRange.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { ref, watch, computed, onBeforeUnmount } from 'vue';
+import Input from '@/Components/Dashboard/Form/Input.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({ start: '', end: '' })
+  },
+  required: Boolean,
+  onError: String,
+  idStart: { type: String, default: 'startDate' },
+  idEnd:   { type: String, default: 'endDate' },
+  titleStart: { type: String, default: 'Fecha inicio' },
+  titleEnd:   { type: String, default: 'Fecha fin' },
+  presets: {
+    type: Boolean,
+    default: true
+  },
+  debounceMs: {
+    type: Number,
+    default: 350
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'invalid']);
+
+const local = ref({ start: props.modelValue.start, end: props.modelValue.end });
+let debounceId = null;
+
+// --- utilidades fechas ---
+const fmt = (d) => new Date(d).toISOString().slice(0,10);
+const today = fmt(new Date());
+const firstDayOfMonth = fmt(new Date(new Date().getFullYear(), new Date().getMonth(), 1));
+const daysAgo = (n) => {
+  const d = new Date(); d.setDate(d.getDate()-n);
+  return fmt(d);
+};
+
+// --- validación ---
+const isValid = computed(() => {
+  const { start, end } = local.value;
+  if (!start || !end) return !props.required; // si no son obligatorias
+  return new Date(start) <= new Date(end);
+});
+
+// sincroniza si el padre cambia externamente
+watch(() => props.modelValue, (nv) => {
+  if (nv?.start !== local.value.start || nv?.end !== local.value.end) {
+    local.value = { start: nv?.start || '', end: nv?.end || '' };
+  }
+}, { deep: true });
+
+// emite con debounce solo si es válido
+const emitChange = () => {
+  clearTimeout(debounceId);
+  debounceId = setTimeout(() => {
+    if (isValid.value) {
+      emit('update:modelValue', { ...local.value });
+    } else {
+      emit('invalid', { ...local.value });
+    }
+  }, props.debounceMs);
+};
+
+watch(() => local.value.start, emitChange);
+watch(() => local.value.end, emitChange);
+
+// presets
+const applyPreset = (type) => {
+  if (type === 'today') {
+    local.value = { start: today, end: today };
+  } else if (type === 'last7') {
+    local.value = { start: daysAgo(6), end: today }; // 7 días incluyendo hoy
+  } else if (type === 'month') {
+    local.value = { start: firstDayOfMonth, end: today };
+  }
+  emitChange();
+};
+
+onBeforeUnmount(() => clearTimeout(debounceId));
+</script>
+
+<template>
+  <div class="flex flex-wrap items-end gap-3">
+    <div class="flex space-x-4">
+      <Input
+        :id="idStart"
+        type="date"
+        :title="titleStart"
+        v-model="local.start"
+        :required="required"
+        :onError="onError"
+      />
+      <Input
+        :id="idEnd"
+        type="date"
+        :title="titleEnd"
+        v-model="local.end"
+        :required="required"
+        :onError="onError"
+      />
+    </div>
+
+    <div v-if="presets" class="flex gap-2">
+      <button type="button" class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300"
+        @click="applyPreset('today')">Hoy</button>
+      <button type="button" class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300"
+        @click="applyPreset('last7')">Últimos 7 días</button>
+      <button type="button" class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300"
+        @click="applyPreset('month')">Mes actual</button>
+    </div>
+
+    <p v-if="!isValid" class="text-sm text-red-600 w-full">
+      La fecha fin debe ser mayor o igual a la fecha inicio.
+    </p>
+  </div>
+</template>
diff --git a/resources/js/Layouts/DashboardLayout.vue b/resources/js/Layouts/DashboardLayout.vue
index 0b72714..b26c1cb 100644
--- a/resources/js/Layouts/DashboardLayout.vue
+++ b/resources/js/Layouts/DashboardLayout.vue
@@ -35,7 +35,7 @@ onMounted(()=> {
         :title="title"
     />
     <div class="flex w-full h-screen">
-        <div 
+        <div
             id="sidebar"
             class="fixed w-fit h-screen transition-all duration-300 z-10"
             :class="{'-translate-x-[16.5rem] md:-translate-x-0':sidebarStatus, '-translate-x-0 md:-translate-x-64':!sidebarStatus}"
@@ -45,9 +45,9 @@ onMounted(()=> {
                 @open="sidebarSwitch()"
             >
                 <Section name="Principal">
-                    <Link 
+                    <Link
                         icon="home"
-                        name="home" 
+                        name="home"
                         to="dashboard.index"
                     />
                     <Link
@@ -55,9 +55,14 @@ onMounted(()=> {
                         name="help.title"
                         to="dashboard.help"
                     />
+                    <Link
+                        icon="live_help"
+                        name="Graficas"
+                        to="dashboard.chart-test.index"
+                    />
                 </Section>
                 <Section name="Configuraciones">
-                    <Link 
+                    <Link
                         icon="manage_accounts"
                         name="profile"
                         to="profile.show"
@@ -69,7 +74,7 @@ onMounted(()=> {
                         to="dashboard.histories.index"
                     />
                 </Section>
-                <Link 
+                <Link
                     v-if="hasPermission('users.index')"
                     icon="people"
                     name="users.title"
@@ -93,7 +98,7 @@ onMounted(()=> {
                 </Section>
             </Sidebar>
         </div>
-        <div 
+        <div
             class="flex flex-col w-full transition-all duration-300"
             :class="{'md:w-[calc(100vw-rem)] md:ml-64':sidebarStatus, 'md:w-screen md:ml-0':!sidebarStatus}"
         >
diff --git a/resources/js/Pages/Dashboard/Tramites.vue b/resources/js/Pages/Dashboard/Tramites.vue
new file mode 100644
index 0000000..7514808
--- /dev/null
+++ b/resources/js/Pages/Dashboard/Tramites.vue
@@ -0,0 +1,494 @@
+<script setup>
+import { ref, computed, watch, onMounted } from "vue";
+
+import Bars from "@/Components/Dashboard/Charts/Bars.vue";
+import Pie from "@/Components/Dashboard/Charts/Pie.vue";
+import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
+
+const data = ref(null);
+const loading = ref(true);
+const error = ref(null);
+
+// Rango inicial: Hoy→Hoy (coincide con preset del DateRange)
+const today = new Date().toISOString().slice(0, 10);
+const dateRange = ref({ start: today, end: today });
+
+// toggles
+const showBars = ref(false);
+const showPie = ref(false);
+
+// datasets
+const barChartData = ref({ labels: [], datasets: [] });
+const pieChartData = ref({ labels: [], datasets: [] });
+
+// opciones reutilizables
+const barChartOptions = {
+  responsive: true,
+  makeDataset : (label, values) => ({
+    label,
+    data: values,
+    backgroundColor: "rgba(75,192,192,0.2)",
+    borderColor: "rgba(75,192,192,1)",
+    borderWidth: 1,
+  }),
+  scales: {
+    x: {
+      ticks: {
+        autoSkip: false,
+        maxRotation: 0,
+        minRotation: 0,
+        callback: (_value, index) => {
+          const lab = barChartData.value.labels[index] || "";
+          return lab.split(" ").map((w) => w.toUpperCase());
+        },
+      },
+    },
+  },
+};
+const pieChartOptions = { responsive: true, maintainAspectRatio: false };
+
+// helpers
+const diffDays = (a, b) => {
+  if (!a || !b) return 0;
+  const A = new Date(a + "T00:00:00");
+  const B = new Date(b + "T00:00:00");
+  return Math.max(0, Math.round((B - A) / (1000 * 60 * 60 * 24)));
+};
+
+const mode = computed(() => {
+  const d = diffDays(dateRange.value.start, dateRange.value.end);
+  if (d === 0) return "día";
+  if (d <= 7) return "semana";
+  return "rango";
+});
+
+let abortController = null;
+let debounceId = null;
+
+const fetchReport = async ({ start, end }) => {
+  if (abortController) abortController.abort();
+  abortController = new AbortController();
+  const qs = new URLSearchParams();
+  if (start) qs.set("start", start);
+  if (end) qs.set("end", end);
+
+  const res = await fetch(
+    `/dashboard/api/proxy-reporte-especial?${qs.toString()}`,
+    {
+      signal: abortController.signal,
+    }
+  );
+  if (!res.ok) throw new Error("Error de red");
+  return res.json();
+};
+
+const load = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const payload = await fetchReport({
+      start: dateRange.value.start,
+      end: dateRange.value.end,
+    });
+    data.value = payload;
+    mapToCharts(payload, mode.value);
+  } catch (e) {
+    if (e.name !== "AbortError") {
+      console.error(e);
+      error.value = e.message || "Error desconocido";
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+watch(
+  dateRange,
+  () => {
+    clearTimeout(debounceId);
+    debounceId = setTimeout(load, 350);
+  },
+  { deep: true }
+);
+
+onMounted(load);
+
+// --- mapping charts: usa SIEMPRE el rango ---
+function mapToCharts(api, currentMode) {
+  const list = Array.isArray(api?.movements_by_procedure)
+    ? api.movements_by_procedure
+    : [];
+
+  const labels = list.map((it) => (it.name || "").toUpperCase());
+
+  // Pie: total (opened + closed). Si tu API devuelve valores por rango, puedes sustituir aquí.
+  const pieValues = list.map((it) => (it.opened || 0) + (it.closed || 0));
+  pieChartData.value = {
+    labels,
+    datasets: [
+      {
+        label: "Recaudados",
+        data: pieValues,
+        backgroundColor: labels.map(
+          (_, i) => `hsl(${(i * 360) / Math.max(1, labels.length)}, 70%, 50%)`
+        ),
+      },
+    ],
+  };
+
+  // Bars: dataset según modo
+  let barLabel = "";
+  let barValues = [];
+
+  if (currentMode === "día") {
+    barLabel = "Solicitados Hoy";
+    barValues = list.map(
+      (it) => it.procedures_opened_today ?? it.opened_today ?? 0
+    );
+  } else if (currentMode === "semana") {
+    barLabel = "Solicitados Semana";
+    barValues = list.map((it) => it.total ?? 0);
+  } else {
+    barLabel = "Solicitados en Rango";
+    barValues = list.map((it) => {
+      if (typeof it.range_total === "number") return it.range_total;
+      return (it.opened || 0) + (it.closed || 0);
+    });
+  }
+
+  barChartData.value = {
+    labels,
+    datasets: [barChartOptions.makeDataset(barLabel, barValues)],
+  };
+}
+
+// UI helpers
+const toggleBars = () => (showBars.value = !showBars.value);
+const togglePie = () => (showPie.value = !showPie.value);
+</script>
+
+<template>
+  <div>
+    <div v-if="loading">Cargando...</div>
+    <div v-else-if="error">Error: {{ error }}</div>
+    <div v-else>
+      <div class="min-h-screen bg-gray-50 py-8">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <!-- Header -->
+          <div class="mb-8">
+            <div class="flex px-4 sm:px-6 lg:px-8 mb-4 items-center gap-4">
+              <div>
+                <h1 class="text-3xl font-bold text-gray-900 mb-2">
+                  Reporte Especial de Trámites
+                </h1>
+                <p class="text-gray-600">Resumen por unidad administrativa</p>
+              </div>
+
+              <div class="ml-auto flex items-center gap-3">
+                <button
+                  @click="toggleBars"
+                  class="bg-primary text-white px-4 py-2 rounded"
+                >
+                  Gráfica de Barras
+                </button>
+                <button
+                  @click="togglePie"
+                  class="bg-primary text-white px-4 py-2 rounded"
+                >
+                  Más recaudados
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Estadísticas del día -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+            <div
+              class="bg-white rounded-lg shadow-sm border border-gray-200 p-6"
+            >
+              <div class="flex items-center">
+                <div class="flex-shrink-0">
+                  <div
+                    class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center"
+                  ></div>
+                </div>
+                <div class="ml-4">
+                  <p class="text-sm font-medium text-gray-500">
+                    Trámites Abiertos Hoy
+                  </p>
+                  <p class="text-2xl font-bold text-gray-900">
+                    {{
+                      new Intl.NumberFormat().format(
+                        data.procedures_opened_today
+                      )
+                    }}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div
+              class="bg-white rounded-lg shadow-sm border border-gray-200 p-6"
+            >
+              <div class="flex items-center">
+                <div class="flex-shrink-0">
+                  <div
+                    class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center"
+                  ></div>
+                </div>
+                <div class="ml-4">
+                  <p class="text-sm font-medium text-gray-500">
+                    Con Movimientos Hoy
+                  </p>
+                  <p class="text-2xl font-bold text-gray-900">
+                    {{
+                      new Intl.NumberFormat().format(
+                        data.procedures_with_movements_today
+                      )
+                    }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tabla de trámites por administración -->
+          <div
+            class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden w-full"
+          >
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-semibold text-gray-900">
+                Trámites por Unidad Administrativa
+              </h2>
+            </div>
+            <div class="overflow-x-auto w-full">
+              <table class="w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Unidad Administrativa
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Abiertos
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Movimientos Hoy
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Cerrados
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr
+                    v-for="administration in data.procedures_by_administration ||
+                    []"
+                    :key="administration.id"
+                    class="hover:bg-gray-50 transition-colors duration-200"
+                  >
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <div class="text-sm font-medium text-gray-900">
+                        {{ administration.name }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <span
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+                      >
+                        {{
+                          new Intl.NumberFormat().format(administration.opened)
+                        }}
+                      </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <span
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
+                      >
+                        {{
+                          new Intl.NumberFormat().format(
+                            administration.movement_today
+                          )
+                        }}
+                      </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <span
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
+                      >
+                        {{
+                          new Intl.NumberFormat().format(administration.closed)
+                        }}
+                      </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <div class="text-sm font-semibold text-gray-900">
+                        {{
+                          new Intl.NumberFormat().format(
+                            administration.opened + administration.closed
+                          )
+                        }}
+                      </div>
+                    </td>
+                  </tr>
+                  <tr
+                    v-if="
+                      !(
+                        data.procedures_by_administration &&
+                        data.procedures_by_administration.length
+                      )
+                    "
+                  >
+                    <td colspan="5" class="px-6 py-8 text-center">
+                      <div class="text-gray-500">No hay datos disponibles</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- Tabla de trámites por procedimiento -->
+          <div
+            class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden w-full mt-8"
+          >
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-semibold text-gray-900">
+                Trámites por Procedimiento
+              </h2>
+            </div>
+            <div class="overflow-x-auto w-full">
+              <table class="w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Procedimiento
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Abiertos
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Movimientos Hoy
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Cerrados
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr
+                    v-for="procedure in data.movements_by_procedure || []"
+                    :key="procedure.id"
+                    class="hover:bg-gray-50 transition-colors duration-200"
+                  >
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <div class="text-sm font-medium text-gray-900">
+                        {{ procedure.name }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <span
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+                      >
+                        {{ new Intl.NumberFormat().format(procedure.opened) }}
+                      </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <span
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
+                      >
+                        {{
+                          new Intl.NumberFormat().format(
+                            procedure.movement_today
+                          )
+                        }}
+                      </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <span
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
+                      >
+                        {{ new Intl.NumberFormat().format(procedure.closed) }}
+                      </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <div class="text-sm font-semibold text-gray-900">
+                        {{
+                          new Intl.NumberFormat().format(
+                            procedure.opened + procedure.closed
+                          )
+                        }}
+                      </div>
+                    </td>
+                  </tr>
+                  <tr
+                    v-if="
+                      !(
+                        data.movements_by_procedure &&
+                        data.movements_by_procedure.length
+                      )
+                    "
+                  >
+                    <td colspan="5" class="px-6 py-8 text-center">
+                      <div class="text-gray-500">No hay datos disponibles</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- Bars -->
+          <div
+            v-if="showBars"
+            class="max-w-7xl mx-auto mt-12 px-4 sm:px-6 lg:px-8 mb-8 bg-white rounded-lg shadow p-6"
+          >
+            <!-- DateRange mejorado -->
+            <DateRange v-model="dateRange" :presets="true" class="mb-12"/>
+            <Bars :chartData="barChartData" :chartOptions="barChartOptions" />
+            <p class="text-sm text-gray-500 mt-2">Modo actual: {{ mode }}</p>
+          </div>
+
+          <!-- Pie -->
+          <div
+            v-if="showPie"
+            class="max-w-7xl mx-auto mt-8 px-4 sm:px-6 lg:px-8 bg-white rounded-lg shadow p-6"
+          >
+            <Pie :chartData="pieChartData" :chartOptions="pieChartOptions" />
+          </div>
+
+          <div class="mt-8 text-center">
+            <p class="text-sm text-gray-500">
+              Reporte generado el {{ new Date().toLocaleString("es-MX") }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/routes/web.php b/routes/web.php
index 2ad00e1..f4d5f1b 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,86 +7,91 @@
 use App\Http\Controllers\Developer\RoleController;
 use App\Http\Controllers\Example\IndexController as ExampleIndexController;
 use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\Http;
 
 /**
  * Rutas generales/publicas
- * 
+ *
  * Rutas accesibles por todos los usuarios y no usuarios
  */
 Route::redirect('/', '/login');
 
 /**
  * Rutas del Dashboard
- * 
+ *
  * El dashboard es el panel de los usuarios de forma general
  */
 Route::prefix('dashboard')->name('dashboard.')->middleware([
-    'auth:sanctum',
-    'verified',
-    config('jetstream.auth_session')
+  'auth:sanctum',
+  'verified',
+  config('jetstream.auth_session')
 ])->group(function () {
-    Route::get('/welcome', [IndexController::class, 'index'])->name('index');
-    Route::inertia('/changelogs', 'Dashboard/Changelogs')->name('changelogs');
-    Route::inertia('/help', 'Dashboard/Help')->name('help');
+  Route::get('/welcome', [IndexController::class, 'index'])->name('index');
+  Route::inertia('/changelogs', 'Dashboard/Changelogs')->name('changelogs');
+  Route::inertia('/help', 'Dashboard/Help')->name('help');
 
-    # Log de Acciones
-    Route::resource('histories', HistoryLogController::class)->only([
-        'index',
-        'store'
-    ]);
+  Route::inertia('/api-example', 'Dashboard/Tramites')->name('api-example');
+  Route::get('/api/proxy-reporte-especial', function () {
+    $response = Http::get('https://tramites.comalcalco.gob.mx/reporte-especial?type=api');
+    return $response->json();
+  });
 
-    Route::resource('notifications', NotificationController::class);
-    Route::prefix('/users')->name('users.')->group(function()
-    {
-        Route::get('/notifications', [UserController::class, 'getNotifications'])->name('notifications');
-    });
+  # Log de Acciones
+  Route::resource('histories', HistoryLogController::class)->only([
+    'index',
+    'store'
+  ]);
+
+  Route::resource('notifications', NotificationController::class);
+  Route::prefix('/users')->name('users.')->group(function () {
+    Route::get('/notifications', [UserController::class, 'getNotifications'])->name('notifications');
+  });
 });
 
 /**
  * Rutas de administrador
- * 
+ *
  * Estas ubicaciones son del administrador, sin embargo el desarrollador
  * puede acceder a ellas.
  */
 Route::prefix('admin')->name('admin.')->middleware([
-    'auth:sanctum',
-    config('jetstream.auth_session')
+  'auth:sanctum',
+  config('jetstream.auth_session')
 ])->group(function () {
-    Route::resource('users', UserController::class);
+  Route::resource('users', UserController::class);
 
-    Route::prefix('/users')->name('users.')->group(function()
-    {
-        Route::get('{user}/settings', [UserController::class, 'settings'])->name('settings');
-        Route::post('/password', [UserController::class, 'updatePassword'])->name('password');
-        Route::post('/syncRoles', [UserController::class, 'syncRoles'])->name('syncRoles');
-    });
+  Route::prefix('/users')->name('users.')->group(function () {
+    Route::get('{user}/settings', [UserController::class, 'settings'])->name('settings');
+    Route::post('/password', [UserController::class, 'updatePassword'])->name('password');
+    Route::post('/syncRoles', [UserController::class, 'syncRoles'])->name('syncRoles');
+  });
 });
 
 /**
  * Rutas solo del desarrollador
- * 
+ *
  * Son ubicaciones o funciones que pueden llegar a ser muy sensibles en el sistema, por lo que
  * solo el desarrollador debe de ser capaz de modificarlas o actualizarlas.
  */
 Route::prefix('developer')->name('developer.')->middleware([
-    'auth:sanctum',
-    config('jetstream.auth_session')
+  'auth:sanctum',
+  config('jetstream.auth_session')
 ])->group(function () {
-    Route::resource('roles', RoleController::class);
+  Route::resource('roles', RoleController::class);
 });
 
 /**
  * Elementos de la plantilla
- * 
+ *
  * Estos son elementos que existen y pueden ser usados en la plantilla, vienen ejemplos de uso.
- * 
+ *
  * Estas rutas pueden ser comentadas o eliminadas cuando se finalice un proyecto. Por default estan ocultas
  * en el dashboard.
  */
 Route::prefix('examples')->name('examples.')->middleware([
-    'auth:sanctum',
-    'verified',
-    config('jetstream.auth_session')
+  'auth:sanctum',
+  'verified',
+  config('jetstream.auth_session')
 ])->group(function () {
-    Route::get('/', [ExampleIndexController::class, 'index'])->name('index');
-});
\ No newline at end of file
+  Route::get('/', [ExampleIndexController::class, 'index'])->name('index');
+});
-- 
2.45.2


From 8792c5b283243d4483454c22d740a969714ddf66 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Thu, 14 Aug 2025 16:32:20 -0600
Subject: [PATCH 02/18] Se creo el archivo de obras

---
 .../Controllers/Dashboard/ObrasController.php | 29 ++++++++++++++++
 .../Dashboard/TramiteController.php           | 29 ++++++++++++++++
 resources/js/Layouts/DashboardLayout.vue      |  5 ---
 resources/js/Pages/Dashboard/Obras.vue        | 29 ++++++++++++++++
 resources/js/Pages/Dashboard/Tramites.vue     | 33 +++++++++++--------
 routes/api.php                                |  7 ++++
 routes/web.php                                |  7 ++--
 7 files changed, 115 insertions(+), 24 deletions(-)
 create mode 100644 app/Http/Controllers/Dashboard/ObrasController.php
 create mode 100644 app/Http/Controllers/Dashboard/TramiteController.php
 create mode 100644 resources/js/Pages/Dashboard/Obras.vue

diff --git a/app/Http/Controllers/Dashboard/ObrasController.php b/app/Http/Controllers/Dashboard/ObrasController.php
new file mode 100644
index 0000000..38f34bc
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/ObrasController.php
@@ -0,0 +1,29 @@
+<?php namespace App\Http\Controllers\Dashboard;
+
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller as BaseController;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
+class ObrasController extends BaseController
+{
+    public function Obras(Request $request)
+    {
+        $query = $request->only(['start', 'end', 'type']);
+        $query = array_merge(['type' => 'api'], $query);
+
+        try {
+            $response = Http::timeout(5)->get('https://obras-information.comalcalco.gob.mx/api/controller.php?action=getCounters', $query);
+
+            if (! $response->successful()) {
+                return response()->json(['error' => 'External service error'], $response->status());
+            }
+
+            return response()->json($response->json(), $response->status())
+                ->header('Content-Type', $response->header('Content-Type', 'application/json'));
+        } catch (\Throwable $e) {
+            Log::error('Proxy error: '.$e->getMessage());
+            return response()->json(['error' => 'Unable to contact external service'], 502);
+        }
+    }
+}
diff --git a/app/Http/Controllers/Dashboard/TramiteController.php b/app/Http/Controllers/Dashboard/TramiteController.php
new file mode 100644
index 0000000..12cccf2
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/TramiteController.php
@@ -0,0 +1,29 @@
+<?php namespace App\Http\Controllers\Dashboard;
+
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller as BaseController;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
+class TramiteController extends BaseController
+{
+    public function tramiteEspecial(Request $request)
+    {
+        $query = $request->only(['start', 'end', 'type']);
+        $query = array_merge(['type' => 'api'], $query);
+
+        try {
+            $response = Http::timeout(5)->get('https://tramites.comalcalco.gob.mx/reporte-especial', $query);
+
+            if (! $response->successful()) {
+                return response()->json(['error' => 'External service error'], $response->status());
+            }
+
+            return response()->json($response->json(), $response->status())
+                ->header('Content-Type', $response->header('Content-Type', 'application/json'));
+        } catch (\Throwable $e) {
+            Log::error('Proxy error: '.$e->getMessage());
+            return response()->json(['error' => 'Unable to contact external service'], 502);
+        }
+    }
+}
diff --git a/resources/js/Layouts/DashboardLayout.vue b/resources/js/Layouts/DashboardLayout.vue
index b26c1cb..cbacbaa 100644
--- a/resources/js/Layouts/DashboardLayout.vue
+++ b/resources/js/Layouts/DashboardLayout.vue
@@ -55,11 +55,6 @@ onMounted(()=> {
                         name="help.title"
                         to="dashboard.help"
                     />
-                    <Link
-                        icon="live_help"
-                        name="Graficas"
-                        to="dashboard.chart-test.index"
-                    />
                 </Section>
                 <Section name="Configuraciones">
                     <Link
diff --git a/resources/js/Pages/Dashboard/Obras.vue b/resources/js/Pages/Dashboard/Obras.vue
new file mode 100644
index 0000000..454b48d
--- /dev/null
+++ b/resources/js/Pages/Dashboard/Obras.vue
@@ -0,0 +1,29 @@
+<script setup>
+
+
+const fetchReport = async ({ start, end }) => {
+  // cancelar petición previa
+  if (cancelTokenSource) {
+    try { cancelTokenSource.cancel('cancel'); } catch (e) {}
+  }
+  cancelTokenSource = axios.CancelToken.source();
+
+  const params = {};
+  if (start) params.start = start;
+  if (end) params.end = end;
+
+  const res = await axios.get('/api/reporte-especial', {
+    params,
+    cancelToken: cancelTokenSource.token,
+    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+  });
+
+  // axios lanza en error si status >= 400, aquí devolvemos data directamente
+  return res.data;
+};
+</script>
+
+<template>
+
+  Hola
+</template>
diff --git a/resources/js/Pages/Dashboard/Tramites.vue b/resources/js/Pages/Dashboard/Tramites.vue
index 7514808..fa27f74 100644
--- a/resources/js/Pages/Dashboard/Tramites.vue
+++ b/resources/js/Pages/Dashboard/Tramites.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, watch, onMounted } from "vue";
 
+import axios from "axios";
 import Bars from "@/Components/Dashboard/Charts/Bars.vue";
 import Pie from "@/Components/Dashboard/Charts/Pie.vue";
 import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
@@ -62,24 +63,28 @@ const mode = computed(() => {
   return "rango";
 });
 
-let abortController = null;
+let cancelTokenSource = null;
 let debounceId = null;
 
 const fetchReport = async ({ start, end }) => {
-  if (abortController) abortController.abort();
-  abortController = new AbortController();
-  const qs = new URLSearchParams();
-  if (start) qs.set("start", start);
-  if (end) qs.set("end", end);
+  // cancelar petición previa
+  if (cancelTokenSource) {
+    try { cancelTokenSource.cancel('cancel'); } catch (e) {}
+  }
+  cancelTokenSource = axios.CancelToken.source();
 
-  const res = await fetch(
-    `/dashboard/api/proxy-reporte-especial?${qs.toString()}`,
-    {
-      signal: abortController.signal,
-    }
-  );
-  if (!res.ok) throw new Error("Error de red");
-  return res.json();
+  const params = {};
+  if (start) params.start = start;
+  if (end) params.end = end;
+
+  const res = await axios.get('/api/reporte-especial', {
+    params,
+    cancelToken: cancelTokenSource.token,
+    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+  });
+
+  // axios lanza en error si status >= 400, aquí devolvemos data directamente
+  return res.data;
 };
 
 const load = async () => {
diff --git a/routes/api.php b/routes/api.php
index eb6fa48..4851d4c 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,5 +1,7 @@
 <?php
 
+use App\Http\Controllers\Dashboard\ObrasController;
+use App\Http\Controllers\Dashboard\TramiteController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
@@ -17,3 +19,8 @@
 Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
     return $request->user();
 });
+
+Route::middleware(['throttle:60,1'])->get('/reporte-especial', [TramiteController::class, 'tramiteEspecial']);
+
+Route::middleware(['throttle:60,1'])->get('/reporte-obras', [ObrasController::class, 'Obras']);
+
diff --git a/routes/web.php b/routes/web.php
index f4d5f1b..b8e80e4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -30,11 +30,8 @@
   Route::inertia('/changelogs', 'Dashboard/Changelogs')->name('changelogs');
   Route::inertia('/help', 'Dashboard/Help')->name('help');
 
-  Route::inertia('/api-example', 'Dashboard/Tramites')->name('api-example');
-  Route::get('/api/proxy-reporte-especial', function () {
-    $response = Http::get('https://tramites.comalcalco.gob.mx/reporte-especial?type=api');
-    return $response->json();
-  });
+  Route::inertia('/api-tramite', 'Dashboard/Tramites')->name('api-tramite');
+  Route::inertia('/api-obra', 'Dashboard/Obras')->name('api-obra');
 
   # Log de Acciones
   Route::resource('histories', HistoryLogController::class)->only([
-- 
2.45.2


From df8a8f952d3c4b9e35f093b9bad4ae0355f0cb70 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Fri, 15 Aug 2025 16:18:43 -0600
Subject: [PATCH 03/18] =?UTF-8?q?Se=20agreg=C3=B3=20el=20endpoint=20de=20O?=
 =?UTF-8?q?bras?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Controllers/Dashboard/ObrasController.php |   29 +-
 package-lock.json                             |    7 +
 package.json                                  |    1 +
 resources/js/Components/Dashboard/Maps.vue    |  367 +++++
 resources/js/Pages/Dashboard/Obras.vue        | 1281 ++++++++++++++++-
 routes/api.php                                |    8 +-
 6 files changed, 1671 insertions(+), 22 deletions(-)
 create mode 100644 resources/js/Components/Dashboard/Maps.vue

diff --git a/app/Http/Controllers/Dashboard/ObrasController.php b/app/Http/Controllers/Dashboard/ObrasController.php
index 38f34bc..c8ee62f 100644
--- a/app/Http/Controllers/Dashboard/ObrasController.php
+++ b/app/Http/Controllers/Dashboard/ObrasController.php
@@ -9,17 +9,38 @@ class ObrasController extends BaseController
 {
     public function Obras(Request $request)
     {
-        $query = $request->only(['start', 'end', 'type']);
-        $query = array_merge(['type' => 'api'], $query);
+        $query = $request->only(['start', 'end', 'type', 'action']);
+        $query = array_merge($query, ['action' => 'index', 'type' => 'api'], $query);
 
         try {
-            $response = Http::timeout(5)->get('https://obras-information.comalcalco.gob.mx/api/controller.php?action=getCounters', $query);
+            $response = Http::timeout(5)->get('https://obras-information.comalcalco.gob.mx/api/controller.php', $query);
 
             if (! $response->successful()) {
                 return response()->json(['error' => 'External service error'], $response->status());
             }
 
-            return response()->json($response->json(), $response->status())
+            $mainData = $response->json();
+
+            $counterQuery = array_merge($query, ['action' => 'getCounters']);
+            $countersResponse = Http::timeout(5)->get('https://obras-information.comalcalco.gob.mx/api/controller.php', $counterQuery);
+
+            $countersData = [];
+            if ($countersResponse->successful()) {
+                $countersData = $countersResponse->json();
+            }
+
+            $usersQuery = array_merge($query, ['action' => 'actionsOfSupervisors']);
+            $userResponse = Http::timeout(5)->get('https://obras-information.comalcalco.gob.mx/api/controller.php', $usersQuery);
+
+            $usersData = [];
+            if($userResponse->successful()) {
+                $usersData = $userResponse->json();
+            }
+
+            // Combinar ambas respuestas
+            $combinedData = array_merge($mainData, ['counters' => $countersData, 'users' => $usersData]);
+
+            return response()->json($combinedData, $response->status())
                 ->header('Content-Type', $response->header('Content-Type', 'application/json'));
         } catch (\Throwable $e) {
             Log::error('Proxy error: '.$e->getMessage());
diff --git a/package-lock.json b/package-lock.json
index e8c9c45..e292790 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@googlemaps/js-api-loader": "^1.16.10",
                 "@inertiajs/vue3": "^1.0.0-beta.2",
                 "@soketi/soketi": "^1.6.0",
                 "@vueuse/core": "^9.6.0",
@@ -408,6 +409,12 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@googlemaps/js-api-loader": {
+            "version": "1.16.10",
+            "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.10.tgz",
+            "integrity": "sha512-c2erv2k7P2ilYzMmtYcMgAR21AULosQuUHJbStnrvRk2dG93k5cqptDrh9A8p+ZNlyhiqEOgHW7N9PAizdUM7Q==",
+            "license": "Apache-2.0"
+        },
         "node_modules/@inertiajs/core": {
             "version": "1.0.14",
             "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.0.14.tgz",
diff --git a/package.json b/package.json
index 1778756..3466eea 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
         "vue": "^3.2.31"
     },
     "dependencies": {
+        "@googlemaps/js-api-loader": "^1.16.10",
         "@inertiajs/vue3": "^1.0.0-beta.2",
         "@soketi/soketi": "^1.6.0",
         "@vueuse/core": "^9.6.0",
diff --git a/resources/js/Components/Dashboard/Maps.vue b/resources/js/Components/Dashboard/Maps.vue
new file mode 100644
index 0000000..022a954
--- /dev/null
+++ b/resources/js/Components/Dashboard/Maps.vue
@@ -0,0 +1,367 @@
+<template>
+  <div class="bg-white rounded-lg shadow-lg overflow-hidden">
+    <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-lg font-medium text-gray-900">Mapa de Obras</h3>
+          <p class="text-sm text-gray-600 mt-1">Ubicación geográfica de proyectos en Comalcalco, Tabasco</p>
+        </div>
+
+        <!-- Filtros por estado -->
+        <div class="flex items-center space-x-4">
+          <div class="flex items-center space-x-2">
+            <input
+              id="sin-avances"
+              v-model="filters.sin_avances"
+              @change="updateMarkers"
+              type="checkbox"
+              class="rounded border-gray-300 text-red-600 focus:ring-red-500"
+            />
+            <label for="sin-avances" class="flex items-center text-sm text-gray-700">
+              <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
+              Sin avances ({{ counters.sin_avances.count }})
+            </label>
+          </div>
+
+          <div class="flex items-center space-x-2">
+            <input
+              id="abiertas"
+              v-model="filters.abiertas"
+              @change="updateMarkers"
+              type="checkbox"
+              class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500"
+            />
+            <label for="abiertas" class="flex items-center text-sm text-gray-700">
+              <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
+              Abiertas ({{ counters.abiertas.count }})
+            </label>
+          </div>
+
+          <div class="flex items-center space-x-2">
+            <input
+              id="finalizadas"
+              v-model="filters.finalizadas"
+              @change="updateMarkers"
+              type="checkbox"
+              class="rounded border-gray-300 text-green-600 focus:ring-green-500"
+            />
+            <label for="finalizadas" class="flex items-center text-sm text-gray-700">
+              <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
+              Finalizadas ({{ counters.finalizadas.count }})
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mapa -->
+    <div ref="mapContainer" class="w-full h-96 relative">
+      <div v-if="loading" class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10">
+        <div class="text-center">
+          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+          <p class="mt-2 text-sm text-gray-600">Cargando mapa...</p>
+        </div>
+      </div>
+
+      <div v-if="error" class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10">
+        <div class="text-center">
+          <svg class="mx-auto h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <h3 class="mt-2 text-sm font-medium text-gray-900">Error al cargar el mapa</h3>
+          <p class="mt-1 text-sm text-gray-500">{{ error }}</p>
+          <button @click="initMap" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
+            Reintentar
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Leyenda -->
+    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
+      <div class="flex items-center justify-between text-xs text-gray-600">
+        <div class="flex items-center space-x-4">
+          <span class="flex items-center">
+            <div class="w-2 h-2 bg-red-500 rounded-full mr-1"></div>
+            Sin avances
+          </span>
+          <span class="flex items-center">
+            <div class="w-2 h-2 bg-yellow-500 rounded-full mr-1"></div>
+            En proceso
+          </span>
+          <span class="flex items-center">
+            <div class="w-2 h-2 bg-green-500 rounded-full mr-1"></div>
+            Finalizadas
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, watch } from 'vue';
+import { Loader } from '@googlemaps/js-api-loader';
+
+const props = defineProps({
+  counters: {
+    type: Object,
+    required: true
+  }
+});
+
+const mapContainer = ref(null);
+const loading = ref(true);
+const error = ref(null);
+const map = ref(null);
+const markers = ref([]);
+const geocoder = ref(null);
+
+// Filtros activos
+const filters = reactive({
+  sin_avances: true,
+  abiertas: true,
+  finalizadas: true
+});
+
+// Configuración de colores por estado
+const markerColors = {
+  sin_avances: '#EF4444', // Rojo
+  abiertas: '#F59E0B',     // Amarillo
+  finalizadas: '#10B981'   // Verde
+};
+
+// Contador de marcadores visibles
+const visibleMarkersCount = computed(() => {
+  return markers.value.filter(marker => marker.visible).length;
+});
+
+// Coordenadas del centro de Comalcalco, Tabasco
+const COMALCALCO_CENTER = {
+  lat: 18.2669,
+  lng: -93.2072
+};
+
+// Límites aproximados de Comalcalco
+const COMALCALCO_BOUNDS = {
+  north: 18.35,
+  south: 18.18,
+  east: -93.10,
+  west: -93.30
+};
+
+const initMap = async () => {
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const loader = new Loader({
+      apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
+      version: 'weekly',
+      libraries: ['places']
+    });
+
+    // Cargar Google Maps
+    const google = await loader.load();
+
+    // Verificar que google.maps esté disponible
+    if (!google.maps) {
+      throw new Error('Google Maps no se cargó correctamente');
+    }
+
+    // Inicializar el mapa centrado en Comalcalco
+    map.value = new google.maps.Map(mapContainer.value, {
+      center: COMALCALCO_CENTER,
+      zoom: 12,
+      restriction: {
+        latLngBounds: COMALCALCO_BOUNDS,
+        strictBounds: false
+      },
+      mapTypeControl: true,
+      streetViewControl: true,
+      fullscreenControl: true,
+      zoomControl: true
+    });
+
+    // Inicializar el geocodificador
+    geocoder.value = new google.maps.Geocoder();
+
+    // Cargar marcadores de obras
+    await loadMarkers();
+
+  } catch (err) {
+    console.error('Error loading Google Maps:', err);
+    error.value = err.message || 'Error al cargar Google Maps';
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadMarkers = async () => {
+  if (!map.value || !geocoder.value) return;
+
+  // Limpiar marcadores existentes
+  clearMarkers();
+
+  const allObras = [
+    ...props.counters.sin_avances.detalles.map(obra => ({ ...obra, estado: 'sin_avances' })),
+    ...props.counters.abiertas.detalles.map(obra => ({ ...obra, estado: 'abiertas' })),
+    ...props.counters.finalizadas.detalles.map(obra => ({ ...obra, estado: 'finalizadas' }))
+  ];
+
+  for (const obra of allObras) {
+    try {
+      await createMarkerForObra(obra);
+    } catch (err) {
+      console.warn(`Error creating marker for obra ${obra.num_proyecto}:`, err);
+    }
+  }
+
+  updateMarkers();
+};
+
+const createMarkerForObra = async (obra) => {
+  if (!obra.direccion_obra || !geocoder.value) return;
+
+  const address = `${obra.direccion_obra}, Comalcalco, Tabasco, México`;
+
+  return new Promise((resolve, reject) => {
+    geocoder.value.geocode({ address }, (results, status) => {
+      if (status === 'OK' && results[0]) {
+        const position = results[0].geometry.location;
+
+        // Verificar que la ubicación esté dentro de los límites de Comalcalco
+        const lat = position.lat();
+        const lng = position.lng();
+
+        if (lat < COMALCALCO_BOUNDS.south || lat > COMALCALCO_BOUNDS.north ||
+            lng < COMALCALCO_BOUNDS.west || lng > COMALCALCO_BOUNDS.east) {
+          console.warn(`Obra ${obra.num_proyecto} fuera de los límites de Comalcalco`);
+          resolve();
+          return;
+        }
+
+        const marker = new google.maps.Marker({
+          position,
+          map: map.value,
+          title: `${obra.num_proyecto} - ${obra.direccion_obra}`,
+          icon: createCustomMarker(obra.estado),
+          visible: filters[obra.estado]
+        });
+
+        // Info window con detalles de la obra
+        const infoWindow = new google.maps.InfoWindow({
+          content: createInfoWindowContent(obra)
+        });
+
+        marker.addListener('click', () => {
+          // Cerrar otras ventanas abiertas
+          markers.value.forEach(m => m.infoWindow?.close());
+          infoWindow.open(map.value, marker);
+        });
+
+        markers.value.push({
+          marker,
+          infoWindow,
+          estado: obra.estado,
+          obra,
+          visible: filters[obra.estado]
+        });
+
+        resolve();
+      } else {
+        console.warn(`Geocoding failed for ${address}: ${status}`);
+        resolve();
+      }
+    });
+  });
+};
+
+const createCustomMarker = (estado) => {
+  const color = markerColors[estado];
+
+  return {
+    url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
+      <svg width="24" height="36" viewBox="0 0 24 36" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24c0-6.627-5.373-12-12-12z" fill="${color}"/>
+        <circle cx="12" cy="12" r="6" fill="white"/>
+        <circle cx="12" cy="12" r="3" fill="${color}"/>
+      </svg>
+    `)}`,
+    scaledSize: new google.maps.Size(24, 36),
+    anchor: new google.maps.Point(12, 36)
+  };
+};
+
+const createInfoWindowContent = (obra) => {
+  const estadoConfig = {
+    sin_avances: { color: 'bg-red-100 text-red-800', label: 'Sin avances' },
+    abiertas: { color: 'bg-yellow-100 text-yellow-800', label: 'En proceso' },
+    finalizadas: { color: 'bg-green-100 text-green-800', label: 'Finalizada' }
+  };
+
+  const config = estadoConfig[obra.estado];
+  const cumplimiento = obra.cumplimiento_total ? `${Number(obra.cumplimiento_total).toFixed(1)}%` : 'N/A';
+
+  return `
+    <div class="p-4 max-w-sm">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="font-bold text-gray-900">${obra.num_proyecto || 'N/A'}</h3>
+        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${config.color}">
+          ${config.label}
+        </span>
+      </div>
+
+      <div class="space-y-2 text-sm">
+        <div>
+          <p class="font-medium text-gray-700">Dirección:</p>
+          <p class="text-gray-600">${obra.direccion_obra || 'N/A'}</p>
+        </div>
+
+        <div>
+          <p class="font-medium text-gray-700">Cumplimiento:</p>
+          <div class="flex items-center space-x-2">
+            <div class="flex-1 bg-gray-200 rounded-full h-2">
+              <div class="h-2 rounded-full ${obra.estado === 'finalizadas' ? 'bg-green-500' : obra.estado === 'abiertas' ? 'bg-yellow-500' : 'bg-red-500'}"
+                   style="width: ${Number(obra.cumplimiento_total) || 0}%"></div>
+            </div>
+            <span class="text-xs font-medium text-gray-700">${cumplimiento}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+};
+
+const updateMarkers = () => {
+  markers.value.forEach(({ marker, estado }) => {
+    const shouldShow = filters[estado];
+    marker.setVisible(shouldShow);
+
+    // Actualizar el estado visible del marcador
+    const markerIndex = markers.value.findIndex(m => m.marker === marker);
+    if (markerIndex !== -1) {
+      markers.value[markerIndex].visible = shouldShow;
+    }
+  });
+};
+
+const clearMarkers = () => {
+  markers.value.forEach(({ marker, infoWindow }) => {
+    infoWindow?.close();
+    marker.setMap(null);
+  });
+  markers.value = [];
+};
+
+// Recargar marcadores cuando cambien los contadores
+watch(() => props.counters, () => {
+  if (map.value) {
+    loadMarkers();
+  }
+}, { deep: true });
+
+onMounted(() => {
+  initMap();
+});
+</script>
diff --git a/resources/js/Pages/Dashboard/Obras.vue b/resources/js/Pages/Dashboard/Obras.vue
index 454b48d..287758b 100644
--- a/resources/js/Pages/Dashboard/Obras.vue
+++ b/resources/js/Pages/Dashboard/Obras.vue
@@ -1,29 +1,1282 @@
 <script setup>
+import { ref, reactive, onMounted } from "vue";
 
+import ObrasMap from "@/Components/Dashboard/Maps.vue";
+import axios from "axios";
+
+const loading = ref(false);
+
+// Planeaciones
+const planeaciones = ref([]);
+const planeacionesCount = ref(0);
+const planeacionesError = ref(false);
+const planeacionesErrorMessage = ref("");
+
+// Estimaciones
+const estimaciones = ref([]);
+const estimacionesGrouped = reactive({});
+const estimacionesGroupedKeys = ref([]);
+const estimacionesCount = ref(0);
+const estimacionesError = ref(false);
+const estimacionesErrorMessage = ref("");
+
+//Contadores
+const counters = reactive({
+  sin_avances: { count: 0, detalles: [] },
+  finalizadas: { count: 0, detalles: [] },
+  abiertas: { count: 0, detalles: [] },
+});
+
+//Users
+const users = ref([]);
+const usersStats = reactive({
+  total_supervisores: 0,
+  supervisores_con_acciones: 0,
+  ultima_accion_estimacion: 0,
+  ultima_action_evidencia: 0,
+  sin_acciones: 0,
+});
+
+// Últimas actualizaciones
+const lastPlaneacion = ref(null);
+const lastEstimacion = ref(null);
+
+// UI
+const activeTab = ref("proyectos");
+const expandedProjects = ref(new Set());
+
+let cancelTokenSource = null;
+
+/**
+ * Carga datos (sin manejo de rango de fechas)
+ */
+const loadDashboardData = async () => {
+  loading.value = true;
+  planeacionesError.value = estimacionesError.value = false;
+  planeacionesErrorMessage.value = estimacionesErrorMessage.value = "";
 
-const fetchReport = async ({ start, end }) => {
   // cancelar petición previa
   if (cancelTokenSource) {
-    try { cancelTokenSource.cancel('cancel'); } catch (e) {}
+    try {
+      cancelTokenSource.cancel("cancel");
+    } catch (e) {}
   }
   cancelTokenSource = axios.CancelToken.source();
 
-  const params = {};
-  if (start) params.start = start;
-  if (end) params.end = end;
+  try {
+    const res = await axios.get("/api/reporte-obras", {
+      cancelToken: cancelTokenSource.token,
+      headers: { "X-Requested-With": "XMLHttpRequest" },
+    });
 
-  const res = await axios.get('/api/reporte-especial', {
-    params,
-    cancelToken: cancelTokenSource.token,
-    headers: { 'X-Requested-With': 'XMLHttpRequest' }
-  });
+    const data = res.data;
+    console.log("Dashboard data:", data);
+    if (!data || !data.success) {
+      planeacionesError.value = estimacionesError.value = true;
+      const msg = data?.error || "Error desconocido";
+      planeacionesErrorMessage.value = estimacionesErrorMessage.value = msg;
+      return;
+    }
 
-  // axios lanza en error si status >= 400, aquí devolvemos data directamente
-  return res.data;
+    // Planeaciones: normalizar campos
+    if (data.planeacions) {
+      planeacionesCount.value = data.planeacions.count || 0;
+      const rawPlaneaciones = Array.isArray(data.planeacions.data)
+        ? data.planeacions.data
+        : [];
+      planeaciones.value = rawPlaneaciones.map((item) => ({
+        id: item.ID ?? item.id ?? null,
+        num_proyecto: item.num_proyecto ?? item.numProyecto ?? null,
+        proyecto: item.proyecto ?? null,
+        cumplimiento_total:
+          item.cumplimiento_total ?? item.cumplimiento ?? null,
+      }));
+      const lastP =
+        data.planeacions.lastUpdate ?? data.planeacions.last_update ?? null;
+      lastPlaneacion.value = lastP && (lastP.id ?? lastP.ID) ? lastP : null;
+    }
+
+    // Estimaciones: normalizar y agrupar por proyecto_id
+    if (data.estimacions) {
+      estimacionesCount.value = data.estimacions.count || 0;
+      const rawEstimaciones = Array.isArray(data.estimacions.data)
+        ? data.estimacions.data
+        : [];
+      estimaciones.value = rawEstimaciones.map((item) => ({
+        id: item.id ?? item.ID ?? null,
+        num_estimacion: item.num_estimacion ?? item.numEstimacion ?? null,
+        fecha_estimacion: item.fecha_estimacion ?? item.fechaEstimacion ?? null,
+        periodo_estimacion: item.periodo_estimacion ?? null,
+        monto_estimacion: item.monto_estimacion ?? item.montoEstimacion ?? "0",
+        monto_acumulado: item.monto_acumulado ?? item.montoAcumulado ?? "0",
+        status: item.status ?? null,
+        created_at: item.created_at ?? item.createdAt ?? null,
+        proyecto_id: String(
+          item.proyecto_id ?? item.proyectoId ?? "sin_proyecto"
+        ),
+        num_proyecto: item.num_proyecto ?? item.numProyecto ?? null,
+        proyecto: item.proyecto ?? null,
+      }));
+
+      // Agrupar
+      Object.keys(estimacionesGrouped).forEach(
+        (k) => delete estimacionesGrouped[k]
+      );
+      estimaciones.value.forEach((est) => {
+        const proyectoId = est.proyecto_id || "sin_proyecto";
+        if (!estimacionesGrouped[proyectoId]) {
+          estimacionesGrouped[proyectoId] = {
+            proyecto: {
+              num_proyecto: est.num_proyecto,
+              proyecto: est.proyecto,
+            },
+            estimaciones: [],
+          };
+        }
+        estimacionesGrouped[proyectoId].estimaciones.push(est);
+      });
+      estimacionesGroupedKeys.value = Object.keys(estimacionesGrouped);
+
+      // inicializar proyectos expandidos (todos abiertos por defecto)
+      expandedProjects.value = new Set(estimacionesGroupedKeys.value);
+
+      const lastE =
+        data.estimacions.lastUpdate ?? data.estimacions.last_update ?? null;
+      lastEstimacion.value = lastE && (lastE.id ?? lastE.ID) ? lastE : null;
+    }
+
+    // NUEVO: Procesar datos de contadores del segundo endpoint
+    if (data.counters) {
+      // Actualizar contadores sin avances
+      if (data.counters.sin_avances) {
+        counters.sin_avances.count = data.counters.sin_avances.count || 0;
+        counters.sin_avances.detalles = Array.isArray(
+          data.counters.sin_avances.detalles
+        )
+          ? data.counters.sin_avances.detalles.map((item) => ({
+              id: item.ID ?? item.id ?? null,
+              num_proyecto: item.num_proyecto ?? null,
+              direccion_obra: item.direccion_obra ?? null,
+              cumplimiento_total: item.cumplimiento_total ?? null,
+            }))
+          : [];
+      }
+
+      // Agregar contadores finalizadas (opcional, para uso futuro)
+      if (data.counters.finalizadas) {
+        counters.finalizadas = {
+          count: data.counters.finalizadas.count || 0,
+          detalles: Array.isArray(data.counters.finalizadas.detalles)
+            ? data.counters.finalizadas.detalles.map((item) => ({
+                id: item.ID ?? item.id ?? null,
+                num_proyecto: item.num_proyecto ?? null,
+                direccion_obra: item.direccion_obra ?? null,
+                cumplimiento_total: item.cumplimiento_total ?? null,
+              }))
+            : [],
+        };
+      }
+
+      // Agregar contadores abiertas (opcional, para uso futuro)
+      if (data.counters.abiertas) {
+        counters.abiertas = {
+          count: data.counters.abiertas.count || 0,
+          detalles: Array.isArray(data.counters.abiertas.detalles)
+            ? data.counters.abiertas.detalles.map((item) => ({
+                id: item.ID ?? item.id ?? null,
+                num_proyecto: item.num_proyecto ?? null,
+                direccion_obra: item.direccion_obra ?? null,
+                cumplimiento_total: item.cumplimiento_total ?? null,
+              }))
+            : [],
+        };
+      }
+    }
+
+    if (data.users && data.users.success) {
+      if (Array.isArray(data.users.supervisores)) {
+        users.value = data.users.supervisores.map((user) => ({
+          id: user.supervisor_id ?? null,
+          nombre: user.supervisor_nombre ?? "Sin nombre",
+          correo: user.supervisor_correo ?? "Sin correo",
+          ultima_accion:
+            user.supervisor_ultima_accion ?? " ",
+          fecha_accion: user.fecha_accion ?? null,
+          detalle_accion: user.detalle_accion ?? null,
+          proyecto_info: user.proyecto_info ?? null,
+        }));
+      }
+      if (data.users.estadisticas) {
+        usersStats.total_supervisores =
+          data.users.estadisticas.total_supervisores || 0;
+        usersStats.supervisores_con_acciones =
+          data.users.estadisticas.supervisores_con_acciones || 0;
+        usersStats.ultima_accion_estimacion =
+          data.users.estadisticas.ultima_accion_estimacion || 0;
+        usersStats.ultima_accion_evidencia =
+          data.users.estadisticas.ultima_accion_evidencia || 0;
+        usersStats.sin_acciones = data.users.estadisticas.sin_acciones || 0;
+      }
+    }
+  } catch (err) {
+    console.error(err);
+    // si la petición fue cancelada no sobreescribimos el error de UI
+    if (axios.isCancel && axios.isCancel(err)) return;
+    planeacionesError.value = estimacionesError.value = true;
+    planeacionesErrorMessage.value = estimacionesErrorMessage.value =
+      "Error de conexión con el servidor";
+  } finally {
+    loading.value = false;
+  }
 };
+
+const toggleProyecto = (id) => {
+  const key = String(id);
+  if (expandedProjects.value.has(key)) expandedProjects.value.delete(key);
+  else expandedProjects.value.add(key);
+  expandedProjects.value = new Set(Array.from(expandedProjects.value));
+};
+
+const selectTab = (tab) => {
+  activeTab.value = tab;
+};
+
+const badgeClass = (tab) => {
+  if (tab === "proyectos")
+    return activeTab.value === "proyectos"
+      ? "bg-blue-100 text-blue-800"
+      : "bg-gray-100 text-gray-800";
+  return activeTab.value === "estimaciones"
+    ? "bg-green-100 text-green-800"
+    : "bg-gray-100 text-gray-800";
+};
+
+const formatMoney = (amount) => {
+  return new Intl.NumberFormat("es-MX", {
+    style: "currency",
+    currency: "MXN",
+    minimumFractionDigits: 2,
+  }).format(Number(amount) || 0);
+};
+const formatDate = (s) => {
+  if (!s) return "--";
+  return new Date(s).toLocaleDateString("es-ES", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+};
+const formatDateTime = (s) => {
+  if (!s) return "--";
+  return new Date(s).toLocaleString("es-ES", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+const formatPercent = (v) => (Number(v) || 0).toFixed(1) + "%";
+const percentColor = (v) =>
+  Number(v) >= 80 ? "#16a34a" : Number(v) >= 50 ? "#f59e0b" : "#ef4444";
+const percentColorClass = (v) =>
+  Number(v) >= 80
+    ? "text-green-600"
+    : Number(v) >= 50
+    ? "text-yellow-600"
+    : "text-red-600";
+
+onMounted(() => {
+  loadDashboardData();
+  activeTab.value = "proyectos";
+});
 </script>
-
 <template>
+  <div class="min-h-screen bg-gray-50">
+    <!-- Header -->
+    <header>
+      <div class="bg-gray-100 py-2">
+        <div class="text-left container mx-auto sm:px-6 lg:px-8">
+          <span class="text-sm text-gray-700 font-bold">COMALCALCO.GOB.MX</span>
+        </div>
+      </div>
 
-  Hola
+      <div style="background-color: #621132" class="shadow-lg">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center h-28">
+            <img
+              src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+              alt="Logo Comalcalco"
+              class="h-24 w-auto object-contain"
+            />
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Loading Overlay -->
+    <div
+      v-if="loading"
+      class="fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50"
+    >
+      <div class="text-center">
+        <div
+          class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"
+        ></div>
+        <p class="mt-4 text-gray-600">Cargando datos...</p>
+      </div>
+    </div>
+
+    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <!-- Stats Cards Grid -->
+      <div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div
+          class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg p-6 text-white"
+        >
+          <div class="flex items-center justify-between">
+            <div>
+              <h2 class="text-lg font-medium opacity-90">Total de Proyectos</h2>
+              <p class="text-blue-100 text-sm mt-1">Proyectos en seguimiento</p>
+            </div>
+            <div
+              class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
+            >
+              <span class="text-2xl font-bold text-blue-600">{{
+                planeacionesCount
+              }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="bg-gradient-to-r from-green-600 to-emerald-700 rounded-lg shadow-lg p-6 text-white"
+        >
+          <div class="flex items-center justify-between">
+            <div>
+              <h2 class="text-lg font-medium opacity-90">
+                Total de Estimaciones
+              </h2>
+              <p class="text-green-100 text-sm mt-1">
+                Estimaciones registradas
+              </p>
+            </div>
+            <div
+              class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
+            >
+              <span class="text-2xl font-bold text-green-600">{{
+                estimacionesCount
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Last Updates Grid -->
+      <div class="mb-8 grid grid-cols-1 xl:grid-cols-2 gap-6">
+        <!-- Last Planeación Update -->
+        <div>
+          <div
+            class="bg-white rounded-lg shadow-lg overflow-hidden border-l-4 border-blue-500"
+          >
+            <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50">
+              <div class="flex items-center space-x-2">
+                <svg
+                  class="w-5 h-5 text-blue-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  ></path>
+                </svg>
+                <h3 class="text-lg font-semibold text-gray-900">
+                  Último Avance de Proyecto
+                </h3>
+              </div>
+              <p class="text-sm text-gray-600 mt-1">
+                Registro más reciente de progreso en obra
+              </p>
+            </div>
+
+            <div v-if="!lastPlaneacion" class="px-6 py-8 text-center">
+              <svg
+                class="mx-auto h-12 w-12 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <h4 class="mt-2 text-sm font-medium text-gray-900">
+                Sin actualizaciones recientes
+              </h4>
+              <p class="mt-1 text-sm text-gray-500">
+                No se encontraron registros de avances
+              </p>
+            </div>
+
+            <div v-else class="p-6">
+              <div class="space-y-4">
+                <div class="flex items-start space-x-3">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-4 h-4 text-blue-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900">
+                      Registrado por
+                    </p>
+                    <p class="text-sm text-gray-600 truncate">
+                      {{ lastPlaneacion.name }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start space-x-3">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-4 h-4 text-purple-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900">Partida</p>
+                    <p class="text-sm text-gray-600">
+                      {{ lastPlaneacion.desc_partida }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start space-x-3">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-4 h-4 text-orange-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900">Concepto</p>
+                    <p class="text-sm text-gray-600">
+                      <span
+                        class="font-mono text-xs bg-gray-100 px-2 py-1 rounded"
+                        >{{ lastPlaneacion.clave }}</span
+                      >
+                      <span class="ml-2">{{
+                        lastPlaneacion.desc_concepto
+                      }}</span>
+                    </p>
+                  </div>
+                </div>
+
+                <div class="bg-gray-50 rounded-lg p-4">
+                  <div class="flex items-center justify-between mb-2">
+                    <span class="text-sm font-medium text-gray-900"
+                      >Porcentaje de Cumplimiento</span
+                    >
+                    <span
+                      class="text-lg font-bold"
+                      :class="percentColorClass(lastPlaneacion.cumplimiento)"
+                      >{{ formatPercent(lastPlaneacion.cumplimiento) }}</span
+                    >
+                  </div>
+                  <div class="w-full bg-gray-200 rounded-full h-2">
+                    <div
+                      class="h-2 rounded-full transition-all duration-300"
+                      :style="{
+                        width: (Number(lastPlaneacion.cumplimiento) || 0) + '%',
+                        backgroundColor: percentColor(
+                          lastPlaneacion.cumplimiento
+                        ),
+                      }"
+                    ></div>
+                  </div>
+                </div>
+
+                <div class="bg-blue-50 rounded-lg p-4">
+                  <div class="flex items-center space-x-2 mb-2">
+                    <svg
+                      class="w-4 h-4 text-blue-600"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.959 8.959 0 01-4.906-1.459L3 21l1.459-5.094A8.959 8.959 0 013 12c0-4.418 3.582-8 8-8s8 3.582 8 8z"
+                      />
+                    </svg>
+                    <span class="text-sm font-medium text-gray-900"
+                      >Descripción del Avance</span
+                    >
+                  </div>
+                  <p class="text-sm text-gray-600 leading-relaxed">
+                    {{ lastPlaneacion.desc_evidencia }}
+                  </p>
+                </div>
+
+                <div class="flex items-center space-x-4 text-xs text-gray-500">
+                  <div class="flex items-center space-x-1">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                      />
+                    </svg>
+                    <span
+                      >Fecha:
+                      {{ formatDate(lastPlaneacion.fecha_evidencia) }}</span
+                    >
+                  </div>
+                  <div class="flex items-center space-x-1">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                    <span
+                      >Registrado:
+                      {{ formatDateTime(lastPlaneacion.created_at) }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Last Estimación Update -->
+        <div>
+          <div
+            class="bg-white rounded-lg shadow-lg overflow-hidden border-l-4 border-green-500"
+          >
+            <div class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50">
+              <div class="flex items-center space-x-2">
+                <svg
+                  class="w-5 h-5 text-green-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+                  />
+                </svg>
+                <h3 class="text-lg font-semibold text-gray-900">
+                  Última Estimación Registrada
+                </h3>
+              </div>
+              <p class="text-sm text-gray-600 mt-1">
+                Estimación más reciente del proyecto
+              </p>
+            </div>
+
+            <div v-if="!lastEstimacion" class="px-6 py-8 text-center">
+              <svg
+                class="mx-auto h-12 w-12 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+                />
+              </svg>
+              <h4 class="mt-2 text-sm font-medium text-gray-900">
+                Sin estimaciones recientes
+              </h4>
+              <p class="mt-1 text-sm text-gray-500">
+                No se encontraron registros de estimaciones
+              </p>
+            </div>
+
+            <div v-else class="p-6">
+              <div class="space-y-4">
+                <div class="flex items-start space-x-3">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-4 h-4 text-green-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900">
+                      Número de Estimación
+                    </p>
+                    <p class="text-sm text-gray-600 font-mono">
+                      {{ lastEstimacion.num_estimacion }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start space-x-3">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-4 h-4 text-blue-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900">Proyecto</p>
+                    <p class="text-sm text-gray-600">
+                      {{
+                        lastEstimacion.num_proyecto
+                          ? `${lastEstimacion.num_proyecto} - ${lastEstimacion.proyecto}`
+                          : lastEstimacion.proyecto
+                      }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="bg-green-50 rounded-lg p-4">
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div>
+                      <p class="text-sm font-medium text-gray-900">
+                        Monto Estimado
+                      </p>
+                      <p class="text-lg font-bold text-green-600">
+                        {{ formatMoney(lastEstimacion.monto_estimacion) }}
+                      </p>
+                    </div>
+                    <div>
+                      <p class="text-sm font-medium text-gray-900">
+                        Monto Acumulado
+                      </p>
+                      <p class="text-lg font-bold text-green-700">
+                        {{ formatMoney(lastEstimacion.monto_acumulado) }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="flex items-center space-x-4 text-xs text-gray-500">
+                  <div class="flex items-center space-x-1">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                      />
+                    </svg>
+                    <span
+                      >Periodo: {{ lastEstimacion.periodo_estimacion }}</span
+                    >
+                  </div>
+                  <div class="flex items-center space-x-1">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                    <span
+                      >Registrado:
+                      {{ formatDateTime(lastEstimacion.created_at) }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tabbed Interface -->
+      <div class="bg-white rounded-lg shadow-lg overflow-hidden">
+        <div class="border-b border-gray-200">
+          <nav class="flex space-x-8 px-6" aria-label="Tabs">
+            <button
+              @click="selectTab('proyectos')"
+              class="tab-button py-4 px-1 text-sm font-medium whitespace-nowrap"
+            >
+              <svg
+                class="w-5 h-5 inline-block mr-2 -mt-0.5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                />
+              </svg>
+              Lista de Proyectos
+              <span
+                :class="badgeClass('proyectos')"
+                class="ml-2 px-2.5 py-0.5 rounded-full text-xs font-medium"
+                >{{ planeacionesCount }}</span
+              >
+            </button>
+
+            <button
+              @click="selectTab('estimaciones')"
+              class="tab-button py-4 px-1 text-sm font-medium whitespace-nowrap"
+            >
+              <svg
+                class="w-5 h-5 inline-block mr-2 -mt-0.5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+                />
+              </svg>
+              Lista de Estimaciones
+              <span
+                :class="badgeClass('estimaciones')"
+                class="ml-2 px-2.5 py-0.5 rounded-full text-xs font-medium"
+                >{{ estimacionesCount }}</span
+              >
+            </button>
+          </nav>
+        </div>
+
+        <!-- Proyectos Tab -->
+        <div v-show="activeTab === 'proyectos'" class="tab-content">
+          <div
+            class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200"
+          >
+            <h3 class="text-lg font-medium text-gray-900">
+              Gestión de Proyectos
+            </h3>
+            <p class="text-sm text-gray-600 mt-1">
+              Seguimiento detallado del progreso de cada proyecto
+            </p>
+          </div>
+
+          <div v-if="planeacionesError" class="text-center py-12">
+            <svg
+              class="mx-auto h-12 w-12 text-red-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">
+              Error al cargar proyectos
+            </h3>
+            <p class="mt-1 text-sm text-gray-500">
+              {{ planeacionesErrorMessage }}
+            </p>
+            <button
+              @click="loadDashboardData"
+              class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
+            >
+              Reintentar
+            </button>
+          </div>
+
+          <div
+            v-else-if="!planeaciones || !planeaciones.length"
+            class="text-center py-12"
+          >
+            <svg
+              class="mx-auto h-12 w-12 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+              />
+            </svg>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">
+              No hay proyectos
+            </h3>
+            <p class="mt-1 text-sm text-gray-500">
+              Comenzar agregando un nuevo proyecto.
+            </p>
+          </div>
+
+          <div v-else class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32"
+                  >
+                    Número
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    Proyecto
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48"
+                  >
+                    Progreso
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                <tr
+                  v-for="(p, idx) in planeaciones"
+                  :key="p.id ?? idx"
+                  class="hover:bg-gray-50 transition-colors"
+                >
+                  <td
+                    class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-mono"
+                  >
+                    {{ p.num_proyecto || "--" }}
+                  </td>
+                  <td class="px-6 py-4 text-sm text-gray-900">
+                    <div class="max-w-md truncate" :title="p.proyecto">
+                      {{ p.proyecto || "--" }}
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm">
+                    <div class="flex items-center space-x-3">
+                      <div
+                        class="flex-1 bg-gray-200 rounded-full h-2 min-w-[100px]"
+                      >
+                        <div
+                          class="h-2 rounded-full bg-blue-600 transition-all duration-300"
+                          :style="{
+                            width: (Number(p.cumplimiento_total) || 0) + '%',
+                          }"
+                        ></div>
+                      </div>
+                      <span
+                        class="text-sm font-medium text-gray-900 min-w-[60px] text-right"
+                        >{{
+                          (Number(p.cumplimiento_total) || 0).toFixed(1)
+                        }}%</span
+                      >
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Estimaciones Tab -->
+        <div v-show="activeTab === 'estimaciones'" class="tab-content">
+          <div
+            class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50 border-b border-gray-200"
+          >
+            <h3 class="text-lg font-medium text-gray-900">
+              Gestión de Estimaciones
+            </h3>
+            <p class="text-sm text-gray-600 mt-1">
+              Estimaciones detalladas por proyecto, concepto y partida
+            </p>
+          </div>
+
+          <div v-if="estimacionesError" class="text-center py-12">
+            <svg
+              class="mx-auto h-12 w-12 text-red-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">
+              Error al cargar estimaciones
+            </h3>
+            <p class="mt-1 text-sm text-gray-500">
+              {{ estimacionesErrorMessage }}
+            </p>
+            <button
+              @click="loadDashboardData"
+              class="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors"
+            >
+              Reintentar
+            </button>
+          </div>
+
+          <div
+            v-else-if="!estimacionesGroupedKeys.length"
+            class="text-center py-12"
+          >
+            <svg
+              class="mx-auto h-12 w-12 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+              />
+            </svg>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">
+              No hay estimaciones
+            </h3>
+            <p class="mt-1 text-sm text-gray-500">
+              Comenzar agregando una nueva estimación.
+            </p>
+          </div>
+
+          <div v-else class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-16"
+                  ></th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    Proyecto / Estimación
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32"
+                  >
+                    Estimación
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48"
+                  >
+                    Período
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-40"
+                  >
+                    Monto
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="bg-white">
+                <template
+                  v-for="proyectoId in estimacionesGroupedKeys"
+                  :key="proyectoId"
+                >
+                  <tr
+                    class="proyecto-row border-b-2 border-gray-100 hover:bg-blue-50 cursor-pointer"
+                    @click="toggleProyecto(proyectoId)"
+                  >
+                    <td class="px-6 py-4 text-center">
+                      <svg
+                        :class="{
+                          'transform rotate-180': expandedProjects.has(
+                            String(proyectoId)
+                          ),
+                        }"
+                        class="w-4 h-4 text-gray-400 transition-transform duration-200"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M19 9l-7 7-7-7"
+                        ></path>
+                      </svg>
+                    </td>
+                    <td class="px-6 py-4">
+                      <div class="font-bold text-gray-900">
+                        {{
+                          estimacionesGrouped[proyectoId].proyecto
+                            .num_proyecto || "--"
+                        }}
+                      </div>
+                      <div class="text-sm text-gray-600 mt-1 leading-tight">
+                        {{
+                          estimacionesGrouped[proyectoId].proyecto.proyecto ||
+                          "--"
+                        }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-4 text-center">
+                      <div class="text-sm font-medium text-gray-700">
+                        {{
+                          estimacionesGrouped[proyectoId].estimaciones.length
+                        }}
+                        Estimación{{
+                          estimacionesGrouped[proyectoId].estimaciones.length >
+                          1
+                            ? "es"
+                            : ""
+                        }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-4"></td>
+                    <td class="px-6 py-4"></td>
+                  </tr>
+
+                  <tr
+                    v-for="(est, idx) in estimacionesGrouped[proyectoId]
+                      .estimaciones"
+                    :key="`${proyectoId}-${idx}`"
+                    v-show="expandedProjects.has(String(proyectoId))"
+                    class="estimacion-row hover:bg-gray-50 border-b border-gray-100"
+                  >
+                    <td class="px-6 py-3"></td>
+                    <td class="px-6 py-3 pl-12">
+                      <div class="text-sm text-gray-700">{{ idx + 1 }}</div>
+                      <div class="text-xs text-gray-500">
+                        {{ formatDate(est.created_at) }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-3 text-center">
+                      <div class="text-sm font-medium">{{ idx + 1 }}</div>
+                    </td>
+                    <td class="px-6 py-3">
+                      <div class="text-sm font-medium text-gray-900">
+                        {{ (est.periodo_estimacion || "--").toUpperCase() }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-3">
+                      <div class="text-sm font-semibold text-gray-900">
+                        {{ formatMoney(est.monto_estimacion) }}
+                      </div>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="bg-white shadow rounded-lg p-6">
+          <h3 class="font-semibold text-lg">Sin avances</h3>
+          <p class="mt-2 text-gray-600">
+            Total:
+            <span class="font-bold text-red-600">{{
+              counters.sin_avances.count
+            }}</span>
+          </p>
+        </div>
+        <div class="bg-white shadow rounded-lg p-6">
+          <h3 class="font-semibold text-lg">Finalizadas</h3>
+          <p class="mt-2 text-gray-600">
+            Total:
+            <span class="font-bold text-red-600">{{
+              counters.finalizadas.count
+            }}</span>
+          </p>
+        </div>
+        <div class="bg-white shadow rounded-lg p-6">
+          <h3 class="font-semibold text-lg">Obras abiertas</h3>
+          <p class="mt-2 text-gray-600">
+            Total:
+            <span class="font-bold text-red-600">{{
+              counters.abiertas.count
+            }}</span>
+          </p>
+        </div>
+      </div>
+      <div class="mb-8">
+        <ObrasMap :counters="counters" />
+      </div>
+
+      <div class="mt-8 bg-white rounded-lg shadow-lg overflow-hidden">
+        <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">
+          <h3 class="text-lg font-medium text-gray-900">Supervisores y sus Últimas Acciones - Últimos 30 Días</h3>
+          <p class="text-sm text-gray-600 mt-1">Registro de actividad de supervisores en proyectos</p>
+        </div>
+
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Supervisor
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Tipo Acción
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Detalle Acción
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Fecha
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Proyecto
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr v-for="supervisor in users" :key="supervisor.id" class="hover:bg-gray-50 transition-colors">
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="flex-shrink-0 h-10 w-10">
+                      <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
+                        <span class="text-sm font-medium text-gray-700">
+                          {{ supervisor.nombre.split(' ').map(n => n.charAt(0)).join('').substring(0, 2).toUpperCase() }}
+                        </span>
+                      </div>
+                    </div>
+                    <div class="ml-4">
+                      <div class="text-sm font-medium text-gray-900">{{ supervisor.nombre }}</div>
+                      <div class="text-sm text-gray-500">{{ supervisor.correo }}</div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-4">
+                  <div class="text-sm text-gray-900">{{ supervisor.ultima_accion }}</div>
+                  <div v-if="supervisor.ultima_accion" class="text-xs text-gray-500 mt-1 max-w-xs truncate" :title="supervisor.ultima_accion">
+                    {{ supervisor.ultima_accion }}
+                  </div>
+                </td>
+                <td class="px-6 py-4">
+                  <div class="text-sm text-gray-900">{{ supervisor.detalle_accion }}</div>
+                  <div v-if="supervisor.detalle_accion" class="text-xs text-gray-500 mt-1 max-w-xs truncate" :title="supervisor.detalle_accion">
+                    {{ supervisor.detalle_accion }}
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  {{ supervisor.fecha_accion ? formatDateTime(supervisor.fecha_accion) : '--' }}
+                </td>
+                <td class="px-6 py-4">
+                  <div v-if="supervisor.proyecto_info" class="text-sm text-gray-900 max-w-xs truncate" :title="supervisor.proyecto_info">
+                    {{ supervisor.proyecto_info }}
+                  </div>
+                  <div v-else class="text-sm text-gray-500">--</div>
+                </td>
+              </tr>
+
+              <!-- Empty state -->
+              <tr v-if="!users.length">
+                <td colspan="5" class="px-6 py-8 text-center">
+                  <div class="text-gray-500">No hay supervisores registrados</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/routes/api.php b/routes/api.php
index 4851d4c..5472386 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -20,7 +20,7 @@
     return $request->user();
 });
 
-Route::middleware(['throttle:60,1'])->get('/reporte-especial', [TramiteController::class, 'tramiteEspecial']);
-
-Route::middleware(['throttle:60,1'])->get('/reporte-obras', [ObrasController::class, 'Obras']);
-
+Route::middleware('api')->group(function () {
+    Route::get('/reporte-obras', [ObrasController::class, 'Obras'])->middleware(['throttle:60,1']);
+    Route::get('/reporte-especial', [TramiteController::class, 'tramiteEspecial'])->middleware(['throttle:60,1']);
+});
-- 
2.45.2


From f1a276cf01827776de4c7a58727c9d0b3cd0c551 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Mon, 18 Aug 2025 09:51:44 -0600
Subject: [PATCH 04/18] =?UTF-8?q?Correci=C3=B3n=20de=20la=20tabla=20Ultima?=
 =?UTF-8?q?s=20acciones?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/Pages/Dashboard/Obras.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/resources/js/Pages/Dashboard/Obras.vue b/resources/js/Pages/Dashboard/Obras.vue
index 287758b..8ae3c40 100644
--- a/resources/js/Pages/Dashboard/Obras.vue
+++ b/resources/js/Pages/Dashboard/Obras.vue
@@ -70,7 +70,6 @@ const loadDashboardData = async () => {
     });
 
     const data = res.data;
-    console.log("Dashboard data:", data);
     if (!data || !data.success) {
       planeacionesError.value = estimacionesError.value = true;
       const msg = data?.error || "Error desconocido";
@@ -162,7 +161,7 @@ const loadDashboardData = async () => {
           : [];
       }
 
-      // Agregar contadores finalizadas (opcional, para uso futuro)
+      // Agregar contadores finalizadas
       if (data.counters.finalizadas) {
         counters.finalizadas = {
           count: data.counters.finalizadas.count || 0,
@@ -177,7 +176,7 @@ const loadDashboardData = async () => {
         };
       }
 
-      // Agregar contadores abiertas (opcional, para uso futuro)
+      // Agregar contadores abiertas
       if (data.counters.abiertas) {
         counters.abiertas = {
           count: data.counters.abiertas.count || 0,
@@ -199,8 +198,7 @@ const loadDashboardData = async () => {
           id: user.supervisor_id ?? null,
           nombre: user.supervisor_nombre ?? "Sin nombre",
           correo: user.supervisor_correo ?? "Sin correo",
-          ultima_accion:
-            user.supervisor_ultima_accion ?? " ",
+          ultima_accion: user.supervisor_ultima_accion ?? "Sin acción reciente",
           fecha_accion: user.fecha_accion ?? null,
           detalle_accion: user.detalle_accion ?? null,
           proyecto_info: user.proyecto_info ?? null,
@@ -1245,7 +1243,6 @@ onMounted(() => {
                   </div>
                 </td>
                 <td class="px-6 py-4">
-                  <div class="text-sm text-gray-900">{{ supervisor.ultima_accion }}</div>
                   <div v-if="supervisor.ultima_accion" class="text-xs text-gray-500 mt-1 max-w-xs truncate" :title="supervisor.ultima_accion">
                     {{ supervisor.ultima_accion }}
                   </div>
-- 
2.45.2


From 52e8dc8153ace45b3b2d0e1be515ac4f6bdb0b9d Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Mon, 18 Aug 2025 12:27:23 -0600
Subject: [PATCH 05/18] =?UTF-8?q?Se=20agreg=C3=B3=20la=20vista=20de=20acce?=
 =?UTF-8?q?sos=20rapidos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 database/seeders/UserSeeder.php           |  28 ++--
 resources/js/Pages/Auth/Login.vue         |  16 +-
 resources/js/Pages/Dashboard/Index.vue    | 169 +++++++++++++++++++++-
 resources/js/Pages/Dashboard/Tramites.vue |  46 +++++-
 tailwind.config.js                        |   2 +-
 5 files changed, 221 insertions(+), 40 deletions(-)

diff --git a/database/seeders/UserSeeder.php b/database/seeders/UserSeeder.php
index bfd99be..2e86407 100644
--- a/database/seeders/UserSeeder.php
+++ b/database/seeders/UserSeeder.php
@@ -10,15 +10,15 @@
 
 /**
  * Siembra usuarios de forma segura
- * 
+ *
  * Siembra usuarios sin la necesidad de escribir una contraseña que quede registrada en el código.
  * El usuario será generado con una contraseña que puede ser consultado en el log. Esto permite
  * evitar el escribir las contraseñas en código. Esto permite que los usuarios de prueba sean seguros
  * y de proyecto en proyecto no sea una brecha de seguridad tener contraseñas dentro del código en caso
  * de que este pueda llegar a ser vulnerado.
- * 
+ *
  * @author Moisés de Jesús Cortés Castellanos <ing.moisesdejesuscortesc@notsoweb.com>
- * 
+ *
  * @version 1.0.0
  */
 class UserSeeder extends Seeder
@@ -35,36 +35,28 @@ public function run()
             [
                 $developerEmail,
                 $developerPass
-            ] =  UserSecureSupport::new('developer@notsoweb.com');
-    
+            ] =  UserSecureSupport::new('developer@golsystems.com');
+
             User::create([
                 'name' => 'Developer',
-                'paternal' => 'Notsoweb',
+                'paternal' => 'golsystems',
                 'email' => $developerEmail,
                 'phone' => '5631809090',
                 'password' => $developerPass,
             ])->assignRole('developer');
-            
+
             // Usuario administrador
             [
                 $adminEmail,
                 $adminPass
-            ] = UserSecureSupport::new('admin@notsoweb.com');
-    
+            ] = UserSecureSupport::new('admin@comalcalco.com');
+
             User::create([
                 'name' => 'Administrador',
-                'paternal' => 'Notsoweb',
+                'paternal' => 'comalcalco',
                 'email' => $adminEmail,
                 'password' => $adminPass
             ])->assignRole('admin');
-    
-            // Usuario de prueba
-            User::create([
-                'name' => 'Demo',
-                'paternal' => 'Notsoweb',
-                'email' => 'demo@notsoweb.com',
-                'password' => Hash::make('Demo')
-            ]);
         });
     }
 }
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 36ce378..1c507d9 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -63,7 +63,7 @@ const submit = () => {
             />
             <div class="block mt-4">
                 <label class="flex items-center">
-                    <Checkbox 
+                    <Checkbox
                         name="remember"
                         v-model:checked="form.remember"
                     />
@@ -76,24 +76,24 @@ const submit = () => {
             <div class="flex flex-col items-center justify-end space-y-2 mt-4">
                 <PrimaryButton
                     class="w-full"
-                    :class="{ 'opacity-25': form.processing }" 
+                    :class="{ 'opacity-25': form.processing }"
                     :disabled="form.processing"
                     v-text="$t('auth.login')"
                 />
-                <Link
+                <!-- <Link
                     class="w-full"
-                    :href="route('register')" 
+                    :href="route('register')"
                 >
                     <PrimaryButton
                         class="w-full"
-                        :class="{ 'opacity-25': form.processing }" 
+                        :class="{ 'opacity-25': form.processing }"
                         :disabled="form.processing"
                         v-text="$t('register.signUp')"
                     />
-                </Link>
+                </Link>-->
                 <Link v-if="canResetPassword"
-                    class="underline text-sm" 
-                    :href="route('password.request')" 
+                    class="underline text-sm"
+                    :href="route('password.request')"
                 >
                     {{ $t('auth.forgotPassword.ask') }}
                 </Link>
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index b92c07d..459fbfc 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -1,12 +1,169 @@
 <script setup>
-import Welcome from '@/Components/Dashboard/Welcome.vue';
-import Layout  from '@/Layouts/DashboardLayout.vue';
+import { router } from '@inertiajs/vue3';
+
+import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
+import NotificationController from '@/Controllers/NotificationController';
+
+const notificationCtl = NotificationController;
+
+const logout = () => {
+  router.post(route('logout'), {}, {
+    onBefore: () => {
+      notificationCtl.stop();
+    }
+  });
+};
 </script>
 
 <template>
-    <Layout title="Dashboard">
-        <div class="py-4">
-            <Welcome />
+  <div
+    class="min-h-screen font-sans bg-gradient-to-br from-[#621132] via-[#621132] to-[#621132] text-[#621132] antialiased"
+  >
+    <div class="flex items-center justify-end p-5 text-white">
+      <div class="border p-1 rounded">
+          <button type="button" @click.prevent="logout">
+            {{ $t("auth.logout") }}
+          </button>
+      </div>
+    </div>
+    <main class="grid min-h-screen place-items-center p-4">
+      <!-- Tarjeta -->
+      <section
+        class="w-full max-w-2xl rounded-3xl border border-white/10 bg-white/5 p-6 sm:p-8 shadow-2xl backdrop-blur supports-[backdrop-filter]:bg-white/10"
+      >
+        <!-- Encabezado -->
+        <header class="mb-6 sm:mb-8">
+          <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-white">
+            Accesos rápidos
+          </h1>
+          <p class="mt-2 text-sm sm:text-base text-white">
+            Selecciona un destino.
+          </p>
+        </header>
+
+        <!-- Grid de botones -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
+          <!-- Botón 1 -->
+          <a
+            :href="route('dashboard.api-tramite')"
+            target="_blank"
+            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 active:scale-[0.99]"
+            aria-label="Ir al sitio 1"
+          >
+            <div class="flex items-center gap-3">
+              <!-- Ícono externo simple -->
+              <span class="rounded-xl bg-white/10 p-2">
+                <GoogleIcon name="open_in_new" class="text-white" />
+              </span>
+              <div class="min-w-0">
+                <h2 class="font-semibold text-white">
+                  Reporte Especial de Trámites
+                </h2>
+                <p class="text-sm text-slate-300">
+                  Resumen de trámites por unidad administrativa
+                </p>
+              </div>
+            </div>
+            <!-- Efecto -->
+            <span
+              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+              style="
+                background: radial-gradient(
+                  600px circle at var(--x, 50%) var(--y, 50%),
+                  rgba(199, 12, 12, 0.12),
+                  transparent 40%
+                );
+              "
+            ></span>
+          </a>
+
+          <!-- Botón 2 -->
+          <a
+            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=1&period=week&type=almacen"
+            target="_blank"
+            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 active:scale-[0.99]"
+            aria-label="Ir al sitio 2"
+          >
+            <div class="flex items-center gap-3">
+              <span class="rounded-xl bg-white/10 p-2">
+                <GoogleIcon name="open_in_new" class="text-white" />
+              </span>
+              <div class="min-w-0">
+                <h2 class="font-semibold text-white">Apoyo a Beneficiarios</h2>
+                <p class="text-sm text-slate-300">
+                  Dashboard de apoyo a Beneficiarios
+                </p>
+              </div>
+            </div>
+            <span
+              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+              style="
+                background: radial-gradient(
+                  600px circle at var(--x, 50%) var(--y, 50%),
+                  rgba(98, 17, 50, 0.12),
+                  transparent 40%
+                );
+              "
+            ></span>
+          </a>
+
+          <!-- Botón 3 -->
+          <a
+            :href="route('dashboard.api-obra')"
+            target="_blank"
+            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400 active:scale-[0.99]"
+            aria-label="Ir al sitio 3"
+          >
+            <div class="flex items-center gap-3">
+              <span class="rounded-xl bg-white/10 p-2">
+                <GoogleIcon name="open_in_new" class="text-white" />
+              </span>
+              <div class="min-w-0">
+                <h2 class="font-semibold text-white">Información de Obras</h2>
+                <p class="text-sm text-slate-300">Proyectos en seguimiento</p>
+              </div>
+            </div>
+            <span
+              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+              style="
+                background: radial-gradient(
+                  600px circle at var(--x, 50%) var(--y, 50%),
+                  rgba(255, 255, 255, 0.12),
+                  transparent 40%
+                );
+              "
+            ></span>
+          </a>
+
+          <!-- Botón 4 -->
+          <a
+            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=3&period=week&type=almacen"
+            target="_blank"
+            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 active:scale-[0.99]"
+            aria-label="Ir al sitio 4"
+          >
+            <div class="flex items-center gap-3">
+              <span class="rounded-xl bg-white/10 p-2">
+                <GoogleIcon name="open_in_new" class="text-white" />
+              </span>
+              <div class="min-w-0">
+                <h2 class="font-semibold text-white">DIF</h2>
+                <p class="text-sm text-slate-300">Dashboard de DIF</p>
+              </div>
+            </div>
+            <span
+              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+              style="
+                background: radial-gradient(
+                  600px circle at var(--x, 50%) var(--y, 50%),
+                  rgba(255, 255, 255, 0.12),
+                  transparent 40%
+                );
+              "
+            ></span>
+          </a>
         </div>
-    </Layout>
+      </section>
+    </main>
+  </div>
 </template>
diff --git a/resources/js/Pages/Dashboard/Tramites.vue b/resources/js/Pages/Dashboard/Tramites.vue
index fa27f74..4770190 100644
--- a/resources/js/Pages/Dashboard/Tramites.vue
+++ b/resources/js/Pages/Dashboard/Tramites.vue
@@ -25,7 +25,7 @@ const pieChartData = ref({ labels: [], datasets: [] });
 // opciones reutilizables
 const barChartOptions = {
   responsive: true,
-  makeDataset : (label, values) => ({
+  makeDataset: (label, values) => ({
     label,
     data: values,
     backgroundColor: "rgba(75,192,192,0.2)",
@@ -69,7 +69,9 @@ let debounceId = null;
 const fetchReport = async ({ start, end }) => {
   // cancelar petición previa
   if (cancelTokenSource) {
-    try { cancelTokenSource.cancel('cancel'); } catch (e) {}
+    try {
+      cancelTokenSource.cancel("cancel");
+    } catch (e) {}
   }
   cancelTokenSource = axios.CancelToken.source();
 
@@ -77,10 +79,10 @@ const fetchReport = async ({ start, end }) => {
   if (start) params.start = start;
   if (end) params.end = end;
 
-  const res = await axios.get('/api/reporte-especial', {
+  const res = await axios.get("/api/reporte-especial", {
     params,
     cancelToken: cancelTokenSource.token,
-    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+    headers: { "X-Requested-With": "XMLHttpRequest" },
   });
 
   // axios lanza en error si status >= 400, aquí devolvemos data directamente
@@ -174,8 +176,38 @@ const togglePie = () => (showPie.value = !showPie.value);
 
 <template>
   <div>
-    <div v-if="loading">Cargando...</div>
-    <div v-else-if="error">Error: {{ error }}</div>
+    <header>
+      <div class="bg-gray-100 py-2">
+        <div class="text-left container mx-auto sm:px-6 lg:px-8">
+          <span class="text-sm text-gray-700 font-bold">COMALCALCO.GOB.MX</span>
+        </div>
+      </div>
+
+      <div style="background-color: #621132" class="shadow-lg">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center h-28">
+            <img
+              src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+              alt="Logo Comalcalco"
+              class="h-24 w-auto object-contain"
+            />
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Loading Overlay -->
+    <div
+      v-if="loading"
+      class="fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50"
+    >
+      <div class="text-center">
+        <div
+          class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"
+        ></div>
+        <p class="mt-4 text-gray-600">Cargando datos...</p>
+      </div>
+    </div>
     <div v-else>
       <div class="min-h-screen bg-gray-50 py-8">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -474,7 +506,7 @@ const togglePie = () => (showPie.value = !showPie.value);
             class="max-w-7xl mx-auto mt-12 px-4 sm:px-6 lg:px-8 mb-8 bg-white rounded-lg shadow p-6"
           >
             <!-- DateRange mejorado -->
-            <DateRange v-model="dateRange" :presets="true" class="mb-12"/>
+            <DateRange v-model="dateRange" :presets="true" class="mb-12" />
             <Bars :chartData="barChartData" :chartOptions="barChartOptions" />
             <p class="text-sm text-gray-500 mt-2">Modo actual: {{ mode }}</p>
           </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index aa7b36d..19f562c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,7 +16,7 @@ module.exports = {
     theme: {
         extend: {
             fontFamily: {
-                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
+                sans: ['Inter', 'ui-sans-serif', 'system-ui', 'Segoe UI', 'Roboto'],
                 'google-icon':['Material Icons'],
                 'google-icon-outlined':['Material Symbols Outlined']
             },
-- 
2.45.2


From 84cc2083a553e767d4a1524a995b5e459f094b6d Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Tue, 19 Aug 2025 08:52:58 -0600
Subject: [PATCH 06/18] Cambios

---
 resources/js/Components/Dashboard/Maps.vue    |   2 +-
 resources/js/Pages/Auth/Login.vue             |   4 +-
 .../js/Pages/Dashboard/AtencionCiudadana.vue  | 278 ++++++++++++++++++
 resources/js/Pages/Dashboard/Index.vue        |  30 +-
 resources/js/Pages/Dashboard/Obras.vue        |   1 -
 resources/js/Pages/Dashboard/Tramites.vue     |   4 +-
 routes/web.php                                |   1 +
 7 files changed, 301 insertions(+), 19 deletions(-)
 create mode 100644 resources/js/Pages/Dashboard/AtencionCiudadana.vue

diff --git a/resources/js/Components/Dashboard/Maps.vue b/resources/js/Components/Dashboard/Maps.vue
index 022a954..39b88c6 100644
--- a/resources/js/Components/Dashboard/Maps.vue
+++ b/resources/js/Components/Dashboard/Maps.vue
@@ -144,7 +144,7 @@ const COMALCALCO_CENTER = {
 
 // Límites aproximados de Comalcalco
 const COMALCALCO_BOUNDS = {
-  north: 18.35,
+  north: 19.35,
   south: 18.18,
   east: -93.10,
   west: -93.30
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 1c507d9..0b82c48 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -35,7 +35,7 @@ const submit = () => {
     <AuthenticationCard>
         <template #logo>
             <AppLogo
-                class="text-2xl"
+                class="text-2xl text-[#621132]"
             />
         </template>
 
@@ -75,7 +75,7 @@ const submit = () => {
             </div>
             <div class="flex flex-col items-center justify-end space-y-2 mt-4">
                 <PrimaryButton
-                    class="w-full"
+                    class="w-full bg-[#621132]"
                     :class="{ 'opacity-25': form.processing }"
                     :disabled="form.processing"
                     v-text="$t('auth.login')"
diff --git a/resources/js/Pages/Dashboard/AtencionCiudadana.vue b/resources/js/Pages/Dashboard/AtencionCiudadana.vue
new file mode 100644
index 0000000..36f021e
--- /dev/null
+++ b/resources/js/Pages/Dashboard/AtencionCiudadana.vue
@@ -0,0 +1,278 @@
+<script setup>
+import { ref, watch, onMounted, computed } from "vue";
+import axios from "axios";
+import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
+import Bars from "@/Components/Dashboard/Charts/Bars.vue";
+import { data } from "autoprefixer";
+
+const dateRange = ref({
+  start: new Date().toISOString().slice(0, 10),
+  end: new Date().toISOString().slice(0, 10),
+});
+
+const loading = ref(false);
+const error = ref(null);
+const raw = ref([]);
+
+// Toggle para usar datos falsos
+const USE_MOCK = ref(false);
+
+// Tipos de apoyo (inventados)
+const supportTypes = [
+  "Despensas",
+  "Despensas Funerarias",
+  "Laboratorio",
+  "Rayos X",
+  "USG",
+];
+
+// Distribución por defecto para mock (suman 1)
+const mockDistribution = [0.35, 0.08, 0.2, 0.22, 0.15];
+
+const buildMockCounts = (total) => {
+  const counts = supportTypes.map((_, i) =>
+    Math.round(total * (mockDistribution[i] || 0))
+  );
+  // Ajustar diferencia por redondeo
+  const diff = total - counts.reduce((s, v) => s + v, 0);
+  if (diff !== 0) counts[0] += diff;
+  return counts;
+};
+
+// helpers para sumar por rango
+const isoDate = (d) => new Date(d + "T00:00:00");
+const totalForRange = (startIso, endIso) => {
+  const s = isoDate(startIso);
+  const e = isoDate(endIso);
+  return raw.value.reduce((acc, r) => {
+    const rd = isoDate(r.date);
+    if (rd >= s && rd <= e) acc += Number(r.available || 0);
+    return acc;
+  }, 0);
+};
+
+const dayStart = (iso) => iso; // ya vienen en formato YYYY-MM-DD
+const weekStartFrom = (endIso) => {
+  const d = new Date(endIso + "T00:00:00");
+  d.setDate(d.getDate() - 6); // 7 días inclusive
+  return d.toISOString().slice(0, 10);
+};
+const monthRangeFrom = (endIso) => {
+  const d = new Date(endIso + "T00:00:00");
+  d.setDate(1);
+  return d.toISOString().slice(0, 10);
+};
+
+// Construye chartData ahora por tipos de apoyo
+const chartData = computed(() => {
+  const colors = ["#ef4444", "#3b82f6", "#f59e0b"];
+
+  if(USE_MOCK.value) {
+    const todayCounts = buildMockCounts(20);
+    const weekCounts = buildMockCounts(100);
+    const monthCounts = buildMockCounts(400);
+    return {
+      labels: supportTypes,
+      datasets: [
+        { label: "Hoy", data: todayCounts, backgroundColor: colors[0] },
+        { label: "Semana", data: weekCounts, backgroundColor: colors[1] },
+        { label: "Mes", data: monthCounts, backgroundColor: colors[2] },
+      ],
+    }
+  }
+  const end = dateRange.value.end;
+  const todayTotal = totalForRange(end, end);
+  const weekTotal = totalForRange(end, weekStartFrom(end));
+  const monthTotal = totalForRange(end, monthRangeFrom(end));
+
+  const todayCounts = buildMockCounts(todayTotal || 0);
+  const weekCounts = buildMockCounts(weekTotal || 0);
+  const monthCounts = buildMockCounts(monthTotal || 0);
+
+  return {
+    labels: supportTypes,
+    datasets: [
+      { label: "Hoy", data: todayCounts, backgroundColor: colors[0] },
+      { label: "Semana", data: weekCounts, backgroundColor: colors[1] },
+      { label: "Mes", data: monthCounts, backgroundColor: colors[2] },
+    ],
+  }
+});
+
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    x: { stacked: false },
+    y: { beginAtZero: true },
+  },
+};
+
+const buildEmptyRange = (start, end) => {
+  const s = new Date(start);
+  const e = new Date(end);
+  const list = [];
+  for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
+    list.push({
+      date: new Date(d).toISOString().slice(0, 10),
+      available: 0,
+      unavailable: 0,
+    });
+  }
+  return list;
+};
+
+const mapApiToSeries = (items, start, end) => {
+  const base = buildEmptyRange(start, end);
+  const byDate = {};
+  (items || []).forEach((it) => {
+    const key = (it.date || it.fecha || it.day || "").slice(0, 10);
+    if (key)
+      byDate[key] = {
+        date: key,
+        available: Number(
+          it.available ?? it.disponibles ?? it.available_count ?? 0
+        ),
+      };
+  });
+  return base.map((b) => byDate[b.date] || b);
+};
+
+const loadData = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const res = await axios.get("/api/atencion-ciudadana", {
+      params: {
+        start: dateRange.value.start,
+        end: dateRange.value.end,
+      },
+      headers: { "X-Requested-With": "XMLHttpRequest" },
+    });
+    const payload = res.data;
+    const items = payload?.data ?? payload?.items ?? payload ?? [];
+    raw.value = mapApiToSeries(
+      Array.isArray(items) ? items : [],
+      dateRange.value.start,
+      dateRange.value.end
+    );
+  } catch (e) {
+    console.error(e);
+    error.value =
+      e.response?.data?.message || e.message || "Error al cargar datos";
+    raw.value = mapApiToSeries([], dateRange.value.start, dateRange.value.end);
+  } finally {
+    loading.value = false;
+  }
+};
+
+watch(dateRange, loadData, { deep: true });
+onMounted(loadData);
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50">
+    <header>
+      <div class="bg-gray-100 py-2">
+        <div class="text-left container mx-auto sm:px-6 lg:px-8">
+          <span class="text-sm text-gray-700 font-bold">COMALCALCO.GOB.MX</span>
+        </div>
+      </div>
+
+      <div style="background-color: #621132" class="shadow-lg">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center h-28">
+            <img
+              src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+              alt="Logo Comalcalco"
+              class="h-24 w-auto object-contain"
+            />
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
+      <div class="bg-white rounded-lg shadow p-6">
+        <h1 class="text-xl font-semibold mb-4">Atención Ciudadana</h1>
+
+        <div class="mb-4">
+          <DateRange v-model="dateRange" :presets="true" />
+          <!-- Toggle para usar datos falsos -->
+          <label class="inline-flex items-center text-sm text-gray-600 ml-4">
+            <input type="checkbox" v-model="USE_MOCK" class="mr-2 rounded border-gray-300" />
+            Usar datos falsos
+          </label>
+        </div>
+
+        <div class="mb-4 flex items-center gap-4">
+          <div v-if="loading" class="ml-auto text-sm text-gray-500">
+            Cargando...
+          </div>
+          <div v-if="error" class="ml-auto text-sm text-red-600">
+            {{ error }}
+          </div>
+        </div>
+
+        <div class="h-64">
+          <Bars :chartData="chartData" :chartOptions="chartOptions" />
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <div class="min-h-screen bg-gray-50">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div
+              class="bg-gradient-to-r from-green-600 to-emerald-700 rounded-lg shadow-lg p-6 text-white"
+            >
+              <div class="flex items-center justify-between">
+                <div>
+                  <h2 class="text-lg font-medium opacity-90">Apoyos Mes</h2>
+                  <span >Entregados en el mes</span>
+                </div>
+                <div
+                  class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
+                >
+                  <span class="text-2xl font-bold text-green-600">20</span>
+                </div>
+              </div>
+            </div>
+            <div
+              class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg p-6 text-white"
+            >
+              <div class="flex items-center justify-between">
+                <div>
+                  <h2 class="text-lg font-medium opacity-90">Apoyos Semana</h2>
+                  <span class="text-sm">Entregados en la semana</span>
+                </div>
+                <div
+                  class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
+                >
+                  <span class="text-2xl font-bold text-blue-600">20</span>
+                </div>
+              </div>
+            </div>
+            <div
+              class="bg-gradient-to-r from-yellow-600 to-amber-700 rounded-lg shadow-lg p-6 text-white"
+            >
+              <div class="flex items-center justify-between">
+                <div>
+                  <h2 class="text-lg font-medium opacity-90">Apoyos Hoy</h2>
+                  <span class="text-sm">Entregados hoy</span>
+                </div>
+                <div
+                  class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
+                >
+                  <span class="text-2xl font-bold text-amber-600">20</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index 459fbfc..9f348df 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -1,17 +1,21 @@
 <script setup>
-import { router } from '@inertiajs/vue3';
+import { router } from "@inertiajs/vue3";
 
 import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
-import NotificationController from '@/Controllers/NotificationController';
+import NotificationController from "@/Controllers/NotificationController";
 
 const notificationCtl = NotificationController;
 
 const logout = () => {
-  router.post(route('logout'), {}, {
-    onBefore: () => {
-      notificationCtl.stop();
+  router.post(
+    route("logout"),
+    {},
+    {
+      onBefore: () => {
+        notificationCtl.stop();
+      },
     }
-  });
+  );
 };
 </script>
 
@@ -19,13 +23,13 @@ const logout = () => {
   <div
     class="min-h-screen font-sans bg-gradient-to-br from-[#621132] via-[#621132] to-[#621132] text-[#621132] antialiased"
   >
-    <div class="flex items-center justify-end p-5 text-white">
-      <div class="border p-1 rounded">
-          <button type="button" @click.prevent="logout">
-            {{ $t("auth.logout") }}
-          </button>
-      </div>
-    </div>
+    <button
+      class="fixed top-4 right-4 z-50 inline-flex items-center bg-white/10 text-white rounded-lg hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30 transition p-2"
+      type="button"
+      @click.prevent="logout"
+    >
+      {{ $t("auth.logout") }}
+    </button>
     <main class="grid min-h-screen place-items-center p-4">
       <!-- Tarjeta -->
       <section
diff --git a/resources/js/Pages/Dashboard/Obras.vue b/resources/js/Pages/Dashboard/Obras.vue
index 8ae3c40..c81bd37 100644
--- a/resources/js/Pages/Dashboard/Obras.vue
+++ b/resources/js/Pages/Dashboard/Obras.vue
@@ -218,7 +218,6 @@ const loadDashboardData = async () => {
     }
   } catch (err) {
     console.error(err);
-    // si la petición fue cancelada no sobreescribimos el error de UI
     if (axios.isCancel && axios.isCancel(err)) return;
     planeacionesError.value = estimacionesError.value = true;
     planeacionesErrorMessage.value = estimacionesErrorMessage.value =
diff --git a/resources/js/Pages/Dashboard/Tramites.vue b/resources/js/Pages/Dashboard/Tramites.vue
index 4770190..cc8394c 100644
--- a/resources/js/Pages/Dashboard/Tramites.vue
+++ b/resources/js/Pages/Dashboard/Tramites.vue
@@ -221,7 +221,7 @@ const togglePie = () => (showPie.value = !showPie.value);
                 <p class="text-gray-600">Resumen por unidad administrativa</p>
               </div>
 
-              <div class="ml-auto flex items-center gap-3">
+              <!-- <div class="ml-auto flex items-center gap-3">
                 <button
                   @click="toggleBars"
                   class="bg-primary text-white px-4 py-2 rounded"
@@ -234,7 +234,7 @@ const togglePie = () => (showPie.value = !showPie.value);
                 >
                   Más recaudados
                 </button>
-              </div>
+              </div> -->
             </div>
           </div>
 
diff --git a/routes/web.php b/routes/web.php
index b8e80e4..1d7370a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -32,6 +32,7 @@
 
   Route::inertia('/api-tramite', 'Dashboard/Tramites')->name('api-tramite');
   Route::inertia('/api-obra', 'Dashboard/Obras')->name('api-obra');
+  Route::inertia('/api-atencion', 'Dashboard/AtencionCiudadana')->name('api-atencion');
 
   # Log de Acciones
   Route::resource('histories', HistoryLogController::class)->only([
-- 
2.45.2


From 6917e031ef782de845bcdcd022b63f758c6b9488 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Tue, 19 Aug 2025 09:02:24 -0600
Subject: [PATCH 07/18] =?UTF-8?q?Se=20quit=C3=B3=20el=20modo=20oscuro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/app.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index 4670131..a972537 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -22,9 +22,7 @@ window.Notify = new Notify();
 window.sessionFresh = new SessionFresh();
 window.Swal = Swal;
 window.TwScreen = new TailwindScreen();
-window.darkMode = darkMode;
 
-bootTheme();
 bootSidebar();
 
 createInertiaApp({
@@ -34,8 +32,8 @@ createInertiaApp({
     title: (title) => `${title} - ${appName}`,
     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
-        return createApp({ 
-                render: () => h(App, props) 
+        return createApp({
+                render: () => h(App, props)
             })
             .use(plugin)
             .use(ZiggyVue, Ziggy)
-- 
2.45.2


From d95cc85b53b4b624e35785b4ee531787e9967a0c Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Wed, 20 Aug 2025 09:49:15 -0600
Subject: [PATCH 08/18] =?UTF-8?q?Se=20agregaron=20las=20gr=C3=A1ficas=20de?=
 =?UTF-8?q?=20Beneficiarios=20y=20DIF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dashboard/AtencionController.php          |  65 +++
 .../js/Pages/Dashboard/AtencionCiudadana.vue  | 550 +++++++++++-------
 resources/js/Pages/Dashboard/Index.vue        |  12 +-
 resources/js/Pages/Dashboard/Obras.vue        | 167 ++++--
 resources/js/Pages/Dashboard/Tramites.vue     |  76 ++-
 routes/api.php                                |   2 +
 6 files changed, 602 insertions(+), 270 deletions(-)
 create mode 100644 app/Http/Controllers/Dashboard/AtencionController.php

diff --git a/app/Http/Controllers/Dashboard/AtencionController.php b/app/Http/Controllers/Dashboard/AtencionController.php
new file mode 100644
index 0000000..090b263
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/AtencionController.php
@@ -0,0 +1,65 @@
+<?php namespace App\Http\Controllers\Dashboard;
+
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller as BaseController;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
+class AtencionController extends BaseController
+{
+    public function Atencion(Request $request)
+    {
+        $query = $request->only(['start', 'end', 'type', 'action']);
+        $input = array_merge(['action' => 'index', 'type' => 'api'], $query);
+
+        $startDate = $input['start'] ?? date('Y-01-01');
+        $endDate = $input['end'] ?? date('Y-12-31');
+
+        $baseParams = [
+            'start_date' => $startDate,
+            'end_date' => $endDate,
+            'type' => $input['type'] ?? 'api',
+            'action' => $input['action'] ?? 'index',
+        ];
+
+        $baseUrl   = 'https://apoyos.comalcalco.gob.mx/beneficiaries/stats-by-date-range';
+        $countsUrl = 'https://apoyos.comalcalco.gob.mx/beneficiaries/counts-by-date';
+
+        try{
+          $response = Http::get($baseUrl, $baseParams);
+
+          if(!$response->successful()){
+            return response()->json(['error' => 'Error del servicio'], $response->status());
+          }
+
+          $mainData = $response->json();
+          $countsAc = [];
+          try{
+            $countsResp = Http::get($countsUrl, [
+              'start_date' => $startDate,
+              'end_date' => $endDate,
+            ]);
+
+            if($countsResp->successful()){
+              $countsAc = $countsResp->json();
+            } else {
+              Log::error('Error al obtener los conteos de atención', ['status' => $countsResp->status()]);
+            }
+          }catch (\Exception $e) {
+            Log::error('Error al obtener los conteos de atención', ['exception' => $e->getMessage()]);
+          }
+
+          $combinedData = array_merge(
+            is_array($mainData) ? $mainData : [],
+            [
+              'counts' => $countsAc,
+            ]
+          );
+          return response()->json($combinedData, 200)
+              ->header('Content-Type', 'application/json');
+        }catch (\Exception $e) {
+          Log::error('Error en la consulta de atención', ['exception' => $e->getMessage()]);
+          return response()->json(['error' => 'Error en la consulta de atención'], 500);
+        }
+    }
+}
diff --git a/resources/js/Pages/Dashboard/AtencionCiudadana.vue b/resources/js/Pages/Dashboard/AtencionCiudadana.vue
index 36f021e..67879d4 100644
--- a/resources/js/Pages/Dashboard/AtencionCiudadana.vue
+++ b/resources/js/Pages/Dashboard/AtencionCiudadana.vue
@@ -1,278 +1,406 @@
 <script setup>
-import { ref, watch, onMounted, computed } from "vue";
+import { ref, watch, onMounted } from "vue";
+
 import axios from "axios";
 import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
 import Bars from "@/Components/Dashboard/Charts/Bars.vue";
-import { data } from "autoprefixer";
+import Pie from "@/Components/Dashboard/Charts/Pie.vue";
+import Lines from "@/Components/Dashboard/Charts/Lines.vue";
 
-const dateRange = ref({
-  start: new Date().toISOString().slice(0, 10),
-  end: new Date().toISOString().slice(0, 10),
-});
+const fmtToday = () => new Date().toISOString().slice(0, 10);
+const today = fmtToday();
+
+const dateRange = ref({ start: today, end: today });
 
 const loading = ref(false);
 const error = ref(null);
-const raw = ref([]);
-
-// Toggle para usar datos falsos
-const USE_MOCK = ref(false);
-
-// Tipos de apoyo (inventados)
-const supportTypes = [
-  "Despensas",
-  "Despensas Funerarias",
-  "Laboratorio",
-  "Rayos X",
-  "USG",
-];
-
-// Distribución por defecto para mock (suman 1)
-const mockDistribution = [0.35, 0.08, 0.2, 0.22, 0.15];
-
-const buildMockCounts = (total) => {
-  const counts = supportTypes.map((_, i) =>
-    Math.round(total * (mockDistribution[i] || 0))
-  );
-  // Ajustar diferencia por redondeo
-  const diff = total - counts.reduce((s, v) => s + v, 0);
-  if (diff !== 0) counts[0] += diff;
-  return counts;
-};
-
-// helpers para sumar por rango
-const isoDate = (d) => new Date(d + "T00:00:00");
-const totalForRange = (startIso, endIso) => {
-  const s = isoDate(startIso);
-  const e = isoDate(endIso);
-  return raw.value.reduce((acc, r) => {
-    const rd = isoDate(r.date);
-    if (rd >= s && rd <= e) acc += Number(r.available || 0);
-    return acc;
-  }, 0);
-};
-
-const dayStart = (iso) => iso; // ya vienen en formato YYYY-MM-DD
-const weekStartFrom = (endIso) => {
-  const d = new Date(endIso + "T00:00:00");
-  d.setDate(d.getDate() - 6); // 7 días inclusive
-  return d.toISOString().slice(0, 10);
-};
-const monthRangeFrom = (endIso) => {
-  const d = new Date(endIso + "T00:00:00");
-  d.setDate(1);
-  return d.toISOString().slice(0, 10);
-};
-
-// Construye chartData ahora por tipos de apoyo
-const chartData = computed(() => {
-  const colors = ["#ef4444", "#3b82f6", "#f59e0b"];
-
-  if(USE_MOCK.value) {
-    const todayCounts = buildMockCounts(20);
-    const weekCounts = buildMockCounts(100);
-    const monthCounts = buildMockCounts(400);
-    return {
-      labels: supportTypes,
-      datasets: [
-        { label: "Hoy", data: todayCounts, backgroundColor: colors[0] },
-        { label: "Semana", data: weekCounts, backgroundColor: colors[1] },
-        { label: "Mes", data: monthCounts, backgroundColor: colors[2] },
-      ],
-    }
-  }
-  const end = dateRange.value.end;
-  const todayTotal = totalForRange(end, end);
-  const weekTotal = totalForRange(end, weekStartFrom(end));
-  const monthTotal = totalForRange(end, monthRangeFrom(end));
-
-  const todayCounts = buildMockCounts(todayTotal || 0);
-  const weekCounts = buildMockCounts(weekTotal || 0);
-  const monthCounts = buildMockCounts(monthTotal || 0);
-
-  return {
-    labels: supportTypes,
-    datasets: [
-      { label: "Hoy", data: todayCounts, backgroundColor: colors[0] },
-      { label: "Semana", data: weekCounts, backgroundColor: colors[1] },
-      { label: "Mes", data: monthCounts, backgroundColor: colors[2] },
-    ],
-  }
-});
+let debounceId = null;
+let cancelTokenSource = null;
 
+const totals = ref({ day: null, week: null, month: null });
 
+const tipoChart = ref({ labels: [], datasets: [] });
+const generoChart = ref({ labels: [], datasets: [] });
+const edadChart = ref({ labels: [], datasets: [] });
 const chartOptions = {
   responsive: true,
-  maintainAspectRatio: false,
   scales: {
-    x: { stacked: false },
+    x: { beginAtZero: true },
     y: { beginAtZero: true },
   },
 };
 
-const buildEmptyRange = (start, end) => {
-  const s = new Date(start);
-  const e = new Date(end);
-  const list = [];
-  for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
-    list.push({
-      date: new Date(d).toISOString().slice(0, 10),
-      available: 0,
-      unavailable: 0,
-    });
-  }
-  return list;
+const normalizeResponse = (res) => {
+  const main = res?.data ?? {};
+  const counts = res?.counts ?? res?.counts_ac ?? [];
+
+  const porTipo =
+    main?.por_tipo_apoyo ??
+    main?.data?.por_tipo_apoyo ??
+    counts?.data?.por_tipo_apoyo ??
+    counts?.por_tipo_apoyo ??
+    {};
+
+  const porGenero =
+    main?.por_genero ??
+    main?.data?.por_genero ??
+    counts?.data?.por_genero ??
+    {};
+  const porEdad =
+    main?.por_rango_edad ??
+    main?.data?.por_rango_edad ??
+    counts?.data?.por_rango_edad ??
+    {};
+  const totalsShape = counts?.data_ac ?? counts?.data ?? counts ?? {};
+  return {
+    porGenero,
+    porEdad,
+    porTipo,
+    totalsShape,
+  };
 };
 
-const mapApiToSeries = (items, start, end) => {
-  const base = buildEmptyRange(start, end);
-  const byDate = {};
-  (items || []).forEach((it) => {
-    const key = (it.date || it.fecha || it.day || "").slice(0, 10);
-    if (key)
-      byDate[key] = {
-        date: key,
-        available: Number(
-          it.available ?? it.disponibles ?? it.available_count ?? 0
-        ),
-      };
-  });
-  return base.map((b) => byDate[b.date] || b);
+const buildTipoChart = (porTipo) => {
+  const labels = Object.keys(porTipo || {});
+  const values = labels.map((k) => Number(porTipo[k] ?? 0));
+  tipoChart.value = {
+    labels,
+    datasets: [
+      {
+        label: "Apoyos entregados",
+        data: values,
+        backgroundColor: ["#3b82f6"],
+      },
+    ],
+  };
 };
 
-const loadData = async () => {
+const buildGeneroChart = (porGenero) => {
+  const map = {
+    hombres: porGenero?.hombres ?? porGenero?.Hombres ?? porGenero?.Hombre ?? 0,
+    mujeres: porGenero?.mujeres ?? porGenero?.Mujeres ?? porGenero?.Mujer ?? 0,
+  };
+  const labels = ["Hombres", "Mujeres"];
+  const values = [Number(map.hombres || 0), Number(map.mujeres || 0)];
+  generoChart.value = {
+    labels,
+    datasets: [
+      {
+        label: "Beneficiarios por género",
+        data: values,
+        backgroundColor: ["#3b82f6", "#fb7185"],
+      },
+    ],
+  };
+};
+
+const buildEdadChart = (porEdad) => {
+  // orden predecible para la X de la gráfica
+  const ORDER = [
+    "0-17",
+    "18-29",
+    "30-39",
+    "40-49",
+    "50-59",
+    "60-69",
+    "70+",
+    "sin_fecha",
+  ];
+  const labels = ORDER.filter((k) =>
+    Object.prototype.hasOwnProperty.call(porEdad || {}, k)
+  );
+  // si no hay claves exactamente como ORDER, fallback a keys actuales
+  const finalLabels = labels.length ? labels : Object.keys(porEdad || {});
+  const values = finalLabels.map((k) => Number(porEdad[k] ?? 0));
+  const color = "#10B981"; // verde
+  edadChart.value = {
+    labels: finalLabels,
+    datasets: [
+      {
+        label: "Beneficiarios por rango de edad",
+        data: values,
+        borderColor: color,
+        backgroundColor: "rgba(16,185,129,0.12)",
+        fill: true,
+        tension: 0.3,
+        pointRadius: 3,
+      },
+    ],
+  };
+};
+
+const load = async () => {
   loading.value = true;
   error.value = null;
+
+  if (cancelTokenSource) {
+    try {
+      cancelTokenSource.cancel("cancel");
+    } catch (e) {}
+  }
+  cancelTokenSource = axios.CancelToken.source();
+
   try {
-    const res = await axios.get("/api/atencion-ciudadana", {
-      params: {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-      },
+    const res = await axios.get("/api/reporte-atencion", {
+      params: { start: dateRange.value.start, end: dateRange.value.end },
+      cancelToken: cancelTokenSource.token,
       headers: { "X-Requested-With": "XMLHttpRequest" },
     });
-    const payload = res.data;
-    const items = payload?.data ?? payload?.items ?? payload ?? [];
-    raw.value = mapApiToSeries(
-      Array.isArray(items) ? items : [],
-      dateRange.value.start,
-      dateRange.value.end
-    );
+
+    const payload = res.data || {};
+    const { porTipo, porGenero, porEdad, totalsShape } =
+      normalizeResponse(payload);
+
+    totals.value.day = totalsShape?.today ?? totalsShape?.dia ?? null;
+    totals.value.week = totalsShape?.week ?? totalsShape?.semana ?? null;
+    totals.value.month = totalsShape?.month ?? totalsShape?.mes ?? null;
+
+    buildTipoChart(porTipo);
+    buildGeneroChart(porGenero);
+    buildEdadChart(porEdad);
   } catch (e) {
-    console.error(e);
-    error.value =
-      e.response?.data?.message || e.message || "Error al cargar datos";
-    raw.value = mapApiToSeries([], dateRange.value.start, dateRange.value.end);
+    if (!(axios.isCancel && axios.isCancel(e))) {
+      console.error(e);
+      error.value =
+        e.response?.data?.error || e.message || "Error al cargar datos";
+      tipoChart.value = { labels: [], datasets: [] };
+      generoChart.value = { labels: [], datasets: [] };
+      edadChart.value = { labels: [], datasets: [] };
+      totals.value = { day: null, week: null, month: null };
+    }
   } finally {
     loading.value = false;
   }
 };
 
-watch(dateRange, loadData, { deep: true });
-onMounted(loadData);
+watch(
+  dateRange,
+  () => {
+    clearTimeout(debounceId);
+    debounceId = setTimeout(load, 300);
+  },
+  { deep: true }
+);
+
+onMounted(load);
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-50">
-    <header>
-      <div class="bg-gray-100 py-2">
-        <div class="text-left container mx-auto sm:px-6 lg:px-8">
-          <span class="text-sm text-gray-700 font-bold">COMALCALCO.GOB.MX</span>
+  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+    <header class="relative">
+      <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-bold text-gray-800 tracking-wide">COMALCALCO.GOB.MX</span>
+          </div>
         </div>
       </div>
 
-      <div style="background-color: #621132" class="shadow-lg">
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="flex items-center h-28">
-            <img
-              src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
-              alt="Logo Comalcalco"
-              class="h-24 w-auto object-contain"
-            />
+      <div
+        style="background: linear-gradient(135deg, #621132 0%, #7d1a42 50%, #621132 100%)"
+        class="shadow-xl relative overflow-hidden"
+      >
+        <!-- Patrón decorativo de fondo -->
+        <div class="absolute inset-0 opacity-10">
+          <div class="absolute top-0 left-0 w-full h-full"
+               style="background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);"></div>
+        </div>
+
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+          <div class="flex items-center justify-between h-32">
+            <div class="flex items-center space-x-4">
+              <img
+                src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+                alt="Logo Comalcalco"
+                class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
+              />
+              <div class="hidden md:block">
+                <h1 class="text-2xl font-bold text-white">Atención Ciudadana y DIF</h1>
+                <p class="text-blue-100 text-sm">Sistema de seguimiento de apoyos</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </header>
 
-    <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
-      <div class="bg-white rounded-lg shadow p-6">
-        <h1 class="text-xl font-semibold mb-4">Atención Ciudadana</h1>
+    <!-- Loading overlay mejorado -->
+    <div
+      v-if="loading"
+      class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
+    >
+      <div class="text-center">
+        <div class="relative">
+          <div class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"></div>
+        </div>
+        <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
+      </div>
+    </div>
 
-        <div class="mb-4">
+    <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <!-- Controles mejorados -->
+      <div class="mb-8 flex flex-col sm:flex-row items-start sm:items-center gap-4 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+        <div class="flex-1">
+          <h2 class="text-lg font-semibold text-gray-900 mb-2">Filtros de fecha</h2>
           <DateRange v-model="dateRange" :presets="true" />
-          <!-- Toggle para usar datos falsos -->
-          <label class="inline-flex items-center text-sm text-gray-600 ml-4">
-            <input type="checkbox" v-model="USE_MOCK" class="mr-2 rounded border-gray-300" />
-            Usar datos falsos
-          </label>
         </div>
 
-        <div class="mb-4 flex items-center gap-4">
-          <div v-if="loading" class="ml-auto text-sm text-gray-500">
-            Cargando...
+        <div class="flex items-center space-x-4">
+          <div v-if="loading" class="flex items-center text-blue-600">
+            <div class="animate-spin h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full mr-2"></div>
+            <span class="text-sm font-medium">Cargando...</span>
           </div>
-          <div v-if="error" class="ml-auto text-sm text-red-600">
-            {{ error }}
+          <div v-if="error" class="flex items-center text-red-600">
+            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
+            <span class="text-sm font-medium">{{ error }}</span>
           </div>
         </div>
-
-        <div class="h-64">
-          <Bars :chartData="chartData" :chartOptions="chartOptions" />
-        </div>
       </div>
-    </section>
 
-    <section>
-      <div class="min-h-screen bg-gray-50">
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div
-              class="bg-gradient-to-r from-green-600 to-emerald-700 rounded-lg shadow-lg p-6 text-white"
-            >
-              <div class="flex items-center justify-between">
-                <div>
-                  <h2 class="text-lg font-medium opacity-90">Apoyos Mes</h2>
-                  <span >Entregados en el mes</span>
-                </div>
-                <div
-                  class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
-                >
-                  <span class="text-2xl font-bold text-green-600">20</span>
+      <!-- Cards mejoradas -->
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
+        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+          <div class="p-6 text-white">
+            <div class="flex items-center justify-between">
+              <div>
+                <div class="flex items-center space-x-2 mb-2">
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
+                  </svg>
+                  <h3 class="text-sm font-semibold opacity-90">Apoyos del Mes</h3>
                 </div>
+                <p class="text-3xl font-bold">{{ totals.month ?? "--" }}</p>
+                <p class="text-xs text-blue-100 mt-1">Total mensual</p>
+              </div>
+              <div class="bg-white/20 rounded-full p-3">
+                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
+                </svg>
               </div>
             </div>
-            <div
-              class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg p-6 text-white"
-            >
-              <div class="flex items-center justify-between">
-                <div>
-                  <h2 class="text-lg font-medium opacity-90">Apoyos Semana</h2>
-                  <span class="text-sm">Entregados en la semana</span>
-                </div>
-                <div
-                  class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
-                >
-                  <span class="text-2xl font-bold text-blue-600">20</span>
+          </div>
+        </div>
+
+        <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+          <div class="p-6 text-white">
+            <div class="flex items-center justify-between">
+              <div>
+                <div class="flex items-center space-x-2 mb-2">
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
+                  </svg>
+                  <h3 class="text-sm font-semibold opacity-90">Apoyos Semanales</h3>
                 </div>
+                <p class="text-3xl font-bold">{{ totals.week ?? "--" }}</p>
+                <p class="text-xs text-emerald-100 mt-1">Últimos 7 días</p>
+              </div>
+              <div class="bg-white/20 rounded-full p-3">
+                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
+                </svg>
               </div>
             </div>
-            <div
-              class="bg-gradient-to-r from-yellow-600 to-amber-700 rounded-lg shadow-lg p-6 text-white"
-            >
-              <div class="flex items-center justify-between">
-                <div>
-                  <h2 class="text-lg font-medium opacity-90">Apoyos Hoy</h2>
-                  <span class="text-sm">Entregados hoy</span>
-                </div>
-                <div
-                  class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
-                >
-                  <span class="text-2xl font-bold text-amber-600">20</span>
+          </div>
+        </div>
+
+        <div class="bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+          <div class="p-6 text-white">
+            <div class="flex items-center justify-between">
+              <div>
+                <div class="flex items-center space-x-2 mb-2">
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 12a1 1 0 102 0V9a1 1 0 10-2 0v3zm2-8a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
+                  </svg>
+                  <h3 class="text-sm font-semibold opacity-90">Apoyos de Hoy</h3>
                 </div>
+                <p class="text-3xl font-bold">{{ totals.day ?? "--" }}</p>
+                <p class="text-xs text-amber-100 mt-1">En el día actual</p>
+              </div>
+              <div class="bg-white/20 rounded-full p-3">
+                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 12a1 1 0 102 0V9a1 1 0 10-2 0v3zm2-8a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
+                </svg>
               </div>
             </div>
           </div>
         </div>
       </div>
+
+      <!-- Contenedor de gráficas mejorado -->
+      <div class="max-w-7xl mx-auto">
+        <!-- Gráfica principal -->
+        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 mb-8 transition-all duration-300 hover:shadow-2xl">
+          <div class="text-center mb-8">
+            <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl mb-4 shadow-lg">
+              <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
+              </svg>
+            </div>
+            <h2 class="text-2xl font-bold text-gray-900 mb-2">Distribución por Tipo de Apoyo</h2>
+            <p class="text-gray-600">Análisis detallado de los tipos de apoyos otorgados</p>
+          </div>
+          <div class="h-96">
+            <Bars :chartData="tipoChart" :chartOptions="chartOptions" />
+          </div>
+        </div>
+
+        <!-- Gráficas secundarias -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 transition-all duration-300 hover:shadow-2xl">
+            <div class="text-center mb-6">
+              <div class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-pink-500 to-rose-600 rounded-xl mb-4 shadow-lg">
+                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-bold text-gray-900 mb-1">Distribución por Género</h3>
+              <p class="text-sm text-gray-600">Beneficiarios por género</p>
+            </div>
+            <div>
+              <Pie
+                :chartData="generoChart"
+                :chartOptions="{ responsive: true, maintainAspectRatio: false }"
+              />
+            </div>
+          </div>
+
+          <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 transition-all duration-300 hover:shadow-2xl">
+            <div class="text-center mb-6">
+              <div class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-emerald-500 to-teal-600 rounded-xl mb-4 shadow-lg">
+                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-bold text-gray-900 mb-1">Distribución por Edad</h3>
+              <p class="text-sm text-gray-600">Beneficiarios por rango etario</p>
+            </div>
+            <div class="h-64">
+              <Lines
+                :chartData="edadChart"
+                :chartOptions="{
+                  responsive: true,
+                  maintainAspectRatio: false,
+                  plugins: {
+                    legend: {
+                      position: 'bottom'
+                    }
+                  }
+                }"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </section>
+
+    <!-- Footer mejorado -->
+    <footer class="bg-gradient-to-r from-gray-800 to-gray-900 text-white py-8 mt-16">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+        </div>
+      </div>
+    </footer>
   </div>
 </template>
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index 9f348df..bfc6dbd 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -83,7 +83,7 @@ const logout = () => {
 
           <!-- Botón 2 -->
           <a
-            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=1&period=week&type=almacen"
+            :href="route('dashboard.api-atencion')"
             target="_blank"
             class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 active:scale-[0.99]"
             aria-label="Ir al sitio 2"
@@ -93,9 +93,9 @@ const logout = () => {
                 <GoogleIcon name="open_in_new" class="text-white" />
               </span>
               <div class="min-w-0">
-                <h2 class="font-semibold text-white">Apoyo a Beneficiarios</h2>
+                <h2 class="font-semibold text-white">Apoyo a Beneficiarios y DIF</h2>
                 <p class="text-sm text-slate-300">
-                  Dashboard de apoyo a Beneficiarios
+                 Gráficas de apoyo a Beneficiarios y DIF
                 </p>
               </div>
             </div>
@@ -141,7 +141,7 @@ const logout = () => {
 
           <!-- Botón 4 -->
           <a
-            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=3&period=week&type=almacen"
+            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=&period=week&type=almacen"
             target="_blank"
             class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 active:scale-[0.99]"
             aria-label="Ir al sitio 4"
@@ -151,8 +151,8 @@ const logout = () => {
                 <GoogleIcon name="open_in_new" class="text-white" />
               </span>
               <div class="min-w-0">
-                <h2 class="font-semibold text-white">DIF</h2>
-                <p class="text-sm text-slate-300">Dashboard de DIF</p>
+                <h2 class="font-semibold text-white">Información de Apoyos a Beneficiarios y DIF</h2>
+                <p class="text-sm text-slate-300"></p>
               </div>
             </div>
             <span
diff --git a/resources/js/Pages/Dashboard/Obras.vue b/resources/js/Pages/Dashboard/Obras.vue
index c81bd37..29f287c 100644
--- a/resources/js/Pages/Dashboard/Obras.vue
+++ b/resources/js/Pages/Dashboard/Obras.vue
@@ -291,21 +291,61 @@ onMounted(() => {
 <template>
   <div class="min-h-screen bg-gray-50">
     <!-- Header -->
-    <header>
-      <div class="bg-gray-100 py-2">
-        <div class="text-left container mx-auto sm:px-6 lg:px-8">
-          <span class="text-sm text-gray-700 font-bold">COMALCALCO.GOB.MX</span>
+    <header class="relative">
+      <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-bold text-gray-800 tracking-wide"
+              >COMALCALCO.GOB.MX</span
+            >
+          </div>
         </div>
       </div>
 
-      <div style="background-color: #621132" class="shadow-lg">
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="flex items-center h-28">
-            <img
-              src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
-              alt="Logo Comalcalco"
-              class="h-24 w-auto object-contain"
-            />
+      <div
+        style="
+          background: linear-gradient(
+            135deg,
+            #621132 0%,
+            #7d1a42 50%,
+            #621132 100%
+          );
+        "
+        class="shadow-xl relative overflow-hidden"
+      >
+        <!-- Patrón decorativo de fondo -->
+        <div class="absolute inset-0 opacity-10">
+          <div
+            class="absolute top-0 left-0 w-full h-full"
+            style="
+              background-image: repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 35px,
+                rgba(255, 255, 255, 0.1) 35px,
+                rgba(255, 255, 255, 0.1) 70px
+              );
+            "
+          ></div>
+        </div>
+
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+          <div class="flex items-center justify-between h-32">
+            <div class="flex items-center space-x-4">
+              <img
+                src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+                alt="Logo Comalcalco"
+                class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
+              />
+              <div class="hidden md:block">
+                <h1 class="text-2xl font-bold text-white">
+                  Información de Obras
+                </h1>
+                <p class="text-blue-100 text-sm">
+                  Sistema de seguimiento de obras
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -314,13 +354,15 @@ onMounted(() => {
     <!-- Loading Overlay -->
     <div
       v-if="loading"
-      class="fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50"
+      class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
     >
       <div class="text-center">
-        <div
-          class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"
-        ></div>
-        <p class="mt-4 text-gray-600">Cargando datos...</p>
+        <div class="relative">
+          <div
+            class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"
+          ></div>
+        </div>
+        <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
       </div>
     </div>
 
@@ -1198,65 +1240,116 @@ onMounted(() => {
       </div>
 
       <div class="mt-8 bg-white rounded-lg shadow-lg overflow-hidden">
-        <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">
-          <h3 class="text-lg font-medium text-gray-900">Supervisores y sus Últimas Acciones - Últimos 30 Días</h3>
-          <p class="text-sm text-gray-600 mt-1">Registro de actividad de supervisores en proyectos</p>
+        <div
+          class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200"
+        >
+          <h3 class="text-lg font-medium text-gray-900">
+            Supervisores y sus Últimas Acciones - Últimos 30 Días
+          </h3>
+          <p class="text-sm text-gray-600 mt-1">
+            Registro de actividad de supervisores en proyectos
+          </p>
         </div>
 
         <div class="overflow-x-auto">
           <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th
+                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
                   Supervisor
                 </th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th
+                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
                   Tipo Acción
                 </th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th
+                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
                   Detalle Acción
                 </th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th
+                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
                   Fecha
                 </th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th
+                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
                   Proyecto
                 </th>
               </tr>
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
-              <tr v-for="supervisor in users" :key="supervisor.id" class="hover:bg-gray-50 transition-colors">
+              <tr
+                v-for="supervisor in users"
+                :key="supervisor.id"
+                class="hover:bg-gray-50 transition-colors"
+              >
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex items-center">
                     <div class="flex-shrink-0 h-10 w-10">
-                      <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
+                      <div
+                        class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center"
+                      >
                         <span class="text-sm font-medium text-gray-700">
-                          {{ supervisor.nombre.split(' ').map(n => n.charAt(0)).join('').substring(0, 2).toUpperCase() }}
+                          {{
+                            supervisor.nombre
+                              .split(" ")
+                              .map((n) => n.charAt(0))
+                              .join("")
+                              .substring(0, 2)
+                              .toUpperCase()
+                          }}
                         </span>
                       </div>
                     </div>
                     <div class="ml-4">
-                      <div class="text-sm font-medium text-gray-900">{{ supervisor.nombre }}</div>
-                      <div class="text-sm text-gray-500">{{ supervisor.correo }}</div>
+                      <div class="text-sm font-medium text-gray-900">
+                        {{ supervisor.nombre }}
+                      </div>
+                      <div class="text-sm text-gray-500">
+                        {{ supervisor.correo }}
+                      </div>
                     </div>
                   </div>
                 </td>
                 <td class="px-6 py-4">
-                  <div v-if="supervisor.ultima_accion" class="text-xs text-gray-500 mt-1 max-w-xs truncate" :title="supervisor.ultima_accion">
+                  <div
+                    v-if="supervisor.ultima_accion"
+                    class="text-xs text-gray-500 mt-1 max-w-xs truncate"
+                    :title="supervisor.ultima_accion"
+                  >
                     {{ supervisor.ultima_accion }}
                   </div>
                 </td>
                 <td class="px-6 py-4">
-                  <div class="text-sm text-gray-900">{{ supervisor.detalle_accion }}</div>
-                  <div v-if="supervisor.detalle_accion" class="text-xs text-gray-500 mt-1 max-w-xs truncate" :title="supervisor.detalle_accion">
+                  <div class="text-sm text-gray-900">
+                    {{ supervisor.detalle_accion }}
+                  </div>
+                  <div
+                    v-if="supervisor.detalle_accion"
+                    class="text-xs text-gray-500 mt-1 max-w-xs truncate"
+                    :title="supervisor.detalle_accion"
+                  >
                     {{ supervisor.detalle_accion }}
                   </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {{ supervisor.fecha_accion ? formatDateTime(supervisor.fecha_accion) : '--' }}
+                  {{
+                    supervisor.fecha_accion
+                      ? formatDateTime(supervisor.fecha_accion)
+                      : "--"
+                  }}
                 </td>
                 <td class="px-6 py-4">
-                  <div v-if="supervisor.proyecto_info" class="text-sm text-gray-900 max-w-xs truncate" :title="supervisor.proyecto_info">
+                  <div
+                    v-if="supervisor.proyecto_info"
+                    class="text-sm text-gray-900 max-w-xs truncate"
+                    :title="supervisor.proyecto_info"
+                  >
                     {{ supervisor.proyecto_info }}
                   </div>
                   <div v-else class="text-sm text-gray-500">--</div>
@@ -1266,7 +1359,9 @@ onMounted(() => {
               <!-- Empty state -->
               <tr v-if="!users.length">
                 <td colspan="5" class="px-6 py-8 text-center">
-                  <div class="text-gray-500">No hay supervisores registrados</div>
+                  <div class="text-gray-500">
+                    No hay supervisores registrados
+                  </div>
                 </td>
               </tr>
             </tbody>
diff --git a/resources/js/Pages/Dashboard/Tramites.vue b/resources/js/Pages/Dashboard/Tramites.vue
index cc8394c..e9b30a5 100644
--- a/resources/js/Pages/Dashboard/Tramites.vue
+++ b/resources/js/Pages/Dashboard/Tramites.vue
@@ -176,21 +176,61 @@ const togglePie = () => (showPie.value = !showPie.value);
 
 <template>
   <div>
-    <header>
-      <div class="bg-gray-100 py-2">
-        <div class="text-left container mx-auto sm:px-6 lg:px-8">
-          <span class="text-sm text-gray-700 font-bold">COMALCALCO.GOB.MX</span>
+    <header class="relative">
+      <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-bold text-gray-800 tracking-wide"
+              >COMALCALCO.GOB.MX</span
+            >
+          </div>
         </div>
       </div>
 
-      <div style="background-color: #621132" class="shadow-lg">
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="flex items-center h-28">
-            <img
-              src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
-              alt="Logo Comalcalco"
-              class="h-24 w-auto object-contain"
-            />
+      <div
+        style="
+          background: linear-gradient(
+            135deg,
+            #621132 0%,
+            #7d1a42 50%,
+            #621132 100%
+          );
+        "
+        class="shadow-xl relative overflow-hidden"
+      >
+        <!-- Patrón decorativo de fondo -->
+        <div class="absolute inset-0 opacity-10">
+          <div
+            class="absolute top-0 left-0 w-full h-full"
+            style="
+              background-image: repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 35px,
+                rgba(255, 255, 255, 0.1) 35px,
+                rgba(255, 255, 255, 0.1) 70px
+              );
+            "
+          ></div>
+        </div>
+
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+          <div class="flex items-center justify-between h-32">
+            <div class="flex items-center space-x-4">
+              <img
+                src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+                alt="Logo Comalcalco"
+                class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
+              />
+              <div class="hidden md:block">
+                <h1 class="text-2xl font-bold text-white">
+                  Reporte Especial de Trámites
+                </h1>
+                <p class="text-blue-100 text-sm">
+                  Sistema de seguimiento de trámites
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -199,13 +239,15 @@ const togglePie = () => (showPie.value = !showPie.value);
     <!-- Loading Overlay -->
     <div
       v-if="loading"
-      class="fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50"
+      class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
     >
       <div class="text-center">
-        <div
-          class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"
-        ></div>
-        <p class="mt-4 text-gray-600">Cargando datos...</p>
+        <div class="relative">
+          <div
+            class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"
+          ></div>
+        </div>
+        <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
       </div>
     </div>
     <div v-else>
diff --git a/routes/api.php b/routes/api.php
index 5472386..e4a4a92 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\Dashboard\AtencionController;
 use App\Http\Controllers\Dashboard\ObrasController;
 use App\Http\Controllers\Dashboard\TramiteController;
 use Illuminate\Http\Request;
@@ -23,4 +24,5 @@
 Route::middleware('api')->group(function () {
     Route::get('/reporte-obras', [ObrasController::class, 'Obras'])->middleware(['throttle:60,1']);
     Route::get('/reporte-especial', [TramiteController::class, 'tramiteEspecial'])->middleware(['throttle:60,1']);
+    Route::get('/reporte-atencion', [AtencionController::class, 'Atencion'])->middleware(['throttle:60,1']);
 });
-- 
2.45.2


From 3c70f4165237fe6e7921b5796437792db8e08135 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Thu, 21 Aug 2025 17:12:07 -0600
Subject: [PATCH 09/18] Cambios

---
 .../Dashboard/AtencionController.php          |  250 ++-
 colors.json.example                           |    2 +-
 resources/css/app.css                         |    6 +-
 resources/js/Components/Dashboard/Footer.vue  |  125 ++
 .../Dashboard/Modal/ExportModal.vue           |  387 +++++
 resources/js/Layouts/AppLayout.vue            |   95 ++
 resources/js/Pages/App/AccesoRapido.vue       |  145 ++
 resources/js/Pages/App/AtencionCiudadana.vue  |  984 ++++++++++++
 resources/js/Pages/App/Obras.vue              | 1373 +++++++++++++++++
 resources/js/Pages/App/Tramites.vue           |  584 +++++++
 .../js/Pages/Dashboard/AtencionCiudadana.vue  |  406 -----
 resources/js/Pages/Dashboard/Index.vue        |  173 +--
 resources/js/Pages/Dashboard/Obras.vue        | 1373 -----------------
 resources/js/Pages/Dashboard/Tramites.vue     |  573 -------
 routes/web.php                                |   23 +-
 15 files changed, 3923 insertions(+), 2576 deletions(-)
 create mode 100644 resources/js/Components/Dashboard/Footer.vue
 create mode 100644 resources/js/Components/Dashboard/Modal/ExportModal.vue
 create mode 100644 resources/js/Layouts/AppLayout.vue
 create mode 100644 resources/js/Pages/App/AccesoRapido.vue
 create mode 100644 resources/js/Pages/App/AtencionCiudadana.vue
 create mode 100644 resources/js/Pages/App/Obras.vue
 create mode 100644 resources/js/Pages/App/Tramites.vue
 delete mode 100644 resources/js/Pages/Dashboard/AtencionCiudadana.vue
 delete mode 100644 resources/js/Pages/Dashboard/Obras.vue
 delete mode 100644 resources/js/Pages/Dashboard/Tramites.vue

diff --git a/app/Http/Controllers/Dashboard/AtencionController.php b/app/Http/Controllers/Dashboard/AtencionController.php
index 090b263..2274323 100644
--- a/app/Http/Controllers/Dashboard/AtencionController.php
+++ b/app/Http/Controllers/Dashboard/AtencionController.php
@@ -1,4 +1,6 @@
-<?php namespace App\Http\Controllers\Dashboard;
+<?php
+
+namespace App\Http\Controllers\Dashboard;
 
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller as BaseController;
@@ -7,59 +9,213 @@
 
 class AtencionController extends BaseController
 {
-    public function Atencion(Request $request)
-    {
-        $query = $request->only(['start', 'end', 'type', 'action']);
-        $input = array_merge(['action' => 'index', 'type' => 'api'], $query);
+  public function Atencion(Request $request)
+  {
+    $query = $request->only(['start', 'end', 'type', 'action']);
+    $input = array_merge(['action' => 'index', 'type' => 'api'], $query);
 
-        $startDate = $input['start'] ?? date('Y-01-01');
-        $endDate = $input['end'] ?? date('Y-12-31');
+    $startDate = $input['start'] ?? date('Y-01-01');
+    $endDate = $input['end'] ?? date('Y-12-31');
 
-        $baseParams = [
-            'start_date' => $startDate,
-            'end_date' => $endDate,
-            'type' => $input['type'] ?? 'api',
-            'action' => $input['action'] ?? 'index',
-        ];
+    $baseParams = [
+      'start_date' => $startDate,
+      'end_date' => $endDate,
+      'type' => $input['type'] ?? 'api',
+      'action' => $input['action'] ?? 'index',
+    ];
 
-        $baseUrl   = 'https://apoyos.comalcalco.gob.mx/beneficiaries/stats-by-date-range';
-        $countsUrl = 'https://apoyos.comalcalco.gob.mx/beneficiaries/counts-by-date';
+    $baseUrl   = 'https://apoyos.comalcalco.gob.mx/beneficiaries/stats-by-date-range';
+    $countsUrl = 'https://apoyos.comalcalco.gob.mx/beneficiaries/counts-by-date';
+    $dashboardUrl = 'https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard/api';
+    $dashboardUrl2 = 'https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard/api?type=servicio';
 
-        try{
-          $response = Http::get($baseUrl, $baseParams);
+    try {
+      $response = Http::get($baseUrl, $baseParams);
 
-          if(!$response->successful()){
-            return response()->json(['error' => 'Error del servicio'], $response->status());
-          }
+      if (!$response->successful()) {
+        return response()->json(['error' => 'Error del servicio'], $response->status());
+      }
 
-          $mainData = $response->json();
-          $countsAc = [];
-          try{
-            $countsResp = Http::get($countsUrl, [
-              'start_date' => $startDate,
-              'end_date' => $endDate,
-            ]);
+      $mainData = $response->json();
+      $countsAc = [];
+      try {
+        $countsResp = Http::get($countsUrl, [
+          'start_date' => $startDate,
+          'end_date' => $endDate,
+        ]);
 
-            if($countsResp->successful()){
-              $countsAc = $countsResp->json();
-            } else {
-              Log::error('Error al obtener los conteos de atención', ['status' => $countsResp->status()]);
-            }
-          }catch (\Exception $e) {
-            Log::error('Error al obtener los conteos de atención', ['exception' => $e->getMessage()]);
-          }
-
-          $combinedData = array_merge(
-            is_array($mainData) ? $mainData : [],
-            [
-              'counts' => $countsAc,
-            ]
-          );
-          return response()->json($combinedData, 200)
-              ->header('Content-Type', 'application/json');
-        }catch (\Exception $e) {
-          Log::error('Error en la consulta de atención', ['exception' => $e->getMessage()]);
-          return response()->json(['error' => 'Error en la consulta de atención'], 500);
+        if ($countsResp->successful()) {
+          $countsAc = $countsResp->json();
+        } else {
+          Log::error('Error al obtener los conteos de atención', ['status' => $countsResp->status()]);
         }
+      } catch (\Exception $e) {
+        Log::error('Error al obtener los conteos de atención', ['exception' => $e->getMessage()]);
+      }
+
+      $dashboardData = [];
+      try {
+        $dashboardResp = Http::get($dashboardUrl);
+
+        if ($dashboardResp->successful()) {
+          $dashboardData = $dashboardResp->json();
+        } else {
+          Log::error('Error al obtener datos del dashboard', ['status' => $dashboardResp->status()]);
+        }
+      } catch (\Exception $e) {
+        Log::error('Error al obtener datos del dashboard', ['exception' => $e->getMessage()]);
+      }
+
+      $dashboardServicioData = [];
+      try {
+        $dashboardResp2 = Http::get($dashboardUrl2);
+
+        if ($dashboardResp2->successful()) {
+          $dashboardServicioData = $dashboardResp2->json();
+        } else {
+          Log::error('Error al obtener datos del dashboard servicio', ['status' => $dashboardResp2->status()]);
+        }
+      } catch (\Exception $e) {
+        Log::error('Error al obtener datos del dashboard servicio', ['exception' => $e->getMessage()]);
+      }
+
+      // Combina todos los resultados
+      $combinedData = array_merge(
+        is_array($mainData) ? $mainData : [],
+        [
+          'counts'             => $countsAc,
+          'dashboard'          => $dashboardData,
+          'dashboard_servicio' => $dashboardServicioData,
+        ]
+      );
+      return response()->json($combinedData, 200)
+        ->header('Content-Type', 'application/json');
+    } catch (\Exception $e) {
+      Log::error('Error en la consulta de atención', ['exception' => $e->getMessage()]);
+      return response()->json(['error' => 'Error en la consulta de atención'], 500);
     }
+  }
+
+  public function getSupportOptions(Request $request)
+  {
+    try {
+      $typeId = $request->query('type_id');
+
+      if (!$typeId) {
+        return response()->json(['error' => 'type_id es requerido'], 400);
+      }
+
+      $url = 'https://apoyos.comalcalco.gob.mx/beneficiaries/export/support-options';
+
+      $response = Http::timeout(30)->get($url, [
+        'type_id' => $typeId
+      ]);
+
+      if (!$response->successful()) {
+        Log::error('Error al obtener opciones de apoyo', [
+          'status' => $response->status(),
+          'body' => $response->body(),
+          'type_id' => $typeId
+        ]);
+
+        return response()->json([
+          'error' => 'Error al obtener opciones de apoyo'
+        ], $response->status());
+      }
+
+      return response()->json($response->json());
+    } catch (\Exception $e) {
+      Log::error('Error en getSupportOptions', [
+        'exception' => $e->getMessage(),
+        'type_id' => $request->query('type_id')
+      ]);
+
+      return response()->json([
+        'error' => 'Error interno del servidor'
+      ], 500);
+    }
+  }
+
+  public function exportExcel(Request $request)
+  {
+    try {
+      // CAMBIO: Usar los parámetros correctos que espera la API
+      $params = $request->only([
+        'start_date',
+        'end_date',
+        'type_id',
+        'support_id'
+      ]);
+
+      // Validaciones básicas
+      if (!$params['start_date'] || !$params['end_date']) {
+        return response()->json([
+          'error' => 'Las fechas son requeridas'
+        ], 400);
+      }
+
+      if (!$params['type_id']) {
+        return response()->json([
+          'error' => 'El type_id es requerido'
+        ], 400);
+      }
+
+      $url = 'https://apoyos.comalcalco.gob.mx/beneficiaries/export/excel';
+
+      // Log de parámetros para debug
+      Log::info('Exportando Excel con parámetros:', $params);
+
+      // IMPORTANTE: Hacer la petición sin timeout muy alto y con withoutVerifying para SSL
+      $response = Http::withoutVerifying()
+        ->timeout(60)
+        ->get($url, $params);
+
+      if (!$response->successful()) {
+        Log::error('Error al exportar Excel', [
+          'status' => $response->status(),
+          'body' => $response->body(),
+          'params' => $params
+        ]);
+
+        return response()->json([
+          'error' => 'Error al generar el archivo Excel: ' . $response->body()
+        ], $response->status());
+      }
+
+      // CORREGIR: Verificar que la respuesta sea realmente un Excel
+      $contentType = $response->header('Content-Type');
+
+      if (!str_contains($contentType, 'spreadsheet') && !str_contains($contentType, 'excel')) {
+        Log::error('Respuesta no es un archivo Excel', [
+          'content_type' => $contentType,
+          'body_preview' => substr($response->body(), 0, 200)
+        ]);
+
+        return response()->json([
+          'error' => 'El servidor no devolvió un archivo Excel válido'
+        ], 400);
+      }
+
+      // Retornar el archivo Excel directamente con headers correctos
+      return response($response->body(), 200, [
+        'Content-Type' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'Content-Disposition' => 'attachment; filename="beneficiarios_' .
+          $params['start_date'] . '_' . $params['end_date'] . '.xlsx"',
+        'Content-Length' => strlen($response->body()),
+        'Cache-Control' => 'no-cache, no-store, must-revalidate',
+        'Pragma' => 'no-cache',
+        'Expires' => '0'
+      ]);
+    } catch (\Exception $e) {
+      Log::error('Error en exportExcel', [
+        'exception' => $e->getMessage(),
+        'trace' => $e->getTraceAsString(),
+        'params' => $request->all()
+      ]);
+
+      return response()->json([
+        'error' => 'Error interno del servidor: ' . $e->getMessage()
+      ], 500);
+    }
+  }
 }
diff --git a/colors.json.example b/colors.json.example
index fd28bbe..d36ba7d 100644
--- a/colors.json.example
+++ b/colors.json.example
@@ -23,4 +23,4 @@
     "danger-dark":"#EF4444",
     "info":"#3B82F6",
     "info-dark":"#3B82F6"
-}
\ No newline at end of file
+}
diff --git a/resources/css/app.css b/resources/css/app.css
index e609f68..b0a29ba 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -18,12 +18,12 @@ @font-face {
     src: url(./google-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
 }
 
-/* Scrollbar */  
+/* Scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
   }
-  
+
 ::-webkit-scrollbar-thumb {
   background: #777777;
   border-radius: 4px;
@@ -61,7 +61,7 @@ .btn-icon-secondary {
 }
 
 .header-icon {
-  @apply hover:text-yellow-500 focus:text-yellow-600 hover:scale-105 hover:transition hover:duration-300;
+  @apply hover:text-primary focus:text-primary hover:scale-105 hover:transition hover:duration-300;
 }
 
 .input-primary {
diff --git a/resources/js/Components/Dashboard/Footer.vue b/resources/js/Components/Dashboard/Footer.vue
new file mode 100644
index 0000000..0219b96
--- /dev/null
+++ b/resources/js/Components/Dashboard/Footer.vue
@@ -0,0 +1,125 @@
+<template>
+  <footer class="bg-[#58595b] text-white py-8">
+    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <!-- Logo y información de contacto -->
+        <div class="flex flex-col md:flex-row gap-6">
+          <!-- Logo -->
+          <div class="flex-shrink-0">
+            <img
+              src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+              alt="Comalcalco Logo"
+              class="h-20 w-auto object-contain"
+            />
+          </div>
+
+          <!-- Información de contacto -->
+          <div class="space-y-3">
+            <!-- Dirección -->
+            <div class="flex items-start space-x-3">
+              <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
+                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
+                </svg>
+              </div>
+              <p class="text-sm text-gray-300">
+                Plaza Juárez S/N, Centro, C.P. 86300, Comalcalco,<br>
+                Tabasco, México.
+              </p>
+            </div>
+
+            <!-- Teléfono -->
+            <div class="flex items-center space-x-3">
+              <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
+                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
+                </svg>
+              </div>
+              <p class="text-sm text-gray-300">9331140000</p>
+            </div>
+
+            <!-- Horarios -->
+            <div class="flex items-center space-x-3">
+              <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
+                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
+                </svg>
+              </div>
+              <p class="text-sm text-gray-300">Lunes a Viernes de 8:00 a 16:00 horas</p>
+            </div>
+
+            <!-- Email -->
+            <div class="flex items-center space-x-3">
+              <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
+                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
+                  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
+                </svg>
+              </div>
+              <p class="text-sm text-gray-300">
+                <a href="mailto:mejoraregulatoria@comalcalco.gob.mx" class="hover:text-yellow-400 transition-colors">
+                  mejoraregulatoria@comalcalco.gob.mx
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Servicios de emergencia -->
+        <div class="space-y-4">
+          <!-- Emergencias -->
+          <div class="flex items-center space-x-3">
+            <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
+              <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+              </svg>
+            </div>
+            <div>
+              <p class="text-yellow-400 font-semibold text-sm">Emergencias</p>
+              <p class="text-white text-lg font-bold">911</p>
+            </div>
+          </div>
+
+          <!-- Bomberos -->
+          <div class="flex items-center space-x-3">
+            <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
+              <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"/>
+              </svg>
+            </div>
+            <div>
+              <p class="text-yellow-400 font-semibold text-sm">Bomberos</p>
+              <p class="text-white text-lg font-bold">993 315 5670</p>
+            </div>
+          </div>
+
+          <!-- Cruz Roja -->
+          <div class="flex items-center space-x-3">
+            <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
+              <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm1 2a1 1 0 000 2h6a1 1 0 100-2H7zm6 7a1 1 0 011 1v3a1 1 0 11-2 0v-3a1 1 0 011-1zm-3 3a1 1 0 100 2h.01a1 1 0 100-2H10zm-4 1a1 1 0 011-1h.01a1 1 0 110 2H7a1 1 0 01-1-1zm1-4a1 1 0 100 2h.01a1 1 0 100-2H7zm2 1a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm4-4a1 1 0 100 2h.01a1 1 0 100-2H13zM9 9a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zM7 8a1 1 0 000 2h.01a1 1 0 000-2H7z" clip-rule="evenodd"/>
+              </svg>
+            </div>
+            <div>
+              <p class="text-yellow-400 font-semibold text-sm">Cruz Roja Mexicana</p>
+              <p class="text-white text-lg font-bold">993 334 3004</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Copyright -->
+      <div class="mt-8 pt-6 border-t border-gray-600 text-center">
+        <div class="flex flex-col md:flex-row justify-center items-center space-y-2 md:space-y-0 md:space-x-6">
+          <p class="text-sm text-gray-300">
+            © Ayuntamiento de Comalcalco 2024-2027
+          </p>
+          <span class="hidden md:block text-gray-500">|</span>
+          <a href="#" class="text-sm text-gray-300 hover:text-yellow-400 transition-colors">
+            Aviso de Privacidad
+          </a>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/resources/js/Components/Dashboard/Modal/ExportModal.vue b/resources/js/Components/Dashboard/Modal/ExportModal.vue
new file mode 100644
index 0000000..732991e
--- /dev/null
+++ b/resources/js/Components/Dashboard/Modal/ExportModal.vue
@@ -0,0 +1,387 @@
+<script setup>
+import { ref, watch, onMounted } from "vue";
+import axios from "axios";
+import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
+
+const props = defineProps({
+  show: Boolean
+});
+
+const emit = defineEmits(['close']);
+
+const loading = ref(false);
+const loadingOptions = ref(false);
+const form = ref({
+  startDate: new Date().toISOString().slice(0, 10),
+  endDate: new Date().toISOString().slice(0, 10),
+  supportType: '', // almacen o servicio
+  typeId: '', // ID del tipo específico
+  supportId: '' // Opciones específicas seleccionadas
+});
+
+const dateRange = ref({
+  start: new Date().toISOString().slice(0, 10),
+  end: new Date().toISOString().slice(0, 10)
+});
+
+const supportTypes = [
+  { id: '', name: 'Seleccionar tipo de apoyo' },
+  { id: 'almacen', name: 'Almacén', api_types: [1, 2, 3, 4, 5, 6, 11, 12, 13] },
+  { id: 'servicio', name: 'Servicio', api_types: [7, 8, 9, 10, 14] }
+];
+
+const typeOptions = ref([]);
+const supportOptionsData = ref([]);
+
+// Watch para actualizar fechas desde DateRange
+watch(dateRange, (newRange) => {
+  form.value.startDate = newRange.start;
+  form.value.endDate = newRange.end;
+}, { deep: true });
+
+// Watch para cargar opciones cuando cambia el tipo de apoyo
+watch(() => form.value.supportType, async (newType) => {
+  if (newType && newType !== '') {
+    await loadSupportOptions(newType);
+  } else {
+    typeOptions.value = [];
+    supportOptionsData.value = [];
+    form.value.typeId = '';
+    form.value.supportOptions = [];
+  }
+});
+
+// Watch para cargar opciones específicas cuando cambia el typeId
+watch(() => form.value.typeId, async (newTypeId) => {
+  if (newTypeId && newTypeId !== '') {
+    await loadSpecificOptions(newTypeId);
+  } else {
+    supportOptionsData.value = [];
+    form.value.supportOptions = [];
+  }
+});
+
+const loadSupportOptions = async (supportType) => {
+  loadingOptions.value = true;
+  try {
+    const selectedType = supportTypes.find(type => type.id === supportType);
+    if (selectedType && selectedType.api_types) {
+      // Cargar tipos disponibles para este tipo de apoyo
+      const options = selectedType.api_types.map(id => ({
+        id: id,
+        name: getTypeName(id)
+      }));
+
+      typeOptions.value = [
+        { id: '', name: 'Seleccionar categoría específica' },
+        ...options
+      ];
+    }
+  } catch (error) {
+    console.error('Error cargando opciones de tipo:', error);
+  } finally {
+    loadingOptions.value = false;
+  }
+};
+
+const loadSpecificOptions = async (typeId) => {
+  loadingOptions.value = true;
+  try {
+    const response = await axios.get('/api/support-options', {
+      params: { type_id: typeId },
+      headers: { 'X-Requested-With': 'XMLHttpRequest' }
+    });
+
+    if (response.data && response.data.options) {
+      supportOptionsData.value = response.data.options;
+      // Pre-seleccionar "Todos los enlistados" si existe
+      const allOption = response.data.options.find(opt => opt.id === 'all');
+      if (allOption) {
+        form.value.supportOptions = ['all'];
+      }
+    }
+  } catch (error) {
+    console.error('Error cargando opciones específicas:', error);
+    supportOptionsData.value = [];
+
+    // Mostrar mensaje de error más específico
+    if (error.response?.data?.error) {
+      alert(`Error: ${error.response.data.error}`);
+    } else {
+      alert('Error al cargar las opciones de apoyo');
+    }
+  } finally {
+    loadingOptions.value = false;
+  }
+};
+
+const getTypeName = (id) => {
+  const names = {
+    1: "Medicamentos",
+    2: "Material de Construcción",
+    3: "Aparatos Ortopédicos",
+    4: "Despensas",
+    5: "Útiles Escolares",
+    6: "Pañales",
+    7: "Análisis Clínicos",
+    8: "Traslados",
+    9: "Monederos",
+    10: "Apoyo social DIF",
+    11: "Alimentos",
+    12: "Ataúdes",
+    13: "Ventiladores",
+    14: "Apoyo a enfermedades de la vista"
+  };
+  return names[id] || `Tipo ${id}`;
+};
+
+const exportToExcel = async () => {
+  if (!form.value.supportType || !form.value.typeId) {
+    alert('Por favor selecciona el tipo de apoyo y la categoría específica');
+    return;
+  }
+
+  loading.value = true;
+  try {
+    // CAMBIO: Usar los parámetros correctos que espera la API
+    const params = {
+      start_date: form.value.startDate,
+      end_date: form.value.endDate,
+      type_id: form.value.typeId,
+      support_id: form.value.supportId || 'all' // Si no hay supportId, usar 'all'
+    };
+
+    console.log('Enviando parámetros:', params); // Debug
+
+    // CAMBIO: Configuración más específica para descarga de archivos
+    const response = await axios({
+      method: 'GET',
+      url: '/api/export-excel',
+      params: params,
+      responseType: 'blob', // Importante para archivos binarios
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      },
+      timeout: 60000 // 60 segundos timeout
+    });
+
+    // VERIFICAR que la respuesta sea un blob válido
+    if (!response.data || response.data.size === 0) {
+      throw new Error('El archivo descargado está vacío');
+    }
+
+    // VERIFICAR el tipo de contenido
+    const contentType = response.headers['content-type'] || '';
+    if (!contentType.includes('spreadsheet') && !contentType.includes('excel') && !contentType.includes('octet-stream')) {
+      // Si no es Excel, probablemente sea un JSON con error
+      const text = await response.data.text();
+      console.error('Respuesta inesperada:', text);
+      throw new Error('El servidor no devolvió un archivo Excel válido');
+    }
+
+    // Crear y descargar el archivo
+    const blob = new Blob([response.data], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    });
+
+    // Generar nombre de archivo único
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+    const filename = `beneficiarios_${form.value.startDate}_${form.value.endDate}_${timestamp}.xlsx`;
+
+    // MEJORAR la descarga
+    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+      // Para Internet Explorer
+      window.navigator.msSaveOrOpenBlob(blob, filename);
+    } else {
+      // Para navegadores modernos
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename;
+      link.style.display = 'none';
+
+      document.body.appendChild(link);
+      link.click();
+
+      // Cleanup
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+    }
+
+    // Cerrar modal y mostrar éxito
+    closeModal();
+    alert('Archivo Excel descargado exitosamente');
+
+  } catch (error) {
+    console.error('Error exportando Excel:', error);
+
+    let errorMessage = 'Error al exportar el archivo Excel';
+
+    if (error.response?.status === 400 && error.response?.data?.error) {
+      errorMessage = error.response.data.error;
+    } else if (error.response?.status === 500) {
+      errorMessage = 'Error interno del servidor. Intente nuevamente.';
+    } else if (error.message) {
+      errorMessage = error.message;
+    } else if (error.code === 'ECONNABORTED') {
+      errorMessage = 'La descarga tardó demasiado. Intente con un rango de fechas menor.';
+    }
+
+    alert(errorMessage);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const closeModal = () => {
+  // Resetear formulario
+  form.value = {
+    startDate: new Date().toISOString().slice(0, 10),
+    endDate: new Date().toISOString().slice(0, 10),
+    supportType: '',
+    typeId: '',
+    supportOptions: []
+  };
+
+  dateRange.value = {
+    start: new Date().toISOString().slice(0, 10),
+    end: new Date().toISOString().slice(0, 10)
+  };
+
+  typeOptions.value = [];
+  supportOptionsData.value = [];
+
+  emit('close');
+};
+</script>
+
+<template>
+  <!-- Modal Backdrop -->
+  <div
+    v-if="show"
+    class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
+    @click.self="closeModal"
+  >
+    <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+      <!-- Header -->
+      <div class="p-6 border-b border-gray-200">
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold text-gray-900">
+            Exportar a Excel
+          </h3>
+          <button
+            @click="closeModal"
+            class="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
+        <p class="text-sm text-gray-600 mt-2">
+          Configure los filtros para exportar los datos de beneficiarios
+        </p>
+      </div>
+
+      <!-- Body -->
+      <div class="p-6 space-y-6">
+        <!-- Rango de Fechas -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-2">
+            Rango de Fechas
+          </label>
+          <DateRange
+            v-model="dateRange"
+            :presets="true"
+            title-start="Fecha inicio"
+            title-end="Fecha fin"
+          />
+        </div>
+
+        <!-- Tipo de Apoyo -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-2">
+            Tipo de Apoyo
+          </label>
+          <select
+            v-model="form.supportType"
+            class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          >
+            <option v-for="type in supportTypes" :key="type.id" :value="type.id">
+              {{ type.name }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Categoría Específica -->
+        <div v-if="form.supportType && typeOptions.length > 0">
+          <label class="block text-sm font-medium text-gray-700 mb-2">
+            Categoría Específica
+          </label>
+          <select
+            v-model="form.typeId"
+            class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            :disabled="loadingOptions"
+          >
+            <option v-for="option in typeOptions" :key="option.id" :value="option.id">
+              {{ option.name }}
+            </option>
+          </select>
+
+          <div v-if="loadingOptions" class="mt-2 text-sm text-blue-600">
+            Cargando opciones...
+          </div>
+        </div>
+
+        <!-- Opciones Específicas de Apoyo -->
+        <div v-if="supportOptionsData.length > 0">
+          <label class="block text-sm font-medium text-gray-700 mb-3">
+            Seleccionar Apoyos Específicos
+          </label>
+          <div class="max-h-64 overflow-y-auto border border-gray-200 rounded-md p-3">
+            <div class="space-y-2">
+              <label
+                v-for="option in supportOptionsData"
+                :key="option.id"
+                class="flex items-center space-x-2 text-sm"
+              >
+                <input
+                  type="checkbox"
+                  :value="option.id"
+                  v-model="form.supportOptions"
+                  class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                />
+                <span class="flex-1">{{ option.name }}</span>
+              </label>
+            </div>
+          </div>
+          <p class="text-xs text-gray-500 mt-2">
+            Seleccionados: {{ form.supportOptions.length }} de {{ supportOptionsData.length }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
+        <button
+          @click="closeModal"
+          class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
+        >
+          Cancelar
+        </button>
+        <button
+          @click="exportToExcel"
+          :disabled="loading || !form.supportType || !form.typeId"
+          class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors flex items-center"
+        >
+          <svg v-if="loading" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
+          </svg>
+          {{ loading ? 'Exportando...' : 'Exportar Excel' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
new file mode 100644
index 0000000..567b164
--- /dev/null
+++ b/resources/js/Layouts/AppLayout.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { Head } from '@inertiajs/vue3';
+import { sidebarSwitch, sidebar } from '@/sidebar'
+
+import Header from '@/Components/Dashboard/Skeleton/Header.vue';
+import Sidebar from '@/Components/Dashboard/Skeleton/Sidebar.vue';
+import Link from '@/Components/Dashboard/Skeleton/Sidebar/Link.vue';
+import Section from '@/Components/Dashboard/Skeleton/Sidebar/Section.vue';
+
+defineProps({
+    title: String,
+    titlePage: {
+        default: true,
+        type: Boolean
+    }
+});
+
+const sidebarStatus = ref(sidebar);
+
+onMounted(()=> {
+    if (!sessionFresh.isLayoutInitialized()) {
+        sessionFresh.startLayout();
+    }
+
+    if(TwScreen.isDevice('phone')) {
+        sidebarSwitch(true);
+    }
+});
+</script>
+
+<template>
+    <Head
+        :title="title"
+    />
+    <div class="flex w-full h-screen">
+        <div
+            id="sidebar"
+            class="fixed w-fit h-screen transition-all duration-300 z-10"
+            :class="{'-translate-x-[16.5rem] md:-translate-x-0':sidebarStatus, '-translate-x-0 md:-translate-x-64':!sidebarStatus}"
+        >
+            <Sidebar
+                :sidebar="sidebarStatus"
+                @open="sidebarSwitch()"
+            >
+                <Section name="Reportes">
+                    <Link
+                        icon="assignment"
+                        name="Trámites"
+                        to="app.tramites"
+                    />
+                    <Link
+                        icon="support_agent"
+                        name="Atención Ciudadana"
+                        to="app.atencion"
+                    />
+                    <Link
+                        icon="construction"
+                        name="Obras"
+                        to="app.obras"
+                    />
+                </Section>
+                <Section name="Acceso Rápido">
+                    <Link
+                        icon="dashboard"
+                        name="Inicio Dashboard"
+                        to="dashboard.index"
+                    />
+                </Section>
+            </Sidebar>
+        </div>
+        <div
+            class="flex flex-col w-full transition-all duration-300"
+            :class="{'md:w-[calc(100vw-rem)] md:ml-64':sidebarStatus, 'md:w-screen md:ml-0':!sidebarStatus}"
+        >
+            <div class="h-2 md:h-14">
+                <Header
+                    :sidebar="sidebarStatus"
+                    @open="sidebarSwitch()"
+                />
+            </div>
+            <main id="page" class="flex h-full justify-center md:p-2">
+                <div class="mt-14 md:mt-0 w-full shadow-lg h-fit md:h-[calc(100vh-4.5rem)] px-2 md:px-8 pb-4 sm:px-6 lg:px-8 md:rounded-lg bg-main text-main-on dark:bg-main-dark dark:text-main-dark-on lg:py-4 md:overflow-y-auto md:overflow-x-auto transition-colors duration-300">
+                    <div v-if="titlePage" class="flex w-full justify-center pt-4 lg:pt-0">
+                        <h2
+                            class="font-bold text-xl uppercase text-primary dark:text-primary-dark"
+                            v-text="title"
+                        />
+                    </div>
+                    <slot />
+                </div>
+            </main>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Pages/App/AccesoRapido.vue b/resources/js/Pages/App/AccesoRapido.vue
new file mode 100644
index 0000000..e63b29c
--- /dev/null
+++ b/resources/js/Pages/App/AccesoRapido.vue
@@ -0,0 +1,145 @@
+<script setup>
+import { router } from "@inertiajs/vue3";
+
+import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
+import NotificationController from "@/Controllers/NotificationController";
+import AppLayout from "@/Layouts/AppLayout.vue";
+
+const notificationCtl = NotificationController;
+
+const logout = () => {
+  router.post(
+    route("logout"),
+    {},
+    {
+      onBefore: () => {
+        notificationCtl.stop();
+      },
+    }
+  );
+};
+</script>
+
+<template>
+  <AppLayout>
+    <div
+      class="min-h-screen font-sans bg-gradient-to-br from-[#621132] via-[#621132] to-[#621132] text-[#621132] antialiased"
+    >
+      <main class="grid min-h-screen place-items-center p-4">
+        <!-- Tarjeta -->
+        <section
+          class="w-full max-w-2xl rounded-3xl border border-white/10 bg-white/5 p-6 sm:p-8 shadow-2xl backdrop-blur supports-[backdrop-filter]:bg-white/10"
+        >
+          <!-- Encabezado -->
+          <header class="mb-6 sm:mb-8">
+            <h1
+              class="text-2xl sm:text-3xl font-bold tracking-tight text-white"
+            >
+              Accesos rápidos
+            </h1>
+            <p class="mt-2 text-sm sm:text-base text-white">
+              Selecciona un destino.
+            </p>
+          </header>
+
+          <!-- Grid de botones -->
+          <div class="grid grid-cols-1 sm:grid-cols-1 gap-3 sm:gap-4">
+            <!-- Botón 1 -->
+            <a
+              :href="route('app.tramites')"
+              target="_blank"
+              class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 active:scale-[0.99]"
+              aria-label="Ir al sitio 1"
+            >
+              <div class="flex items-center gap-3">
+                <!-- Ícono externo simple -->
+                <span class="rounded-xl bg-white/10 p-2">
+                  <GoogleIcon name="open_in_new" class="text-white" />
+                </span>
+                <div class="min-w-0">
+                  <h2 class="font-semibold text-white">
+                    Reporte Especial de Trámites
+                  </h2>
+                  <p class="text-sm text-slate-300">
+                    Resumen de trámites por unidad administrativa
+                  </p>
+                </div>
+              </div>
+              <!-- Efecto -->
+              <span
+                class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+                style="
+                  background: radial-gradient(
+                    600px circle at var(--x, 50%) var(--y, 50%),
+                    rgba(199, 12, 12, 0.12),
+                    transparent 40%
+                  );
+                "
+              ></span>
+            </a>
+
+            <!-- Botón 2 -->
+            <a
+              :href="route('app.atencion')"
+              target="_blank"
+              class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 active:scale-[0.99]"
+              aria-label="Ir al sitio 2"
+            >
+              <div class="flex items-center gap-3">
+                <span class="rounded-xl bg-white/10 p-2">
+                  <GoogleIcon name="open_in_new" class="text-white" />
+                </span>
+                <div class="min-w-0">
+                  <h2 class="font-semibold text-white">
+                    Apoyo a Beneficiarios y DIF
+                  </h2>
+                  <p class="text-sm text-slate-300">
+                    Gráficas de apoyo a Beneficiarios y DIF
+                  </p>
+                </div>
+              </div>
+              <span
+                class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+                style="
+                  background: radial-gradient(
+                    600px circle at var(--x, 50%) var(--y, 50%),
+                    rgba(98, 17, 50, 0.12),
+                    transparent 40%
+                  );
+                "
+              ></span>
+            </a>
+
+            <!-- Botón 3 -->
+            <a
+              :href="route('app.obras')"
+              target="_blank"
+              class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400 active:scale-[0.99]"
+              aria-label="Ir al sitio 3"
+            >
+              <div class="flex items-center gap-3">
+                <span class="rounded-xl bg-white/10 p-2">
+                  <GoogleIcon name="open_in_new" class="text-white" />
+                </span>
+                <div class="min-w-0">
+                  <h2 class="font-semibold text-white">Información de Obras</h2>
+                  <p class="text-sm text-slate-300">Proyectos en seguimiento</p>
+                </div>
+              </div>
+              <span
+                class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+                style="
+                  background: radial-gradient(
+                    600px circle at var(--x, 50%) var(--y, 50%),
+                    rgba(255, 255, 255, 0.12),
+                    transparent 40%
+                  );
+                "
+              ></span>
+            </a>
+          </div>
+        </section>
+      </main>
+    </div>
+  </AppLayout>
+</template>
diff --git a/resources/js/Pages/App/AtencionCiudadana.vue b/resources/js/Pages/App/AtencionCiudadana.vue
new file mode 100644
index 0000000..668b9b8
--- /dev/null
+++ b/resources/js/Pages/App/AtencionCiudadana.vue
@@ -0,0 +1,984 @@
+<script setup>
+// filepath: /var/www/maquetador-graficas/resources/js/Pages/App/AtencionCiudadana.vue
+import { ref, watch, onMounted, computed } from "vue";
+
+import axios from "axios";
+import Bars from "@/Components/Dashboard/Charts/Bars.vue";
+import Pie from "@/Components/Dashboard/Charts/Pie.vue";
+import Lines from "@/Components/Dashboard/Charts/Lines.vue";
+import Footer from "@/Components/Dashboard/Footer.vue";
+import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
+import ExportModal from "@/Components/Dashboard/Modal/ExportModal.vue";
+import AppLayout from "@/Layouts/AppLayout.vue";
+
+const selectedDepartment = ref("");
+const selectedType = ref("almacen");
+const selectedPeriod = ref("hoy");
+
+const today = new Date().toISOString().slice(0, 10);
+const dateRange = ref({ start: today, end: today });
+
+const showExportModal = ref(false);
+const loading = ref(false);
+const error = ref(null);
+const expandedGroups = ref(new Set());
+let debounceId = null;
+let cancelTokenSource = null;
+let chartsDebounceId = null;
+
+const cache = new Map();
+const getCacheKey = () =>
+  `${selectedDepartment.value}-${selectedType.value}-${selectedPeriod.value}`;
+
+// NUEVO: Cache separado para gráficas con rango de fechas
+const chartsCache = new Map();
+const getChartsCacheKey = () =>
+  `${dateRange.value.start}-${dateRange.value.end}`;
+
+const totals = ref({ day: null, week: null, month: null });
+const beneficiariesList = ref([]); // Lista de beneficiarios
+const beneficiariesByType = ref({}); // Beneficiarios agrupados por tipo
+
+const tipoChart = ref({ labels: [], datasets: [] });
+const generoChart = ref({ labels: [], datasets: [] });
+const edadChart = ref({ labels: [], datasets: [] });
+const chartOptions = {
+  responsive: true,
+  scales: {
+    x: { beginAtZero: true },
+    y: { beginAtZero: true },
+  },
+};
+
+const departmentOptions = [
+  { id: "", name: "Todos los departamentos" },
+  { id: "1", name: "Atención Ciudadana" },
+  { id: "3", name: "DIF" },
+];
+
+const typeOptions = [
+  { id: "", name: "Todos los tipos" },
+  { id: "almacen", name: "Almacén" },
+  { id: "servicio", name: "Servicio" },
+];
+
+const periodOptions = [
+  { id: "hoy", name: "Hoy" },
+  { id: "semana", name: "Esta Semana" },
+];
+
+// NUEVO: Función para cargar datos de gráficas
+const loadChartsData = async () => {
+  const cacheKey = getChartsCacheKey();
+
+  // Verificar cache de gráficas
+  if (chartsCache.has(cacheKey)) {
+    const cachedData = chartsCache.get(cacheKey);
+    buildChartsFromData(cachedData);
+    return;
+  }
+
+  try {
+    const params = {
+      start: dateRange.value.start,
+      end: dateRange.value.end,
+      charts_only: true, // Indicador para el backend
+    };
+
+    const res = await axios.get("/api/reporte-atencion", {
+      params,
+      timeout: 10000,
+      headers: { "X-Requested-With": "XMLHttpRequest" },
+    });
+
+    const payload = res.data || {};
+
+    // Guardar en cache de gráficas
+    chartsCache.set(cacheKey, payload);
+
+    buildChartsFromData(payload);
+  } catch (e) {
+    console.error("Error cargando datos de gráficas:", e);
+    // En caso de error, mantener gráficas actuales o limpiar
+  }
+};
+
+// NUEVO: Función para construir gráficas desde datos
+const buildChartsFromData = (payload) => {
+  const { porTipo, porGenero, porEdad } = normalizeResponse(payload);
+
+  buildTipoChart(porTipo);
+  buildGeneroChart(porGenero);
+  buildEdadChart(porEdad);
+};
+
+// FUNCIÓN CORREGIDA: normalizar respuesta
+const normalizeResponse = (res) => {
+  const main = res?.data ?? {};
+  const counts = res?.counts ?? {};
+  const countsData = counts?.data_ac ?? counts?.data ?? {};
+
+  const porTipo = main?.por_tipo_apoyo ?? {};
+  const porGenero = main?.por_genero ?? {};
+  const porEdad = main?.por_rango_edad ?? {};
+
+  const totalsShape = {
+    today: countsData?.today ?? countsData?.dia ?? 0,
+    week: countsData?.week ?? countsData?.semana ?? 0,
+    month: countsData?.month ?? countsData?.mes ?? 0,
+  };
+
+  return {
+    porGenero,
+    porEdad,
+    porTipo,
+    totalsShape,
+  };
+};
+
+const load = async () => {
+  const cacheKey = getCacheKey();
+
+  // Verificar cache primero
+  if (cache.has(cacheKey)) {
+    const cachedData = cache.get(cacheKey);
+    applyDataToComponents(cachedData);
+    return;
+  }
+
+  loading.value = true;
+  error.value = null;
+
+  // Cancelar petición anterior
+  if (cancelTokenSource) {
+    cancelTokenSource.cancel("cancel");
+  }
+  cancelTokenSource = axios.CancelToken.source();
+
+  try {
+    const params = {
+      period: selectedPeriod.value,
+      // NO incluir fechas personalizadas aquí
+    };
+
+    const res = await axios.get("/api/reporte-atencion", {
+      params,
+      timeout: 10000,
+      cancelToken: cancelTokenSource.token,
+      headers: { "X-Requested-With": "XMLHttpRequest" },
+    });
+
+    const payload = res.data || {};
+
+    // Guardar en cache
+    cache.set(cacheKey, payload);
+
+    // Aplicar datos (SIN gráficas)
+    applyDataToComponents(payload, false);
+  } catch (e) {
+    if (!axios.isCancel(e)) {
+      console.error("Error en la petición:", e);
+      error.value =
+        e.response?.data?.error || e.message || "Error al cargar datos";
+      clearComponentData();
+    }
+  } finally {
+    loading.value = false;
+    cancelTokenSource = null;
+  }
+};
+
+const applyDataToComponents = (payload, includeCharts = true) => {
+  const { porTipo, porGenero, porEdad, totalsShape } =
+    normalizeResponse(payload);
+
+  // Actualizar totales
+  totals.value.day = totalsShape?.today ?? 0;
+  totals.value.week = totalsShape?.week ?? 0;
+  totals.value.month = totalsShape?.month ?? 0;
+
+  // Procesar beneficiarios
+  processBeneficiariesAsync(payload);
+
+  // Solo construir gráficas si se solicita (para evitar conflicto con DateRange)
+  if (includeCharts) {
+    buildTipoChart(porTipo);
+    buildGeneroChart(porGenero);
+    buildEdadChart(porEdad);
+  }
+};
+
+const processBeneficiariesAsync = async (payload) => {
+  // Usar setTimeout para no bloquear el hilo principal
+  setTimeout(() => {
+    const dashboardAlmacenData =
+      payload.dashboard?.data ?? payload.dashboard ?? {};
+    const dashboardServicioData =
+      payload.dashboard_servicio?.data ?? payload.dashboard_servicio ?? {};
+
+    const periodKey =
+      selectedPeriod.value === "hoy"
+        ? "hoy"
+        : selectedPeriod.value === "semana"
+        ? "semana"
+        : "mes";
+
+    const beneficiariesAlmacen = dashboardAlmacenData[periodKey] || [];
+    const beneficiariesServicio = dashboardServicioData[periodKey] || [];
+
+    // Combinar y filtrar datos
+    let beneficiariesData = [...beneficiariesAlmacen, ...beneficiariesServicio];
+
+    beneficiariesData = filterBeneficiariesByDepartment(
+      beneficiariesData,
+      selectedDepartment.value
+    );
+
+    beneficiariesData = filterBeneficiariesByType(
+      beneficiariesData,
+      selectedType.value
+    );
+
+    beneficiariesList.value = beneficiariesData;
+    beneficiariesByType.value = groupBeneficiariesByType(beneficiariesData);
+    expandedGroups.value = new Set();
+  }, 0);
+};
+
+const clearComponentData = () => {
+  tipoChart.value = { labels: [], datasets: [] };
+  generoChart.value = { labels: [], datasets: [] };
+  edadChart.value = { labels: [], datasets: [] };
+  totals.value = { day: null, week: null, month: null };
+  beneficiariesList.value = [];
+  beneficiariesByType.value = {};
+};
+
+watch([selectedDepartment, selectedType, selectedPeriod], () => {
+  clearTimeout(debounceId);
+
+  // Limpiar cache cuando cambian los filtros principales
+  if (selectedPeriod.value !== selectedPeriod.value) {
+    cache.clear();
+  }
+
+  // Debounce más corto para mejor UX
+  debounceId = setTimeout(load, 50);
+});
+
+// NUEVO: Watcher para rango de fechas (solo gráficas)
+watch(
+  dateRange,
+  () => {
+    clearTimeout(chartsDebounceId);
+    chartsDebounceId = setTimeout(loadChartsData, 350);
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  // Cargar datos iniciales
+  load();
+  // Cargar gráficas iniciales
+  loadChartsData();
+
+  // Limpiar caches cada 5 minutos
+  setInterval(() => {
+    cache.clear();
+    chartsCache.clear();
+  }, 300000);
+});
+
+const filterBeneficiariesByDepartment = (beneficiaries, departmentId) => {
+  if (!departmentId || departmentId === "" || !Array.isArray(beneficiaries)) {
+    return beneficiaries;
+  }
+
+  // Usar filter nativo que es más rápido
+  return beneficiaries.filter(
+    (item) =>
+      item.department_ek && item.department_ek.toString() === departmentId
+  );
+};
+
+const filterBeneficiariesByType = (beneficiaries, typeFilter) => {
+  if (!typeFilter || typeFilter === "" || !Array.isArray(beneficiaries)) {
+    return beneficiaries;
+  }
+
+  return beneficiaries.filter((item) => {
+    return typeFilter === "almacen"
+      ? item.warehouse_id !== null
+      : item.service_id !== null;
+  });
+};
+
+const groupBeneficiariesByType = (beneficiaries) => {
+  if (!Array.isArray(beneficiaries) || beneficiaries.length === 0) {
+    return {};
+  }
+
+  // Usar reduce que es más eficiente para agrupación
+  return beneficiaries.reduce((grouped, item) => {
+    const typeName =
+      item.warehouse?.name ||
+      item.warehouse?.type_name ||
+      item.service?.name ||
+      "Sin categoría";
+
+    if (!grouped[typeName]) {
+      grouped[typeName] = [];
+    }
+    grouped[typeName].push(item);
+    return grouped;
+  }, {});
+};
+
+const buildTipoChart = (porTipo) => {
+  const labels = Object.keys(porTipo || {});
+  const values = labels.map((k) => Number(porTipo[k] ?? 0));
+
+  tipoChart.value = {
+    labels,
+    datasets: [
+      {
+        label: "Apoyos entregados",
+        data: values,
+        backgroundColor: [
+          "#3b82f6",
+          "#ef4444",
+          "#10b981",
+          "#f59e0b",
+          "#8b5cf6",
+          "#06b6d4",
+          "#84cc16",
+          "#f97316",
+        ],
+      },
+    ],
+  };
+};
+
+const buildGeneroChart = (porGenero) => {
+  const map = {
+    hombres: porGenero?.hombres ?? porGenero?.Hombres ?? porGenero?.Hombre ?? 0,
+    mujeres: porGenero?.mujeres ?? porGenero?.Mujeres ?? porGenero?.Mujer ?? 0,
+  };
+  const labels = ["Hombres", "Mujeres"];
+  const values = [Number(map.hombres || 0), Number(map.mujeres || 0)];
+
+  generoChart.value = {
+    labels,
+    datasets: [
+      {
+        label: "Beneficiarios por género",
+        data: values,
+        backgroundColor: ["#3b82f6", "#fb7185"],
+      },
+    ],
+  };
+};
+
+const buildEdadChart = (porEdad) => {
+  const ORDER = [
+    "0-17",
+    "18-29",
+    "30-39",
+    "40-49",
+    "50-59",
+    "60-69",
+    "70+",
+    "sin_fecha",
+  ];
+  const labels = ORDER.filter((k) =>
+    Object.prototype.hasOwnProperty.call(porEdad || {}, k)
+  );
+  const finalLabels = labels.length ? labels : Object.keys(porEdad || {});
+  const values = finalLabels.map((k) => Number(porEdad[k] ?? 0));
+  const color = "#10B981";
+
+  edadChart.value = {
+    labels: finalLabels,
+    datasets: [
+      {
+        label: "Beneficiarios por rango de edad",
+        data: values,
+        borderColor: color,
+        backgroundColor: "rgba(16,185,129,0.12)",
+        fill: true,
+        tension: 0.3,
+        pointRadius: 3,
+      },
+    ],
+  };
+};
+
+const openExportModal = () => {
+  showExportModal.value = true;
+};
+
+const closeExportModal = () => {
+  showExportModal.value = false;
+};
+
+// Watchers para recargar datos cuando cambien los filtros
+watch([selectedDepartment, selectedType, selectedPeriod], () => {
+  clearTimeout(debounceId);
+  debounceId = setTimeout(load, 100);
+});
+
+onMounted(load);
+</script>
+
+<template>
+  <AppLayout>
+    <div class="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      <header class="relative">
+        <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
+          <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-bold text-gray-800 tracking-wide"
+                >COMALCALCO.GOB.MX</span
+              >
+            </div>
+          </div>
+        </div>
+
+        <div
+          style="
+            background: linear-gradient(
+              135deg,
+              #621132 0%,
+              #7d1a42 50%,
+              #621132 100%
+            );
+          "
+          class="shadow-xl relative overflow-hidden"
+        >
+          <!-- Patrón decorativo de fondo -->
+          <div class="absolute inset-0 opacity-10">
+            <div
+              class="absolute top-0 left-0 w-full h-full"
+              style="
+                background-image: repeating-linear-gradient(
+                  45deg,
+                  transparent,
+                  transparent 35px,
+                  rgba(255, 255, 255, 0.1) 35px,
+                  rgba(255, 255, 255, 0.1) 70px
+                );
+              "
+            ></div>
+          </div>
+
+          <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+            <div class="flex items-center justify-between h-32">
+              <div class="flex items-center space-x-4">
+                <img
+                  src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+                  alt="Logo Comalcalco"
+                  class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
+                />
+                <div class="hidden md:block">
+                  <h1 class="text-2xl font-bold text-white">
+                    Dashboard de Beneficiarios
+                  </h1>
+                  <p class="text-blue-100 text-sm">
+                    Sistema de seguimiento de apoyos
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <!-- Filtros para Lista de Beneficiarios -->
+        <div
+          class="mb-8 bg-white rounded-xl shadow-sm border border-gray-100 p-6"
+        >
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-semibold text-gray-900">
+              Filtros de Lista
+            </h2>
+            <button
+              @click="openExportModal"
+              class="inline-flex items-center px-4 py-2 bg-green-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-300 disabled:opacity-25 transition ease-in-out duration-150"
+            >
+              <svg
+                class="w-4 h-4 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                ></path>
+              </svg>
+              Exportar Excel
+            </button>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <!-- Departamento -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-2"
+                >Departamento</label
+              >
+              <select
+                v-model="selectedDepartment"
+                class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+              >
+                <option
+                  v-for="dept in departmentOptions"
+                  :key="dept.id"
+                  :value="dept.id"
+                >
+                  {{ dept.name }}
+                </option>
+              </select>
+            </div>
+
+            <!-- Tipo de Apoyo -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-2"
+                >Tipo de Apoyo</label
+              >
+              <select
+                v-model="selectedType"
+                class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+              >
+                <option
+                  v-for="type in typeOptions"
+                  :key="type.id"
+                  :value="type.id"
+                >
+                  {{ type.name }}
+                </option>
+              </select>
+            </div>
+
+            <!-- Período -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-2"
+                >Período</label
+              >
+              <select
+                v-model="selectedPeriod"
+                class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+              >
+                <option
+                  v-for="period in periodOptions"
+                  :key="period.id"
+                  :value="period.id"
+                >
+                  {{ period.name }}
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <div class="flex items-center space-x-4 mt-4">
+            <div v-if="error" class="flex items-center text-red-600">
+              <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+              <span class="text-sm font-medium">{{ error }}</span>
+            </div>
+
+            <div class="flex items-center text-gray-500 text-xs">
+              <span>
+                Departamento: {{ selectedDepartment || "Todos" }} | Tipo:
+                {{ selectedType || "Todos" }} | Período: {{ selectedPeriod }} |
+                Beneficiarios: {{ beneficiariesList.length }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards de estadísticas -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
+          <!-- Card: Entregados Hoy -->
+          <div class="bg-slate-500 rounded-lg shadow-lg p-6 text-white">
+            <div class="flex items-center justify-between">
+              <div>
+                <h3 class="text-sm font-semibold opacity-90">Entregados Hoy</h3>
+                <p class="text-3xl font-bold">{{ totals.day ?? "0" }}</p>
+              </div>
+              <div class="bg-white/20 rounded-full p-3">
+                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path
+                    fill-rule="evenodd"
+                    d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Card: Esta Semana -->
+          <div class="bg-green-500 rounded-lg shadow-lg p-6 text-white">
+            <div class="flex items-center justify-between">
+              <div>
+                <h3 class="text-sm font-semibold opacity-90">Esta Semana</h3>
+                <p class="text-3xl font-bold">{{ totals.week ?? "0" }}</p>
+              </div>
+              <div class="bg-white/20 rounded-full p-3">
+                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path
+                    fill-rule="evenodd"
+                    d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lista de Beneficiarios -->
+        <div
+          class="mb-8 bg-white rounded-xl shadow-sm border border-gray-100 p-6"
+        >
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">
+            <svg
+              class="w-5 h-5 inline-block mr-2 text-blue-600"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Entregados
+            {{
+              selectedPeriod === "hoy"
+                ? "Hoy"
+                : selectedPeriod === "semana"
+                ? "Esta Semana"
+                : "Este Mes"
+            }}
+            ({{ beneficiariesList.length }})
+          </h2>
+
+          <!-- Lista agrupada por tipo -->
+          <div
+            v-if="Object.keys(beneficiariesByType).length > 0"
+            class="space-y-6"
+          >
+            <div
+              v-for="(items, typeName) in beneficiariesByType"
+              :key="typeName"
+              class="border rounded-lg overflow-hidden"
+            >
+              <!-- header clicable -->
+              <div
+                class="bg-gray-50 px-4 py-3 border-b border-gray-200 cursor-pointer"
+                @click="toggleGroup(typeName)"
+              >
+                <div class="flex items-center justify-between">
+                  <h3
+                    class="flex items-center text-md font-semibold text-gray-900"
+                  >
+                    <svg
+                      class="w-4 h-4 mr-2 text-gray-600"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
+                      />
+                    </svg>
+                    {{ typeName }}
+                  </h3>
+                  <span
+                    class="text-sm font-medium text-gray-600 bg-white px-3 py-1 rounded-full"
+                  >
+                    {{ items.length }}
+                  </span>
+                </div>
+              </div>
+
+              <div
+                v-show="expandedGroups.has(typeName)"
+                class="divide-y divide-gray-100"
+              >
+                <div
+                  v-for="item in items"
+                  :key="item.id"
+                  class="p-4 hover:bg-gray-50 transition-colors"
+                >
+                  <div class="flex items-start justify-between">
+                    <div class="flex-1">
+                      <div class="flex items-center space-x-3 mb-2">
+                        <svg
+                          class="w-4 h-4 text-gray-400"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                            clip-rule="evenodd"
+                          />
+                        </svg>
+                        <h4 class="font-semibold text-gray-900">
+                          {{ item.citizen?.name }} {{ item.citizen?.paternal }}
+                          {{ item.citizen?.maternal }}
+                        </h4>
+                        <span
+                          class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full"
+                        >
+                          {{
+                            item.created_at
+                              ? new Date(item.created_at).toLocaleDateString()
+                              : "Sin fecha"
+                          }}
+                        </span>
+                        <!-- BADGE DEL DEPARTAMENTO -->
+                        <span
+                          class="text-xs px-2 py-1 rounded-full"
+                          :class="
+                            item.department_ek === 1
+                              ? 'bg-purple-100 text-purple-800'
+                              : 'bg-green-100 text-green-800'
+                          "
+                        >
+                          {{
+                            item.department_ek === 1
+                              ? "Atención Ciudadana"
+                              : "DIF"
+                          }}
+                        </span>
+                      </div>
+
+                      <div
+                        class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600"
+                      >
+                        <div>
+                          <p>
+                            <span class="font-medium">CURP:</span>
+                            {{ item.citizen?.curp || "N/A" }}
+                          </p>
+                          <p>
+                            <span class="font-medium">Dirección:</span>
+                            {{ item.citizen?.address || "N/A" }}
+                          </p>
+                          <p v-if="item.citizen?.locality">
+                            <span class="font-medium">Localidad:</span>
+                            {{ item.citizen.locality }}
+                          </p>
+                        </div>
+                        <div>
+                          <p>
+                            <span class="font-medium">Apoyo:</span>
+                            {{
+                              item.warehouse?.name ||
+                              item.service?.name ||
+                              "N/A"
+                            }}
+                          </p>
+                          <p v-if="item.quantity">
+                            <span class="font-medium">Cantidad:</span>
+                            {{ item.quantity }}
+                          </p>
+                          <p v-if="item.deceased_name">
+                            <span class="font-medium">Fallecido:</span>
+                            {{ item.deceased_name }}
+                          </p>
+                          <p v-if="item.requester_name">
+                            <span class="font-medium">Solicitante:</span>
+                            {{ item.requester_name }}
+                          </p>
+                        </div>
+                      </div>
+
+                      <div v-if="item.observations" class="mt-2">
+                        <p class="text-sm text-gray-600">
+                          <span class="font-medium">Observaciones:</span>
+                          {{ item.observations }}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Mensaje cuando no hay datos -->
+          <div v-else-if="!loading" class="text-center py-12">
+            <svg
+              class="w-12 h-12 text-gray-400 mx-auto mb-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+              />
+            </svg>
+            <p class="text-gray-500 text-lg">No hay registros para mostrar</p>
+            <p class="text-gray-400 text-sm">
+              Ajusta los filtros para ver los beneficiarios
+            </p>
+          </div>
+        </div>
+
+        <!-- NUEVA SECCIÓN: Filtros para Gráficas -->
+        <div
+          class="mb-8 bg-white rounded-xl shadow-sm border border-gray-100 p-6"
+        >
+          <div class="flex items-center justify-between mb-4">
+            <div>
+              <h2 class="text-lg font-semibold text-gray-900">
+                Filtros de Gráficas
+              </h2>
+              <p class="text-sm text-gray-600">
+                Selecciona el rango de fechas para análisis gráfico
+              </p>
+            </div>
+          </div>
+
+          <!-- DateRange Component -->
+          <DateRange
+            v-model="dateRange"
+            :presets="true"
+            title-start="Fecha inicio"
+            title-end="Fecha fin"
+            class="mb-4"
+          />
+
+          <div class="flex items-center text-gray-500 text-xs">
+            <span>
+              Rango de gráficas: {{ dateRange.start }} a {{ dateRange.end }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Contenedor de gráficas mejorado -->
+        <div class="max-w-7xl mx-auto">
+          <!-- Gráfica principal -->
+          <div
+            class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 mb-8 transition-all duration-300 hover:shadow-2xl"
+          >
+            <div class="text-center mb-8">
+              <div
+                class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl mb-4 shadow-lg"
+              >
+                <svg
+                  class="w-8 h-8 text-white"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
+                  />
+                </svg>
+              </div>
+              <h2 class="text-2xl font-bold text-gray-900 mb-2">
+                Distribución por Tipo de Apoyo
+              </h2>
+              <p class="text-gray-600">
+                Análisis detallado de los tipos de apoyos otorgados
+              </p>
+              <p class="text-sm text-gray-500 mt-2">
+                Período: {{ dateRange.start }} - {{ dateRange.end }}
+              </p>
+            </div>
+            <div class="h-96">
+              <Bars :chartData="tipoChart" :chartOptions="chartOptions" />
+            </div>
+          </div>
+
+          <!-- Gráficas secundarias -->
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div
+              class="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 transition-all duration-300 hover:shadow-2xl"
+            >
+              <div class="text-center mb-6">
+                <div
+                  class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-pink-500 to-rose-600 rounded-xl mb-4 shadow-lg"
+                >
+                  <svg
+                    class="w-6 h-6 text-white"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <h3 class="text-lg font-bold text-gray-900 mb-1">
+                  Distribución por Género
+                </h3>
+                <p class="text-sm text-gray-600">Beneficiarios por género</p>
+              </div>
+              <div>
+                <Pie
+                  :chartData="generoChart"
+                  :chartOptions="{
+                    responsive: true,
+                    maintainAspectRatio: false,
+                  }"
+                />
+              </div>
+            </div>
+
+            <div
+              class="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 transition-all duration-300 hover:shadow-2xl"
+            >
+              <div class="text-center mb-6">
+                <div
+                  class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-emerald-500 to-teal-600 rounded-xl mb-4 shadow-lg"
+                >
+                  <svg
+                    class="w-6 h-6 text-white"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <h3 class="text-lg font-bold text-gray-900 mb-1">
+                  Distribución por Edad
+                </h3>
+                <p class="text-sm text-gray-600">
+                  Beneficiarios por rango etario
+                </p>
+              </div>
+              <div class="h-64">
+                <Lines
+                  :chartData="edadChart"
+                  :chartOptions="{
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { position: 'bottom' } },
+                  }"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <ExportModal :show="showExportModal" @close="closeExportModal" />
+      <Footer />
+    </div>
+  </AppLayout>
+</template>
diff --git a/resources/js/Pages/App/Obras.vue b/resources/js/Pages/App/Obras.vue
new file mode 100644
index 0000000..f8df742
--- /dev/null
+++ b/resources/js/Pages/App/Obras.vue
@@ -0,0 +1,1373 @@
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+
+import ObrasMap from "@/Components/Dashboard/Maps.vue";
+import Footer from "@/Components/Dashboard/Footer.vue";
+import axios from "axios";
+import AppLayout from "@/Layouts/AppLayout.vue";
+
+const loading = ref(false);
+
+// Planeaciones
+const planeaciones = ref([]);
+const planeacionesCount = ref(0);
+const planeacionesError = ref(false);
+const planeacionesErrorMessage = ref("");
+
+// Estimaciones
+const estimaciones = ref([]);
+const estimacionesGrouped = reactive({});
+const estimacionesGroupedKeys = ref([]);
+const estimacionesCount = ref(0);
+const estimacionesError = ref(false);
+const estimacionesErrorMessage = ref("");
+
+//Contadores
+const counters = reactive({
+  sin_avances: { count: 0, detalles: [] },
+  finalizadas: { count: 0, detalles: [] },
+  abiertas: { count: 0, detalles: [] },
+});
+
+//Users
+const users = ref([]);
+const usersStats = reactive({
+  total_supervisores: 0,
+  supervisores_con_acciones: 0,
+  ultima_accion_estimacion: 0,
+  ultima_action_evidencia: 0,
+  sin_acciones: 0,
+});
+
+// Últimas actualizaciones
+const lastPlaneacion = ref(null);
+const lastEstimacion = ref(null);
+
+// UI
+const activeTab = ref("proyectos");
+const expandedProjects = ref(new Set());
+
+let cancelTokenSource = null;
+
+/**
+ * Carga datos (sin manejo de rango de fechas)
+ */
+const loadDashboardData = async () => {
+  loading.value = true;
+  planeacionesError.value = estimacionesError.value = false;
+  planeacionesErrorMessage.value = estimacionesErrorMessage.value = "";
+
+  // cancelar petición previa
+  if (cancelTokenSource) {
+    try {
+      cancelTokenSource.cancel("cancel");
+    } catch (e) {}
+  }
+  cancelTokenSource = axios.CancelToken.source();
+
+  try {
+    const res = await axios.get("/api/reporte-obras", {
+      cancelToken: cancelTokenSource.token,
+      headers: { "X-Requested-With": "XMLHttpRequest" },
+    });
+
+    const data = res.data;
+    if (!data || !data.success) {
+      planeacionesError.value = estimacionesError.value = true;
+      const msg = data?.error || "Error desconocido";
+      planeacionesErrorMessage.value = estimacionesErrorMessage.value = msg;
+      return;
+    }
+
+    // Planeaciones: normalizar campos
+    if (data.planeacions) {
+      planeacionesCount.value = data.planeacions.count || 0;
+      const rawPlaneaciones = Array.isArray(data.planeacions.data)
+        ? data.planeacions.data
+        : [];
+      planeaciones.value = rawPlaneaciones.map((item) => ({
+        id: item.ID ?? item.id ?? null,
+        num_proyecto: item.num_proyecto ?? item.numProyecto ?? null,
+        proyecto: item.proyecto ?? null,
+        cumplimiento_total:
+          item.cumplimiento_total ?? item.cumplimiento ?? null,
+      }));
+      const lastP =
+        data.planeacions.lastUpdate ?? data.planeacions.last_update ?? null;
+      lastPlaneacion.value = lastP && (lastP.id ?? lastP.ID) ? lastP : null;
+    }
+
+    // Estimaciones: normalizar y agrupar por proyecto_id
+    if (data.estimacions) {
+      estimacionesCount.value = data.estimacions.count || 0;
+      const rawEstimaciones = Array.isArray(data.estimacions.data)
+        ? data.estimacions.data
+        : [];
+      estimaciones.value = rawEstimaciones.map((item) => ({
+        id: item.id ?? item.ID ?? null,
+        num_estimacion: item.num_estimacion ?? item.numEstimacion ?? null,
+        fecha_estimacion: item.fecha_estimacion ?? item.fechaEstimacion ?? null,
+        periodo_estimacion: item.periodo_estimacion ?? null,
+        monto_estimacion: item.monto_estimacion ?? item.montoEstimacion ?? "0",
+        monto_acumulado: item.monto_acumulado ?? item.montoAcumulado ?? "0",
+        status: item.status ?? null,
+        created_at: item.created_at ?? item.createdAt ?? null,
+        proyecto_id: String(
+          item.proyecto_id ?? item.proyectoId ?? "sin_proyecto"
+        ),
+        num_proyecto: item.num_proyecto ?? item.numProyecto ?? null,
+        proyecto: item.proyecto ?? null,
+      }));
+
+      // Agrupar
+      Object.keys(estimacionesGrouped).forEach(
+        (k) => delete estimacionesGrouped[k]
+      );
+      estimaciones.value.forEach((est) => {
+        const proyectoId = est.proyecto_id || "sin_proyecto";
+        if (!estimacionesGrouped[proyectoId]) {
+          estimacionesGrouped[proyectoId] = {
+            proyecto: {
+              num_proyecto: est.num_proyecto,
+              proyecto: est.proyecto,
+            },
+            estimaciones: [],
+          };
+        }
+        estimacionesGrouped[proyectoId].estimaciones.push(est);
+      });
+      estimacionesGroupedKeys.value = Object.keys(estimacionesGrouped);
+
+      // inicializar proyectos expandidos (todos abiertos por defecto)
+      expandedProjects.value = new Set(estimacionesGroupedKeys.value);
+
+      const lastE =
+        data.estimacions.lastUpdate ?? data.estimacions.last_update ?? null;
+      lastEstimacion.value = lastE && (lastE.id ?? lastE.ID) ? lastE : null;
+    }
+
+    // NUEVO: Procesar datos de contadores del segundo endpoint
+    if (data.counters) {
+      // Actualizar contadores sin avances
+      if (data.counters.sin_avances) {
+        counters.sin_avances.count = data.counters.sin_avances.count || 0;
+        counters.sin_avances.detalles = Array.isArray(
+          data.counters.sin_avances.detalles
+        )
+          ? data.counters.sin_avances.detalles.map((item) => ({
+              id: item.ID ?? item.id ?? null,
+              num_proyecto: item.num_proyecto ?? null,
+              direccion_obra: item.direccion_obra ?? null,
+              cumplimiento_total: item.cumplimiento_total ?? null,
+            }))
+          : [];
+      }
+
+      // Agregar contadores finalizadas
+      if (data.counters.finalizadas) {
+        counters.finalizadas = {
+          count: data.counters.finalizadas.count || 0,
+          detalles: Array.isArray(data.counters.finalizadas.detalles)
+            ? data.counters.finalizadas.detalles.map((item) => ({
+                id: item.ID ?? item.id ?? null,
+                num_proyecto: item.num_proyecto ?? null,
+                direccion_obra: item.direccion_obra ?? null,
+                cumplimiento_total: item.cumplimiento_total ?? null,
+              }))
+            : [],
+        };
+      }
+
+      // Agregar contadores abiertas
+      if (data.counters.abiertas) {
+        counters.abiertas = {
+          count: data.counters.abiertas.count || 0,
+          detalles: Array.isArray(data.counters.abiertas.detalles)
+            ? data.counters.abiertas.detalles.map((item) => ({
+                id: item.ID ?? item.id ?? null,
+                num_proyecto: item.num_proyecto ?? null,
+                direccion_obra: item.direccion_obra ?? null,
+                cumplimiento_total: item.cumplimiento_total ?? null,
+              }))
+            : [],
+        };
+      }
+    }
+
+    if (data.users && data.users.success) {
+      if (Array.isArray(data.users.supervisores)) {
+        users.value = data.users.supervisores.map((user) => ({
+          id: user.supervisor_id ?? null,
+          nombre: user.supervisor_nombre ?? "Sin nombre",
+          correo: user.supervisor_correo ?? "Sin correo",
+          ultima_accion: user.supervisor_ultima_accion ?? "Sin acción reciente",
+          fecha_accion: user.fecha_accion ?? null,
+          detalle_accion: user.detalle_accion ?? null,
+          proyecto_info: user.proyecto_info ?? null,
+        }));
+      }
+      if (data.users.estadisticas) {
+        usersStats.total_supervisores =
+          data.users.estadisticas.total_supervisores || 0;
+        usersStats.supervisores_con_acciones =
+          data.users.estadisticas.supervisores_con_acciones || 0;
+        usersStats.ultima_accion_estimacion =
+          data.users.estadisticas.ultima_accion_estimacion || 0;
+        usersStats.ultima_accion_evidencia =
+          data.users.estadisticas.ultima_accion_evidencia || 0;
+        usersStats.sin_acciones = data.users.estadisticas.sin_acciones || 0;
+      }
+    }
+  } catch (err) {
+    console.error(err);
+    if (axios.isCancel && axios.isCancel(err)) return;
+    planeacionesError.value = estimacionesError.value = true;
+    planeacionesErrorMessage.value = estimacionesErrorMessage.value =
+      "Error de conexión con el servidor";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const toggleProyecto = (id) => {
+  const key = String(id);
+  if (expandedProjects.value.has(key)) expandedProjects.value.delete(key);
+  else expandedProjects.value.add(key);
+  expandedProjects.value = new Set(Array.from(expandedProjects.value));
+};
+
+const selectTab = (tab) => {
+  activeTab.value = tab;
+};
+
+const badgeClass = (tab) => {
+  if (tab === "proyectos")
+    return activeTab.value === "proyectos"
+      ? "bg-blue-100 text-blue-800"
+      : "bg-gray-100 text-gray-800";
+  return activeTab.value === "estimaciones"
+    ? "bg-green-100 text-green-800"
+    : "bg-gray-100 text-gray-800";
+};
+
+const formatMoney = (amount) => {
+  return new Intl.NumberFormat("es-MX", {
+    style: "currency",
+    currency: "MXN",
+    minimumFractionDigits: 2,
+  }).format(Number(amount) || 0);
+};
+const formatDate = (s) => {
+  if (!s) return "--";
+  return new Date(s).toLocaleDateString("es-ES", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+};
+const formatDateTime = (s) => {
+  if (!s) return "--";
+  return new Date(s).toLocaleString("es-ES", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+const formatPercent = (v) => (Number(v) || 0).toFixed(1) + "%";
+const percentColor = (v) =>
+  Number(v) >= 80 ? "#16a34a" : Number(v) >= 50 ? "#f59e0b" : "#ef4444";
+const percentColorClass = (v) =>
+  Number(v) >= 80
+    ? "text-green-600"
+    : Number(v) >= 50
+    ? "text-yellow-600"
+    : "text-red-600";
+
+onMounted(() => {
+  loadDashboardData();
+  activeTab.value = "proyectos";
+});
+</script>
+<template>
+  <AppLayout>
+    <div class="min-h-screen bg-gray-50">
+      <!-- Header -->
+      <header class="relative">
+        <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
+          <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-bold text-gray-800 tracking-wide"
+                >COMALCALCO.GOB.MX</span
+              >
+            </div>
+          </div>
+        </div>
+
+        <div
+          style="
+            background: linear-gradient(
+              135deg,
+              #621132 0%,
+              #7d1a42 50%,
+              #621132 100%
+            );
+          "
+          class="shadow-xl relative overflow-hidden"
+        >
+          <!-- Patrón decorativo de fondo -->
+          <div class="absolute inset-0 opacity-10">
+            <div
+              class="absolute top-0 left-0 w-full h-full"
+              style="
+                background-image: repeating-linear-gradient(
+                  45deg,
+                  transparent,
+                  transparent 35px,
+                  rgba(255, 255, 255, 0.1) 35px,
+                  rgba(255, 255, 255, 0.1) 70px
+                );
+              "
+            ></div>
+          </div>
+
+          <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+            <div class="flex items-center justify-between h-32">
+              <div class="flex items-center space-x-4">
+                <img
+                  src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+                  alt="Logo Comalcalco"
+                  class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
+                />
+                <div class="hidden md:block">
+                  <h1 class="text-2xl font-bold text-white">
+                    Información de Obras
+                  </h1>
+                  <p class="text-blue-100 text-sm">
+                    Sistema de seguimiento de obras
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <!-- Stats Cards Grid -->
+        <div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div
+            class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg p-6 text-white"
+          >
+            <div class="flex items-center justify-between">
+              <div>
+                <h2 class="text-lg font-medium opacity-90">
+                  Total de Proyectos
+                </h2>
+                <p class="text-blue-100 text-sm mt-1">
+                  Proyectos en seguimiento
+                </p>
+              </div>
+              <div
+                class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
+              >
+                <span class="text-2xl font-bold text-blue-600">{{
+                  planeacionesCount
+                }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div
+            class="bg-gradient-to-r from-green-600 to-emerald-700 rounded-lg shadow-lg p-6 text-white"
+          >
+            <div class="flex items-center justify-between">
+              <div>
+                <h2 class="text-lg font-medium opacity-90">
+                  Total de Estimaciones
+                </h2>
+                <p class="text-green-100 text-sm mt-1">
+                  Estimaciones registradas
+                </p>
+              </div>
+              <div
+                class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
+              >
+                <span class="text-2xl font-bold text-green-600">{{
+                  estimacionesCount
+                }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Last Updates Grid -->
+        <div class="mb-8 grid grid-cols-1 xl:grid-cols-2 gap-6">
+          <!-- Last Planeación Update -->
+          <div>
+            <div
+              class="bg-white rounded-lg shadow-lg overflow-hidden border-l-4 border-blue-500"
+            >
+              <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50">
+                <div class="flex items-center space-x-2">
+                  <svg
+                    class="w-5 h-5 text-blue-600"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                    ></path>
+                  </svg>
+                  <h3 class="text-lg font-semibold text-gray-900">
+                    Último Avance de Proyecto
+                  </h3>
+                </div>
+                <p class="text-sm text-gray-600 mt-1">
+                  Registro más reciente de progreso en obra
+                </p>
+              </div>
+
+              <div v-if="!lastPlaneacion" class="px-6 py-8 text-center">
+                <svg
+                  class="mx-auto h-12 w-12 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <h4 class="mt-2 text-sm font-medium text-gray-900">
+                  Sin actualizaciones recientes
+                </h4>
+                <p class="mt-1 text-sm text-gray-500">
+                  No se encontraron registros de avances
+                </p>
+              </div>
+
+              <div v-else class="p-6">
+                <div class="space-y-4">
+                  <div class="flex items-start space-x-3">
+                    <div class="flex-shrink-0">
+                      <div
+                        class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"
+                      >
+                        <svg
+                          class="w-4 h-4 text-blue-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium text-gray-900">
+                        Registrado por
+                      </p>
+                      <p class="text-sm text-gray-600 truncate">
+                        {{ lastPlaneacion.name }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="flex items-start space-x-3">
+                    <div class="flex-shrink-0">
+                      <div
+                        class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center"
+                      >
+                        <svg
+                          class="w-4 h-4 text-purple-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium text-gray-900">Partida</p>
+                      <p class="text-sm text-gray-600">
+                        {{ lastPlaneacion.desc_partida }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="flex items-start space-x-3">
+                    <div class="flex-shrink-0">
+                      <div
+                        class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center"
+                      >
+                        <svg
+                          class="w-4 h-4 text-orange-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium text-gray-900">Concepto</p>
+                      <p class="text-sm text-gray-600">
+                        <span
+                          class="font-mono text-xs bg-gray-100 px-2 py-1 rounded"
+                          >{{ lastPlaneacion.clave }}</span
+                        >
+                        <span class="ml-2">{{
+                          lastPlaneacion.desc_concepto
+                        }}</span>
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="bg-gray-50 rounded-lg p-4">
+                    <div class="flex items-center justify-between mb-2">
+                      <span class="text-sm font-medium text-gray-900"
+                        >Porcentaje de Cumplimiento</span
+                      >
+                      <span
+                        class="text-lg font-bold"
+                        :class="percentColorClass(lastPlaneacion.cumplimiento)"
+                        >{{ formatPercent(lastPlaneacion.cumplimiento) }}</span
+                      >
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2">
+                      <div
+                        class="h-2 rounded-full transition-all duration-300"
+                        :style="{
+                          width:
+                            (Number(lastPlaneacion.cumplimiento) || 0) + '%',
+                          backgroundColor: percentColor(
+                            lastPlaneacion.cumplimiento
+                          ),
+                        }"
+                      ></div>
+                    </div>
+                  </div>
+
+                  <div class="bg-blue-50 rounded-lg p-4">
+                    <div class="flex items-center space-x-2 mb-2">
+                      <svg
+                        class="w-4 h-4 text-blue-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.959 8.959 0 01-4.906-1.459L3 21l1.459-5.094A8.959 8.959 0 013 12c0-4.418 3.582-8 8-8s8 3.582 8 8z"
+                        />
+                      </svg>
+                      <span class="text-sm font-medium text-gray-900"
+                        >Descripción del Avance</span
+                      >
+                    </div>
+                    <p class="text-sm text-gray-600 leading-relaxed">
+                      {{ lastPlaneacion.desc_evidencia }}
+                    </p>
+                  </div>
+
+                  <div
+                    class="flex items-center space-x-4 text-xs text-gray-500"
+                  >
+                    <div class="flex items-center space-x-1">
+                      <svg
+                        class="w-3 h-3"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        />
+                      </svg>
+                      <span
+                        >Fecha:
+                        {{ formatDate(lastPlaneacion.fecha_evidencia) }}</span
+                      >
+                    </div>
+                    <div class="flex items-center space-x-1">
+                      <svg
+                        class="w-3 h-3"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                      </svg>
+                      <span
+                        >Registrado:
+                        {{ formatDateTime(lastPlaneacion.created_at) }}</span
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Last Estimación Update -->
+          <div>
+            <div
+              class="bg-white rounded-lg shadow-lg overflow-hidden border-l-4 border-green-500"
+            >
+              <div
+                class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50"
+              >
+                <div class="flex items-center space-x-2">
+                  <svg
+                    class="w-5 h-5 text-green-600"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+                    />
+                  </svg>
+                  <h3 class="text-lg font-semibold text-gray-900">
+                    Última Estimación Registrada
+                  </h3>
+                </div>
+                <p class="text-sm text-gray-600 mt-1">
+                  Estimación más reciente del proyecto
+                </p>
+              </div>
+
+              <div v-if="!lastEstimacion" class="px-6 py-8 text-center">
+                <svg
+                  class="mx-auto h-12 w-12 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+                  />
+                </svg>
+                <h4 class="mt-2 text-sm font-medium text-gray-900">
+                  Sin estimaciones recientes
+                </h4>
+                <p class="mt-1 text-sm text-gray-500">
+                  No se encontraron registros de estimaciones
+                </p>
+              </div>
+
+              <div v-else class="p-6">
+                <div class="space-y-4">
+                  <div class="flex items-start space-x-3">
+                    <div class="flex-shrink-0">
+                      <div
+                        class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center"
+                      >
+                        <svg
+                          class="w-4 h-4 text-green-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium text-gray-900">
+                        Número de Estimación
+                      </p>
+                      <p class="text-sm text-gray-600 font-mono">
+                        {{ lastEstimacion.num_estimacion }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="flex items-start space-x-3">
+                    <div class="flex-shrink-0">
+                      <div
+                        class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"
+                      >
+                        <svg
+                          class="w-4 h-4 text-blue-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium text-gray-900">Proyecto</p>
+                      <p class="text-sm text-gray-600">
+                        {{
+                          lastEstimacion.num_proyecto
+                            ? `${lastEstimacion.num_proyecto} - ${lastEstimacion.proyecto}`
+                            : lastEstimacion.proyecto
+                        }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="bg-green-50 rounded-lg p-4">
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <div>
+                        <p class="text-sm font-medium text-gray-900">
+                          Monto Estimado
+                        </p>
+                        <p class="text-lg font-bold text-green-600">
+                          {{ formatMoney(lastEstimacion.monto_estimacion) }}
+                        </p>
+                      </div>
+                      <div>
+                        <p class="text-sm font-medium text-gray-900">
+                          Monto Acumulado
+                        </p>
+                        <p class="text-lg font-bold text-green-700">
+                          {{ formatMoney(lastEstimacion.monto_acumulado) }}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div
+                    class="flex items-center space-x-4 text-xs text-gray-500"
+                  >
+                    <div class="flex items-center space-x-1">
+                      <svg
+                        class="w-3 h-3"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        />
+                      </svg>
+                      <span
+                        >Periodo: {{ lastEstimacion.periodo_estimacion }}</span
+                      >
+                    </div>
+                    <div class="flex items-center space-x-1">
+                      <svg
+                        class="w-3 h-3"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                      </svg>
+                      <span
+                        >Registrado:
+                        {{ formatDateTime(lastEstimacion.created_at) }}</span
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Tabbed Interface -->
+        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
+          <div class="border-b border-gray-200">
+            <nav class="flex space-x-8 px-6" aria-label="Tabs">
+              <button
+                @click="selectTab('proyectos')"
+                class="tab-button py-4 px-1 text-sm font-medium whitespace-nowrap"
+              >
+                <svg
+                  class="w-5 h-5 inline-block mr-2 -mt-0.5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                  />
+                </svg>
+                Lista de Proyectos
+                <span
+                  :class="badgeClass('proyectos')"
+                  class="ml-2 px-2.5 py-0.5 rounded-full text-xs font-medium"
+                  >{{ planeacionesCount }}</span
+                >
+              </button>
+
+              <button
+                @click="selectTab('estimaciones')"
+                class="tab-button py-4 px-1 text-sm font-medium whitespace-nowrap"
+              >
+                <svg
+                  class="w-5 h-5 inline-block mr-2 -mt-0.5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+                  />
+                </svg>
+                Lista de Estimaciones
+                <span
+                  :class="badgeClass('estimaciones')"
+                  class="ml-2 px-2.5 py-0.5 rounded-full text-xs font-medium"
+                  >{{ estimacionesCount }}</span
+                >
+              </button>
+            </nav>
+          </div>
+
+          <!-- Proyectos Tab -->
+          <div v-show="activeTab === 'proyectos'" class="tab-content">
+            <div
+              class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200"
+            >
+              <h3 class="text-lg font-medium text-gray-900">
+                Gestión de Proyectos
+              </h3>
+              <p class="text-sm text-gray-600 mt-1">
+                Seguimiento detallado del progreso de cada proyecto
+              </p>
+            </div>
+
+            <div v-if="planeacionesError" class="text-center py-12">
+              <svg
+                class="mx-auto h-12 w-12 text-red-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <h3 class="mt-2 text-sm font-medium text-gray-900">
+                Error al cargar proyectos
+              </h3>
+              <p class="mt-1 text-sm text-gray-500">
+                {{ planeacionesErrorMessage }}
+              </p>
+              <button
+                @click="loadDashboardData"
+                class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
+              >
+                Reintentar
+              </button>
+            </div>
+
+            <div
+              v-else-if="!planeaciones || !planeaciones.length"
+              class="text-center py-12"
+            >
+              <svg
+                class="mx-auto h-12 w-12 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                />
+              </svg>
+              <h3 class="mt-2 text-sm font-medium text-gray-900">
+                No hay proyectos
+              </h3>
+              <p class="mt-1 text-sm text-gray-500">
+                Comenzar agregando un nuevo proyecto.
+              </p>
+            </div>
+
+            <div v-else class="overflow-x-auto">
+              <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32"
+                    >
+                      Número
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Proyecto
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48"
+                    >
+                      Progreso
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr
+                    v-for="(p, idx) in planeaciones"
+                    :key="p.id ?? idx"
+                    class="hover:bg-gray-50 transition-colors"
+                  >
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-mono"
+                    >
+                      {{ p.num_proyecto || "--" }}
+                    </td>
+                    <td class="px-6 py-4 text-sm text-gray-900">
+                      <div class="max-w-md truncate" :title="p.proyecto">
+                        {{ p.proyecto || "--" }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm">
+                      <div class="flex items-center space-x-3">
+                        <div
+                          class="flex-1 bg-gray-200 rounded-full h-2 min-w-[100px]"
+                        >
+                          <div
+                            class="h-2 rounded-full bg-blue-600 transition-all duration-300"
+                            :style="{
+                              width: (Number(p.cumplimiento_total) || 0) + '%',
+                            }"
+                          ></div>
+                        </div>
+                        <span
+                          class="text-sm font-medium text-gray-900 min-w-[60px] text-right"
+                          >{{
+                            (Number(p.cumplimiento_total) || 0).toFixed(1)
+                          }}%</span
+                        >
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- Estimaciones Tab -->
+          <div v-show="activeTab === 'estimaciones'" class="tab-content">
+            <div
+              class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50 border-b border-gray-200"
+            >
+              <h3 class="text-lg font-medium text-gray-900">
+                Gestión de Estimaciones
+              </h3>
+              <p class="text-sm text-gray-600 mt-1">
+                Estimaciones detalladas por proyecto, concepto y partida
+              </p>
+            </div>
+
+            <div v-if="estimacionesError" class="text-center py-12">
+              <svg
+                class="mx-auto h-12 w-12 text-red-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <h3 class="mt-2 text-sm font-medium text-gray-900">
+                Error al cargar estimaciones
+              </h3>
+              <p class="mt-1 text-sm text-gray-500">
+                {{ estimacionesErrorMessage }}
+              </p>
+              <button
+                @click="loadDashboardData"
+                class="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors"
+              >
+                Reintentar
+              </button>
+            </div>
+
+            <div
+              v-else-if="!estimacionesGroupedKeys.length"
+              class="text-center py-12"
+            >
+              <svg
+                class="mx-auto h-12 w-12 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+                />
+              </svg>
+              <h3 class="mt-2 text-sm font-medium text-gray-900">
+                No hay estimaciones
+              </h3>
+              <p class="mt-1 text-sm text-gray-500">
+                Comenzar agregando una nueva estimación.
+              </p>
+            </div>
+
+            <div v-else class="overflow-x-auto">
+              <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-16"
+                    ></th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Proyecto / Estimación
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32"
+                    >
+                      Estimación
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48"
+                    >
+                      Período
+                    </th>
+                    <th
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-40"
+                    >
+                      Monto
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white">
+                  <template
+                    v-for="proyectoId in estimacionesGroupedKeys"
+                    :key="proyectoId"
+                  >
+                    <tr
+                      class="proyecto-row border-b-2 border-gray-100 hover:bg-blue-50 cursor-pointer"
+                      @click="toggleProyecto(proyectoId)"
+                    >
+                      <td class="px-6 py-4 text-center">
+                        <svg
+                          :class="{
+                            'transform rotate-180': expandedProjects.has(
+                              String(proyectoId)
+                            ),
+                          }"
+                          class="w-4 h-4 text-gray-400 transition-transform duration-200"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M19 9l-7 7-7-7"
+                          ></path>
+                        </svg>
+                      </td>
+                      <td class="px-6 py-4">
+                        <div class="font-bold text-gray-900">
+                          {{
+                            estimacionesGrouped[proyectoId].proyecto
+                              .num_proyecto || "--"
+                          }}
+                        </div>
+                        <div class="text-sm text-gray-600 mt-1 leading-tight">
+                          {{
+                            estimacionesGrouped[proyectoId].proyecto.proyecto ||
+                            "--"
+                          }}
+                        </div>
+                      </td>
+                      <td class="px-6 py-4 text-center">
+                        <div class="text-sm font-medium text-gray-700">
+                          {{
+                            estimacionesGrouped[proyectoId].estimaciones.length
+                          }}
+                          Estimación{{
+                            estimacionesGrouped[proyectoId].estimaciones
+                              .length > 1
+                              ? "es"
+                              : ""
+                          }}
+                        </div>
+                      </td>
+                      <td class="px-6 py-4"></td>
+                      <td class="px-6 py-4"></td>
+                    </tr>
+
+                    <tr
+                      v-for="(est, idx) in estimacionesGrouped[proyectoId]
+                        .estimaciones"
+                      :key="`${proyectoId}-${idx}`"
+                      v-show="expandedProjects.has(String(proyectoId))"
+                      class="estimacion-row hover:bg-gray-50 border-b border-gray-100"
+                    >
+                      <td class="px-6 py-3"></td>
+                      <td class="px-6 py-3 pl-12">
+                        <div class="text-sm text-gray-700">{{ idx + 1 }}</div>
+                        <div class="text-xs text-gray-500">
+                          {{ formatDate(est.created_at) }}
+                        </div>
+                      </td>
+                      <td class="px-6 py-3 text-center">
+                        <div class="text-sm font-medium">{{ idx + 1 }}</div>
+                      </td>
+                      <td class="px-6 py-3">
+                        <div class="text-sm font-medium text-gray-900">
+                          {{ (est.periodo_estimacion || "--").toUpperCase() }}
+                        </div>
+                      </td>
+                      <td class="px-6 py-3">
+                        <div class="text-sm font-semibold text-gray-900">
+                          {{ formatMoney(est.monto_estimacion) }}
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div class="bg-white shadow rounded-lg p-6">
+            <h3 class="font-semibold text-lg">Sin avances</h3>
+            <p class="mt-2 text-gray-600">
+              Total:
+              <span class="font-bold text-red-600">{{
+                counters.sin_avances.count
+              }}</span>
+            </p>
+          </div>
+          <div class="bg-white shadow rounded-lg p-6">
+            <h3 class="font-semibold text-lg">Finalizadas</h3>
+            <p class="mt-2 text-gray-600">
+              Total:
+              <span class="font-bold text-red-600">{{
+                counters.finalizadas.count
+              }}</span>
+            </p>
+          </div>
+          <div class="bg-white shadow rounded-lg p-6">
+            <h3 class="font-semibold text-lg">Obras abiertas</h3>
+            <p class="mt-2 text-gray-600">
+              Total:
+              <span class="font-bold text-red-600">{{
+                counters.abiertas.count
+              }}</span>
+            </p>
+          </div>
+        </div>
+        <div class="mb-8">
+          <ObrasMap :counters="counters" />
+        </div>
+
+        <div class="mt-8 bg-white rounded-lg shadow-lg overflow-hidden">
+          <div
+            class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200"
+          >
+            <h3 class="text-lg font-medium text-gray-900">
+              Supervisores y sus Últimas Acciones - Últimos 30 Días
+            </h3>
+            <p class="text-sm text-gray-600 mt-1">
+              Registro de actividad de supervisores en proyectos
+            </p>
+          </div>
+
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    Supervisor
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    Tipo Acción
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    Detalle Acción
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    Fecha
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    Proyecto
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                <tr
+                  v-for="supervisor in users"
+                  :key="supervisor.id"
+                  class="hover:bg-gray-50 transition-colors"
+                >
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="flex-shrink-0 h-10 w-10">
+                        <div
+                          class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center"
+                        >
+                          <span class="text-sm font-medium text-gray-700">
+                            {{
+                              supervisor.nombre
+                                .split(" ")
+                                .map((n) => n.charAt(0))
+                                .join("")
+                                .substring(0, 2)
+                                .toUpperCase()
+                            }}
+                          </span>
+                        </div>
+                      </div>
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">
+                          {{ supervisor.nombre }}
+                        </div>
+                        <div class="text-sm text-gray-500">
+                          {{ supervisor.correo }}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4">
+                    <div
+                      v-if="supervisor.ultima_accion"
+                      class="text-xs text-gray-500 mt-1 max-w-xs truncate"
+                      :title="supervisor.ultima_accion"
+                    >
+                      {{ supervisor.ultima_accion }}
+                    </div>
+                  </td>
+                  <td class="px-6 py-4">
+                    <div class="text-sm text-gray-900">
+                      {{ supervisor.detalle_accion }}
+                    </div>
+                    <div
+                      v-if="supervisor.detalle_accion"
+                      class="text-xs text-gray-500 mt-1 max-w-xs truncate"
+                      :title="supervisor.detalle_accion"
+                    >
+                      {{ supervisor.detalle_accion }}
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {{
+                      supervisor.fecha_accion
+                        ? formatDateTime(supervisor.fecha_accion)
+                        : "--"
+                    }}
+                  </td>
+                  <td class="px-6 py-4">
+                    <div
+                      v-if="supervisor.proyecto_info"
+                      class="text-sm text-gray-900 max-w-xs truncate"
+                      :title="supervisor.proyecto_info"
+                    >
+                      {{ supervisor.proyecto_info }}
+                    </div>
+                    <div v-else class="text-sm text-gray-500">--</div>
+                  </td>
+                </tr>
+
+                <!-- Empty state -->
+                <tr v-if="!users.length">
+                  <td colspan="5" class="px-6 py-8 text-center">
+                    <div class="text-gray-500">
+                      No hay supervisores registrados
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  </AppLayout>
+</template>
diff --git a/resources/js/Pages/App/Tramites.vue b/resources/js/Pages/App/Tramites.vue
new file mode 100644
index 0000000..af110fc
--- /dev/null
+++ b/resources/js/Pages/App/Tramites.vue
@@ -0,0 +1,584 @@
+<script setup>
+import { ref, computed, watch, onMounted } from "vue";
+
+import axios from "axios";
+import Bars from "@/Components/Dashboard/Charts/Bars.vue";
+import Pie from "@/Components/Dashboard/Charts/Pie.vue";
+import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
+import AppLayout from "@/Layouts/AppLayout.vue";
+
+const data = ref(null);
+const loading = ref(true);
+const error = ref(null);
+
+// Rango inicial: Hoy→Hoy (coincide con preset del DateRange)
+const today = new Date().toISOString().slice(0, 10);
+const dateRange = ref({ start: today, end: today });
+
+// toggles
+const showBars = ref(false);
+const showPie = ref(false);
+
+// datasets
+const barChartData = ref({ labels: [], datasets: [] });
+const pieChartData = ref({ labels: [], datasets: [] });
+
+// opciones reutilizables
+const barChartOptions = {
+  responsive: true,
+  makeDataset: (label, values) => ({
+    label,
+    data: values,
+    backgroundColor: "rgba(75,192,192,0.2)",
+    borderColor: "rgba(75,192,192,1)",
+    borderWidth: 1,
+  }),
+  scales: {
+    x: {
+      ticks: {
+        autoSkip: false,
+        maxRotation: 0,
+        minRotation: 0,
+        callback: (_value, index) => {
+          const lab = barChartData.value.labels[index] || "";
+          return lab.split(" ").map((w) => w.toUpperCase());
+        },
+      },
+    },
+  },
+};
+const pieChartOptions = { responsive: true, maintainAspectRatio: false };
+
+// helpers
+const diffDays = (a, b) => {
+  if (!a || !b) return 0;
+  const A = new Date(a + "T00:00:00");
+  const B = new Date(b + "T00:00:00");
+  return Math.max(0, Math.round((B - A) / (1000 * 60 * 60 * 24)));
+};
+
+const mode = computed(() => {
+  const d = diffDays(dateRange.value.start, dateRange.value.end);
+  if (d === 0) return "día";
+  if (d <= 7) return "semana";
+  return "rango";
+});
+
+let cancelTokenSource = null;
+let debounceId = null;
+
+const fetchReport = async ({ start, end }) => {
+  // cancelar petición previa
+  if (cancelTokenSource) {
+    try {
+      cancelTokenSource.cancel("cancel");
+    } catch (e) {}
+  }
+  cancelTokenSource = axios.CancelToken.source();
+
+  const params = {};
+  if (start) params.start = start;
+  if (end) params.end = end;
+
+  const res = await axios.get("/api/reporte-especial", {
+    params,
+    cancelToken: cancelTokenSource.token,
+    headers: { "X-Requested-With": "XMLHttpRequest" },
+  });
+
+  // axios lanza en error si status >= 400, aquí devolvemos data directamente
+  return res.data;
+};
+
+const load = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const payload = await fetchReport({
+      start: dateRange.value.start,
+      end: dateRange.value.end,
+    });
+    data.value = payload;
+    mapToCharts(payload, mode.value);
+  } catch (e) {
+    if (e.name !== "AbortError") {
+      console.error(e);
+      error.value = e.message || "Error desconocido";
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+watch(
+  dateRange,
+  () => {
+    clearTimeout(debounceId);
+    debounceId = setTimeout(load, 350);
+  },
+  { deep: true }
+);
+
+onMounted(load);
+
+// --- mapping charts: usa SIEMPRE el rango ---
+function mapToCharts(api, currentMode) {
+  const list = Array.isArray(api?.movements_by_procedure)
+    ? api.movements_by_procedure
+    : [];
+
+  const labels = list.map((it) => (it.name || "").toUpperCase());
+
+  // Pie: total (opened + closed). Si tu API devuelve valores por rango, puedes sustituir aquí.
+  const pieValues = list.map((it) => (it.opened || 0) + (it.closed || 0));
+  pieChartData.value = {
+    labels,
+    datasets: [
+      {
+        label: "Recaudados",
+        data: pieValues,
+        backgroundColor: labels.map(
+          (_, i) => `hsl(${(i * 360) / Math.max(1, labels.length)}, 70%, 50%)`
+        ),
+      },
+    ],
+  };
+
+  // Bars: dataset según modo
+  let barLabel = "";
+  let barValues = [];
+
+  if (currentMode === "día") {
+    barLabel = "Solicitados Hoy";
+    barValues = list.map(
+      (it) => it.procedures_opened_today ?? it.opened_today ?? 0
+    );
+  } else if (currentMode === "semana") {
+    barLabel = "Solicitados Semana";
+    barValues = list.map((it) => it.total ?? 0);
+  } else {
+    barLabel = "Solicitados en Rango";
+    barValues = list.map((it) => {
+      if (typeof it.range_total === "number") return it.range_total;
+      return (it.opened || 0) + (it.closed || 0);
+    });
+  }
+
+  barChartData.value = {
+    labels,
+    datasets: [barChartOptions.makeDataset(barLabel, barValues)],
+  };
+}
+
+// UI helpers
+const toggleBars = () => (showBars.value = !showBars.value);
+const togglePie = () => (showPie.value = !showPie.value);
+</script>
+
+<template>
+  <AppLayout>
+    <div>
+      <header class="relative">
+        <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
+          <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-bold text-gray-800 tracking-wide"
+                >COMALCALCO.GOB.MX</span
+              >
+            </div>
+          </div>
+        </div>
+
+        <div
+          style="
+            background: linear-gradient(
+              135deg,
+              #621132 0%,
+              #7d1a42 50%,
+              #621132 100%
+            );
+          "
+          class="shadow-xl relative overflow-hidden"
+        >
+          <!-- Patrón decorativo de fondo -->
+          <div class="absolute inset-0 opacity-10">
+            <div
+              class="absolute top-0 left-0 w-full h-full"
+              style="
+                background-image: repeating-linear-gradient(
+                  45deg,
+                  transparent,
+                  transparent 35px,
+                  rgba(255, 255, 255, 0.1) 35px,
+                  rgba(255, 255, 255, 0.1) 70px
+                );
+              "
+            ></div>
+          </div>
+
+          <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+            <div class="flex items-center justify-between h-32">
+              <div class="flex items-center space-x-4">
+                <img
+                  src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+                  alt="Logo Comalcalco"
+                  class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
+                />
+                <div class="hidden md:block">
+                  <h1 class="text-2xl font-bold text-white">
+                    Reporte Especial de Trámites
+                  </h1>
+                  <p class="text-blue-100 text-sm">
+                    Sistema de seguimiento de trámites
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <!-- Loading Overlay -->
+      <div
+        v-if="loading"
+        class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
+      >
+        <div class="text-center">
+          <div class="relative">
+            <div
+              class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"
+            ></div>
+          </div>
+          <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
+        </div>
+      </div>
+      <div v-else>
+        <div class="min-h-screen bg-gray-50 py-8">
+          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <!-- Header -->
+            <div class="mb-8">
+              <div class="flex px-4 sm:px-6 lg:px-8 mb-4 items-center gap-4">
+                <div>
+                  <h1 class="text-3xl font-bold text-gray-900 mb-2">
+                    Reporte Especial de Trámites
+                  </h1>
+                  <p class="text-gray-600">Resumen por unidad administrativa</p>
+                </div>
+
+                <!-- <div class="ml-auto flex items-center gap-3">
+                <button
+                  @click="toggleBars"
+                  class="bg-primary text-white px-4 py-2 rounded"
+                >
+                  Gráfica de Barras
+                </button>
+                <button
+                  @click="togglePie"
+                  class="bg-primary text-white px-4 py-2 rounded"
+                >
+                  Más recaudados
+                </button>
+              </div> -->
+              </div>
+            </div>
+
+            <!-- Estadísticas del día -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+              <div
+                class="bg-white rounded-lg shadow-sm border border-gray-200 p-6"
+              >
+                <div class="flex items-center">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center"
+                    ></div>
+                  </div>
+                  <div class="ml-4">
+                    <p class="text-sm font-medium text-gray-500">
+                      Trámites Abiertos Hoy
+                    </p>
+                    <p class="text-2xl font-bold text-gray-900">
+                      {{
+                        new Intl.NumberFormat().format(
+                          data.procedures_opened_today
+                        )
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                class="bg-white rounded-lg shadow-sm border border-gray-200 p-6"
+              >
+                <div class="flex items-center">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center"
+                    ></div>
+                  </div>
+                  <div class="ml-4">
+                    <p class="text-sm font-medium text-gray-500">
+                      Con Movimientos Hoy
+                    </p>
+                    <p class="text-2xl font-bold text-gray-900">
+                      {{
+                        new Intl.NumberFormat().format(
+                          data.procedures_with_movements_today
+                        )
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Tabla de trámites por administración -->
+            <div
+              class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden w-full"
+            >
+              <div class="px-6 py-4 border-b border-gray-200">
+                <h2 class="text-lg font-semibold text-gray-900">
+                  Trámites por Unidad Administrativa
+                </h2>
+              </div>
+              <div class="overflow-x-auto w-full">
+                <table class="w-full divide-y divide-gray-200">
+                  <thead class="bg-gray-50">
+                    <tr>
+                      <th
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Unidad Administrativa
+                      </th>
+                      <th
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Abiertos
+                      </th>
+                      <th
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Movimientos Hoy
+                      </th>
+                      <th
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Cerrados
+                      </th>
+                      <th
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Total
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody class="bg-white divide-y divide-gray-200">
+                    <tr
+                      v-for="administration in data.procedures_by_administration ||
+                      []"
+                      :key="administration.id"
+                      class="hover:bg-gray-50 transition-colors duration-200"
+                    >
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-medium text-gray-900">
+                          {{ administration.name }}
+                        </div>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span
+                          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+                        >
+                          {{
+                            new Intl.NumberFormat().format(
+                              administration.opened
+                            )
+                          }}
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span
+                          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
+                        >
+                          {{
+                            new Intl.NumberFormat().format(
+                              administration.movement_today
+                            )
+                          }}
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span
+                          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
+                        >
+                          {{
+                            new Intl.NumberFormat().format(
+                              administration.closed
+                            )
+                          }}
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-semibold text-gray-900">
+                          {{
+                            new Intl.NumberFormat().format(
+                              administration.opened + administration.closed
+                            )
+                          }}
+                        </div>
+                      </td>
+                    </tr>
+                    <tr
+                      v-if="
+                        !(
+                          data.procedures_by_administration &&
+                          data.procedures_by_administration.length
+                        )
+                      "
+                    >
+                      <td colspan="5" class="px-6 py-8 text-center">
+                        <div class="text-gray-500">
+                          No hay datos disponibles
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <!-- Tabla de trámites por procedimiento -->
+            <div
+              class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden w-full mt-8"
+            >
+              <div class="px-6 py-4 border-b border-gray-200">
+                <h2 class="text-lg font-semibold text-gray-900">
+                  Trámites por Procedimiento
+                </h2>
+              </div>
+              <div class="overflow-x-auto w-full">
+                <table class="w-full divide-y divide-gray-200">
+                  <thead class="bg-gray-50">
+                    <tr>
+                      <th
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Procedimiento
+                      </th>
+                      <th
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Abiertos
+                      </th>
+                      <th
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Movimientos Hoy
+                      </th>
+                      <th
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Cerrados
+                      </th>
+                      <th
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Total
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody class="bg-white divide-y divide-gray-200">
+                    <tr
+                      v-for="procedure in data.movements_by_procedure || []"
+                      :key="procedure.id"
+                      class="hover:bg-gray-50 transition-colors duration-200"
+                    >
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-medium text-gray-900">
+                          {{ procedure.name }}
+                        </div>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span
+                          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+                        >
+                          {{ new Intl.NumberFormat().format(procedure.opened) }}
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span
+                          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
+                        >
+                          {{
+                            new Intl.NumberFormat().format(
+                              procedure.movement_today
+                            )
+                          }}
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span
+                          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
+                        >
+                          {{ new Intl.NumberFormat().format(procedure.closed) }}
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-semibold text-gray-900">
+                          {{
+                            new Intl.NumberFormat().format(
+                              procedure.opened + procedure.closed
+                            )
+                          }}
+                        </div>
+                      </td>
+                    </tr>
+                    <tr
+                      v-if="
+                        !(
+                          data.movements_by_procedure &&
+                          data.movements_by_procedure.length
+                        )
+                      "
+                    >
+                      <td colspan="5" class="px-6 py-8 text-center">
+                        <div class="text-gray-500">
+                          No hay datos disponibles
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <!-- Bars -->
+            <div
+              v-if="showBars"
+              class="max-w-7xl mx-auto mt-12 px-4 sm:px-6 lg:px-8 mb-8 bg-white rounded-lg shadow p-6"
+            >
+              <!-- DateRange mejorado -->
+              <DateRange v-model="dateRange" :presets="true" class="mb-12" />
+              <Bars :chartData="barChartData" :chartOptions="barChartOptions" />
+              <p class="text-sm text-gray-500 mt-2">Modo actual: {{ mode }}</p>
+            </div>
+
+            <!-- Pie -->
+            <div
+              v-if="showPie"
+              class="max-w-7xl mx-auto mt-8 px-4 sm:px-6 lg:px-8 bg-white rounded-lg shadow p-6"
+            >
+              <Pie :chartData="pieChartData" :chartOptions="pieChartOptions" />
+            </div>
+
+            <div class="mt-8 text-center">
+              <p class="text-sm text-gray-500">
+                Reporte generado el {{ new Date().toLocaleString("es-MX") }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </AppLayout>
+</template>
diff --git a/resources/js/Pages/Dashboard/AtencionCiudadana.vue b/resources/js/Pages/Dashboard/AtencionCiudadana.vue
deleted file mode 100644
index 67879d4..0000000
--- a/resources/js/Pages/Dashboard/AtencionCiudadana.vue
+++ /dev/null
@@ -1,406 +0,0 @@
-<script setup>
-import { ref, watch, onMounted } from "vue";
-
-import axios from "axios";
-import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
-import Bars from "@/Components/Dashboard/Charts/Bars.vue";
-import Pie from "@/Components/Dashboard/Charts/Pie.vue";
-import Lines from "@/Components/Dashboard/Charts/Lines.vue";
-
-const fmtToday = () => new Date().toISOString().slice(0, 10);
-const today = fmtToday();
-
-const dateRange = ref({ start: today, end: today });
-
-const loading = ref(false);
-const error = ref(null);
-let debounceId = null;
-let cancelTokenSource = null;
-
-const totals = ref({ day: null, week: null, month: null });
-
-const tipoChart = ref({ labels: [], datasets: [] });
-const generoChart = ref({ labels: [], datasets: [] });
-const edadChart = ref({ labels: [], datasets: [] });
-const chartOptions = {
-  responsive: true,
-  scales: {
-    x: { beginAtZero: true },
-    y: { beginAtZero: true },
-  },
-};
-
-const normalizeResponse = (res) => {
-  const main = res?.data ?? {};
-  const counts = res?.counts ?? res?.counts_ac ?? [];
-
-  const porTipo =
-    main?.por_tipo_apoyo ??
-    main?.data?.por_tipo_apoyo ??
-    counts?.data?.por_tipo_apoyo ??
-    counts?.por_tipo_apoyo ??
-    {};
-
-  const porGenero =
-    main?.por_genero ??
-    main?.data?.por_genero ??
-    counts?.data?.por_genero ??
-    {};
-  const porEdad =
-    main?.por_rango_edad ??
-    main?.data?.por_rango_edad ??
-    counts?.data?.por_rango_edad ??
-    {};
-  const totalsShape = counts?.data_ac ?? counts?.data ?? counts ?? {};
-  return {
-    porGenero,
-    porEdad,
-    porTipo,
-    totalsShape,
-  };
-};
-
-const buildTipoChart = (porTipo) => {
-  const labels = Object.keys(porTipo || {});
-  const values = labels.map((k) => Number(porTipo[k] ?? 0));
-  tipoChart.value = {
-    labels,
-    datasets: [
-      {
-        label: "Apoyos entregados",
-        data: values,
-        backgroundColor: ["#3b82f6"],
-      },
-    ],
-  };
-};
-
-const buildGeneroChart = (porGenero) => {
-  const map = {
-    hombres: porGenero?.hombres ?? porGenero?.Hombres ?? porGenero?.Hombre ?? 0,
-    mujeres: porGenero?.mujeres ?? porGenero?.Mujeres ?? porGenero?.Mujer ?? 0,
-  };
-  const labels = ["Hombres", "Mujeres"];
-  const values = [Number(map.hombres || 0), Number(map.mujeres || 0)];
-  generoChart.value = {
-    labels,
-    datasets: [
-      {
-        label: "Beneficiarios por género",
-        data: values,
-        backgroundColor: ["#3b82f6", "#fb7185"],
-      },
-    ],
-  };
-};
-
-const buildEdadChart = (porEdad) => {
-  // orden predecible para la X de la gráfica
-  const ORDER = [
-    "0-17",
-    "18-29",
-    "30-39",
-    "40-49",
-    "50-59",
-    "60-69",
-    "70+",
-    "sin_fecha",
-  ];
-  const labels = ORDER.filter((k) =>
-    Object.prototype.hasOwnProperty.call(porEdad || {}, k)
-  );
-  // si no hay claves exactamente como ORDER, fallback a keys actuales
-  const finalLabels = labels.length ? labels : Object.keys(porEdad || {});
-  const values = finalLabels.map((k) => Number(porEdad[k] ?? 0));
-  const color = "#10B981"; // verde
-  edadChart.value = {
-    labels: finalLabels,
-    datasets: [
-      {
-        label: "Beneficiarios por rango de edad",
-        data: values,
-        borderColor: color,
-        backgroundColor: "rgba(16,185,129,0.12)",
-        fill: true,
-        tension: 0.3,
-        pointRadius: 3,
-      },
-    ],
-  };
-};
-
-const load = async () => {
-  loading.value = true;
-  error.value = null;
-
-  if (cancelTokenSource) {
-    try {
-      cancelTokenSource.cancel("cancel");
-    } catch (e) {}
-  }
-  cancelTokenSource = axios.CancelToken.source();
-
-  try {
-    const res = await axios.get("/api/reporte-atencion", {
-      params: { start: dateRange.value.start, end: dateRange.value.end },
-      cancelToken: cancelTokenSource.token,
-      headers: { "X-Requested-With": "XMLHttpRequest" },
-    });
-
-    const payload = res.data || {};
-    const { porTipo, porGenero, porEdad, totalsShape } =
-      normalizeResponse(payload);
-
-    totals.value.day = totalsShape?.today ?? totalsShape?.dia ?? null;
-    totals.value.week = totalsShape?.week ?? totalsShape?.semana ?? null;
-    totals.value.month = totalsShape?.month ?? totalsShape?.mes ?? null;
-
-    buildTipoChart(porTipo);
-    buildGeneroChart(porGenero);
-    buildEdadChart(porEdad);
-  } catch (e) {
-    if (!(axios.isCancel && axios.isCancel(e))) {
-      console.error(e);
-      error.value =
-        e.response?.data?.error || e.message || "Error al cargar datos";
-      tipoChart.value = { labels: [], datasets: [] };
-      generoChart.value = { labels: [], datasets: [] };
-      edadChart.value = { labels: [], datasets: [] };
-      totals.value = { day: null, week: null, month: null };
-    }
-  } finally {
-    loading.value = false;
-  }
-};
-
-watch(
-  dateRange,
-  () => {
-    clearTimeout(debounceId);
-    debounceId = setTimeout(load, 300);
-  },
-  { deep: true }
-);
-
-onMounted(load);
-</script>
-
-<template>
-  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
-    <header class="relative">
-      <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="flex items-center justify-between">
-            <span class="text-sm font-bold text-gray-800 tracking-wide">COMALCALCO.GOB.MX</span>
-          </div>
-        </div>
-      </div>
-
-      <div
-        style="background: linear-gradient(135deg, #621132 0%, #7d1a42 50%, #621132 100%)"
-        class="shadow-xl relative overflow-hidden"
-      >
-        <!-- Patrón decorativo de fondo -->
-        <div class="absolute inset-0 opacity-10">
-          <div class="absolute top-0 left-0 w-full h-full"
-               style="background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);"></div>
-        </div>
-
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
-          <div class="flex items-center justify-between h-32">
-            <div class="flex items-center space-x-4">
-              <img
-                src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
-                alt="Logo Comalcalco"
-                class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
-              />
-              <div class="hidden md:block">
-                <h1 class="text-2xl font-bold text-white">Atención Ciudadana y DIF</h1>
-                <p class="text-blue-100 text-sm">Sistema de seguimiento de apoyos</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-
-    <!-- Loading overlay mejorado -->
-    <div
-      v-if="loading"
-      class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
-    >
-      <div class="text-center">
-        <div class="relative">
-          <div class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"></div>
-        </div>
-        <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
-      </div>
-    </div>
-
-    <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <!-- Controles mejorados -->
-      <div class="mb-8 flex flex-col sm:flex-row items-start sm:items-center gap-4 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
-        <div class="flex-1">
-          <h2 class="text-lg font-semibold text-gray-900 mb-2">Filtros de fecha</h2>
-          <DateRange v-model="dateRange" :presets="true" />
-        </div>
-
-        <div class="flex items-center space-x-4">
-          <div v-if="loading" class="flex items-center text-blue-600">
-            <div class="animate-spin h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full mr-2"></div>
-            <span class="text-sm font-medium">Cargando...</span>
-          </div>
-          <div v-if="error" class="flex items-center text-red-600">
-            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
-            </svg>
-            <span class="text-sm font-medium">{{ error }}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Cards mejoradas -->
-      <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
-        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
-          <div class="p-6 text-white">
-            <div class="flex items-center justify-between">
-              <div>
-                <div class="flex items-center space-x-2 mb-2">
-                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
-                  </svg>
-                  <h3 class="text-sm font-semibold opacity-90">Apoyos del Mes</h3>
-                </div>
-                <p class="text-3xl font-bold">{{ totals.month ?? "--" }}</p>
-                <p class="text-xs text-blue-100 mt-1">Total mensual</p>
-              </div>
-              <div class="bg-white/20 rounded-full p-3">
-                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
-          <div class="p-6 text-white">
-            <div class="flex items-center justify-between">
-              <div>
-                <div class="flex items-center space-x-2 mb-2">
-                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
-                  </svg>
-                  <h3 class="text-sm font-semibold opacity-90">Apoyos Semanales</h3>
-                </div>
-                <p class="text-3xl font-bold">{{ totals.week ?? "--" }}</p>
-                <p class="text-xs text-emerald-100 mt-1">Últimos 7 días</p>
-              </div>
-              <div class="bg-white/20 rounded-full p-3">
-                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
-          <div class="p-6 text-white">
-            <div class="flex items-center justify-between">
-              <div>
-                <div class="flex items-center space-x-2 mb-2">
-                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 12a1 1 0 102 0V9a1 1 0 10-2 0v3zm2-8a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
-                  </svg>
-                  <h3 class="text-sm font-semibold opacity-90">Apoyos de Hoy</h3>
-                </div>
-                <p class="text-3xl font-bold">{{ totals.day ?? "--" }}</p>
-                <p class="text-xs text-amber-100 mt-1">En el día actual</p>
-              </div>
-              <div class="bg-white/20 rounded-full p-3">
-                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 12a1 1 0 102 0V9a1 1 0 10-2 0v3zm2-8a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Contenedor de gráficas mejorado -->
-      <div class="max-w-7xl mx-auto">
-        <!-- Gráfica principal -->
-        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 mb-8 transition-all duration-300 hover:shadow-2xl">
-          <div class="text-center mb-8">
-            <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl mb-4 shadow-lg">
-              <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
-              </svg>
-            </div>
-            <h2 class="text-2xl font-bold text-gray-900 mb-2">Distribución por Tipo de Apoyo</h2>
-            <p class="text-gray-600">Análisis detallado de los tipos de apoyos otorgados</p>
-          </div>
-          <div class="h-96">
-            <Bars :chartData="tipoChart" :chartOptions="chartOptions" />
-          </div>
-        </div>
-
-        <!-- Gráficas secundarias -->
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 transition-all duration-300 hover:shadow-2xl">
-            <div class="text-center mb-6">
-              <div class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-pink-500 to-rose-600 rounded-xl mb-4 shadow-lg">
-                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
-                </svg>
-              </div>
-              <h3 class="text-lg font-bold text-gray-900 mb-1">Distribución por Género</h3>
-              <p class="text-sm text-gray-600">Beneficiarios por género</p>
-            </div>
-            <div>
-              <Pie
-                :chartData="generoChart"
-                :chartOptions="{ responsive: true, maintainAspectRatio: false }"
-              />
-            </div>
-          </div>
-
-          <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 transition-all duration-300 hover:shadow-2xl">
-            <div class="text-center mb-6">
-              <div class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-emerald-500 to-teal-600 rounded-xl mb-4 shadow-lg">
-                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-                </svg>
-              </div>
-              <h3 class="text-lg font-bold text-gray-900 mb-1">Distribución por Edad</h3>
-              <p class="text-sm text-gray-600">Beneficiarios por rango etario</p>
-            </div>
-            <div class="h-64">
-              <Lines
-                :chartData="edadChart"
-                :chartOptions="{
-                  responsive: true,
-                  maintainAspectRatio: false,
-                  plugins: {
-                    legend: {
-                      position: 'bottom'
-                    }
-                  }
-                }"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Footer mejorado -->
-    <footer class="bg-gradient-to-r from-gray-800 to-gray-900 text-white py-8 mt-16">
-      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex flex-col md:flex-row justify-between items-center">
-        </div>
-      </div>
-    </footer>
-  </div>
-</template>
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index bfc6dbd..b92c07d 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -1,173 +1,12 @@
 <script setup>
-import { router } from "@inertiajs/vue3";
-
-import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
-import NotificationController from "@/Controllers/NotificationController";
-
-const notificationCtl = NotificationController;
-
-const logout = () => {
-  router.post(
-    route("logout"),
-    {},
-    {
-      onBefore: () => {
-        notificationCtl.stop();
-      },
-    }
-  );
-};
+import Welcome from '@/Components/Dashboard/Welcome.vue';
+import Layout  from '@/Layouts/DashboardLayout.vue';
 </script>
 
 <template>
-  <div
-    class="min-h-screen font-sans bg-gradient-to-br from-[#621132] via-[#621132] to-[#621132] text-[#621132] antialiased"
-  >
-    <button
-      class="fixed top-4 right-4 z-50 inline-flex items-center bg-white/10 text-white rounded-lg hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30 transition p-2"
-      type="button"
-      @click.prevent="logout"
-    >
-      {{ $t("auth.logout") }}
-    </button>
-    <main class="grid min-h-screen place-items-center p-4">
-      <!-- Tarjeta -->
-      <section
-        class="w-full max-w-2xl rounded-3xl border border-white/10 bg-white/5 p-6 sm:p-8 shadow-2xl backdrop-blur supports-[backdrop-filter]:bg-white/10"
-      >
-        <!-- Encabezado -->
-        <header class="mb-6 sm:mb-8">
-          <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-white">
-            Accesos rápidos
-          </h1>
-          <p class="mt-2 text-sm sm:text-base text-white">
-            Selecciona un destino.
-          </p>
-        </header>
-
-        <!-- Grid de botones -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
-          <!-- Botón 1 -->
-          <a
-            :href="route('dashboard.api-tramite')"
-            target="_blank"
-            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 active:scale-[0.99]"
-            aria-label="Ir al sitio 1"
-          >
-            <div class="flex items-center gap-3">
-              <!-- Ícono externo simple -->
-              <span class="rounded-xl bg-white/10 p-2">
-                <GoogleIcon name="open_in_new" class="text-white" />
-              </span>
-              <div class="min-w-0">
-                <h2 class="font-semibold text-white">
-                  Reporte Especial de Trámites
-                </h2>
-                <p class="text-sm text-slate-300">
-                  Resumen de trámites por unidad administrativa
-                </p>
-              </div>
-            </div>
-            <!-- Efecto -->
-            <span
-              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-              style="
-                background: radial-gradient(
-                  600px circle at var(--x, 50%) var(--y, 50%),
-                  rgba(199, 12, 12, 0.12),
-                  transparent 40%
-                );
-              "
-            ></span>
-          </a>
-
-          <!-- Botón 2 -->
-          <a
-            :href="route('dashboard.api-atencion')"
-            target="_blank"
-            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 active:scale-[0.99]"
-            aria-label="Ir al sitio 2"
-          >
-            <div class="flex items-center gap-3">
-              <span class="rounded-xl bg-white/10 p-2">
-                <GoogleIcon name="open_in_new" class="text-white" />
-              </span>
-              <div class="min-w-0">
-                <h2 class="font-semibold text-white">Apoyo a Beneficiarios y DIF</h2>
-                <p class="text-sm text-slate-300">
-                 Gráficas de apoyo a Beneficiarios y DIF
-                </p>
-              </div>
-            </div>
-            <span
-              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-              style="
-                background: radial-gradient(
-                  600px circle at var(--x, 50%) var(--y, 50%),
-                  rgba(98, 17, 50, 0.12),
-                  transparent 40%
-                );
-              "
-            ></span>
-          </a>
-
-          <!-- Botón 3 -->
-          <a
-            :href="route('dashboard.api-obra')"
-            target="_blank"
-            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400 active:scale-[0.99]"
-            aria-label="Ir al sitio 3"
-          >
-            <div class="flex items-center gap-3">
-              <span class="rounded-xl bg-white/10 p-2">
-                <GoogleIcon name="open_in_new" class="text-white" />
-              </span>
-              <div class="min-w-0">
-                <h2 class="font-semibold text-white">Información de Obras</h2>
-                <p class="text-sm text-slate-300">Proyectos en seguimiento</p>
-              </div>
-            </div>
-            <span
-              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-              style="
-                background: radial-gradient(
-                  600px circle at var(--x, 50%) var(--y, 50%),
-                  rgba(255, 255, 255, 0.12),
-                  transparent 40%
-                );
-              "
-            ></span>
-          </a>
-
-          <!-- Botón 4 -->
-          <a
-            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=&period=week&type=almacen"
-            target="_blank"
-            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 active:scale-[0.99]"
-            aria-label="Ir al sitio 4"
-          >
-            <div class="flex items-center gap-3">
-              <span class="rounded-xl bg-white/10 p-2">
-                <GoogleIcon name="open_in_new" class="text-white" />
-              </span>
-              <div class="min-w-0">
-                <h2 class="font-semibold text-white">Información de Apoyos a Beneficiarios y DIF</h2>
-                <p class="text-sm text-slate-300"></p>
-              </div>
-            </div>
-            <span
-              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-              style="
-                background: radial-gradient(
-                  600px circle at var(--x, 50%) var(--y, 50%),
-                  rgba(255, 255, 255, 0.12),
-                  transparent 40%
-                );
-              "
-            ></span>
-          </a>
+    <Layout title="Dashboard">
+        <div class="py-4">
+            <Welcome />
         </div>
-      </section>
-    </main>
-  </div>
+    </Layout>
 </template>
diff --git a/resources/js/Pages/Dashboard/Obras.vue b/resources/js/Pages/Dashboard/Obras.vue
deleted file mode 100644
index 29f287c..0000000
--- a/resources/js/Pages/Dashboard/Obras.vue
+++ /dev/null
@@ -1,1373 +0,0 @@
-<script setup>
-import { ref, reactive, onMounted } from "vue";
-
-import ObrasMap from "@/Components/Dashboard/Maps.vue";
-import axios from "axios";
-
-const loading = ref(false);
-
-// Planeaciones
-const planeaciones = ref([]);
-const planeacionesCount = ref(0);
-const planeacionesError = ref(false);
-const planeacionesErrorMessage = ref("");
-
-// Estimaciones
-const estimaciones = ref([]);
-const estimacionesGrouped = reactive({});
-const estimacionesGroupedKeys = ref([]);
-const estimacionesCount = ref(0);
-const estimacionesError = ref(false);
-const estimacionesErrorMessage = ref("");
-
-//Contadores
-const counters = reactive({
-  sin_avances: { count: 0, detalles: [] },
-  finalizadas: { count: 0, detalles: [] },
-  abiertas: { count: 0, detalles: [] },
-});
-
-//Users
-const users = ref([]);
-const usersStats = reactive({
-  total_supervisores: 0,
-  supervisores_con_acciones: 0,
-  ultima_accion_estimacion: 0,
-  ultima_action_evidencia: 0,
-  sin_acciones: 0,
-});
-
-// Últimas actualizaciones
-const lastPlaneacion = ref(null);
-const lastEstimacion = ref(null);
-
-// UI
-const activeTab = ref("proyectos");
-const expandedProjects = ref(new Set());
-
-let cancelTokenSource = null;
-
-/**
- * Carga datos (sin manejo de rango de fechas)
- */
-const loadDashboardData = async () => {
-  loading.value = true;
-  planeacionesError.value = estimacionesError.value = false;
-  planeacionesErrorMessage.value = estimacionesErrorMessage.value = "";
-
-  // cancelar petición previa
-  if (cancelTokenSource) {
-    try {
-      cancelTokenSource.cancel("cancel");
-    } catch (e) {}
-  }
-  cancelTokenSource = axios.CancelToken.source();
-
-  try {
-    const res = await axios.get("/api/reporte-obras", {
-      cancelToken: cancelTokenSource.token,
-      headers: { "X-Requested-With": "XMLHttpRequest" },
-    });
-
-    const data = res.data;
-    if (!data || !data.success) {
-      planeacionesError.value = estimacionesError.value = true;
-      const msg = data?.error || "Error desconocido";
-      planeacionesErrorMessage.value = estimacionesErrorMessage.value = msg;
-      return;
-    }
-
-    // Planeaciones: normalizar campos
-    if (data.planeacions) {
-      planeacionesCount.value = data.planeacions.count || 0;
-      const rawPlaneaciones = Array.isArray(data.planeacions.data)
-        ? data.planeacions.data
-        : [];
-      planeaciones.value = rawPlaneaciones.map((item) => ({
-        id: item.ID ?? item.id ?? null,
-        num_proyecto: item.num_proyecto ?? item.numProyecto ?? null,
-        proyecto: item.proyecto ?? null,
-        cumplimiento_total:
-          item.cumplimiento_total ?? item.cumplimiento ?? null,
-      }));
-      const lastP =
-        data.planeacions.lastUpdate ?? data.planeacions.last_update ?? null;
-      lastPlaneacion.value = lastP && (lastP.id ?? lastP.ID) ? lastP : null;
-    }
-
-    // Estimaciones: normalizar y agrupar por proyecto_id
-    if (data.estimacions) {
-      estimacionesCount.value = data.estimacions.count || 0;
-      const rawEstimaciones = Array.isArray(data.estimacions.data)
-        ? data.estimacions.data
-        : [];
-      estimaciones.value = rawEstimaciones.map((item) => ({
-        id: item.id ?? item.ID ?? null,
-        num_estimacion: item.num_estimacion ?? item.numEstimacion ?? null,
-        fecha_estimacion: item.fecha_estimacion ?? item.fechaEstimacion ?? null,
-        periodo_estimacion: item.periodo_estimacion ?? null,
-        monto_estimacion: item.monto_estimacion ?? item.montoEstimacion ?? "0",
-        monto_acumulado: item.monto_acumulado ?? item.montoAcumulado ?? "0",
-        status: item.status ?? null,
-        created_at: item.created_at ?? item.createdAt ?? null,
-        proyecto_id: String(
-          item.proyecto_id ?? item.proyectoId ?? "sin_proyecto"
-        ),
-        num_proyecto: item.num_proyecto ?? item.numProyecto ?? null,
-        proyecto: item.proyecto ?? null,
-      }));
-
-      // Agrupar
-      Object.keys(estimacionesGrouped).forEach(
-        (k) => delete estimacionesGrouped[k]
-      );
-      estimaciones.value.forEach((est) => {
-        const proyectoId = est.proyecto_id || "sin_proyecto";
-        if (!estimacionesGrouped[proyectoId]) {
-          estimacionesGrouped[proyectoId] = {
-            proyecto: {
-              num_proyecto: est.num_proyecto,
-              proyecto: est.proyecto,
-            },
-            estimaciones: [],
-          };
-        }
-        estimacionesGrouped[proyectoId].estimaciones.push(est);
-      });
-      estimacionesGroupedKeys.value = Object.keys(estimacionesGrouped);
-
-      // inicializar proyectos expandidos (todos abiertos por defecto)
-      expandedProjects.value = new Set(estimacionesGroupedKeys.value);
-
-      const lastE =
-        data.estimacions.lastUpdate ?? data.estimacions.last_update ?? null;
-      lastEstimacion.value = lastE && (lastE.id ?? lastE.ID) ? lastE : null;
-    }
-
-    // NUEVO: Procesar datos de contadores del segundo endpoint
-    if (data.counters) {
-      // Actualizar contadores sin avances
-      if (data.counters.sin_avances) {
-        counters.sin_avances.count = data.counters.sin_avances.count || 0;
-        counters.sin_avances.detalles = Array.isArray(
-          data.counters.sin_avances.detalles
-        )
-          ? data.counters.sin_avances.detalles.map((item) => ({
-              id: item.ID ?? item.id ?? null,
-              num_proyecto: item.num_proyecto ?? null,
-              direccion_obra: item.direccion_obra ?? null,
-              cumplimiento_total: item.cumplimiento_total ?? null,
-            }))
-          : [];
-      }
-
-      // Agregar contadores finalizadas
-      if (data.counters.finalizadas) {
-        counters.finalizadas = {
-          count: data.counters.finalizadas.count || 0,
-          detalles: Array.isArray(data.counters.finalizadas.detalles)
-            ? data.counters.finalizadas.detalles.map((item) => ({
-                id: item.ID ?? item.id ?? null,
-                num_proyecto: item.num_proyecto ?? null,
-                direccion_obra: item.direccion_obra ?? null,
-                cumplimiento_total: item.cumplimiento_total ?? null,
-              }))
-            : [],
-        };
-      }
-
-      // Agregar contadores abiertas
-      if (data.counters.abiertas) {
-        counters.abiertas = {
-          count: data.counters.abiertas.count || 0,
-          detalles: Array.isArray(data.counters.abiertas.detalles)
-            ? data.counters.abiertas.detalles.map((item) => ({
-                id: item.ID ?? item.id ?? null,
-                num_proyecto: item.num_proyecto ?? null,
-                direccion_obra: item.direccion_obra ?? null,
-                cumplimiento_total: item.cumplimiento_total ?? null,
-              }))
-            : [],
-        };
-      }
-    }
-
-    if (data.users && data.users.success) {
-      if (Array.isArray(data.users.supervisores)) {
-        users.value = data.users.supervisores.map((user) => ({
-          id: user.supervisor_id ?? null,
-          nombre: user.supervisor_nombre ?? "Sin nombre",
-          correo: user.supervisor_correo ?? "Sin correo",
-          ultima_accion: user.supervisor_ultima_accion ?? "Sin acción reciente",
-          fecha_accion: user.fecha_accion ?? null,
-          detalle_accion: user.detalle_accion ?? null,
-          proyecto_info: user.proyecto_info ?? null,
-        }));
-      }
-      if (data.users.estadisticas) {
-        usersStats.total_supervisores =
-          data.users.estadisticas.total_supervisores || 0;
-        usersStats.supervisores_con_acciones =
-          data.users.estadisticas.supervisores_con_acciones || 0;
-        usersStats.ultima_accion_estimacion =
-          data.users.estadisticas.ultima_accion_estimacion || 0;
-        usersStats.ultima_accion_evidencia =
-          data.users.estadisticas.ultima_accion_evidencia || 0;
-        usersStats.sin_acciones = data.users.estadisticas.sin_acciones || 0;
-      }
-    }
-  } catch (err) {
-    console.error(err);
-    if (axios.isCancel && axios.isCancel(err)) return;
-    planeacionesError.value = estimacionesError.value = true;
-    planeacionesErrorMessage.value = estimacionesErrorMessage.value =
-      "Error de conexión con el servidor";
-  } finally {
-    loading.value = false;
-  }
-};
-
-const toggleProyecto = (id) => {
-  const key = String(id);
-  if (expandedProjects.value.has(key)) expandedProjects.value.delete(key);
-  else expandedProjects.value.add(key);
-  expandedProjects.value = new Set(Array.from(expandedProjects.value));
-};
-
-const selectTab = (tab) => {
-  activeTab.value = tab;
-};
-
-const badgeClass = (tab) => {
-  if (tab === "proyectos")
-    return activeTab.value === "proyectos"
-      ? "bg-blue-100 text-blue-800"
-      : "bg-gray-100 text-gray-800";
-  return activeTab.value === "estimaciones"
-    ? "bg-green-100 text-green-800"
-    : "bg-gray-100 text-gray-800";
-};
-
-const formatMoney = (amount) => {
-  return new Intl.NumberFormat("es-MX", {
-    style: "currency",
-    currency: "MXN",
-    minimumFractionDigits: 2,
-  }).format(Number(amount) || 0);
-};
-const formatDate = (s) => {
-  if (!s) return "--";
-  return new Date(s).toLocaleDateString("es-ES", {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric",
-  });
-};
-const formatDateTime = (s) => {
-  if (!s) return "--";
-  return new Date(s).toLocaleString("es-ES", {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-};
-const formatPercent = (v) => (Number(v) || 0).toFixed(1) + "%";
-const percentColor = (v) =>
-  Number(v) >= 80 ? "#16a34a" : Number(v) >= 50 ? "#f59e0b" : "#ef4444";
-const percentColorClass = (v) =>
-  Number(v) >= 80
-    ? "text-green-600"
-    : Number(v) >= 50
-    ? "text-yellow-600"
-    : "text-red-600";
-
-onMounted(() => {
-  loadDashboardData();
-  activeTab.value = "proyectos";
-});
-</script>
-<template>
-  <div class="min-h-screen bg-gray-50">
-    <!-- Header -->
-    <header class="relative">
-      <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="flex items-center justify-between">
-            <span class="text-sm font-bold text-gray-800 tracking-wide"
-              >COMALCALCO.GOB.MX</span
-            >
-          </div>
-        </div>
-      </div>
-
-      <div
-        style="
-          background: linear-gradient(
-            135deg,
-            #621132 0%,
-            #7d1a42 50%,
-            #621132 100%
-          );
-        "
-        class="shadow-xl relative overflow-hidden"
-      >
-        <!-- Patrón decorativo de fondo -->
-        <div class="absolute inset-0 opacity-10">
-          <div
-            class="absolute top-0 left-0 w-full h-full"
-            style="
-              background-image: repeating-linear-gradient(
-                45deg,
-                transparent,
-                transparent 35px,
-                rgba(255, 255, 255, 0.1) 35px,
-                rgba(255, 255, 255, 0.1) 70px
-              );
-            "
-          ></div>
-        </div>
-
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
-          <div class="flex items-center justify-between h-32">
-            <div class="flex items-center space-x-4">
-              <img
-                src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
-                alt="Logo Comalcalco"
-                class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
-              />
-              <div class="hidden md:block">
-                <h1 class="text-2xl font-bold text-white">
-                  Información de Obras
-                </h1>
-                <p class="text-blue-100 text-sm">
-                  Sistema de seguimiento de obras
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-
-    <!-- Loading Overlay -->
-    <div
-      v-if="loading"
-      class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
-    >
-      <div class="text-center">
-        <div class="relative">
-          <div
-            class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"
-          ></div>
-        </div>
-        <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
-      </div>
-    </div>
-
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <!-- Stats Cards Grid -->
-      <div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div
-          class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg p-6 text-white"
-        >
-          <div class="flex items-center justify-between">
-            <div>
-              <h2 class="text-lg font-medium opacity-90">Total de Proyectos</h2>
-              <p class="text-blue-100 text-sm mt-1">Proyectos en seguimiento</p>
-            </div>
-            <div
-              class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
-            >
-              <span class="text-2xl font-bold text-blue-600">{{
-                planeacionesCount
-              }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div
-          class="bg-gradient-to-r from-green-600 to-emerald-700 rounded-lg shadow-lg p-6 text-white"
-        >
-          <div class="flex items-center justify-between">
-            <div>
-              <h2 class="text-lg font-medium opacity-90">
-                Total de Estimaciones
-              </h2>
-              <p class="text-green-100 text-sm mt-1">
-                Estimaciones registradas
-              </p>
-            </div>
-            <div
-              class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
-            >
-              <span class="text-2xl font-bold text-green-600">{{
-                estimacionesCount
-              }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Last Updates Grid -->
-      <div class="mb-8 grid grid-cols-1 xl:grid-cols-2 gap-6">
-        <!-- Last Planeación Update -->
-        <div>
-          <div
-            class="bg-white rounded-lg shadow-lg overflow-hidden border-l-4 border-blue-500"
-          >
-            <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50">
-              <div class="flex items-center space-x-2">
-                <svg
-                  class="w-5 h-5 text-blue-600"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                  ></path>
-                </svg>
-                <h3 class="text-lg font-semibold text-gray-900">
-                  Último Avance de Proyecto
-                </h3>
-              </div>
-              <p class="text-sm text-gray-600 mt-1">
-                Registro más reciente de progreso en obra
-              </p>
-            </div>
-
-            <div v-if="!lastPlaneacion" class="px-6 py-8 text-center">
-              <svg
-                class="mx-auto h-12 w-12 text-gray-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <h4 class="mt-2 text-sm font-medium text-gray-900">
-                Sin actualizaciones recientes
-              </h4>
-              <p class="mt-1 text-sm text-gray-500">
-                No se encontraron registros de avances
-              </p>
-            </div>
-
-            <div v-else class="p-6">
-              <div class="space-y-4">
-                <div class="flex items-start space-x-3">
-                  <div class="flex-shrink-0">
-                    <div
-                      class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"
-                    >
-                      <svg
-                        class="w-4 h-4 text-blue-600"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900">
-                      Registrado por
-                    </p>
-                    <p class="text-sm text-gray-600 truncate">
-                      {{ lastPlaneacion.name }}
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start space-x-3">
-                  <div class="flex-shrink-0">
-                    <div
-                      class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center"
-                    >
-                      <svg
-                        class="w-4 h-4 text-purple-600"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900">Partida</p>
-                    <p class="text-sm text-gray-600">
-                      {{ lastPlaneacion.desc_partida }}
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start space-x-3">
-                  <div class="flex-shrink-0">
-                    <div
-                      class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center"
-                    >
-                      <svg
-                        class="w-4 h-4 text-orange-600"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900">Concepto</p>
-                    <p class="text-sm text-gray-600">
-                      <span
-                        class="font-mono text-xs bg-gray-100 px-2 py-1 rounded"
-                        >{{ lastPlaneacion.clave }}</span
-                      >
-                      <span class="ml-2">{{
-                        lastPlaneacion.desc_concepto
-                      }}</span>
-                    </p>
-                  </div>
-                </div>
-
-                <div class="bg-gray-50 rounded-lg p-4">
-                  <div class="flex items-center justify-between mb-2">
-                    <span class="text-sm font-medium text-gray-900"
-                      >Porcentaje de Cumplimiento</span
-                    >
-                    <span
-                      class="text-lg font-bold"
-                      :class="percentColorClass(lastPlaneacion.cumplimiento)"
-                      >{{ formatPercent(lastPlaneacion.cumplimiento) }}</span
-                    >
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2">
-                    <div
-                      class="h-2 rounded-full transition-all duration-300"
-                      :style="{
-                        width: (Number(lastPlaneacion.cumplimiento) || 0) + '%',
-                        backgroundColor: percentColor(
-                          lastPlaneacion.cumplimiento
-                        ),
-                      }"
-                    ></div>
-                  </div>
-                </div>
-
-                <div class="bg-blue-50 rounded-lg p-4">
-                  <div class="flex items-center space-x-2 mb-2">
-                    <svg
-                      class="w-4 h-4 text-blue-600"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.959 8.959 0 01-4.906-1.459L3 21l1.459-5.094A8.959 8.959 0 013 12c0-4.418 3.582-8 8-8s8 3.582 8 8z"
-                      />
-                    </svg>
-                    <span class="text-sm font-medium text-gray-900"
-                      >Descripción del Avance</span
-                    >
-                  </div>
-                  <p class="text-sm text-gray-600 leading-relaxed">
-                    {{ lastPlaneacion.desc_evidencia }}
-                  </p>
-                </div>
-
-                <div class="flex items-center space-x-4 text-xs text-gray-500">
-                  <div class="flex items-center space-x-1">
-                    <svg
-                      class="w-3 h-3"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                      />
-                    </svg>
-                    <span
-                      >Fecha:
-                      {{ formatDate(lastPlaneacion.fecha_evidencia) }}</span
-                    >
-                  </div>
-                  <div class="flex items-center space-x-1">
-                    <svg
-                      class="w-3 h-3"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                      />
-                    </svg>
-                    <span
-                      >Registrado:
-                      {{ formatDateTime(lastPlaneacion.created_at) }}</span
-                    >
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Last Estimación Update -->
-        <div>
-          <div
-            class="bg-white rounded-lg shadow-lg overflow-hidden border-l-4 border-green-500"
-          >
-            <div class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50">
-              <div class="flex items-center space-x-2">
-                <svg
-                  class="w-5 h-5 text-green-600"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
-                  />
-                </svg>
-                <h3 class="text-lg font-semibold text-gray-900">
-                  Última Estimación Registrada
-                </h3>
-              </div>
-              <p class="text-sm text-gray-600 mt-1">
-                Estimación más reciente del proyecto
-              </p>
-            </div>
-
-            <div v-if="!lastEstimacion" class="px-6 py-8 text-center">
-              <svg
-                class="mx-auto h-12 w-12 text-gray-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
-                />
-              </svg>
-              <h4 class="mt-2 text-sm font-medium text-gray-900">
-                Sin estimaciones recientes
-              </h4>
-              <p class="mt-1 text-sm text-gray-500">
-                No se encontraron registros de estimaciones
-              </p>
-            </div>
-
-            <div v-else class="p-6">
-              <div class="space-y-4">
-                <div class="flex items-start space-x-3">
-                  <div class="flex-shrink-0">
-                    <div
-                      class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center"
-                    >
-                      <svg
-                        class="w-4 h-4 text-green-600"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900">
-                      Número de Estimación
-                    </p>
-                    <p class="text-sm text-gray-600 font-mono">
-                      {{ lastEstimacion.num_estimacion }}
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start space-x-3">
-                  <div class="flex-shrink-0">
-                    <div
-                      class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"
-                    >
-                      <svg
-                        class="w-4 h-4 text-blue-600"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900">Proyecto</p>
-                    <p class="text-sm text-gray-600">
-                      {{
-                        lastEstimacion.num_proyecto
-                          ? `${lastEstimacion.num_proyecto} - ${lastEstimacion.proyecto}`
-                          : lastEstimacion.proyecto
-                      }}
-                    </p>
-                  </div>
-                </div>
-
-                <div class="bg-green-50 rounded-lg p-4">
-                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    <div>
-                      <p class="text-sm font-medium text-gray-900">
-                        Monto Estimado
-                      </p>
-                      <p class="text-lg font-bold text-green-600">
-                        {{ formatMoney(lastEstimacion.monto_estimacion) }}
-                      </p>
-                    </div>
-                    <div>
-                      <p class="text-sm font-medium text-gray-900">
-                        Monto Acumulado
-                      </p>
-                      <p class="text-lg font-bold text-green-700">
-                        {{ formatMoney(lastEstimacion.monto_acumulado) }}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="flex items-center space-x-4 text-xs text-gray-500">
-                  <div class="flex items-center space-x-1">
-                    <svg
-                      class="w-3 h-3"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                      />
-                    </svg>
-                    <span
-                      >Periodo: {{ lastEstimacion.periodo_estimacion }}</span
-                    >
-                  </div>
-                  <div class="flex items-center space-x-1">
-                    <svg
-                      class="w-3 h-3"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                      />
-                    </svg>
-                    <span
-                      >Registrado:
-                      {{ formatDateTime(lastEstimacion.created_at) }}</span
-                    >
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Tabbed Interface -->
-      <div class="bg-white rounded-lg shadow-lg overflow-hidden">
-        <div class="border-b border-gray-200">
-          <nav class="flex space-x-8 px-6" aria-label="Tabs">
-            <button
-              @click="selectTab('proyectos')"
-              class="tab-button py-4 px-1 text-sm font-medium whitespace-nowrap"
-            >
-              <svg
-                class="w-5 h-5 inline-block mr-2 -mt-0.5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
-                />
-              </svg>
-              Lista de Proyectos
-              <span
-                :class="badgeClass('proyectos')"
-                class="ml-2 px-2.5 py-0.5 rounded-full text-xs font-medium"
-                >{{ planeacionesCount }}</span
-              >
-            </button>
-
-            <button
-              @click="selectTab('estimaciones')"
-              class="tab-button py-4 px-1 text-sm font-medium whitespace-nowrap"
-            >
-              <svg
-                class="w-5 h-5 inline-block mr-2 -mt-0.5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
-                />
-              </svg>
-              Lista de Estimaciones
-              <span
-                :class="badgeClass('estimaciones')"
-                class="ml-2 px-2.5 py-0.5 rounded-full text-xs font-medium"
-                >{{ estimacionesCount }}</span
-              >
-            </button>
-          </nav>
-        </div>
-
-        <!-- Proyectos Tab -->
-        <div v-show="activeTab === 'proyectos'" class="tab-content">
-          <div
-            class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200"
-          >
-            <h3 class="text-lg font-medium text-gray-900">
-              Gestión de Proyectos
-            </h3>
-            <p class="text-sm text-gray-600 mt-1">
-              Seguimiento detallado del progreso de cada proyecto
-            </p>
-          </div>
-
-          <div v-if="planeacionesError" class="text-center py-12">
-            <svg
-              class="mx-auto h-12 w-12 text-red-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <h3 class="mt-2 text-sm font-medium text-gray-900">
-              Error al cargar proyectos
-            </h3>
-            <p class="mt-1 text-sm text-gray-500">
-              {{ planeacionesErrorMessage }}
-            </p>
-            <button
-              @click="loadDashboardData"
-              class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
-            >
-              Reintentar
-            </button>
-          </div>
-
-          <div
-            v-else-if="!planeaciones || !planeaciones.length"
-            class="text-center py-12"
-          >
-            <svg
-              class="mx-auto h-12 w-12 text-gray-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-              />
-            </svg>
-            <h3 class="mt-2 text-sm font-medium text-gray-900">
-              No hay proyectos
-            </h3>
-            <p class="mt-1 text-sm text-gray-500">
-              Comenzar agregando un nuevo proyecto.
-            </p>
-          </div>
-
-          <div v-else class="overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
-              <thead class="bg-gray-50">
-                <tr>
-                  <th
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32"
-                  >
-                    Número
-                  </th>
-                  <th
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    Proyecto
-                  </th>
-                  <th
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48"
-                  >
-                    Progreso
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="bg-white divide-y divide-gray-200">
-                <tr
-                  v-for="(p, idx) in planeaciones"
-                  :key="p.id ?? idx"
-                  class="hover:bg-gray-50 transition-colors"
-                >
-                  <td
-                    class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-mono"
-                  >
-                    {{ p.num_proyecto || "--" }}
-                  </td>
-                  <td class="px-6 py-4 text-sm text-gray-900">
-                    <div class="max-w-md truncate" :title="p.proyecto">
-                      {{ p.proyecto || "--" }}
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm">
-                    <div class="flex items-center space-x-3">
-                      <div
-                        class="flex-1 bg-gray-200 rounded-full h-2 min-w-[100px]"
-                      >
-                        <div
-                          class="h-2 rounded-full bg-blue-600 transition-all duration-300"
-                          :style="{
-                            width: (Number(p.cumplimiento_total) || 0) + '%',
-                          }"
-                        ></div>
-                      </div>
-                      <span
-                        class="text-sm font-medium text-gray-900 min-w-[60px] text-right"
-                        >{{
-                          (Number(p.cumplimiento_total) || 0).toFixed(1)
-                        }}%</span
-                      >
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        <!-- Estimaciones Tab -->
-        <div v-show="activeTab === 'estimaciones'" class="tab-content">
-          <div
-            class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50 border-b border-gray-200"
-          >
-            <h3 class="text-lg font-medium text-gray-900">
-              Gestión de Estimaciones
-            </h3>
-            <p class="text-sm text-gray-600 mt-1">
-              Estimaciones detalladas por proyecto, concepto y partida
-            </p>
-          </div>
-
-          <div v-if="estimacionesError" class="text-center py-12">
-            <svg
-              class="mx-auto h-12 w-12 text-red-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <h3 class="mt-2 text-sm font-medium text-gray-900">
-              Error al cargar estimaciones
-            </h3>
-            <p class="mt-1 text-sm text-gray-500">
-              {{ estimacionesErrorMessage }}
-            </p>
-            <button
-              @click="loadDashboardData"
-              class="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors"
-            >
-              Reintentar
-            </button>
-          </div>
-
-          <div
-            v-else-if="!estimacionesGroupedKeys.length"
-            class="text-center py-12"
-          >
-            <svg
-              class="mx-auto h-12 w-12 text-gray-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
-              />
-            </svg>
-            <h3 class="mt-2 text-sm font-medium text-gray-900">
-              No hay estimaciones
-            </h3>
-            <p class="mt-1 text-sm text-gray-500">
-              Comenzar agregando una nueva estimación.
-            </p>
-          </div>
-
-          <div v-else class="overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
-              <thead class="bg-gray-50">
-                <tr>
-                  <th
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-16"
-                  ></th>
-                  <th
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    Proyecto / Estimación
-                  </th>
-                  <th
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32"
-                  >
-                    Estimación
-                  </th>
-                  <th
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48"
-                  >
-                    Período
-                  </th>
-                  <th
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-40"
-                  >
-                    Monto
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="bg-white">
-                <template
-                  v-for="proyectoId in estimacionesGroupedKeys"
-                  :key="proyectoId"
-                >
-                  <tr
-                    class="proyecto-row border-b-2 border-gray-100 hover:bg-blue-50 cursor-pointer"
-                    @click="toggleProyecto(proyectoId)"
-                  >
-                    <td class="px-6 py-4 text-center">
-                      <svg
-                        :class="{
-                          'transform rotate-180': expandedProjects.has(
-                            String(proyectoId)
-                          ),
-                        }"
-                        class="w-4 h-4 text-gray-400 transition-transform duration-200"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M19 9l-7 7-7-7"
-                        ></path>
-                      </svg>
-                    </td>
-                    <td class="px-6 py-4">
-                      <div class="font-bold text-gray-900">
-                        {{
-                          estimacionesGrouped[proyectoId].proyecto
-                            .num_proyecto || "--"
-                        }}
-                      </div>
-                      <div class="text-sm text-gray-600 mt-1 leading-tight">
-                        {{
-                          estimacionesGrouped[proyectoId].proyecto.proyecto ||
-                          "--"
-                        }}
-                      </div>
-                    </td>
-                    <td class="px-6 py-4 text-center">
-                      <div class="text-sm font-medium text-gray-700">
-                        {{
-                          estimacionesGrouped[proyectoId].estimaciones.length
-                        }}
-                        Estimación{{
-                          estimacionesGrouped[proyectoId].estimaciones.length >
-                          1
-                            ? "es"
-                            : ""
-                        }}
-                      </div>
-                    </td>
-                    <td class="px-6 py-4"></td>
-                    <td class="px-6 py-4"></td>
-                  </tr>
-
-                  <tr
-                    v-for="(est, idx) in estimacionesGrouped[proyectoId]
-                      .estimaciones"
-                    :key="`${proyectoId}-${idx}`"
-                    v-show="expandedProjects.has(String(proyectoId))"
-                    class="estimacion-row hover:bg-gray-50 border-b border-gray-100"
-                  >
-                    <td class="px-6 py-3"></td>
-                    <td class="px-6 py-3 pl-12">
-                      <div class="text-sm text-gray-700">{{ idx + 1 }}</div>
-                      <div class="text-xs text-gray-500">
-                        {{ formatDate(est.created_at) }}
-                      </div>
-                    </td>
-                    <td class="px-6 py-3 text-center">
-                      <div class="text-sm font-medium">{{ idx + 1 }}</div>
-                    </td>
-                    <td class="px-6 py-3">
-                      <div class="text-sm font-medium text-gray-900">
-                        {{ (est.periodo_estimacion || "--").toUpperCase() }}
-                      </div>
-                    </td>
-                    <td class="px-6 py-3">
-                      <div class="text-sm font-semibold text-gray-900">
-                        {{ formatMoney(est.monto_estimacion) }}
-                      </div>
-                    </td>
-                  </tr>
-                </template>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-
-      <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div class="bg-white shadow rounded-lg p-6">
-          <h3 class="font-semibold text-lg">Sin avances</h3>
-          <p class="mt-2 text-gray-600">
-            Total:
-            <span class="font-bold text-red-600">{{
-              counters.sin_avances.count
-            }}</span>
-          </p>
-        </div>
-        <div class="bg-white shadow rounded-lg p-6">
-          <h3 class="font-semibold text-lg">Finalizadas</h3>
-          <p class="mt-2 text-gray-600">
-            Total:
-            <span class="font-bold text-red-600">{{
-              counters.finalizadas.count
-            }}</span>
-          </p>
-        </div>
-        <div class="bg-white shadow rounded-lg p-6">
-          <h3 class="font-semibold text-lg">Obras abiertas</h3>
-          <p class="mt-2 text-gray-600">
-            Total:
-            <span class="font-bold text-red-600">{{
-              counters.abiertas.count
-            }}</span>
-          </p>
-        </div>
-      </div>
-      <div class="mb-8">
-        <ObrasMap :counters="counters" />
-      </div>
-
-      <div class="mt-8 bg-white rounded-lg shadow-lg overflow-hidden">
-        <div
-          class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200"
-        >
-          <h3 class="text-lg font-medium text-gray-900">
-            Supervisores y sus Últimas Acciones - Últimos 30 Días
-          </h3>
-          <p class="text-sm text-gray-600 mt-1">
-            Registro de actividad de supervisores en proyectos
-          </p>
-        </div>
-
-        <div class="overflow-x-auto">
-          <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
-              <tr>
-                <th
-                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                >
-                  Supervisor
-                </th>
-                <th
-                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                >
-                  Tipo Acción
-                </th>
-                <th
-                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                >
-                  Detalle Acción
-                </th>
-                <th
-                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                >
-                  Fecha
-                </th>
-                <th
-                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                >
-                  Proyecto
-                </th>
-              </tr>
-            </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
-              <tr
-                v-for="supervisor in users"
-                :key="supervisor.id"
-                class="hover:bg-gray-50 transition-colors"
-              >
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="flex items-center">
-                    <div class="flex-shrink-0 h-10 w-10">
-                      <div
-                        class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center"
-                      >
-                        <span class="text-sm font-medium text-gray-700">
-                          {{
-                            supervisor.nombre
-                              .split(" ")
-                              .map((n) => n.charAt(0))
-                              .join("")
-                              .substring(0, 2)
-                              .toUpperCase()
-                          }}
-                        </span>
-                      </div>
-                    </div>
-                    <div class="ml-4">
-                      <div class="text-sm font-medium text-gray-900">
-                        {{ supervisor.nombre }}
-                      </div>
-                      <div class="text-sm text-gray-500">
-                        {{ supervisor.correo }}
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td class="px-6 py-4">
-                  <div
-                    v-if="supervisor.ultima_accion"
-                    class="text-xs text-gray-500 mt-1 max-w-xs truncate"
-                    :title="supervisor.ultima_accion"
-                  >
-                    {{ supervisor.ultima_accion }}
-                  </div>
-                </td>
-                <td class="px-6 py-4">
-                  <div class="text-sm text-gray-900">
-                    {{ supervisor.detalle_accion }}
-                  </div>
-                  <div
-                    v-if="supervisor.detalle_accion"
-                    class="text-xs text-gray-500 mt-1 max-w-xs truncate"
-                    :title="supervisor.detalle_accion"
-                  >
-                    {{ supervisor.detalle_accion }}
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {{
-                    supervisor.fecha_accion
-                      ? formatDateTime(supervisor.fecha_accion)
-                      : "--"
-                  }}
-                </td>
-                <td class="px-6 py-4">
-                  <div
-                    v-if="supervisor.proyecto_info"
-                    class="text-sm text-gray-900 max-w-xs truncate"
-                    :title="supervisor.proyecto_info"
-                  >
-                    {{ supervisor.proyecto_info }}
-                  </div>
-                  <div v-else class="text-sm text-gray-500">--</div>
-                </td>
-              </tr>
-
-              <!-- Empty state -->
-              <tr v-if="!users.length">
-                <td colspan="5" class="px-6 py-8 text-center">
-                  <div class="text-gray-500">
-                    No hay supervisores registrados
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/resources/js/Pages/Dashboard/Tramites.vue b/resources/js/Pages/Dashboard/Tramites.vue
deleted file mode 100644
index e9b30a5..0000000
--- a/resources/js/Pages/Dashboard/Tramites.vue
+++ /dev/null
@@ -1,573 +0,0 @@
-<script setup>
-import { ref, computed, watch, onMounted } from "vue";
-
-import axios from "axios";
-import Bars from "@/Components/Dashboard/Charts/Bars.vue";
-import Pie from "@/Components/Dashboard/Charts/Pie.vue";
-import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
-
-const data = ref(null);
-const loading = ref(true);
-const error = ref(null);
-
-// Rango inicial: Hoy→Hoy (coincide con preset del DateRange)
-const today = new Date().toISOString().slice(0, 10);
-const dateRange = ref({ start: today, end: today });
-
-// toggles
-const showBars = ref(false);
-const showPie = ref(false);
-
-// datasets
-const barChartData = ref({ labels: [], datasets: [] });
-const pieChartData = ref({ labels: [], datasets: [] });
-
-// opciones reutilizables
-const barChartOptions = {
-  responsive: true,
-  makeDataset: (label, values) => ({
-    label,
-    data: values,
-    backgroundColor: "rgba(75,192,192,0.2)",
-    borderColor: "rgba(75,192,192,1)",
-    borderWidth: 1,
-  }),
-  scales: {
-    x: {
-      ticks: {
-        autoSkip: false,
-        maxRotation: 0,
-        minRotation: 0,
-        callback: (_value, index) => {
-          const lab = barChartData.value.labels[index] || "";
-          return lab.split(" ").map((w) => w.toUpperCase());
-        },
-      },
-    },
-  },
-};
-const pieChartOptions = { responsive: true, maintainAspectRatio: false };
-
-// helpers
-const diffDays = (a, b) => {
-  if (!a || !b) return 0;
-  const A = new Date(a + "T00:00:00");
-  const B = new Date(b + "T00:00:00");
-  return Math.max(0, Math.round((B - A) / (1000 * 60 * 60 * 24)));
-};
-
-const mode = computed(() => {
-  const d = diffDays(dateRange.value.start, dateRange.value.end);
-  if (d === 0) return "día";
-  if (d <= 7) return "semana";
-  return "rango";
-});
-
-let cancelTokenSource = null;
-let debounceId = null;
-
-const fetchReport = async ({ start, end }) => {
-  // cancelar petición previa
-  if (cancelTokenSource) {
-    try {
-      cancelTokenSource.cancel("cancel");
-    } catch (e) {}
-  }
-  cancelTokenSource = axios.CancelToken.source();
-
-  const params = {};
-  if (start) params.start = start;
-  if (end) params.end = end;
-
-  const res = await axios.get("/api/reporte-especial", {
-    params,
-    cancelToken: cancelTokenSource.token,
-    headers: { "X-Requested-With": "XMLHttpRequest" },
-  });
-
-  // axios lanza en error si status >= 400, aquí devolvemos data directamente
-  return res.data;
-};
-
-const load = async () => {
-  loading.value = true;
-  error.value = null;
-  try {
-    const payload = await fetchReport({
-      start: dateRange.value.start,
-      end: dateRange.value.end,
-    });
-    data.value = payload;
-    mapToCharts(payload, mode.value);
-  } catch (e) {
-    if (e.name !== "AbortError") {
-      console.error(e);
-      error.value = e.message || "Error desconocido";
-    }
-  } finally {
-    loading.value = false;
-  }
-};
-
-watch(
-  dateRange,
-  () => {
-    clearTimeout(debounceId);
-    debounceId = setTimeout(load, 350);
-  },
-  { deep: true }
-);
-
-onMounted(load);
-
-// --- mapping charts: usa SIEMPRE el rango ---
-function mapToCharts(api, currentMode) {
-  const list = Array.isArray(api?.movements_by_procedure)
-    ? api.movements_by_procedure
-    : [];
-
-  const labels = list.map((it) => (it.name || "").toUpperCase());
-
-  // Pie: total (opened + closed). Si tu API devuelve valores por rango, puedes sustituir aquí.
-  const pieValues = list.map((it) => (it.opened || 0) + (it.closed || 0));
-  pieChartData.value = {
-    labels,
-    datasets: [
-      {
-        label: "Recaudados",
-        data: pieValues,
-        backgroundColor: labels.map(
-          (_, i) => `hsl(${(i * 360) / Math.max(1, labels.length)}, 70%, 50%)`
-        ),
-      },
-    ],
-  };
-
-  // Bars: dataset según modo
-  let barLabel = "";
-  let barValues = [];
-
-  if (currentMode === "día") {
-    barLabel = "Solicitados Hoy";
-    barValues = list.map(
-      (it) => it.procedures_opened_today ?? it.opened_today ?? 0
-    );
-  } else if (currentMode === "semana") {
-    barLabel = "Solicitados Semana";
-    barValues = list.map((it) => it.total ?? 0);
-  } else {
-    barLabel = "Solicitados en Rango";
-    barValues = list.map((it) => {
-      if (typeof it.range_total === "number") return it.range_total;
-      return (it.opened || 0) + (it.closed || 0);
-    });
-  }
-
-  barChartData.value = {
-    labels,
-    datasets: [barChartOptions.makeDataset(barLabel, barValues)],
-  };
-}
-
-// UI helpers
-const toggleBars = () => (showBars.value = !showBars.value);
-const togglePie = () => (showPie.value = !showPie.value);
-</script>
-
-<template>
-  <div>
-    <header class="relative">
-      <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="flex items-center justify-between">
-            <span class="text-sm font-bold text-gray-800 tracking-wide"
-              >COMALCALCO.GOB.MX</span
-            >
-          </div>
-        </div>
-      </div>
-
-      <div
-        style="
-          background: linear-gradient(
-            135deg,
-            #621132 0%,
-            #7d1a42 50%,
-            #621132 100%
-          );
-        "
-        class="shadow-xl relative overflow-hidden"
-      >
-        <!-- Patrón decorativo de fondo -->
-        <div class="absolute inset-0 opacity-10">
-          <div
-            class="absolute top-0 left-0 w-full h-full"
-            style="
-              background-image: repeating-linear-gradient(
-                45deg,
-                transparent,
-                transparent 35px,
-                rgba(255, 255, 255, 0.1) 35px,
-                rgba(255, 255, 255, 0.1) 70px
-              );
-            "
-          ></div>
-        </div>
-
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
-          <div class="flex items-center justify-between h-32">
-            <div class="flex items-center space-x-4">
-              <img
-                src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
-                alt="Logo Comalcalco"
-                class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
-              />
-              <div class="hidden md:block">
-                <h1 class="text-2xl font-bold text-white">
-                  Reporte Especial de Trámites
-                </h1>
-                <p class="text-blue-100 text-sm">
-                  Sistema de seguimiento de trámites
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-
-    <!-- Loading Overlay -->
-    <div
-      v-if="loading"
-      class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
-    >
-      <div class="text-center">
-        <div class="relative">
-          <div
-            class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"
-          ></div>
-        </div>
-        <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
-      </div>
-    </div>
-    <div v-else>
-      <div class="min-h-screen bg-gray-50 py-8">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <!-- Header -->
-          <div class="mb-8">
-            <div class="flex px-4 sm:px-6 lg:px-8 mb-4 items-center gap-4">
-              <div>
-                <h1 class="text-3xl font-bold text-gray-900 mb-2">
-                  Reporte Especial de Trámites
-                </h1>
-                <p class="text-gray-600">Resumen por unidad administrativa</p>
-              </div>
-
-              <!-- <div class="ml-auto flex items-center gap-3">
-                <button
-                  @click="toggleBars"
-                  class="bg-primary text-white px-4 py-2 rounded"
-                >
-                  Gráfica de Barras
-                </button>
-                <button
-                  @click="togglePie"
-                  class="bg-primary text-white px-4 py-2 rounded"
-                >
-                  Más recaudados
-                </button>
-              </div> -->
-            </div>
-          </div>
-
-          <!-- Estadísticas del día -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-            <div
-              class="bg-white rounded-lg shadow-sm border border-gray-200 p-6"
-            >
-              <div class="flex items-center">
-                <div class="flex-shrink-0">
-                  <div
-                    class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center"
-                  ></div>
-                </div>
-                <div class="ml-4">
-                  <p class="text-sm font-medium text-gray-500">
-                    Trámites Abiertos Hoy
-                  </p>
-                  <p class="text-2xl font-bold text-gray-900">
-                    {{
-                      new Intl.NumberFormat().format(
-                        data.procedures_opened_today
-                      )
-                    }}
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <div
-              class="bg-white rounded-lg shadow-sm border border-gray-200 p-6"
-            >
-              <div class="flex items-center">
-                <div class="flex-shrink-0">
-                  <div
-                    class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center"
-                  ></div>
-                </div>
-                <div class="ml-4">
-                  <p class="text-sm font-medium text-gray-500">
-                    Con Movimientos Hoy
-                  </p>
-                  <p class="text-2xl font-bold text-gray-900">
-                    {{
-                      new Intl.NumberFormat().format(
-                        data.procedures_with_movements_today
-                      )
-                    }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Tabla de trámites por administración -->
-          <div
-            class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden w-full"
-          >
-            <div class="px-6 py-4 border-b border-gray-200">
-              <h2 class="text-lg font-semibold text-gray-900">
-                Trámites por Unidad Administrativa
-              </h2>
-            </div>
-            <div class="overflow-x-auto w-full">
-              <table class="w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                  <tr>
-                    <th
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Unidad Administrativa
-                    </th>
-                    <th
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Abiertos
-                    </th>
-                    <th
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Movimientos Hoy
-                    </th>
-                    <th
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Cerrados
-                    </th>
-                    <th
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                  <tr
-                    v-for="administration in data.procedures_by_administration ||
-                    []"
-                    :key="administration.id"
-                    class="hover:bg-gray-50 transition-colors duration-200"
-                  >
-                    <td class="px-6 py-4 whitespace-nowrap">
-                      <div class="text-sm font-medium text-gray-900">
-                        {{ administration.name }}
-                      </div>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                      <span
-                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
-                      >
-                        {{
-                          new Intl.NumberFormat().format(administration.opened)
-                        }}
-                      </span>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                      <span
-                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
-                      >
-                        {{
-                          new Intl.NumberFormat().format(
-                            administration.movement_today
-                          )
-                        }}
-                      </span>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                      <span
-                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
-                      >
-                        {{
-                          new Intl.NumberFormat().format(administration.closed)
-                        }}
-                      </span>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                      <div class="text-sm font-semibold text-gray-900">
-                        {{
-                          new Intl.NumberFormat().format(
-                            administration.opened + administration.closed
-                          )
-                        }}
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    v-if="
-                      !(
-                        data.procedures_by_administration &&
-                        data.procedures_by_administration.length
-                      )
-                    "
-                  >
-                    <td colspan="5" class="px-6 py-8 text-center">
-                      <div class="text-gray-500">No hay datos disponibles</div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <!-- Tabla de trámites por procedimiento -->
-          <div
-            class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden w-full mt-8"
-          >
-            <div class="px-6 py-4 border-b border-gray-200">
-              <h2 class="text-lg font-semibold text-gray-900">
-                Trámites por Procedimiento
-              </h2>
-            </div>
-            <div class="overflow-x-auto w-full">
-              <table class="w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                  <tr>
-                    <th
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Procedimiento
-                    </th>
-                    <th
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Abiertos
-                    </th>
-                    <th
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Movimientos Hoy
-                    </th>
-                    <th
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Cerrados
-                    </th>
-                    <th
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                  <tr
-                    v-for="procedure in data.movements_by_procedure || []"
-                    :key="procedure.id"
-                    class="hover:bg-gray-50 transition-colors duration-200"
-                  >
-                    <td class="px-6 py-4 whitespace-nowrap">
-                      <div class="text-sm font-medium text-gray-900">
-                        {{ procedure.name }}
-                      </div>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                      <span
-                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
-                      >
-                        {{ new Intl.NumberFormat().format(procedure.opened) }}
-                      </span>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                      <span
-                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
-                      >
-                        {{
-                          new Intl.NumberFormat().format(
-                            procedure.movement_today
-                          )
-                        }}
-                      </span>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                      <span
-                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
-                      >
-                        {{ new Intl.NumberFormat().format(procedure.closed) }}
-                      </span>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                      <div class="text-sm font-semibold text-gray-900">
-                        {{
-                          new Intl.NumberFormat().format(
-                            procedure.opened + procedure.closed
-                          )
-                        }}
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    v-if="
-                      !(
-                        data.movements_by_procedure &&
-                        data.movements_by_procedure.length
-                      )
-                    "
-                  >
-                    <td colspan="5" class="px-6 py-8 text-center">
-                      <div class="text-gray-500">No hay datos disponibles</div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <!-- Bars -->
-          <div
-            v-if="showBars"
-            class="max-w-7xl mx-auto mt-12 px-4 sm:px-6 lg:px-8 mb-8 bg-white rounded-lg shadow p-6"
-          >
-            <!-- DateRange mejorado -->
-            <DateRange v-model="dateRange" :presets="true" class="mb-12" />
-            <Bars :chartData="barChartData" :chartOptions="barChartOptions" />
-            <p class="text-sm text-gray-500 mt-2">Modo actual: {{ mode }}</p>
-          </div>
-
-          <!-- Pie -->
-          <div
-            v-if="showPie"
-            class="max-w-7xl mx-auto mt-8 px-4 sm:px-6 lg:px-8 bg-white rounded-lg shadow p-6"
-          >
-            <Pie :chartData="pieChartData" :chartOptions="pieChartOptions" />
-          </div>
-
-          <div class="mt-8 text-center">
-            <p class="text-sm text-gray-500">
-              Reporte generado el {{ new Date().toLocaleString("es-MX") }}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/routes/web.php b/routes/web.php
index 1d7370a..5f4d8f1 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,20 +1,35 @@
 <?php
 
 use App\Http\Controllers\Admin\UserController;
+use App\Http\Controllers\Dashboard\AtencionController;
 use App\Http\Controllers\Dashboard\HistoryLogController;
 use App\Http\Controllers\Dashboard\IndexController;
 use App\Http\Controllers\Dashboard\NotificationController;
 use App\Http\Controllers\Developer\RoleController;
 use App\Http\Controllers\Example\IndexController as ExampleIndexController;
 use Illuminate\Support\Facades\Route;
-use Illuminate\Support\Facades\Http;
 
 /**
  * Rutas generales/publicas
  *
  * Rutas accesibles por todos los usuarios y no usuarios
  */
-Route::redirect('/', '/login');
+Route::redirect('/', '/tramites');
+
+/**
+ * Rutas públicas de reportes
+ */
+Route::prefix('/')->name('app.')->middleware([
+  'auth:sanctum',
+  'verified',
+  config('jetstream.auth_session')
+  ])->group(function () {
+  Route::inertia('/tramites', 'App/Tramites')->name('tramites');
+  Route::inertia('/obras', 'App/Obras')->name('obras');
+  Route::inertia('/atencion', 'App/AtencionCiudadana')->name('atencion');
+  Route::get('/api/support-options', [AtencionController::class, 'getSupportOptions']);
+  Route::get('/api/export-excel', [AtencionController::class, 'exportExcel']);
+});
 
 /**
  * Rutas del Dashboard
@@ -30,10 +45,6 @@
   Route::inertia('/changelogs', 'Dashboard/Changelogs')->name('changelogs');
   Route::inertia('/help', 'Dashboard/Help')->name('help');
 
-  Route::inertia('/api-tramite', 'Dashboard/Tramites')->name('api-tramite');
-  Route::inertia('/api-obra', 'Dashboard/Obras')->name('api-obra');
-  Route::inertia('/api-atencion', 'Dashboard/AtencionCiudadana')->name('api-atencion');
-
   # Log de Acciones
   Route::resource('histories', HistoryLogController::class)->only([
     'index',
-- 
2.45.2


From 58c1cd0dd44a24755382199a9d1367557008f327 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Thu, 21 Aug 2025 17:18:15 -0600
Subject: [PATCH 10/18] Colores

---
 colors.json.example | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/colors.json.example b/colors.json.example
index d36ba7d..d317205 100644
--- a/colors.json.example
+++ b/colors.json.example
@@ -7,12 +7,12 @@
     "main-on":"#000",
     "main-dark":"#1E1F1C",
     "main-dark-on":"#fff",
-    "primary":"#111827",
+    "primary":"#621132",
     "primary-on":"#fff",
-    "primary-dark":"#000",
+    "primary-dark":"#621132",
     "primary-dark-on":"#fff",
-    "secondary":"#374151",
-    "secondary-dark":"#989A9C",
+    "secondary":"#7d1a42",
+    "secondary-dark":"#7d1a42",
     "white":"#FFFFFF",
     "white-dark":"#FFFFFF",
     "success":"#22C55E",
-- 
2.45.2


From bec4f6082fd4b9328b784d3753edc94025cbdace Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Thu, 21 Aug 2025 17:21:25 -0600
Subject: [PATCH 11/18] Sidebar

---
 resources/js/Layouts/AppLayout.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 567b164..54bf20b 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -51,7 +51,7 @@ onMounted(()=> {
                     />
                     <Link
                         icon="support_agent"
-                        name="Atención Ciudadana"
+                        name="Entrega de Apoyos"
                         to="app.atencion"
                     />
                     <Link
@@ -60,13 +60,6 @@ onMounted(()=> {
                         to="app.obras"
                     />
                 </Section>
-                <Section name="Acceso Rápido">
-                    <Link
-                        icon="dashboard"
-                        name="Inicio Dashboard"
-                        to="dashboard.index"
-                    />
-                </Section>
             </Sidebar>
         </div>
         <div
-- 
2.45.2


From de7676da26a38f11f0345aa9d0e51f1e6cece327 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Fri, 22 Aug 2025 15:43:37 -0600
Subject: [PATCH 12/18] =?UTF-8?q?Se=20agregaron=20las=20gr=C3=A1ficas=20en?=
 =?UTF-8?q?=20tramites?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dashboard/AtencionController.php          | 181 +++++++++++-------
 .../Controllers/Dashboard/ObrasController.php |  22 ++-
 .../Dashboard/TramiteController.php           |  37 +++-
 resources/js/Pages/App/AtencionCiudadana.vue  |  47 +++--
 resources/js/Pages/App/Obras.vue              | 115 ++++++++++-
 resources/js/Pages/App/Tramites.vue           | 131 +++++++------
 6 files changed, 370 insertions(+), 163 deletions(-)

diff --git a/app/Http/Controllers/Dashboard/AtencionController.php b/app/Http/Controllers/Dashboard/AtencionController.php
index 2274323..4c38771 100644
--- a/app/Http/Controllers/Dashboard/AtencionController.php
+++ b/app/Http/Controllers/Dashboard/AtencionController.php
@@ -4,6 +4,7 @@
 
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller as BaseController;
+use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Log;
 
@@ -11,84 +12,40 @@ class AtencionController extends BaseController
 {
   public function Atencion(Request $request)
   {
-    $query = $request->only(['start', 'end', 'type', 'action']);
+    $query = $request->only(['start', 'end', 'type', 'action', 'period', 'charts_only']);
     $input = array_merge(['action' => 'index', 'type' => 'api'], $query);
 
     $startDate = $input['start'] ?? date('Y-01-01');
     $endDate = $input['end'] ?? date('Y-12-31');
+    $period = $input['period'] ?? null;
+    $chartsOnly = $input['charts_only'] ?? false;
 
-    $baseParams = [
-      'start_date' => $startDate,
-      'end_date' => $endDate,
-      'type' => $input['type'] ?? 'api',
-      'action' => $input['action'] ?? 'index',
-    ];
+    // Cache key para diferentes tipos de peticiones
+    $cacheKey = 'atencion_' . md5(serialize([
+      'start' => $startDate,
+      'end' => $endDate,
+      'period' => $period,
+      'charts_only' => $chartsOnly
+    ]));
 
-    $baseUrl   = 'https://apoyos.comalcalco.gob.mx/beneficiaries/stats-by-date-range';
-    $countsUrl = 'https://apoyos.comalcalco.gob.mx/beneficiaries/counts-by-date';
-    $dashboardUrl = 'https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard/api';
-    $dashboardUrl2 = 'https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard/api?type=servicio';
+    // Intentar obtener desde cache (2 minutos)
+    if (Cache::has($cacheKey)) {
+      return response()->json(Cache::get($cacheKey), 200)
+        ->header('Content-Type', 'application/json');
+    }
 
     try {
-      $response = Http::get($baseUrl, $baseParams);
-
-      if (!$response->successful()) {
-        return response()->json(['error' => 'Error del servicio'], $response->status());
+      // Si solo necesitamos gráficas, hacer menos peticiones
+      if ($chartsOnly) {
+        $result = $this->getChartsData($startDate, $endDate);
+      } else {
+        $result = $this->getFullData($startDate, $endDate, $period);
       }
 
-      $mainData = $response->json();
-      $countsAc = [];
-      try {
-        $countsResp = Http::get($countsUrl, [
-          'start_date' => $startDate,
-          'end_date' => $endDate,
-        ]);
+      // Cachear resultado por 2 minutos
+      Cache::put($cacheKey, $result, 120);
 
-        if ($countsResp->successful()) {
-          $countsAc = $countsResp->json();
-        } else {
-          Log::error('Error al obtener los conteos de atención', ['status' => $countsResp->status()]);
-        }
-      } catch (\Exception $e) {
-        Log::error('Error al obtener los conteos de atención', ['exception' => $e->getMessage()]);
-      }
-
-      $dashboardData = [];
-      try {
-        $dashboardResp = Http::get($dashboardUrl);
-
-        if ($dashboardResp->successful()) {
-          $dashboardData = $dashboardResp->json();
-        } else {
-          Log::error('Error al obtener datos del dashboard', ['status' => $dashboardResp->status()]);
-        }
-      } catch (\Exception $e) {
-        Log::error('Error al obtener datos del dashboard', ['exception' => $e->getMessage()]);
-      }
-
-      $dashboardServicioData = [];
-      try {
-        $dashboardResp2 = Http::get($dashboardUrl2);
-
-        if ($dashboardResp2->successful()) {
-          $dashboardServicioData = $dashboardResp2->json();
-        } else {
-          Log::error('Error al obtener datos del dashboard servicio', ['status' => $dashboardResp2->status()]);
-        }
-      } catch (\Exception $e) {
-        Log::error('Error al obtener datos del dashboard servicio', ['exception' => $e->getMessage()]);
-      }
-
-      // Combina todos los resultados
-      $combinedData = array_merge(
-        is_array($mainData) ? $mainData : [],
-        [
-          'counts'             => $countsAc,
-          'dashboard'          => $dashboardData,
-          'dashboard_servicio' => $dashboardServicioData,
-        ]
-      );
-      return response()->json($combinedData, 200)
+      return response()->json($result, 200)
         ->header('Content-Type', 'application/json');
     } catch (\Exception $e) {
       Log::error('Error en la consulta de atención', ['exception' => $e->getMessage()]);
@@ -96,6 +53,96 @@ public function Atencion(Request $request)
     }
   }
 
+  private function getChartsData($startDate, $endDate)
+  {
+    $baseParams = [
+      'start_date' => $startDate,
+      'end_date' => $endDate,
+      'type' => 'api',
+      'action' => 'index',
+    ];
+
+    $baseUrl = 'https://apoyos.comalcalco.gob.mx/beneficiaries/stats-by-date-range';
+
+    // Solo hacer la petición principal para gráficas
+    $response = Http::timeout(15)->get($baseUrl, $baseParams);
+
+    if (!$response->successful()) {
+      throw new \Exception('Error del servicio principal');
+    }
+
+    return $response->json();
+  }
+
+  private function getFullData($startDate, $endDate, $period)
+  {
+    $baseParams = [
+      'start_date' => $startDate,
+      'end_date' => $endDate,
+      'type' => 'api',
+      'action' => 'index',
+    ];
+
+    $urls = [
+      'main' => 'https://apoyos.comalcalco.gob.mx/beneficiaries/stats-by-date-range',
+      'counts' => 'https://apoyos.comalcalco.gob.mx/beneficiaries/counts-by-date',
+      'dashboard' => 'https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard/api',
+      'dashboard_servicio' => 'https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard/api?type=servicio'
+    ];
+
+    // Hacer peticiones en paralelo usando HTTP Pool
+    $responses = Http::pool(fn($pool) => [
+      $pool->timeout(15)->get($urls['main'], $baseParams),
+      $pool->timeout(15)->get($urls['counts'], [
+        'start_date' => $startDate,
+        'end_date' => $endDate,
+      ]),
+      $pool->timeout(15)->get($urls['dashboard']),
+      $pool->timeout(15)->get($urls['dashboard_servicio'])
+    ]);
+
+    $mainData = [];
+    $countsAc = [];
+    $dashboardData = [];
+    $dashboardServicioData = [];
+
+    // Procesar respuestas
+    if ($responses[0]->successful()) {
+      $mainData = $responses[0]->json();
+    } else {
+      Log::error('Error en petición principal', ['status' => $responses[0]->status()]);
+    }
+
+    if ($responses[1]->successful()) {
+      $countsAc = $responses[1]->json();
+    } else {
+      Log::error('Error en petición counts', ['status' => $responses[1]->status()]);
+    }
+
+    if ($responses[2]->successful()) {
+      $dashboardData = $responses[2]->json();
+    } else {
+      Log::error('Error en petición dashboard', ['status' => $responses[2]->status()]);
+    }
+
+    if ($responses[3]->successful()) {
+      $dashboardServicioData = $responses[3]->json();
+    } else {
+      Log::error('Error en petición dashboard servicio', ['status' => $responses[3]->status()]);
+    }
+
+    // Combinar todos los resultados
+    return array_merge(
+      is_array($mainData) ? $mainData : [],
+      [
+        'counts' => $countsAc,
+        'dashboard' => $dashboardData,
+        'dashboard_servicio' => $dashboardServicioData,
+      ]
+    );
+  }
+
+
   public function getSupportOptions(Request $request)
   {
     try {
diff --git a/app/Http/Controllers/Dashboard/ObrasController.php b/app/Http/Controllers/Dashboard/ObrasController.php
index c8ee62f..b1b7455 100644
--- a/app/Http/Controllers/Dashboard/ObrasController.php
+++ b/app/Http/Controllers/Dashboard/ObrasController.php
@@ -4,6 +4,7 @@
 use Illuminate\Routing\Controller as BaseController;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Cache;
 
 class ObrasController extends BaseController
 {
@@ -12,10 +13,23 @@ public function Obras(Request $request)
         $query = $request->only(['start', 'end', 'type', 'action']);
         $query = array_merge($query, ['action' => 'index', 'type' => 'api'], $query);
 
+        // Caché por 2 minutos (datos más dinámicos)
+        $cacheKey = "obras_data_" . md5(serialize($query));
+
+        if ($cachedData = Cache::get($cacheKey)) {
+            return response()->json($cachedData, 200)
+                ->header('Content-Type', 'application/json');
+        }
+
         try {
             $response = Http::timeout(5)->get('https://obras-information.comalcalco.gob.mx/api/controller.php', $query);
 
             if (! $response->successful()) {
+                Log::warning('Obras service error', [
+                    'status' => $response->status(),
+                    'body' => $response->body(),
+                    'query' => $query
+                ]);
                 return response()->json(['error' => 'External service error'], $response->status());
             }
 
@@ -40,10 +54,16 @@ public function Obras(Request $request)
             // Combinar ambas respuestas
             $combinedData = array_merge($mainData, ['counters' => $countersData, 'users' => $usersData]);
 
+            // Cachear por 2 minutos
+            Cache::put($cacheKey, $combinedData, now()->addMinutes(2));
+
             return response()->json($combinedData, $response->status())
                 ->header('Content-Type', $response->header('Content-Type', 'application/json'));
         } catch (\Throwable $e) {
-            Log::error('Proxy error: '.$e->getMessage());
+            Log::error('Proxy error: '.$e->getMessage(), [
+                'query' => $query,
+                'trace' => $e->getTraceAsString()
+            ]);
             return response()->json(['error' => 'Unable to contact external service'], 502);
         }
     }
diff --git a/app/Http/Controllers/Dashboard/TramiteController.php b/app/Http/Controllers/Dashboard/TramiteController.php
index 12cccf2..214f539 100644
--- a/app/Http/Controllers/Dashboard/TramiteController.php
+++ b/app/Http/Controllers/Dashboard/TramiteController.php
@@ -1,9 +1,12 @@
-<?php namespace App\Http\Controllers\Dashboard;
+<?php
+
+namespace App\Http\Controllers\Dashboard;
 
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller as BaseController;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Cache;
 
 class TramiteController extends BaseController
 {
@@ -12,17 +15,39 @@ public function tramiteEspecial(Request $request)
         $query = $request->only(['start', 'end', 'type']);
         $query = array_merge(['type' => 'api'], $query);
 
-        try {
-            $response = Http::timeout(5)->get('https://tramites.comalcalco.gob.mx/reporte-especial', $query);
+        // Caché por 2 minutos (datos más dinámicos)
+        $cacheKey = "tramites_data_" . md5(serialize($query));
 
-            if (! $response->successful()) {
+        if ($cachedData = Cache::get($cacheKey)) {
+            return response()->json($cachedData, 200)
+                ->header('Content-Type', 'application/json');
+        }
+
+        try {
+            $response = Http::timeout(20)->get('https://tramites.comalcalco.gob.mx/reporte-especial', $query);
+
+            if (!$response->successful()) {
+                Log::warning('Tramites service error', [
+                    'status' => $response->status(),
+                    'body' => $response->body(),
+                    'query' => $query
+                ]);
                 return response()->json(['error' => 'External service error'], $response->status());
             }
 
-            return response()->json($response->json(), $response->status())
+            $data = $response->json();
+
+            // Cachear por 2 minutos
+            Cache::put($cacheKey, $data, now()->addMinutes(2));
+
+            return response()->json($data, $response->status())
                 ->header('Content-Type', $response->header('Content-Type', 'application/json'));
+
         } catch (\Throwable $e) {
-            Log::error('Proxy error: '.$e->getMessage());
+            Log::error('Proxy error: ' . $e->getMessage(), [
+                'query' => $query,
+                'trace' => $e->getTraceAsString()
+            ]);
             return response()->json(['error' => 'Unable to contact external service'], 502);
         }
     }
diff --git a/resources/js/Pages/App/AtencionCiudadana.vue b/resources/js/Pages/App/AtencionCiudadana.vue
index 668b9b8..529f8e4 100644
--- a/resources/js/Pages/App/AtencionCiudadana.vue
+++ b/resources/js/Pages/App/AtencionCiudadana.vue
@@ -67,11 +67,10 @@ const periodOptions = [
   { id: "semana", name: "Esta Semana" },
 ];
 
-// NUEVO: Función para cargar datos de gráficas
+//Función para cargar datos de gráficas
 const loadChartsData = async () => {
   const cacheKey = getChartsCacheKey();
 
-  // Verificar cache de gráficas
   if (chartsCache.has(cacheKey)) {
     const cachedData = chartsCache.get(cacheKey);
     buildChartsFromData(cachedData);
@@ -87,19 +86,16 @@ const loadChartsData = async () => {
 
     const res = await axios.get("/api/reporte-atencion", {
       params,
-      timeout: 10000,
+      timeout: 20000, // Aumentar timeout
       headers: { "X-Requested-With": "XMLHttpRequest" },
     });
 
     const payload = res.data || {};
-
-    // Guardar en cache de gráficas
     chartsCache.set(cacheKey, payload);
-
     buildChartsFromData(payload);
   } catch (e) {
     console.error("Error cargando datos de gráficas:", e);
-    // En caso de error, mantener gráficas actuales o limpiar
+    // En caso de error, mantener gráficas actuales
   }
 };
 
@@ -139,17 +135,15 @@ const normalizeResponse = (res) => {
 const load = async () => {
   const cacheKey = getCacheKey();
 
-  // Verificar cache primero
   if (cache.has(cacheKey)) {
     const cachedData = cache.get(cacheKey);
-    applyDataToComponents(cachedData);
+    applyDataToComponents(cachedData, false); // Sin gráficas
     return;
   }
 
   loading.value = true;
   error.value = null;
 
-  // Cancelar petición anterior
   if (cancelTokenSource) {
     cancelTokenSource.cancel("cancel");
   }
@@ -158,28 +152,22 @@ const load = async () => {
   try {
     const params = {
       period: selectedPeriod.value,
-      // NO incluir fechas personalizadas aquí
     };
 
     const res = await axios.get("/api/reporte-atencion", {
       params,
-      timeout: 10000,
+      timeout: 20000, // Aumentar timeout
       cancelToken: cancelTokenSource.token,
       headers: { "X-Requested-With": "XMLHttpRequest" },
     });
 
     const payload = res.data || {};
-
-    // Guardar en cache
     cache.set(cacheKey, payload);
-
-    // Aplicar datos (SIN gráficas)
-    applyDataToComponents(payload, false);
+    applyDataToComponents(payload, false); // Sin gráficas para evitar conflicto
   } catch (e) {
     if (!axios.isCancel(e)) {
       console.error("Error en la petición:", e);
-      error.value =
-        e.response?.data?.error || e.message || "Error al cargar datos";
+      error.value = e.response?.data?.error || e.message || "Error al cargar datos";
       clearComponentData();
     }
   } finally {
@@ -421,13 +409,32 @@ const closeExportModal = () => {
   showExportModal.value = false;
 };
 
+const toggleGroup = (typeName) => {
+  if (expandedGroups.value.has(typeName)) {
+    expandedGroups.value.delete(typeName);
+  } else {
+    expandedGroups.value.add(typeName);
+  }
+};
+
 // Watchers para recargar datos cuando cambien los filtros
 watch([selectedDepartment, selectedType, selectedPeriod], () => {
   clearTimeout(debounceId);
   debounceId = setTimeout(load, 100);
 });
 
-onMounted(load);
+onMounted(() => {
+  // Cargar datos iniciales
+  load();
+  // Cargar gráficas iniciales
+  loadChartsData();
+
+  // Limpiar caches
+  setInterval(() => {
+    cache.clear();
+    chartsCache.clear();
+  }, 600000); // 10 minutos
+});
 </script>
 
 <template>
diff --git a/resources/js/Pages/App/Obras.vue b/resources/js/Pages/App/Obras.vue
index f8df742..e5894da 100644
--- a/resources/js/Pages/App/Obras.vue
+++ b/resources/js/Pages/App/Obras.vue
@@ -94,7 +94,34 @@ const loadDashboardData = async () => {
       }));
       const lastP =
         data.planeacions.lastUpdate ?? data.planeacions.last_update ?? null;
-      lastPlaneacion.value = lastP && (lastP.id ?? lastP.ID) ? lastP : null;
+      lastPlaneacion.value =
+        lastP && (lastP.id ?? lastP.ID)
+          ? {
+              name:
+                lastP.name ??
+                lastP.user_name ??
+                lastP.nombre_usuario ??
+                "Usuario no disponible",
+              num_proyecto: lastP.num_proyecto ?? lastP.numProyecto ?? null,
+              proyecto: lastP.proyecto ?? "Proyecto no disponible",
+              desc_partida:
+                lastP.desc_partida ??
+                lastP.descripcion_partida ??
+                "Partida no disponible",
+              clave: lastP.clave ?? lastP.clave_concepto ?? "--",
+              desc_concepto:
+                lastP.desc_concepto ??
+                lastP.descripcion_concepto ??
+                "Concepto no disponible",
+              cumplimiento: lastP.cumplimiento ?? lastP.cumplimiento_total ?? 0,
+              desc_evidencia:
+                lastP.desc_evidencia ??
+                lastP.descripcion_evidencia ??
+                "Sin descripción disponible",
+              fecha_evidencia: lastP.fecha_evidencia ?? lastP.fecha ?? null,
+              created_at: lastP.created_at ?? lastP.createdAt ?? null,
+            }
+          : null;
     }
 
     // Estimaciones: normalizar y agrupar por proyecto_id
@@ -143,7 +170,27 @@ const loadDashboardData = async () => {
 
       const lastE =
         data.estimacions.lastUpdate ?? data.estimacions.last_update ?? null;
-      lastEstimacion.value = lastE && (lastE.id ?? lastE.ID) ? lastE : null;
+      lastEstimacion.value =
+        lastE && (lastE.id ?? lastE.ID)
+          ? {
+              user_name:
+                lastE.user_name ??
+                lastE.nombre_usuario ??
+                lastE.registrado_por ??
+                "Usuario no disponible",
+              num_estimacion:
+                lastE.num_estimacion ?? lastE.numEstimacion ?? null,
+              num_proyecto: lastE.num_proyecto ?? lastE.numProyecto ?? null,
+              proyecto: lastE.proyecto ?? "Proyecto no disponible",
+              monto_estimacion:
+                lastE.monto_estimacion ?? lastE.montoEstimacion ?? "0",
+              monto_acumulado:
+                lastE.monto_acumulado ?? lastE.montoAcumulado ?? "0",
+              periodo_estimacion:
+                lastE.periodo_estimacion ?? lastE.periodo ?? null,
+              created_at: lastE.created_at ?? lastE.createdAt ?? null,
+            }
+          : null;
     }
 
     // NUEVO: Procesar datos de contadores del segundo endpoint
@@ -486,6 +533,40 @@ onMounted(() => {
                     </div>
                   </div>
 
+                  <div class="flex items-start space-x-3">
+                    <div class="flex-shrink-0">
+                      <div
+                        class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center"
+                      >
+                        <svg
+                          class="w-4 h-4 text-indigo-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium text-gray-900">Proyecto</p>
+                      <p class="text-sm text-gray-600">
+                        <span
+                          class="font-mono text-xs bg-gray-100 px-2 py-1 rounded"
+                          >{{ lastPlaneacion.num_proyecto || "--" }}</span
+                        >
+                        <span class="ml-2">{{
+                          lastPlaneacion.proyecto || "Proyecto no disponible"
+                        }}</span>
+                      </p>
+                    </div>
+                  </div>
+
                   <div class="flex items-start space-x-3">
                     <div class="flex-shrink-0">
                       <div
@@ -699,6 +780,36 @@ onMounted(() => {
 
               <div v-else class="p-6">
                 <div class="space-y-4">
+                  <div class="flex items-start space-x-3">
+                    <div class="flex-shrink-0">
+                      <div
+                        class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"
+                      >
+                        <svg
+                          class="w-4 h-4 text-blue-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium text-gray-900">
+                        Registrado por
+                      </p>
+                      <p class="text-sm text-gray-600 truncate">
+                        {{ lastEstimacion.user_name }}
+                      </p>
+                    </div>
+                  </div>
+
                   <div class="flex items-start space-x-3">
                     <div class="flex-shrink-0">
                       <div
diff --git a/resources/js/Pages/App/Tramites.vue b/resources/js/Pages/App/Tramites.vue
index af110fc..c0be88e 100644
--- a/resources/js/Pages/App/Tramites.vue
+++ b/resources/js/Pages/App/Tramites.vue
@@ -5,20 +5,21 @@ import axios from "axios";
 import Bars from "@/Components/Dashboard/Charts/Bars.vue";
 import Pie from "@/Components/Dashboard/Charts/Pie.vue";
 import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
+import Footer from "@/Components/Dashboard/Footer.vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 
-const data = ref(null);
-const loading = ref(true);
+const data = ref({
+  procedures_opened_today: 0,
+  procedures_with_movements_today: 0,
+  procedures_by_administration: [],
+  movements_by_procedure: [],
+});
 const error = ref(null);
 
 // Rango inicial: Hoy→Hoy (coincide con preset del DateRange)
 const today = new Date().toISOString().slice(0, 10);
 const dateRange = ref({ start: today, end: today });
 
-// toggles
-const showBars = ref(false);
-const showPie = ref(false);
-
 // datasets
 const barChartData = ref({ labels: [], datasets: [] });
 const pieChartData = ref({ labels: [], datasets: [] });
@@ -86,27 +87,31 @@ const fetchReport = async ({ start, end }) => {
     headers: { "X-Requested-With": "XMLHttpRequest" },
   });
 
-  // axios lanza en error si status >= 400, aquí devolvemos data directamente
   return res.data;
 };
 
 const load = async () => {
-  loading.value = true;
   error.value = null;
   try {
     const payload = await fetchReport({
       start: dateRange.value.start,
       end: dateRange.value.end,
     });
-    data.value = payload;
-    mapToCharts(payload, mode.value);
+    data.value = {
+      procedures_opened_today: payload?.procedures_opened_today || 0,
+      procedures_with_movements_today: payload?.procedures_with_movements_today || 0,
+      procedures_by_administration: Array.isArray(payload?.procedures_by_administration)
+      ? payload.procedures_by_administration : [],
+      movements_by_procedure: Array.isArray(payload?.movements_by_procedure)
+      ? payload.movements_by_procedure : [],
+    };
+    mapToCharts(data.value, mode.value);
   } catch (e) {
-    if (e.name !== "AbortError") {
+    if (!axios.isCancel(e)) {
       console.error(e);
       error.value = e.message || "Error desconocido";
+      mapToCharts(data.value, mode.value);
     }
-  } finally {
-    loading.value = false;
   }
 };
 
@@ -119,60 +124,76 @@ watch(
   { deep: true }
 );
 
-onMounted(load);
+onMounted(() => {
+  mapToCharts(data.value, mode.value);
+  load();
+});
 
 // --- mapping charts: usa SIEMPRE el rango ---
 function mapToCharts(api, currentMode) {
-  const list = Array.isArray(api?.movements_by_procedure)
+  const proceduresList = Array.isArray(api?.movements_by_procedure)
     ? api.movements_by_procedure
     : [];
 
-  const labels = list.map((it) => (it.name || "").toUpperCase());
+  // Filtrar procedimientos con datos significativos y ordenar por total descendente
+  const filteredProcedures = proceduresList
+    .filter((proc) => (proc.opened || 0) + (proc.closed || 0) > 0)
+    .sort((a, b) => {
+      const totalA = (a.opened || 0) + (a.closed || 0);
+      const totalB = (b.opened || 0) + (b.closed || 0);
+      return totalB - totalA;
+    });
 
-  // Pie: total (opened + closed). Si tu API devuelve valores por rango, puedes sustituir aquí.
-  const pieValues = list.map((it) => (it.opened || 0) + (it.closed || 0));
+  const labels = filteredProcedures.map((proc) =>
+    (proc.name || "").toUpperCase().substring(0, 30) +
+    ((proc.name || "").length > 30 ? "..." : "")
+  );
+
+  // Pie: Distribución de trámites por procedimiento
+  const pieValues = filteredProcedures.map((proc) => (proc.opened || 0) + (proc.closed || 0));
   pieChartData.value = {
-    labels,
+    labels: labels.length > 0 ? labels : ["Sin datos"],
     datasets: [
       {
-        label: "Recaudados",
-        data: pieValues,
-        backgroundColor: labels.map(
-          (_, i) => `hsl(${(i * 360) / Math.max(1, labels.length)}, 70%, 50%)`
-        ),
+        label: "Distribución de Trámites por Procedimiento",
+        data: pieValues.length > 0 ? pieValues : [0],
+        backgroundColor: labels.length > 0
+          ? labels.map((_, i) => `hsl(${(i * 360) / Math.max(1, labels.length)}, 70%, 50%)`)
+          : ["#e5e7eb"],
       },
     ],
   };
 
-  // Bars: dataset según modo
+  // Bars: Trámites más solicitados según el modo
   let barLabel = "";
   let barValues = [];
 
   if (currentMode === "día") {
-    barLabel = "Solicitados Hoy";
-    barValues = list.map(
-      (it) => it.procedures_opened_today ?? it.opened_today ?? 0
-    );
+    barLabel = "Trámites Abiertos Hoy";
+    barValues = filteredProcedures.map((proc) => proc.opened_today || 0);
   } else if (currentMode === "semana") {
-    barLabel = "Solicitados Semana";
-    barValues = list.map((it) => it.total ?? 0);
+    barLabel = "Trámites de la Semana";
+    barValues = filteredProcedures.map((proc) => proc.week_total || (proc.opened || 0));
   } else {
-    barLabel = "Solicitados en Rango";
-    barValues = list.map((it) => {
-      if (typeof it.range_total === "number") return it.range_total;
-      return (it.opened || 0) + (it.closed || 0);
+    barLabel = "Trámites en el Rango Seleccionado";
+    barValues = filteredProcedures.map((proc) => {
+      // Priorizar datos específicos del rango si están disponibles
+      if (typeof proc.range_total === "number") return proc.range_total;
+      return (proc.opened || 0) + (proc.closed || 0);
     });
   }
 
   barChartData.value = {
-    labels,
-    datasets: [barChartOptions.makeDataset(barLabel, barValues)],
+    labels: labels.length > 0 ? labels : ["Sin datos"],
+    datasets: [
+      {
+        ...barChartOptions.makeDataset(barLabel, barValues.length > 0 ? barValues : [0]),
+        backgroundColor: "rgba(99, 102, 241, 0.2)",
+        borderColor: "rgba(99, 102, 241, 1)",
+      },
+    ],
   };
 }
-
-// UI helpers
-const toggleBars = () => (showBars.value = !showBars.value);
-const togglePie = () => (showPie.value = !showPie.value);
 </script>
 
 <template>
@@ -243,14 +264,6 @@ const togglePie = () => (showPie.value = !showPie.value);
         v-if="loading"
         class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
       >
-        <div class="text-center">
-          <div class="relative">
-            <div
-              class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"
-            ></div>
-          </div>
-          <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
-        </div>
       </div>
       <div v-else>
         <div class="min-h-screen bg-gray-50 py-8">
@@ -264,21 +277,6 @@ const togglePie = () => (showPie.value = !showPie.value);
                   </h1>
                   <p class="text-gray-600">Resumen por unidad administrativa</p>
                 </div>
-
-                <!-- <div class="ml-auto flex items-center gap-3">
-                <button
-                  @click="toggleBars"
-                  class="bg-primary text-white px-4 py-2 rounded"
-                >
-                  Gráfica de Barras
-                </button>
-                <button
-                  @click="togglePie"
-                  class="bg-primary text-white px-4 py-2 rounded"
-                >
-                  Más recaudados
-                </button>
-              </div> -->
               </div>
             </div>
 
@@ -487,7 +485,7 @@ const togglePie = () => (showPie.value = !showPie.value);
                       </th>
                     </tr>
                   </thead>
-                  <tbody class="bg-white divide-y divide-gray-200">
+                  <tbody class="bg-white divide-y divide-gray-200 uppercase">
                     <tr
                       v-for="procedure in data.movements_by_procedure || []"
                       :key="procedure.id"
@@ -554,7 +552,6 @@ const togglePie = () => (showPie.value = !showPie.value);
 
             <!-- Bars -->
             <div
-              v-if="showBars"
               class="max-w-7xl mx-auto mt-12 px-4 sm:px-6 lg:px-8 mb-8 bg-white rounded-lg shadow p-6"
             >
               <!-- DateRange mejorado -->
@@ -565,7 +562,6 @@ const togglePie = () => (showPie.value = !showPie.value);
 
             <!-- Pie -->
             <div
-              v-if="showPie"
               class="max-w-7xl mx-auto mt-8 px-4 sm:px-6 lg:px-8 bg-white rounded-lg shadow p-6"
             >
               <Pie :chartData="pieChartData" :chartOptions="pieChartOptions" />
@@ -579,6 +575,7 @@ const togglePie = () => (showPie.value = !showPie.value);
           </div>
         </div>
       </div>
+            <Footer />
     </div>
   </AppLayout>
 </template>
-- 
2.45.2


From c1c86ef802764c059569efa111ea48946065f627 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Mon, 25 Aug 2025 14:04:24 -0600
Subject: [PATCH 13/18] Rutas

---
 routes/web.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/routes/web.php b/routes/web.php
index 5f4d8f1..10835d4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -19,7 +19,7 @@
 /**
  * Rutas públicas de reportes
  */
-Route::prefix('/')->name('app.')->middleware([
+Route::name('app.')->middleware([
   'auth:sanctum',
   'verified',
   config('jetstream.auth_session')
-- 
2.45.2


From 885e5183a81ab9df6d7ccfda9cf28847c0aa6404 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Tue, 26 Aug 2025 17:07:40 -0600
Subject: [PATCH 14/18] =?UTF-8?q?Correci=C3=B3n=20Obras?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/Components/Dashboard/Maps.vue    | 916 ++++++++++++------
 .../js/Components/Dashboard/MapsCopy.vue      | 721 ++++++++++++++
 resources/js/Pages/App/Obras.vue              |  32 +-
 3 files changed, 1374 insertions(+), 295 deletions(-)
 create mode 100644 resources/js/Components/Dashboard/MapsCopy.vue

diff --git a/resources/js/Components/Dashboard/Maps.vue b/resources/js/Components/Dashboard/Maps.vue
index 39b88c6..bc18343 100644
--- a/resources/js/Components/Dashboard/Maps.vue
+++ b/resources/js/Components/Dashboard/Maps.vue
@@ -1,10 +1,572 @@
+<script setup>
+import { ref, reactive, onMounted, computed, watch } from "vue";
+import { Loader } from "@googlemaps/js-api-loader";
+
+const props = defineProps({
+  counters: {
+    type: Object,
+    required: true,
+  },
+});
+
+const mapContainer = ref(null);
+const loading = ref(true);
+const error = ref(null);
+const map = ref(null);
+const markers = ref([]);
+const geocoder = ref(null);
+
+// Filtros activos
+const filters = reactive({
+  sin_avances: true,
+  abiertas: true,
+  finalizadas: true,
+});
+
+// Configuración de colores por estado
+const markerColors = {
+  sin_avances: "#EF4444", // Rojo
+  abiertas: "#F59E0B", // Amarillo
+  finalizadas: "#10B981", // Verde
+};
+
+// Estadísticas de procesamiento
+const processingStats = ref({
+  total: 0,
+  successful: 0,
+  failed: 0,
+  outOfBounds: 0,
+});
+
+// Contador de marcadores visibles
+const visibleMarkersCount = computed(() => {
+  return markers.value.filter((marker) => marker.visible).length;
+});
+
+// Coordenadas del centro de Comalcalco, Tabasco
+const COMALCALCO_CENTER = {
+  lat: 18.2669,
+  lng: -93.2072,
+};
+
+// Límites expandidos de Tabasco (más amplios para capturar todas las obras)
+const TABASCO_BOUNDS = {
+  north: 18.7, // Expandido hacia el norte
+  south: 17.3, // Expandido hacia el sur
+  east: -92.0, // Expandido hacia el este
+  west: -94.7, // Expandido hacia el oeste
+};
+
+// Cache para geocodificación (evitar llamadas duplicadas)
+const geocodingCache = new Map();
+
+const initMap = async () => {
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const loader = new Loader({
+      apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
+      version: "weekly",
+      libraries: ["places"],
+    });
+
+    const google = await loader.load();
+
+    if (!google.maps) {
+      throw new Error("Google Maps no se cargó correctamente");
+    }
+
+    // Inicializar el mapa con zoom más amplio
+    map.value = new google.maps.Map(mapContainer.value, {
+      center: COMALCALCO_CENTER,
+      zoom: 11, // Zoom más amplio para ver toda la región
+      restriction: {
+        latLngBounds: TABASCO_BOUNDS,
+        strictBounds: false,
+      },
+      mapTypeControl: true,
+      streetViewControl: true,
+      fullscreenControl: true,
+      zoomControl: true,
+    });
+
+    geocoder.value = new google.maps.Geocoder();
+
+    await loadMarkers();
+  } catch (err) {
+    console.error("Error loading Google Maps:", err);
+    error.value = err.message || "Error al cargar Google Maps";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadMarkers = async () => {
+  if (!map.value || !geocoder.value) return;
+
+  // Limpiar marcadores existentes
+  clearMarkers();
+
+  // Resetear estadísticas
+  processingStats.value = {
+    total: 0,
+    successful: 0,
+    failed: 0,
+    outOfBounds: 0,
+    duplicates: 0,
+  };
+
+  const allObras = [
+    ...props.counters.sin_avances.detalles.map((obra) => ({
+      ...obra,
+      estado: "sin_avances",
+    })),
+    ...props.counters.abiertas.detalles.map((obra) => ({
+      ...obra,
+      estado: "abiertas",
+    })),
+    ...props.counters.finalizadas.detalles.map((obra) => ({
+      ...obra,
+      estado: "finalizadas",
+    })),
+  ];
+
+  processingStats.value.total = allObras.length;
+
+  console.table(
+    allObras.map((obra) => ({
+      proyecto: obra.num_proyecto,
+      direccion: obra.direccion_obra,
+      estado: obra.estado,
+    }))
+  );
+
+  // Agrupar obras por dirección
+  const obrasPorDireccion = new Map();
+  allObras.forEach(obra => {
+    const direccion = obra.direccion_obra;
+    if (!obrasPorDireccion.has(direccion)) {
+      obrasPorDireccion.set(direccion, []);
+    }
+    obrasPorDireccion.get(direccion).push(obra);
+  });
+
+  processingStats.value.total = allObras.length;
+
+  // Procesar grupos de obras por dirección en lotes
+  const direcciones = Array.from(obrasPorDireccion.keys());
+  const batchSize = 5;
+
+  for (let i = 0; i < direcciones.length; i += batchSize) {
+    const batch = direcciones.slice(i, i + batchSize);
+    const batchPromises = batch.map(direccion =>
+      createMarkerForDireccion(direccion, obrasPorDireccion.get(direccion))
+    );
+
+    await Promise.allSettled(batchPromises);
+
+    if (i + batchSize < direcciones.length) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+  }
+  updateMarkers();
+};
+
+const createMarkerForDireccion = async (direccion, obrasEnDireccion) => {
+  if (!direccion || !geocoder.value) {
+    obrasEnDireccion.forEach(() => processingStats.value.failed++);
+    return;
+  }
+
+  // Construir direcciones alternativas para geocodificación
+  const addresses = [
+    `${direccion}, Comalcalco, Tabasco, México`,
+    `${direccion}, Tabasco, México`,
+    `${direccion}, México`,
+  ];
+
+  // Verificar cache primero
+  const cacheKey = direccion;
+  if (geocodingCache.has(cacheKey)) {
+    const cachedData = geocodingCache.get(cacheKey);
+    processingStats.value.duplicates += obrasEnDireccion.length - 1;
+    return createMarkerFromPosition(obrasEnDireccion, cachedData.position, cachedData.formatted_address);
+  }
+
+  // Intentar geocodificación con direcciones alternativas
+  for (const address of addresses) {
+    try {
+      const result = await geocodeAddress(address);
+      if (result.success) {
+        // Guardar en cache
+        geocodingCache.set(cacheKey, {
+          position: result.position,
+          formatted_address: result.formatted_address,
+        });
+
+        return createMarkerFromPosition(obrasEnDireccion, result.position, result.formatted_address);
+      }
+    } catch (err) {
+      console.warn(`Error geocodificando ${address}:`, err);
+    }
+  }
+
+  // Si todas las direcciones fallan, crear marcador fallback
+  processingStats.value.failed += obrasEnDireccion.length;
+
+  const randomOffset = {
+    lat: (Math.random() - 0.5) * 0.02,
+    lng: (Math.random() - 0.5) * 0.02,
+  };
+
+  const fallbackPosition = {
+    lat: COMALCALCO_CENTER.lat + randomOffset.lat,
+    lng: COMALCALCO_CENTER.lng + randomOffset.lng,
+  };
+
+  return createMarkerFromPosition(obrasEnDireccion, fallbackPosition, "Ubicación aproximada - Comalcalco, Tabasco");
+};
+
+const geocodeAddress = (address) => {
+  return new Promise((resolve, reject) => {
+    geocoder.value.geocode({ address }, (results, status) => {
+      if (status === "OK" && results[0]) {
+        const position = results[0].geometry.location;
+        const lat = position.lat();
+        const lng = position.lng();
+
+        resolve({
+          success: true,
+          position: { lat, lng },
+          formatted_address: results[0].formatted_address,
+        });
+      } else {
+        resolve({
+          success: false,
+          status,
+          address,
+        });
+      }
+    });
+  });
+};
+
+const createMarkerFromPosition = (obrasEnPosicion, position, formatted_address) => {
+  const lat = position.lat;
+  const lng = position.lng;
+
+  // Verificar límites expandidos
+  if (
+    lat < TABASCO_BOUNDS.south ||
+    lat > TABASCO_BOUNDS.north ||
+    lng < TABASCO_BOUNDS.west ||
+    lng > TABASCO_BOUNDS.east
+  ) {
+    processingStats.value.outOfBounds += obrasEnPosicion.length;
+  }
+
+  // Usar la primera obra para definir el marcador principal
+  const obraPrincipal = obrasEnPosicion[0];
+
+  const marker = new google.maps.Marker({
+    position: new google.maps.LatLng(lat, lng),
+    map: map.value,
+    title: obrasEnPosicion.length === 1
+      ? `${obraPrincipal.num_proyecto} - ${obraPrincipal.direccion_obra}`
+      : `${obrasEnPosicion.length} obras en ${obraPrincipal.direccion_obra}`,
+    icon: createCustomMarker(obraPrincipal.estado),
+    visible: filters[obraPrincipal.estado],
+    animation: google.maps.Animation.DROP,
+  });
+
+  // Info window con todas las obras en esa posición
+  const infoWindow = new google.maps.InfoWindow({
+    content: createMultipleInfoWindowContent(obrasEnPosicion, formatted_address),
+  });
+
+  marker.addListener("click", () => {
+    markers.value.forEach((m) => m.infoWindow?.close());
+    infoWindow.open(map.value, marker);
+  });
+
+  markers.value.push({
+    marker,
+    infoWindow,
+    estado: obraPrincipal.estado,
+    obras: obrasEnPosicion,
+    visible: filters[obraPrincipal.estado],
+    position: { lat, lng },
+  });
+
+  processingStats.value.successful += obrasEnPosicion.length;
+};
+
+const createCustomMarker = (estado) => {
+  const color = markerColors[estado];
+  const width = 32;
+  const height = 48;
+
+  return {
+    url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
+      <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <!-- Sombra para el marcador -->
+          <filter id="dropshadow-${estado}" x="-50%" y="-50%" width="200%" height="200%">
+            <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.3)" flood-opacity="0.5"/>
+          </filter>
+
+          <!-- Gradiente para dar volumen -->
+          <radialGradient id="gradient-${estado}" cx="30%" cy="20%" r="70%">
+            <stop offset="0%" style="stop-color:white;stop-opacity:0.3" />
+            <stop offset="100%" style="stop-color:${color};stop-opacity:1" />
+          </radialGradient>
+        </defs>
+
+        <!-- Forma principal del marcador (gota/pin) -->
+        <path d="M ${width / 2} ${height - 4}
+                 C ${width / 2} ${height - 4},
+                   ${width * 0.125} ${height * 0.58},
+                   ${width * 0.125} ${height * 0.375}
+                 C ${width * 0.125} ${height * 0.167},
+                   ${width * 0.292} 2,
+                   ${width / 2} 2
+                 C ${width * 0.708} 2,
+                   ${width * 0.875} ${height * 0.167},
+                   ${width * 0.875} ${height * 0.375}
+                 C ${width * 0.875} ${height * 0.58},
+                   ${width / 2} ${height - 4},
+                   ${width / 2} ${height - 4} Z"
+              fill="url(#gradient-${estado})"
+              stroke="white"
+              stroke-width="1.5"
+              filter="url(#dropshadow-${estado})"/>
+
+        <!-- Borde interior más oscuro -->
+        <path d="M ${width / 2} ${height - 4}
+                 C ${width / 2} ${height - 4},
+                   ${width * 0.125} ${height * 0.58},
+                   ${width * 0.125} ${height * 0.375}
+                 C ${width * 0.125} ${height * 0.167},
+                   ${width * 0.292} 2,
+                   ${width / 2} 2
+                 C ${width * 0.708} 2,
+                   ${width * 0.875} ${height * 0.167},
+                   ${width * 0.875} ${height * 0.375}
+                 C ${width * 0.875} ${height * 0.58},
+                   ${width / 2} ${height - 4},
+                   ${width / 2} ${height - 4} Z"
+              fill="none"
+              stroke="${color}"
+              stroke-width="1"
+              opacity="0.8"/>
+
+        <!-- Círculo interior blanco -->
+        <circle cx="${width / 2}"
+                cy="${height * 0.375}"
+                r="${width * 0.25}"
+                fill="white"
+                stroke="${color}"
+                stroke-width="1"/>
+      </svg>
+    `)}`,
+    scaledSize: new google.maps.Size(width, height),
+    anchor: new google.maps.Point(width / 2, height - 4),
+    origin: new google.maps.Point(0, 0),
+  };
+};
+
+const createMultipleInfoWindowContent = (obras, formatted_address = null) => {
+  if (obras.length === 1) {
+    return createInfoWindowContent(obras[0], formatted_address);
+  }
+
+  const direccion = obras[0].direccion_obra;
+
+  let obrasHtml = '';
+  obras.forEach(obra => {
+    const estadoConfig = {
+      sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
+      abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
+      finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
+    };
+
+    const config = estadoConfig[obra.estado];
+    const cumplimiento = obra.cumplimiento_total ? `${Number(obra.cumplimiento_total).toFixed(1)}%` : "N/A";
+
+    obrasHtml += `
+      <div class="border-b border-gray-200 pb-3 mb-3 last:border-b-0 last:pb-0 last:mb-0">
+        <div class="flex items-center justify-between mb-2">
+          <h4 class="font-semibold text-gray-900">${obra.num_proyecto || "N/A"}</h4>
+          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${config.color}">
+            ${config.label}
+          </span>
+        </div>
+        <div class="flex items-center space-x-2">
+          <div class="flex-1 bg-gray-200 rounded-full h-1.5">
+            <div class="h-1.5 rounded-full transition-all duration-300 ${
+              obra.estado === "finalizadas" ? "bg-green-500" : obra.estado === "abiertas" ? "bg-yellow-500" : "bg-red-500"
+            }" style="width: ${Number(obra.cumplimiento_total) || 0}%"></div>
+          </div>
+          <span class="text-xs font-medium text-gray-700 min-w-[35px]">${cumplimiento}</span>
+        </div>
+      </div>
+    `;
+  });
+
+  return `
+    <div class="p-4 max-w-sm">
+      <div class="mb-3">
+        <h3 class="font-bold text-gray-900 text-lg mb-1">${obras.length} Obras en esta ubicación</h3>
+        <p class="text-xs text-gray-600">${direccion}</p>
+        ${formatted_address ? `<p class="text-xs text-gray-500 mt-1">${formatted_address}</p>` : ''}
+      </div>
+      <div class="space-y-3 text-sm max-h-60 overflow-y-auto">
+        ${obrasHtml}
+      </div>
+    </div>
+  `;
+};
+
+const createInfoWindowContent = (obra, formatted_address = null) => {
+  const estadoConfig = {
+    sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
+    abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
+    finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
+  };
+
+  const config = estadoConfig[obra.estado];
+  const cumplimiento = obra.cumplimiento_total
+    ? `${Number(obra.cumplimiento_total).toFixed(1)}%`
+    : "N/A";
+
+  return `
+    <div class="p-4 max-w-sm">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="font-bold text-gray-900 text-lg">${
+          obra.num_proyecto || "N/A"
+        }</h3>
+        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+          config.color
+        }">
+          ${config.label}
+        </span>
+      </div>
+
+      <div class="space-y-3 text-sm">
+        <div>
+          <p class="font-medium text-gray-700 mb-1">Dirección Original:</p>
+          <p class="text-gray-600 text-xs">${obra.direccion_obra || "N/A"}</p>
+        </div>
+
+        ${
+          formatted_address
+            ? `
+        <div>
+          <p class="font-medium text-gray-700 mb-1">Ubicación Encontrada:</p>
+          <p class="text-gray-500 text-xs">${formatted_address}</p>
+        </div>
+        `
+            : ""
+        }
+
+        <div>
+          <p class="font-medium text-gray-700 mb-1">Cumplimiento:</p>
+          <div class="flex items-center space-x-2">
+            <div class="flex-1 bg-gray-200 rounded-full h-2">
+              <div class="h-2 rounded-full transition-all duration-300 ${
+                obra.estado === "finalizadas"
+                  ? "bg-green-500"
+                  : obra.estado === "abiertas"
+                  ? "bg-yellow-500"
+                  : "bg-red-500"
+              }"
+                   style="width: ${
+                     Number(obra.cumplimiento_total) || 0
+                   }%"></div>
+            </div>
+            <span class="text-xs font-medium text-gray-700 min-w-[40px]">${cumplimiento}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+};
+
+const updateMarkers = () => {
+  let visibleCount = 0;
+  markers.value.forEach(({ marker, estado }) => {
+    const shouldShow = filters[estado];
+    marker.setVisible(shouldShow);
+
+    if (shouldShow) visibleCount++;
+
+    // Actualizar el estado visible del marcador
+    const markerIndex = markers.value.findIndex((m) => m.marker === marker);
+    if (markerIndex !== -1) {
+      markers.value[markerIndex].visible = shouldShow;
+    }
+  });
+};
+
+const clearMarkers = () => {
+  markers.value.forEach(({ marker, infoWindow }) => {
+    infoWindow?.close();
+    marker.setMap(null);
+  });
+  markers.value = [];
+  geocodingCache.clear(); // Limpiar cache al recargar
+};
+
+// Función para ajustar el viewport del mapa a todos los marcadores visibles
+const fitMapToMarkers = () => {
+  if (!map.value || markers.value.length === 0) return;
+
+  const bounds = new google.maps.LatLngBounds();
+  const visibleMarkers = markers.value.filter((m) => m.visible);
+
+  if (visibleMarkers.length === 0) return;
+
+  visibleMarkers.forEach(({ position }) => {
+    bounds.extend(new google.maps.LatLng(position.lat, position.lng));
+  });
+
+  map.value.fitBounds(bounds);
+
+  // Asegurar zoom mínimo
+  const listener = google.maps.event.addListener(map.value, "idle", () => {
+    if (map.value.getZoom() > 15) map.value.setZoom(15);
+    google.maps.event.removeListener(listener);
+  });
+};
+
+// Recargar marcadores cuando cambien los contadores
+watch(
+  () => props.counters,
+  () => {
+    if (map.value) {
+      loadMarkers();
+    }
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  initMap();
+});
+</script>
+
 <template>
   <div class="bg-white rounded-lg shadow-lg overflow-hidden">
-    <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">
+    <div
+      class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200"
+    >
       <div class="flex items-center justify-between">
         <div>
           <h3 class="text-lg font-medium text-gray-900">Mapa de Obras</h3>
-          <p class="text-sm text-gray-600 mt-1">Ubicación geográfica de proyectos en Comalcalco, Tabasco</p>
+          <p class="text-sm text-gray-600 mt-1">
+            Ubicación geográfica de proyectos en Comalcalco, Tabasco
+          </p>
         </div>
 
         <!-- Filtros por estado -->
@@ -17,7 +579,10 @@
               type="checkbox"
               class="rounded border-gray-300 text-red-600 focus:ring-red-500"
             />
-            <label for="sin-avances" class="flex items-center text-sm text-gray-700">
+            <label
+              for="sin-avances"
+              class="flex items-center text-sm text-gray-700"
+            >
               <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
               Sin avances ({{ counters.sin_avances.count }})
             </label>
@@ -31,7 +596,10 @@
               type="checkbox"
               class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500"
             />
-            <label for="abiertas" class="flex items-center text-sm text-gray-700">
+            <label
+              for="abiertas"
+              class="flex items-center text-sm text-gray-700"
+            >
               <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
               Abiertas ({{ counters.abiertas.count }})
             </label>
@@ -45,39 +613,92 @@
               type="checkbox"
               class="rounded border-gray-300 text-green-600 focus:ring-green-500"
             />
-            <label for="finalizadas" class="flex items-center text-sm text-gray-700">
+            <label
+              for="finalizadas"
+              class="flex items-center text-sm text-gray-700"
+            >
               <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
               Finalizadas ({{ counters.finalizadas.count }})
             </label>
           </div>
         </div>
       </div>
+
+      <!-- Controles adicionales -->
+      <div class="flex items-center justify-between mt-3">
+        <div class="text-sm text-gray-600">
+          Marcadores visibles: {{ visibleMarkersCount }} de {{ markers.length }}
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <button
+            @click="fitMapToMarkers"
+            class="px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+          >
+            Ajustar Vista
+          </button>
+          <button
+            @click="loadMarkers"
+            class="px-3 py-1 text-xs bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
+          >
+            Recargar
+          </button>
+        </div>
+      </div>
     </div>
 
     <!-- Mapa -->
     <div ref="mapContainer" class="w-full h-96 relative">
-      <div v-if="loading" class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10">
+      <div
+        v-if="loading"
+        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
+      >
         <div class="text-center">
-          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
-          <p class="mt-2 text-sm text-gray-600">Cargando mapa...</p>
+          <div
+            class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"
+          ></div>
+          <p class="mt-2 text-sm text-gray-600">
+            Cargando mapa y geocodificando direcciones...
+          </p>
+          <p class="mt-1 text-xs text-gray-500">
+            Esto puede tomar unos segundos
+          </p>
         </div>
       </div>
 
-      <div v-if="error" class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10">
+      <div
+        v-if="error"
+        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
+      >
         <div class="text-center">
-          <svg class="mx-auto h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          <svg
+            class="mx-auto h-12 w-12 text-red-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
           </svg>
-          <h3 class="mt-2 text-sm font-medium text-gray-900">Error al cargar el mapa</h3>
+          <h3 class="mt-2 text-sm font-medium text-gray-900">
+            Error al cargar el mapa
+          </h3>
           <p class="mt-1 text-sm text-gray-500">{{ error }}</p>
-          <button @click="initMap" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
+          <button
+            @click="initMap"
+            class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
+          >
             Reintentar
           </button>
         </div>
       </div>
     </div>
 
-    <!-- Leyenda -->
+    <!-- Leyenda mejorada -->
     <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
       <div class="flex items-center justify-between text-xs text-gray-600">
         <div class="flex items-center space-x-4">
@@ -98,270 +719,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { ref, reactive, onMounted, computed, watch } from 'vue';
-import { Loader } from '@googlemaps/js-api-loader';
-
-const props = defineProps({
-  counters: {
-    type: Object,
-    required: true
-  }
-});
-
-const mapContainer = ref(null);
-const loading = ref(true);
-const error = ref(null);
-const map = ref(null);
-const markers = ref([]);
-const geocoder = ref(null);
-
-// Filtros activos
-const filters = reactive({
-  sin_avances: true,
-  abiertas: true,
-  finalizadas: true
-});
-
-// Configuración de colores por estado
-const markerColors = {
-  sin_avances: '#EF4444', // Rojo
-  abiertas: '#F59E0B',     // Amarillo
-  finalizadas: '#10B981'   // Verde
-};
-
-// Contador de marcadores visibles
-const visibleMarkersCount = computed(() => {
-  return markers.value.filter(marker => marker.visible).length;
-});
-
-// Coordenadas del centro de Comalcalco, Tabasco
-const COMALCALCO_CENTER = {
-  lat: 18.2669,
-  lng: -93.2072
-};
-
-// Límites aproximados de Comalcalco
-const COMALCALCO_BOUNDS = {
-  north: 19.35,
-  south: 18.18,
-  east: -93.10,
-  west: -93.30
-};
-
-const initMap = async () => {
-  loading.value = true;
-  error.value = null;
-
-  try {
-    const loader = new Loader({
-      apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
-      version: 'weekly',
-      libraries: ['places']
-    });
-
-    // Cargar Google Maps
-    const google = await loader.load();
-
-    // Verificar que google.maps esté disponible
-    if (!google.maps) {
-      throw new Error('Google Maps no se cargó correctamente');
-    }
-
-    // Inicializar el mapa centrado en Comalcalco
-    map.value = new google.maps.Map(mapContainer.value, {
-      center: COMALCALCO_CENTER,
-      zoom: 12,
-      restriction: {
-        latLngBounds: COMALCALCO_BOUNDS,
-        strictBounds: false
-      },
-      mapTypeControl: true,
-      streetViewControl: true,
-      fullscreenControl: true,
-      zoomControl: true
-    });
-
-    // Inicializar el geocodificador
-    geocoder.value = new google.maps.Geocoder();
-
-    // Cargar marcadores de obras
-    await loadMarkers();
-
-  } catch (err) {
-    console.error('Error loading Google Maps:', err);
-    error.value = err.message || 'Error al cargar Google Maps';
-  } finally {
-    loading.value = false;
-  }
-};
-
-const loadMarkers = async () => {
-  if (!map.value || !geocoder.value) return;
-
-  // Limpiar marcadores existentes
-  clearMarkers();
-
-  const allObras = [
-    ...props.counters.sin_avances.detalles.map(obra => ({ ...obra, estado: 'sin_avances' })),
-    ...props.counters.abiertas.detalles.map(obra => ({ ...obra, estado: 'abiertas' })),
-    ...props.counters.finalizadas.detalles.map(obra => ({ ...obra, estado: 'finalizadas' }))
-  ];
-
-  for (const obra of allObras) {
-    try {
-      await createMarkerForObra(obra);
-    } catch (err) {
-      console.warn(`Error creating marker for obra ${obra.num_proyecto}:`, err);
-    }
-  }
-
-  updateMarkers();
-};
-
-const createMarkerForObra = async (obra) => {
-  if (!obra.direccion_obra || !geocoder.value) return;
-
-  const address = `${obra.direccion_obra}, Comalcalco, Tabasco, México`;
-
-  return new Promise((resolve, reject) => {
-    geocoder.value.geocode({ address }, (results, status) => {
-      if (status === 'OK' && results[0]) {
-        const position = results[0].geometry.location;
-
-        // Verificar que la ubicación esté dentro de los límites de Comalcalco
-        const lat = position.lat();
-        const lng = position.lng();
-
-        if (lat < COMALCALCO_BOUNDS.south || lat > COMALCALCO_BOUNDS.north ||
-            lng < COMALCALCO_BOUNDS.west || lng > COMALCALCO_BOUNDS.east) {
-          console.warn(`Obra ${obra.num_proyecto} fuera de los límites de Comalcalco`);
-          resolve();
-          return;
-        }
-
-        const marker = new google.maps.Marker({
-          position,
-          map: map.value,
-          title: `${obra.num_proyecto} - ${obra.direccion_obra}`,
-          icon: createCustomMarker(obra.estado),
-          visible: filters[obra.estado]
-        });
-
-        // Info window con detalles de la obra
-        const infoWindow = new google.maps.InfoWindow({
-          content: createInfoWindowContent(obra)
-        });
-
-        marker.addListener('click', () => {
-          // Cerrar otras ventanas abiertas
-          markers.value.forEach(m => m.infoWindow?.close());
-          infoWindow.open(map.value, marker);
-        });
-
-        markers.value.push({
-          marker,
-          infoWindow,
-          estado: obra.estado,
-          obra,
-          visible: filters[obra.estado]
-        });
-
-        resolve();
-      } else {
-        console.warn(`Geocoding failed for ${address}: ${status}`);
-        resolve();
-      }
-    });
-  });
-};
-
-const createCustomMarker = (estado) => {
-  const color = markerColors[estado];
-
-  return {
-    url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-      <svg width="24" height="36" viewBox="0 0 24 36" xmlns="http://www.w3.org/2000/svg">
-        <path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24c0-6.627-5.373-12-12-12z" fill="${color}"/>
-        <circle cx="12" cy="12" r="6" fill="white"/>
-        <circle cx="12" cy="12" r="3" fill="${color}"/>
-      </svg>
-    `)}`,
-    scaledSize: new google.maps.Size(24, 36),
-    anchor: new google.maps.Point(12, 36)
-  };
-};
-
-const createInfoWindowContent = (obra) => {
-  const estadoConfig = {
-    sin_avances: { color: 'bg-red-100 text-red-800', label: 'Sin avances' },
-    abiertas: { color: 'bg-yellow-100 text-yellow-800', label: 'En proceso' },
-    finalizadas: { color: 'bg-green-100 text-green-800', label: 'Finalizada' }
-  };
-
-  const config = estadoConfig[obra.estado];
-  const cumplimiento = obra.cumplimiento_total ? `${Number(obra.cumplimiento_total).toFixed(1)}%` : 'N/A';
-
-  return `
-    <div class="p-4 max-w-sm">
-      <div class="flex items-center justify-between mb-3">
-        <h3 class="font-bold text-gray-900">${obra.num_proyecto || 'N/A'}</h3>
-        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${config.color}">
-          ${config.label}
-        </span>
-      </div>
-
-      <div class="space-y-2 text-sm">
-        <div>
-          <p class="font-medium text-gray-700">Dirección:</p>
-          <p class="text-gray-600">${obra.direccion_obra || 'N/A'}</p>
-        </div>
-
-        <div>
-          <p class="font-medium text-gray-700">Cumplimiento:</p>
-          <div class="flex items-center space-x-2">
-            <div class="flex-1 bg-gray-200 rounded-full h-2">
-              <div class="h-2 rounded-full ${obra.estado === 'finalizadas' ? 'bg-green-500' : obra.estado === 'abiertas' ? 'bg-yellow-500' : 'bg-red-500'}"
-                   style="width: ${Number(obra.cumplimiento_total) || 0}%"></div>
-            </div>
-            <span class="text-xs font-medium text-gray-700">${cumplimiento}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-};
-
-const updateMarkers = () => {
-  markers.value.forEach(({ marker, estado }) => {
-    const shouldShow = filters[estado];
-    marker.setVisible(shouldShow);
-
-    // Actualizar el estado visible del marcador
-    const markerIndex = markers.value.findIndex(m => m.marker === marker);
-    if (markerIndex !== -1) {
-      markers.value[markerIndex].visible = shouldShow;
-    }
-  });
-};
-
-const clearMarkers = () => {
-  markers.value.forEach(({ marker, infoWindow }) => {
-    infoWindow?.close();
-    marker.setMap(null);
-  });
-  markers.value = [];
-};
-
-// Recargar marcadores cuando cambien los contadores
-watch(() => props.counters, () => {
-  if (map.value) {
-    loadMarkers();
-  }
-}, { deep: true });
-
-onMounted(() => {
-  initMap();
-});
-</script>
diff --git a/resources/js/Components/Dashboard/MapsCopy.vue b/resources/js/Components/Dashboard/MapsCopy.vue
new file mode 100644
index 0000000..bc18343
--- /dev/null
+++ b/resources/js/Components/Dashboard/MapsCopy.vue
@@ -0,0 +1,721 @@
+<script setup>
+import { ref, reactive, onMounted, computed, watch } from "vue";
+import { Loader } from "@googlemaps/js-api-loader";
+
+const props = defineProps({
+  counters: {
+    type: Object,
+    required: true,
+  },
+});
+
+const mapContainer = ref(null);
+const loading = ref(true);
+const error = ref(null);
+const map = ref(null);
+const markers = ref([]);
+const geocoder = ref(null);
+
+// Filtros activos
+const filters = reactive({
+  sin_avances: true,
+  abiertas: true,
+  finalizadas: true,
+});
+
+// Configuración de colores por estado
+const markerColors = {
+  sin_avances: "#EF4444", // Rojo
+  abiertas: "#F59E0B", // Amarillo
+  finalizadas: "#10B981", // Verde
+};
+
+// Estadísticas de procesamiento
+const processingStats = ref({
+  total: 0,
+  successful: 0,
+  failed: 0,
+  outOfBounds: 0,
+});
+
+// Contador de marcadores visibles
+const visibleMarkersCount = computed(() => {
+  return markers.value.filter((marker) => marker.visible).length;
+});
+
+// Coordenadas del centro de Comalcalco, Tabasco
+const COMALCALCO_CENTER = {
+  lat: 18.2669,
+  lng: -93.2072,
+};
+
+// Límites expandidos de Tabasco (más amplios para capturar todas las obras)
+const TABASCO_BOUNDS = {
+  north: 18.7, // Expandido hacia el norte
+  south: 17.3, // Expandido hacia el sur
+  east: -92.0, // Expandido hacia el este
+  west: -94.7, // Expandido hacia el oeste
+};
+
+// Cache para geocodificación (evitar llamadas duplicadas)
+const geocodingCache = new Map();
+
+const initMap = async () => {
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const loader = new Loader({
+      apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
+      version: "weekly",
+      libraries: ["places"],
+    });
+
+    const google = await loader.load();
+
+    if (!google.maps) {
+      throw new Error("Google Maps no se cargó correctamente");
+    }
+
+    // Inicializar el mapa con zoom más amplio
+    map.value = new google.maps.Map(mapContainer.value, {
+      center: COMALCALCO_CENTER,
+      zoom: 11, // Zoom más amplio para ver toda la región
+      restriction: {
+        latLngBounds: TABASCO_BOUNDS,
+        strictBounds: false,
+      },
+      mapTypeControl: true,
+      streetViewControl: true,
+      fullscreenControl: true,
+      zoomControl: true,
+    });
+
+    geocoder.value = new google.maps.Geocoder();
+
+    await loadMarkers();
+  } catch (err) {
+    console.error("Error loading Google Maps:", err);
+    error.value = err.message || "Error al cargar Google Maps";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadMarkers = async () => {
+  if (!map.value || !geocoder.value) return;
+
+  // Limpiar marcadores existentes
+  clearMarkers();
+
+  // Resetear estadísticas
+  processingStats.value = {
+    total: 0,
+    successful: 0,
+    failed: 0,
+    outOfBounds: 0,
+    duplicates: 0,
+  };
+
+  const allObras = [
+    ...props.counters.sin_avances.detalles.map((obra) => ({
+      ...obra,
+      estado: "sin_avances",
+    })),
+    ...props.counters.abiertas.detalles.map((obra) => ({
+      ...obra,
+      estado: "abiertas",
+    })),
+    ...props.counters.finalizadas.detalles.map((obra) => ({
+      ...obra,
+      estado: "finalizadas",
+    })),
+  ];
+
+  processingStats.value.total = allObras.length;
+
+  console.table(
+    allObras.map((obra) => ({
+      proyecto: obra.num_proyecto,
+      direccion: obra.direccion_obra,
+      estado: obra.estado,
+    }))
+  );
+
+  // Agrupar obras por dirección
+  const obrasPorDireccion = new Map();
+  allObras.forEach(obra => {
+    const direccion = obra.direccion_obra;
+    if (!obrasPorDireccion.has(direccion)) {
+      obrasPorDireccion.set(direccion, []);
+    }
+    obrasPorDireccion.get(direccion).push(obra);
+  });
+
+  processingStats.value.total = allObras.length;
+
+  // Procesar grupos de obras por dirección en lotes
+  const direcciones = Array.from(obrasPorDireccion.keys());
+  const batchSize = 5;
+
+  for (let i = 0; i < direcciones.length; i += batchSize) {
+    const batch = direcciones.slice(i, i + batchSize);
+    const batchPromises = batch.map(direccion =>
+      createMarkerForDireccion(direccion, obrasPorDireccion.get(direccion))
+    );
+
+    await Promise.allSettled(batchPromises);
+
+    if (i + batchSize < direcciones.length) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+  }
+  updateMarkers();
+};
+
+const createMarkerForDireccion = async (direccion, obrasEnDireccion) => {
+  if (!direccion || !geocoder.value) {
+    obrasEnDireccion.forEach(() => processingStats.value.failed++);
+    return;
+  }
+
+  // Construir direcciones alternativas para geocodificación
+  const addresses = [
+    `${direccion}, Comalcalco, Tabasco, México`,
+    `${direccion}, Tabasco, México`,
+    `${direccion}, México`,
+  ];
+
+  // Verificar cache primero
+  const cacheKey = direccion;
+  if (geocodingCache.has(cacheKey)) {
+    const cachedData = geocodingCache.get(cacheKey);
+    processingStats.value.duplicates += obrasEnDireccion.length - 1;
+    return createMarkerFromPosition(obrasEnDireccion, cachedData.position, cachedData.formatted_address);
+  }
+
+  // Intentar geocodificación con direcciones alternativas
+  for (const address of addresses) {
+    try {
+      const result = await geocodeAddress(address);
+      if (result.success) {
+        // Guardar en cache
+        geocodingCache.set(cacheKey, {
+          position: result.position,
+          formatted_address: result.formatted_address,
+        });
+
+        return createMarkerFromPosition(obrasEnDireccion, result.position, result.formatted_address);
+      }
+    } catch (err) {
+      console.warn(`Error geocodificando ${address}:`, err);
+    }
+  }
+
+  // Si todas las direcciones fallan, crear marcador fallback
+  processingStats.value.failed += obrasEnDireccion.length;
+
+  const randomOffset = {
+    lat: (Math.random() - 0.5) * 0.02,
+    lng: (Math.random() - 0.5) * 0.02,
+  };
+
+  const fallbackPosition = {
+    lat: COMALCALCO_CENTER.lat + randomOffset.lat,
+    lng: COMALCALCO_CENTER.lng + randomOffset.lng,
+  };
+
+  return createMarkerFromPosition(obrasEnDireccion, fallbackPosition, "Ubicación aproximada - Comalcalco, Tabasco");
+};
+
+const geocodeAddress = (address) => {
+  return new Promise((resolve, reject) => {
+    geocoder.value.geocode({ address }, (results, status) => {
+      if (status === "OK" && results[0]) {
+        const position = results[0].geometry.location;
+        const lat = position.lat();
+        const lng = position.lng();
+
+        resolve({
+          success: true,
+          position: { lat, lng },
+          formatted_address: results[0].formatted_address,
+        });
+      } else {
+        resolve({
+          success: false,
+          status,
+          address,
+        });
+      }
+    });
+  });
+};
+
+const createMarkerFromPosition = (obrasEnPosicion, position, formatted_address) => {
+  const lat = position.lat;
+  const lng = position.lng;
+
+  // Verificar límites expandidos
+  if (
+    lat < TABASCO_BOUNDS.south ||
+    lat > TABASCO_BOUNDS.north ||
+    lng < TABASCO_BOUNDS.west ||
+    lng > TABASCO_BOUNDS.east
+  ) {
+    processingStats.value.outOfBounds += obrasEnPosicion.length;
+  }
+
+  // Usar la primera obra para definir el marcador principal
+  const obraPrincipal = obrasEnPosicion[0];
+
+  const marker = new google.maps.Marker({
+    position: new google.maps.LatLng(lat, lng),
+    map: map.value,
+    title: obrasEnPosicion.length === 1
+      ? `${obraPrincipal.num_proyecto} - ${obraPrincipal.direccion_obra}`
+      : `${obrasEnPosicion.length} obras en ${obraPrincipal.direccion_obra}`,
+    icon: createCustomMarker(obraPrincipal.estado),
+    visible: filters[obraPrincipal.estado],
+    animation: google.maps.Animation.DROP,
+  });
+
+  // Info window con todas las obras en esa posición
+  const infoWindow = new google.maps.InfoWindow({
+    content: createMultipleInfoWindowContent(obrasEnPosicion, formatted_address),
+  });
+
+  marker.addListener("click", () => {
+    markers.value.forEach((m) => m.infoWindow?.close());
+    infoWindow.open(map.value, marker);
+  });
+
+  markers.value.push({
+    marker,
+    infoWindow,
+    estado: obraPrincipal.estado,
+    obras: obrasEnPosicion,
+    visible: filters[obraPrincipal.estado],
+    position: { lat, lng },
+  });
+
+  processingStats.value.successful += obrasEnPosicion.length;
+};
+
+const createCustomMarker = (estado) => {
+  const color = markerColors[estado];
+  const width = 32;
+  const height = 48;
+
+  return {
+    url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
+      <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <!-- Sombra para el marcador -->
+          <filter id="dropshadow-${estado}" x="-50%" y="-50%" width="200%" height="200%">
+            <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.3)" flood-opacity="0.5"/>
+          </filter>
+
+          <!-- Gradiente para dar volumen -->
+          <radialGradient id="gradient-${estado}" cx="30%" cy="20%" r="70%">
+            <stop offset="0%" style="stop-color:white;stop-opacity:0.3" />
+            <stop offset="100%" style="stop-color:${color};stop-opacity:1" />
+          </radialGradient>
+        </defs>
+
+        <!-- Forma principal del marcador (gota/pin) -->
+        <path d="M ${width / 2} ${height - 4}
+                 C ${width / 2} ${height - 4},
+                   ${width * 0.125} ${height * 0.58},
+                   ${width * 0.125} ${height * 0.375}
+                 C ${width * 0.125} ${height * 0.167},
+                   ${width * 0.292} 2,
+                   ${width / 2} 2
+                 C ${width * 0.708} 2,
+                   ${width * 0.875} ${height * 0.167},
+                   ${width * 0.875} ${height * 0.375}
+                 C ${width * 0.875} ${height * 0.58},
+                   ${width / 2} ${height - 4},
+                   ${width / 2} ${height - 4} Z"
+              fill="url(#gradient-${estado})"
+              stroke="white"
+              stroke-width="1.5"
+              filter="url(#dropshadow-${estado})"/>
+
+        <!-- Borde interior más oscuro -->
+        <path d="M ${width / 2} ${height - 4}
+                 C ${width / 2} ${height - 4},
+                   ${width * 0.125} ${height * 0.58},
+                   ${width * 0.125} ${height * 0.375}
+                 C ${width * 0.125} ${height * 0.167},
+                   ${width * 0.292} 2,
+                   ${width / 2} 2
+                 C ${width * 0.708} 2,
+                   ${width * 0.875} ${height * 0.167},
+                   ${width * 0.875} ${height * 0.375}
+                 C ${width * 0.875} ${height * 0.58},
+                   ${width / 2} ${height - 4},
+                   ${width / 2} ${height - 4} Z"
+              fill="none"
+              stroke="${color}"
+              stroke-width="1"
+              opacity="0.8"/>
+
+        <!-- Círculo interior blanco -->
+        <circle cx="${width / 2}"
+                cy="${height * 0.375}"
+                r="${width * 0.25}"
+                fill="white"
+                stroke="${color}"
+                stroke-width="1"/>
+      </svg>
+    `)}`,
+    scaledSize: new google.maps.Size(width, height),
+    anchor: new google.maps.Point(width / 2, height - 4),
+    origin: new google.maps.Point(0, 0),
+  };
+};
+
+const createMultipleInfoWindowContent = (obras, formatted_address = null) => {
+  if (obras.length === 1) {
+    return createInfoWindowContent(obras[0], formatted_address);
+  }
+
+  const direccion = obras[0].direccion_obra;
+
+  let obrasHtml = '';
+  obras.forEach(obra => {
+    const estadoConfig = {
+      sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
+      abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
+      finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
+    };
+
+    const config = estadoConfig[obra.estado];
+    const cumplimiento = obra.cumplimiento_total ? `${Number(obra.cumplimiento_total).toFixed(1)}%` : "N/A";
+
+    obrasHtml += `
+      <div class="border-b border-gray-200 pb-3 mb-3 last:border-b-0 last:pb-0 last:mb-0">
+        <div class="flex items-center justify-between mb-2">
+          <h4 class="font-semibold text-gray-900">${obra.num_proyecto || "N/A"}</h4>
+          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${config.color}">
+            ${config.label}
+          </span>
+        </div>
+        <div class="flex items-center space-x-2">
+          <div class="flex-1 bg-gray-200 rounded-full h-1.5">
+            <div class="h-1.5 rounded-full transition-all duration-300 ${
+              obra.estado === "finalizadas" ? "bg-green-500" : obra.estado === "abiertas" ? "bg-yellow-500" : "bg-red-500"
+            }" style="width: ${Number(obra.cumplimiento_total) || 0}%"></div>
+          </div>
+          <span class="text-xs font-medium text-gray-700 min-w-[35px]">${cumplimiento}</span>
+        </div>
+      </div>
+    `;
+  });
+
+  return `
+    <div class="p-4 max-w-sm">
+      <div class="mb-3">
+        <h3 class="font-bold text-gray-900 text-lg mb-1">${obras.length} Obras en esta ubicación</h3>
+        <p class="text-xs text-gray-600">${direccion}</p>
+        ${formatted_address ? `<p class="text-xs text-gray-500 mt-1">${formatted_address}</p>` : ''}
+      </div>
+      <div class="space-y-3 text-sm max-h-60 overflow-y-auto">
+        ${obrasHtml}
+      </div>
+    </div>
+  `;
+};
+
+const createInfoWindowContent = (obra, formatted_address = null) => {
+  const estadoConfig = {
+    sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
+    abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
+    finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
+  };
+
+  const config = estadoConfig[obra.estado];
+  const cumplimiento = obra.cumplimiento_total
+    ? `${Number(obra.cumplimiento_total).toFixed(1)}%`
+    : "N/A";
+
+  return `
+    <div class="p-4 max-w-sm">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="font-bold text-gray-900 text-lg">${
+          obra.num_proyecto || "N/A"
+        }</h3>
+        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+          config.color
+        }">
+          ${config.label}
+        </span>
+      </div>
+
+      <div class="space-y-3 text-sm">
+        <div>
+          <p class="font-medium text-gray-700 mb-1">Dirección Original:</p>
+          <p class="text-gray-600 text-xs">${obra.direccion_obra || "N/A"}</p>
+        </div>
+
+        ${
+          formatted_address
+            ? `
+        <div>
+          <p class="font-medium text-gray-700 mb-1">Ubicación Encontrada:</p>
+          <p class="text-gray-500 text-xs">${formatted_address}</p>
+        </div>
+        `
+            : ""
+        }
+
+        <div>
+          <p class="font-medium text-gray-700 mb-1">Cumplimiento:</p>
+          <div class="flex items-center space-x-2">
+            <div class="flex-1 bg-gray-200 rounded-full h-2">
+              <div class="h-2 rounded-full transition-all duration-300 ${
+                obra.estado === "finalizadas"
+                  ? "bg-green-500"
+                  : obra.estado === "abiertas"
+                  ? "bg-yellow-500"
+                  : "bg-red-500"
+              }"
+                   style="width: ${
+                     Number(obra.cumplimiento_total) || 0
+                   }%"></div>
+            </div>
+            <span class="text-xs font-medium text-gray-700 min-w-[40px]">${cumplimiento}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+};
+
+const updateMarkers = () => {
+  let visibleCount = 0;
+  markers.value.forEach(({ marker, estado }) => {
+    const shouldShow = filters[estado];
+    marker.setVisible(shouldShow);
+
+    if (shouldShow) visibleCount++;
+
+    // Actualizar el estado visible del marcador
+    const markerIndex = markers.value.findIndex((m) => m.marker === marker);
+    if (markerIndex !== -1) {
+      markers.value[markerIndex].visible = shouldShow;
+    }
+  });
+};
+
+const clearMarkers = () => {
+  markers.value.forEach(({ marker, infoWindow }) => {
+    infoWindow?.close();
+    marker.setMap(null);
+  });
+  markers.value = [];
+  geocodingCache.clear(); // Limpiar cache al recargar
+};
+
+// Función para ajustar el viewport del mapa a todos los marcadores visibles
+const fitMapToMarkers = () => {
+  if (!map.value || markers.value.length === 0) return;
+
+  const bounds = new google.maps.LatLngBounds();
+  const visibleMarkers = markers.value.filter((m) => m.visible);
+
+  if (visibleMarkers.length === 0) return;
+
+  visibleMarkers.forEach(({ position }) => {
+    bounds.extend(new google.maps.LatLng(position.lat, position.lng));
+  });
+
+  map.value.fitBounds(bounds);
+
+  // Asegurar zoom mínimo
+  const listener = google.maps.event.addListener(map.value, "idle", () => {
+    if (map.value.getZoom() > 15) map.value.setZoom(15);
+    google.maps.event.removeListener(listener);
+  });
+};
+
+// Recargar marcadores cuando cambien los contadores
+watch(
+  () => props.counters,
+  () => {
+    if (map.value) {
+      loadMarkers();
+    }
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  initMap();
+});
+</script>
+
+<template>
+  <div class="bg-white rounded-lg shadow-lg overflow-hidden">
+    <div
+      class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200"
+    >
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-lg font-medium text-gray-900">Mapa de Obras</h3>
+          <p class="text-sm text-gray-600 mt-1">
+            Ubicación geográfica de proyectos en Comalcalco, Tabasco
+          </p>
+        </div>
+
+        <!-- Filtros por estado -->
+        <div class="flex items-center space-x-4">
+          <div class="flex items-center space-x-2">
+            <input
+              id="sin-avances"
+              v-model="filters.sin_avances"
+              @change="updateMarkers"
+              type="checkbox"
+              class="rounded border-gray-300 text-red-600 focus:ring-red-500"
+            />
+            <label
+              for="sin-avances"
+              class="flex items-center text-sm text-gray-700"
+            >
+              <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
+              Sin avances ({{ counters.sin_avances.count }})
+            </label>
+          </div>
+
+          <div class="flex items-center space-x-2">
+            <input
+              id="abiertas"
+              v-model="filters.abiertas"
+              @change="updateMarkers"
+              type="checkbox"
+              class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500"
+            />
+            <label
+              for="abiertas"
+              class="flex items-center text-sm text-gray-700"
+            >
+              <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
+              Abiertas ({{ counters.abiertas.count }})
+            </label>
+          </div>
+
+          <div class="flex items-center space-x-2">
+            <input
+              id="finalizadas"
+              v-model="filters.finalizadas"
+              @change="updateMarkers"
+              type="checkbox"
+              class="rounded border-gray-300 text-green-600 focus:ring-green-500"
+            />
+            <label
+              for="finalizadas"
+              class="flex items-center text-sm text-gray-700"
+            >
+              <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
+              Finalizadas ({{ counters.finalizadas.count }})
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- Controles adicionales -->
+      <div class="flex items-center justify-between mt-3">
+        <div class="text-sm text-gray-600">
+          Marcadores visibles: {{ visibleMarkersCount }} de {{ markers.length }}
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <button
+            @click="fitMapToMarkers"
+            class="px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+          >
+            Ajustar Vista
+          </button>
+          <button
+            @click="loadMarkers"
+            class="px-3 py-1 text-xs bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
+          >
+            Recargar
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mapa -->
+    <div ref="mapContainer" class="w-full h-96 relative">
+      <div
+        v-if="loading"
+        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
+      >
+        <div class="text-center">
+          <div
+            class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"
+          ></div>
+          <p class="mt-2 text-sm text-gray-600">
+            Cargando mapa y geocodificando direcciones...
+          </p>
+          <p class="mt-1 text-xs text-gray-500">
+            Esto puede tomar unos segundos
+          </p>
+        </div>
+      </div>
+
+      <div
+        v-if="error"
+        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
+      >
+        <div class="text-center">
+          <svg
+            class="mx-auto h-12 w-12 text-red-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <h3 class="mt-2 text-sm font-medium text-gray-900">
+            Error al cargar el mapa
+          </h3>
+          <p class="mt-1 text-sm text-gray-500">{{ error }}</p>
+          <button
+            @click="initMap"
+            class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
+          >
+            Reintentar
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Leyenda mejorada -->
+    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
+      <div class="flex items-center justify-between text-xs text-gray-600">
+        <div class="flex items-center space-x-4">
+          <span class="flex items-center">
+            <div class="w-2 h-2 bg-red-500 rounded-full mr-1"></div>
+            Sin avances
+          </span>
+          <span class="flex items-center">
+            <div class="w-2 h-2 bg-yellow-500 rounded-full mr-1"></div>
+            En proceso
+          </span>
+          <span class="flex items-center">
+            <div class="w-2 h-2 bg-green-500 rounded-full mr-1"></div>
+            Finalizadas
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Pages/App/Obras.vue b/resources/js/Pages/App/Obras.vue
index e5894da..9212c29 100644
--- a/resources/js/Pages/App/Obras.vue
+++ b/resources/js/Pages/App/Obras.vue
@@ -1314,7 +1314,11 @@ onMounted(() => {
             </div>
           </div>
         </div>
-
+        <div class="mt-12 -mb-10">
+          <h3 class="text-lg font-medium text-gray-900">
+            Obras - Últimos 30 Días
+          </h3>
+        </div>
         <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           <div class="bg-white shadow rounded-lg p-6">
             <h3 class="font-semibold text-lg">Sin avances</h3>
@@ -1325,15 +1329,6 @@ onMounted(() => {
               }}</span>
             </p>
           </div>
-          <div class="bg-white shadow rounded-lg p-6">
-            <h3 class="font-semibold text-lg">Finalizadas</h3>
-            <p class="mt-2 text-gray-600">
-              Total:
-              <span class="font-bold text-red-600">{{
-                counters.finalizadas.count
-              }}</span>
-            </p>
-          </div>
           <div class="bg-white shadow rounded-lg p-6">
             <h3 class="font-semibold text-lg">Obras abiertas</h3>
             <p class="mt-2 text-gray-600">
@@ -1343,6 +1338,15 @@ onMounted(() => {
               }}</span>
             </p>
           </div>
+          <div class="bg-white shadow rounded-lg p-6">
+            <h3 class="font-semibold text-lg">Finalizadas</h3>
+            <p class="mt-2 text-gray-600">
+              Total:
+              <span class="font-bold text-red-600">{{
+                counters.finalizadas.count
+              }}</span>
+            </p>
+          </div>
         </div>
         <div class="mb-8">
           <ObrasMap :counters="counters" />
@@ -1353,10 +1357,10 @@ onMounted(() => {
             class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200"
           >
             <h3 class="text-lg font-medium text-gray-900">
-              Supervisores y sus Últimas Acciones - Últimos 30 Días
+              Residentes y sus Últimas Acciones - Últimos 30 Días
             </h3>
             <p class="text-sm text-gray-600 mt-1">
-              Registro de actividad de supervisores en proyectos
+              Registro de actividad de residentes en proyectos
             </p>
           </div>
 
@@ -1367,7 +1371,7 @@ onMounted(() => {
                   <th
                     class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                   >
-                    Supervisor
+                    Residente
                   </th>
                   <th
                     class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
@@ -1469,7 +1473,7 @@ onMounted(() => {
                 <tr v-if="!users.length">
                   <td colspan="5" class="px-6 py-8 text-center">
                     <div class="text-gray-500">
-                      No hay supervisores registrados
+                      No hay residentes registrados
                     </div>
                   </td>
                 </tr>
-- 
2.45.2


From eeccb595510ee5cd0fa232837e2a02c82d078d82 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Wed, 27 Aug 2025 16:31:57 -0600
Subject: [PATCH 15/18] =?UTF-8?q?Se=20agreg=C3=B3=20el=20buscador=20de=20o?=
 =?UTF-8?q?bras=20y=20las=20obras=20se=20agrupan=20por=20direcci=C3=B3n=20?=
 =?UTF-8?q?y=20estado?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/Components/Dashboard/Maps.vue | 431 +++++++++++++++------
 1 file changed, 311 insertions(+), 120 deletions(-)

diff --git a/resources/js/Components/Dashboard/Maps.vue b/resources/js/Components/Dashboard/Maps.vue
index bc18343..951783c 100644
--- a/resources/js/Components/Dashboard/Maps.vue
+++ b/resources/js/Components/Dashboard/Maps.vue
@@ -45,8 +45,8 @@ const visibleMarkersCount = computed(() => {
 
 // Coordenadas del centro de Comalcalco, Tabasco
 const COMALCALCO_CENTER = {
-  lat: 18.2669,
-  lng: -93.2072,
+  lat: 18.26,
+  lng: -93.25,
 };
 
 // Límites expandidos de Tabasco (más amplios para capturar todas las obras)
@@ -60,6 +60,80 @@ const TABASCO_BOUNDS = {
 // Cache para geocodificación (evitar llamadas duplicadas)
 const geocodingCache = new Map();
 
+const searchQuery = ref('');
+const searchResults = ref([]);
+const showSearchResults = ref(false);
+const searchLoading = ref(false);
+
+const searchAddresses = async () => {
+  if (!searchQuery.value.trim()) {
+    searchResults.value = [];
+    showSearchResults.value = false;
+    return;
+  }
+
+  searchLoading.value = true;
+  const query = searchQuery.value.toLowerCase();
+
+  // Buscar en las obras existentes
+  const allObras = [
+    ...props.counters.sin_avances.detalles.map((obra) => ({
+      ...obra,
+      estado: "sin_avances",
+    })),
+    ...props.counters.abiertas.detalles.map((obra) => ({
+      ...obra,
+      estado: "abiertas",
+    })),
+    ...props.counters.finalizadas.detalles.map((obra) => ({
+      ...obra,
+      estado: "finalizadas",
+    })),
+  ];
+
+  // Filtrar obras que coincidan con la búsqueda
+  const matches = allObras.filter(obra =>
+    obra.direccion_obra?.toLowerCase().includes(query) ||
+    obra.num_proyecto?.toLowerCase().includes(query)
+  );
+
+  searchResults.value = matches.slice(0, 10); // Limitar a 10 resultados
+  showSearchResults.value = true;
+  searchLoading.value = false;
+};
+
+//Función para ir a una obra específica
+const goToObra = async (obra) => {
+  searchQuery.value = '';
+  searchResults.value = [];
+  showSearchResults.value = false;
+
+  // Buscar el marcador correspondiente
+  const markerData = markers.value.find(m =>
+    m.obras.some(o =>
+      o.num_proyecto === obra.num_proyecto &&
+      o.direccion_obra === obra.direccion_obra
+    )
+  );
+
+  if (markerData) {
+    // Centrar el mapa en el marcador
+    map.value.setCenter(markerData.marker.getPosition());
+    map.value.setZoom(16);
+
+    // Abrir el InfoWindow
+    markers.value.forEach((m) => m.infoWindow?.close());
+    markerData.infoWindow.open(map.value, markerData.marker);
+  }
+};
+
+// Limpiar resultados de búsqueda
+const clearSearch = () => {
+  searchQuery.value = '';
+  searchResults.value = [];
+  showSearchResults.value = false;
+};
+
 const initMap = async () => {
   loading.value = true;
   error.value = null;
@@ -68,7 +142,7 @@ const initMap = async () => {
     const loader = new Loader({
       apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
       version: "weekly",
-      libraries: ["places"],
+      libraries: ["places", "geometry"],
     });
 
     const google = await loader.load();
@@ -142,60 +216,77 @@ const loadMarkers = async () => {
     }))
   );
 
-  // Agrupar obras por dirección
-  const obrasPorDireccion = new Map();
+  // Agrupar obras por grupo
+  const obrasPorGrupo = new Map();
   allObras.forEach(obra => {
-    const direccion = obra.direccion_obra;
-    if (!obrasPorDireccion.has(direccion)) {
-      obrasPorDireccion.set(direccion, []);
+    const clave = `${obra.direccion_obra}|${obra.estado}`;
+    if(!obrasPorGrupo.has(clave)){
+      obrasPorGrupo.set(clave, {
+        direccion: obra.direccion_obra,
+        estado: obra.estado,
+        obras: []
+      });
     }
-    obrasPorDireccion.get(direccion).push(obra);
+    obrasPorGrupo.get(clave).obras.push(obra);
   });
 
   processingStats.value.total = allObras.length;
 
   // Procesar grupos de obras por dirección en lotes
-  const direcciones = Array.from(obrasPorDireccion.keys());
+  const grupos = Array.from(obrasPorGrupo.values());
   const batchSize = 5;
 
-  for (let i = 0; i < direcciones.length; i += batchSize) {
-    const batch = direcciones.slice(i, i + batchSize);
-    const batchPromises = batch.map(direccion =>
-      createMarkerForDireccion(direccion, obrasPorDireccion.get(direccion))
+  for (let i = 0; i < grupos.length; i += batchSize) {
+    const batch = grupos.slice(i, i + batchSize);
+    const batchPromises = batch.map(grupo =>
+      createMarkerForGroup(grupo)
     );
 
     await Promise.allSettled(batchPromises);
 
-    if (i + batchSize < direcciones.length) {
+    if (i + batchSize < grupos.length) {
       await new Promise((resolve) => setTimeout(resolve, 100));
     }
   }
   updateMarkers();
 };
 
-const createMarkerForDireccion = async (direccion, obrasEnDireccion) => {
+const createMarkerForGroup = async (grupo) => {
+  const { direccion, obras: obrasEnGrupo } = grupo;
   if (!direccion || !geocoder.value) {
-    obrasEnDireccion.forEach(() => processingStats.value.failed++);
+    processingStats.value.failed += obrasEnGrupo.length;
     return;
   }
 
+  // Normalización corregida de direcciones
+  let direccionNormalizada = direccion
+    .replace(/^RA\.\s*/i, "Ranchería ")
+    .replace(/CIUDAD\s+/i, "")
+    .replace(/2DA\s+SECCION/gi, "2 sección")
+    .replace(/\s+/g, " ")
+    .replace(/,\s*,/g, ",")
+    .trim();
+
   // Construir direcciones alternativas para geocodificación
   const addresses = [
+    `${direccionNormalizada}, Comalcalco, Tabasco, México`,
     `${direccion}, Comalcalco, Tabasco, México`,
-    `${direccion}, Tabasco, México`,
-    `${direccion}, México`,
+    `${direccionNormalizada.replace('Ranchería ', '')}, Comalcalco, Tabasco, México`,
+    `${direccion.replace('RA. ', '')}, Comalcalco, Tabasco`,
+    `Comalcalco, Tabasco, México`
   ];
 
   // Verificar cache primero
   const cacheKey = direccion;
   if (geocodingCache.has(cacheKey)) {
     const cachedData = geocodingCache.get(cacheKey);
-    processingStats.value.duplicates += obrasEnDireccion.length - 1;
-    return createMarkerFromPosition(obrasEnDireccion, cachedData.position, cachedData.formatted_address);
+    processingStats.value.duplicates += obrasEnGrupo.length - 1;
+    return createMarkerFromPosition(grupo, cachedData.position, cachedData.formatted_address);
   }
 
   // Intentar geocodificación con direcciones alternativas
-  for (const address of addresses) {
+  for (let i = 0; i < addresses.length; i++) {
+    const address = addresses[i];
     try {
       const result = await geocodeAddress(address);
       if (result.success) {
@@ -205,16 +296,16 @@ const createMarkerForDireccion = async (direccion, obrasEnDireccion) => {
           formatted_address: result.formatted_address,
         });
 
-        return createMarkerFromPosition(obrasEnDireccion, result.position, result.formatted_address);
+        return createMarkerFromPosition(grupo, result.position, result.formatted_address);
       }
     } catch (err) {
-      console.warn(`Error geocodificando ${address}:`, err);
+      console.warn(`Error en intento ${i + 1}: ${address}`, err);
     }
   }
 
   // Si todas las direcciones fallan, crear marcador fallback
-  processingStats.value.failed += obrasEnDireccion.length;
-
+  processingStats.value.failed += obrasEnGrupo.length;
+  // Crear marcador fallback con offset aleatorio
   const randomOffset = {
     lat: (Math.random() - 0.5) * 0.02,
     lng: (Math.random() - 0.5) * 0.02,
@@ -225,23 +316,66 @@ const createMarkerForDireccion = async (direccion, obrasEnDireccion) => {
     lng: COMALCALCO_CENTER.lng + randomOffset.lng,
   };
 
-  return createMarkerFromPosition(obrasEnDireccion, fallbackPosition, "Ubicación aproximada - Comalcalco, Tabasco");
+  return createMarkerFromPosition(grupo, fallbackPosition, "Ubicación aproximada - Comalcalco, Tabasco");
 };
 
 const geocodeAddress = (address) => {
-  return new Promise((resolve, reject) => {
-    geocoder.value.geocode({ address }, (results, status) => {
-      if (status === "OK" && results[0]) {
-        const position = results[0].geometry.location;
-        const lat = position.lat();
-        const lng = position.lng();
+  return new Promise((resolve) => {
+    const request = {
+      address: address,
+      region: 'mx',
+      bounds: new google.maps.LatLngBounds(
+        new google.maps.LatLng(18.1, -93.4),
+        new google.maps.LatLng(18.4, -93.0)
+      ),
+    };
 
-        resolve({
-          success: true,
-          position: { lat, lng },
-          formatted_address: results[0].formatted_address,
-        });
+    geocoder.value.geocode(request, (results, status) => {
+      if (status === "OK" && results && results.length > 0) {
+        let bestResult = null;
+
+        for (let result of results) {
+          const formatted = result.formatted_address.toLowerCase();
+
+          // Priorizar resultados que mencionen Comalcalco
+          if (formatted.includes('comalcalco')) {
+            bestResult = result;
+            break;
+          }
+
+          // Si no encuentra Comalcalco, verificar distancia
+          if (!bestResult) {
+            const position = result.geometry.location;
+            const comalcalcoCenter = new google.maps.LatLng(COMALCALCO_CENTER.lat, COMALCALCO_CENTER.lng);
+            const distance = google.maps.geometry.spherical.computeDistanceBetween(position, comalcalcoCenter);
+
+            // Si está dentro de 50km de Comalcalco, considerarlo válido
+            if (distance <= 50000) {
+              bestResult = result;
+            }
+          }
+        }
+
+        if (bestResult) {
+          const position = bestResult.geometry.location;
+          const lat = position.lat();
+          const lng = position.lng();
+
+          resolve({
+            success: true,
+            position: { lat, lng },
+            formatted_address: bestResult.formatted_address,
+          });
+        } else {
+          console.warn(`No se encontró resultado válido para "${address}"`);
+          resolve({
+            success: false,
+            status: 'NO_VALID_RESULT',
+            address,
+          });
+        }
       } else {
+        console.warn(`Geocodificación falló para "${address}": ${status}`);
         resolve({
           success: false,
           status,
@@ -252,19 +386,18 @@ const geocodeAddress = (address) => {
   });
 };
 
-const createMarkerFromPosition = (obrasEnPosicion, position, formatted_address) => {
-  const lat = position.lat;
-  const lng = position.lng;
+const createMarkerFromPosition = (grupo, position, formatted_address) => {
+  const { obras: obrasEnPosicion, estado } = grupo;
 
-  // Verificar límites expandidos
-  if (
-    lat < TABASCO_BOUNDS.south ||
-    lat > TABASCO_BOUNDS.north ||
-    lng < TABASCO_BOUNDS.west ||
-    lng > TABASCO_BOUNDS.east
-  ) {
-    processingStats.value.outOfBounds += obrasEnPosicion.length;
-  }
+  const statusOffsets = {
+    sin_avances: { lat: 0.00008, lng: -0.00005 }, // Arriba-Izquierda
+    abiertas:    { lat: 0,       lng: 0.0001 },   // Derecha
+    finalizadas: { lat: -0.00004,lng: -0.00005 }, // Abajo-Izquierda
+  };
+
+  const offset = statusOffsets[estado] || { lat: 0, lng: 0 };
+  const lat = position.lat + offset.lat;
+  const lng = position.lng + offset.lng;
 
   // Usar la primera obra para definir el marcador principal
   const obraPrincipal = obrasEnPosicion[0];
@@ -272,11 +405,11 @@ const createMarkerFromPosition = (obrasEnPosicion, position, formatted_address)
   const marker = new google.maps.Marker({
     position: new google.maps.LatLng(lat, lng),
     map: map.value,
-    title: obrasEnPosicion.length === 1
-      ? `${obraPrincipal.num_proyecto} - ${obraPrincipal.direccion_obra}`
-      : `${obrasEnPosicion.length} obras en ${obraPrincipal.direccion_obra}`,
-    icon: createCustomMarker(obraPrincipal.estado),
-    visible: filters[obraPrincipal.estado],
+    title: obrasEnPosicion.length > 1
+    ? `${obrasEnPosicion.length} obras en ${obraPrincipal.direccion_obra} (${estado.replace('_', ' ')})`
+      : `${obraPrincipal.num_proyecto} - ${obraPrincipal.direccion_obra}`,
+    icon: createCustomMarker(estado), // El color del marcador depende del estado del grupo.
+    visible: filters[estado],
     animation: google.maps.Animation.DROP,
   });
 
@@ -304,75 +437,17 @@ const createMarkerFromPosition = (obrasEnPosicion, position, formatted_address)
 
 const createCustomMarker = (estado) => {
   const color = markerColors[estado];
-  const width = 32;
-  const height = 48;
 
-  return {
+    return {
     url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-      <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <!-- Sombra para el marcador -->
-          <filter id="dropshadow-${estado}" x="-50%" y="-50%" width="200%" height="200%">
-            <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.3)" flood-opacity="0.5"/>
-          </filter>
-
-          <!-- Gradiente para dar volumen -->
-          <radialGradient id="gradient-${estado}" cx="30%" cy="20%" r="70%">
-            <stop offset="0%" style="stop-color:white;stop-opacity:0.3" />
-            <stop offset="100%" style="stop-color:${color};stop-opacity:1" />
-          </radialGradient>
-        </defs>
-
-        <!-- Forma principal del marcador (gota/pin) -->
-        <path d="M ${width / 2} ${height - 4}
-                 C ${width / 2} ${height - 4},
-                   ${width * 0.125} ${height * 0.58},
-                   ${width * 0.125} ${height * 0.375}
-                 C ${width * 0.125} ${height * 0.167},
-                   ${width * 0.292} 2,
-                   ${width / 2} 2
-                 C ${width * 0.708} 2,
-                   ${width * 0.875} ${height * 0.167},
-                   ${width * 0.875} ${height * 0.375}
-                 C ${width * 0.875} ${height * 0.58},
-                   ${width / 2} ${height - 4},
-                   ${width / 2} ${height - 4} Z"
-              fill="url(#gradient-${estado})"
-              stroke="white"
-              stroke-width="1.5"
-              filter="url(#dropshadow-${estado})"/>
-
-        <!-- Borde interior más oscuro -->
-        <path d="M ${width / 2} ${height - 4}
-                 C ${width / 2} ${height - 4},
-                   ${width * 0.125} ${height * 0.58},
-                   ${width * 0.125} ${height * 0.375}
-                 C ${width * 0.125} ${height * 0.167},
-                   ${width * 0.292} 2,
-                   ${width / 2} 2
-                 C ${width * 0.708} 2,
-                   ${width * 0.875} ${height * 0.167},
-                   ${width * 0.875} ${height * 0.375}
-                 C ${width * 0.875} ${height * 0.58},
-                   ${width / 2} ${height - 4},
-                   ${width / 2} ${height - 4} Z"
-              fill="none"
-              stroke="${color}"
-              stroke-width="1"
-              opacity="0.8"/>
-
-        <!-- Círculo interior blanco -->
-        <circle cx="${width / 2}"
-                cy="${height * 0.375}"
-                r="${width * 0.25}"
-                fill="white"
-                stroke="${color}"
-                stroke-width="1"/>
+      <svg width="24" height="36" viewBox="0 0 24 36" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24c0-6.627-5.373-12-12-12z" fill="${color}"/>
+        <circle cx="12" cy="12" r="6" fill="white"/>
+        <circle cx="12" cy="12" r="3" fill="${color}"/>
       </svg>
     `)}`,
-    scaledSize: new google.maps.Size(width, height),
-    anchor: new google.maps.Point(width / 2, height - 4),
-    origin: new google.maps.Point(0, 0),
+    scaledSize: new google.maps.Size(24, 36),
+    anchor: new google.maps.Point(12, 36)
   };
 };
 
@@ -571,6 +646,122 @@ onMounted(() => {
 
         <!-- Filtros por estado -->
         <div class="flex items-center space-x-4">
+          <!-- NUEVO: Buscador de direcciones -->
+          <div class="relative">
+            <div class="flex items-center space-x-2">
+              <div class="relative">
+                <input
+                  v-model="searchQuery"
+                  @input="searchAddresses"
+                  @focus="searchAddresses"
+                  type="text"
+                  placeholder="Buscar obra o dirección..."
+                  class="w-64 px-3 py-1 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+                />
+                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+                  <svg
+                    v-if="searchLoading"
+                    class="animate-spin h-4 w-4 text-gray-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      class="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      stroke-width="4"
+                    ></circle>
+                    <path
+                      class="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    ></path>
+                  </svg>
+                  <svg
+                    v-else-if="searchQuery"
+                    @click="clearSearch"
+                    class="h-4 w-4 text-gray-400 cursor-pointer hover:text-gray-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                  <svg
+                    v-else
+                    class="h-4 w-4 text-gray-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+
+            <!-- NUEVO: Resultados de búsqueda -->
+            <div
+              v-if="showSearchResults && searchResults.length > 0"
+              class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto"
+            >
+              <div
+                v-for="obra in searchResults"
+                :key="`${obra.num_proyecto}-${obra.direccion_obra}`"
+                @click="goToObra(obra)"
+                class="px-3 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0"
+              >
+                <div class="flex items-center justify-between">
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900 truncate">
+                      {{ obra.num_proyecto || 'N/A' }}
+                    </p>
+                    <p class="text-xs text-gray-500 truncate">
+                      {{ obra.direccion_obra }}
+                    </p>
+                  </div>
+                  <div class="flex-shrink-0 ml-2">
+                    <span
+                      class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
+                      :class="{
+                        'bg-red-100 text-red-800': obra.estado === 'sin_avances',
+                        'bg-yellow-100 text-yellow-800': obra.estado === 'abiertas',
+                        'bg-green-100 text-green-800': obra.estado === 'finalizadas'
+                      }"
+                    >
+                      {{
+                        obra.estado === 'sin_avances' ? 'Sin avances' :
+                        obra.estado === 'abiertas' ? 'Abierta' : 'Finalizada'
+                      }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- NUEVO: Mensaje cuando no hay resultados -->
+            <div
+              v-else-if="showSearchResults && searchResults.length === 0 && searchQuery.trim()"
+              class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg"
+            >
+              <div class="px-3 py-2 text-sm text-gray-500 text-center">
+                No se encontraron resultados
+              </div>
+            </div>
+          </div>
+
           <div class="flex items-center space-x-2">
             <input
               id="sin-avances"
-- 
2.45.2


From e6e7beb24c52e103963e8ccf58e62dee547d81d2 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Thu, 28 Aug 2025 15:27:01 -0600
Subject: [PATCH 16/18] Cambios en los marcadores del Mapa de Obras y las Cards
 de Entrega de Apoyos

---
 resources/js/Components/Dashboard/Maps.vue    | 1070 +++++++----------
 .../js/Components/Dashboard/MapsCopy.vue      |  721 -----------
 resources/js/Pages/App/AtencionCiudadana.vue  |   53 +-
 3 files changed, 466 insertions(+), 1378 deletions(-)
 delete mode 100644 resources/js/Components/Dashboard/MapsCopy.vue

diff --git a/resources/js/Components/Dashboard/Maps.vue b/resources/js/Components/Dashboard/Maps.vue
index 951783c..8fffb6a 100644
--- a/resources/js/Components/Dashboard/Maps.vue
+++ b/resources/js/Components/Dashboard/Maps.vue
@@ -1,12 +1,9 @@
 <script setup>
-import { ref, reactive, onMounted, computed, watch } from "vue";
+import { ref, reactive, onMounted, onUnmounted, computed, watch } from "vue";
 import { Loader } from "@googlemaps/js-api-loader";
 
 const props = defineProps({
-  counters: {
-    type: Object,
-    required: true,
-  },
+  counters: { type: Object, required: true },
 });
 
 const mapContainer = ref(null);
@@ -15,585 +12,327 @@ const error = ref(null);
 const map = ref(null);
 const markers = ref([]);
 const geocoder = ref(null);
+const isMounted = ref(false);
 
-// Filtros activos
 const filters = reactive({
   sin_avances: true,
   abiertas: true,
   finalizadas: true,
 });
 
-// Configuración de colores por estado
-const markerColors = {
-  sin_avances: "#EF4444", // Rojo
-  abiertas: "#F59E0B", // Amarillo
-  finalizadas: "#10B981", // Verde
-};
-
-// Estadísticas de procesamiento
-const processingStats = ref({
-  total: 0,
-  successful: 0,
-  failed: 0,
-  outOfBounds: 0,
-});
-
-// Contador de marcadores visibles
-const visibleMarkersCount = computed(() => {
-  return markers.value.filter((marker) => marker.visible).length;
-});
-
-// Coordenadas del centro de Comalcalco, Tabasco
-const COMALCALCO_CENTER = {
-  lat: 18.26,
-  lng: -93.25,
-};
-
-// Límites expandidos de Tabasco (más amplios para capturar todas las obras)
-const TABASCO_BOUNDS = {
-  north: 18.7, // Expandido hacia el norte
-  south: 17.3, // Expandido hacia el sur
-  east: -92.0, // Expandido hacia el este
-  west: -94.7, // Expandido hacia el oeste
-};
-
-// Cache para geocodificación (evitar llamadas duplicadas)
-const geocodingCache = new Map();
-
-const searchQuery = ref('');
+const searchQuery = ref("");
 const searchResults = ref([]);
 const showSearchResults = ref(false);
 const searchLoading = ref(false);
 
-const searchAddresses = async () => {
-  if (!searchQuery.value.trim()) {
-    searchResults.value = [];
-    showSearchResults.value = false;
-    return;
-  }
+const geocodingCache = new Map();
+const failedGeocodings = ref([]);
 
-  searchLoading.value = true;
-  const query = searchQuery.value.toLowerCase();
+const markerColors = {
+  sin_avances: "#EF4444",
+  abiertas: "#F59E0B",
+  finalizadas: "#10B981",
+};
+const COMALCALCO_CENTER = { lat: 18.26, lng: -93.25 };
 
-  // Buscar en las obras existentes
-  const allObras = [
-    ...props.counters.sin_avances.detalles.map((obra) => ({
-      ...obra,
-      estado: "sin_avances",
-    })),
-    ...props.counters.abiertas.detalles.map((obra) => ({
-      ...obra,
-      estado: "abiertas",
-    })),
-    ...props.counters.finalizadas.detalles.map((obra) => ({
-      ...obra,
-      estado: "finalizadas",
-    })),
-  ];
-
-  // Filtrar obras que coincidan con la búsqueda
-  const matches = allObras.filter(obra =>
-    obra.direccion_obra?.toLowerCase().includes(query) ||
-    obra.num_proyecto?.toLowerCase().includes(query)
-  );
-
-  searchResults.value = matches.slice(0, 10); // Limitar a 10 resultados
-  showSearchResults.value = true;
-  searchLoading.value = false;
+const COMALCALCO_BOUNDS = {
+  south: 18.1,
+  west: -93.4,
+  north: 18.4,
+  east: -93.0,
 };
 
-//Función para ir a una obra específica
-const goToObra = async (obra) => {
-  searchQuery.value = '';
-  searchResults.value = [];
-  showSearchResults.value = false;
+const visibleMarkersCount = computed(
+  () => markers.value.filter((m) => m.visible).length
+);
 
-  // Buscar el marcador correspondiente
-  const markerData = markers.value.find(m =>
-    m.obras.some(o =>
-      o.num_proyecto === obra.num_proyecto &&
-      o.direccion_obra === obra.direccion_obra
-    )
-  );
+onMounted(() => {
+  isMounted.value = true;
+  initMap();
+});
 
-  if (markerData) {
-    // Centrar el mapa en el marcador
-    map.value.setCenter(markerData.marker.getPosition());
-    map.value.setZoom(16);
+onUnmounted(() => {
+  isMounted.value = false;
+});
 
-    // Abrir el InfoWindow
-    markers.value.forEach((m) => m.infoWindow?.close());
-    markerData.infoWindow.open(map.value, markerData.marker);
-  }
-};
-
-// Limpiar resultados de búsqueda
-const clearSearch = () => {
-  searchQuery.value = '';
-  searchResults.value = [];
-  showSearchResults.value = false;
-};
+watch(
+  () => props.counters,
+  () => {
+    if (map.value && geocoder.value) {
+      loadMarkers();
+    }
+  },
+  { deep: true }
+);
 
 const initMap = async () => {
   loading.value = true;
   error.value = null;
-
   try {
     const loader = new Loader({
       apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
       version: "weekly",
+      // Usar solo librerías básicas por compatibilidad
       libraries: ["places", "geometry"],
     });
+    window.google = await loader.load();
 
-    const google = await loader.load();
+    if (!isMounted.value) return;
 
-    if (!google.maps) {
-      throw new Error("Google Maps no se cargó correctamente");
-    }
-
-    // Inicializar el mapa con zoom más amplio
     map.value = new google.maps.Map(mapContainer.value, {
       center: COMALCALCO_CENTER,
-      zoom: 11, // Zoom más amplio para ver toda la región
-      restriction: {
-        latLngBounds: TABASCO_BOUNDS,
-        strictBounds: false,
-      },
+      zoom: 11,
+      // Mantener mapId pero para funcionalidad futura
+      mapId: "OBRAS_MAP_COMALCALCO",
       mapTypeControl: true,
       streetViewControl: true,
       fullscreenControl: true,
       zoomControl: true,
+      // Estilos mejorados
+      styles: [
+        {
+          featureType: "poi",
+          elementType: "labels.icon",
+          stylers: [{ visibility: "off" }],
+        },
+        {
+          featureType: "transit",
+          elementType: "labels.icon",
+          stylers: [{ visibility: "off" }],
+        },
+      ],
     });
-
     geocoder.value = new google.maps.Geocoder();
-
     await loadMarkers();
   } catch (err) {
-    console.error("Error loading Google Maps:", err);
+    if (!isMounted.value) return;
+    console.error("Error loading map:", err);
     error.value = err.message || "Error al cargar Google Maps";
   } finally {
-    loading.value = false;
+    if (isMounted.value) loading.value = false;
   }
 };
 
 const loadMarkers = async () => {
-  if (!map.value || !geocoder.value) return;
-
-  // Limpiar marcadores existentes
+  if (!map.value || !geocoder.value || !isMounted.value) return;
+  loading.value = true;
   clearMarkers();
+  failedGeocodings.value = [];
 
-  // Resetear estadísticas
-  processingStats.value = {
-    total: 0,
-    successful: 0,
-    failed: 0,
-    outOfBounds: 0,
-    duplicates: 0,
-  };
+  const allObras = getAllObras();
+  console.log("Total obras a procesar:", allObras.length);
 
-  const allObras = [
-    ...props.counters.sin_avances.detalles.map((obra) => ({
-      ...obra,
-      estado: "sin_avances",
-    })),
-    ...props.counters.abiertas.detalles.map((obra) => ({
-      ...obra,
-      estado: "abiertas",
-    })),
-    ...props.counters.finalizadas.detalles.map((obra) => ({
-      ...obra,
-      estado: "finalizadas",
-    })),
-  ];
-
-  processingStats.value.total = allObras.length;
-
-  console.table(
-    allObras.map((obra) => ({
-      proyecto: obra.num_proyecto,
-      direccion: obra.direccion_obra,
-      estado: obra.estado,
-    }))
-  );
-
-  // Agrupar obras por grupo
-  const obrasPorGrupo = new Map();
-  allObras.forEach(obra => {
-    const clave = `${obra.direccion_obra}|${obra.estado}`;
-    if(!obrasPorGrupo.has(clave)){
-      obrasPorGrupo.set(clave, {
-        direccion: obra.direccion_obra,
-        estado: obra.estado,
-        obras: []
-      });
-    }
-    obrasPorGrupo.get(clave).obras.push(obra);
-  });
-
-  processingStats.value.total = allObras.length;
-
-  // Procesar grupos de obras por dirección en lotes
-  const grupos = Array.from(obrasPorGrupo.values());
-  const batchSize = 5;
-
-  for (let i = 0; i < grupos.length; i += batchSize) {
-    const batch = grupos.slice(i, i + batchSize);
-    const batchPromises = batch.map(grupo =>
-      createMarkerForGroup(grupo)
-    );
-
-    await Promise.allSettled(batchPromises);
-
-    if (i + batchSize < grupos.length) {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    }
-  }
-  updateMarkers();
-};
-
-const createMarkerForGroup = async (grupo) => {
-  const { direccion, obras: obrasEnGrupo } = grupo;
-  if (!direccion || !geocoder.value) {
-    processingStats.value.failed += obrasEnGrupo.length;
+  if (allObras.length === 0) {
+    if (isMounted.value) loading.value = false;
     return;
   }
 
-  // Normalización corregida de direcciones
-  let direccionNormalizada = direccion
-    .replace(/^RA\.\s*/i, "Ranchería ")
-    .replace(/CIUDAD\s+/i, "")
-    .replace(/2DA\s+SECCION/gi, "2 sección")
-    .replace(/\s+/g, " ")
-    .replace(/,\s*,/g, ",")
-    .trim();
+  const obrasPorGrupo = groupObrasByAddressAndStatus(allObras);
+  const uniqueAddresses = [
+    ...new Set(Array.from(obrasPorGrupo.values()).map((g) => g.direccion)),
+  ].filter(Boolean);
 
-  // Construir direcciones alternativas para geocodificación
-  const addresses = [
-    `${direccionNormalizada}, Comalcalco, Tabasco, México`,
-    `${direccion}, Comalcalco, Tabasco, México`,
-    `${direccionNormalizada.replace('Ranchería ', '')}, Comalcalco, Tabasco, México`,
-    `${direccion.replace('RA. ', '')}, Comalcalco, Tabasco`,
-    `Comalcalco, Tabasco, México`
-  ];
+  console.log("Direcciones únicas a geocodificar:", uniqueAddresses.length);
 
-  // Verificar cache primero
-  const cacheKey = direccion;
-  if (geocodingCache.has(cacheKey)) {
-    const cachedData = geocodingCache.get(cacheKey);
-    processingStats.value.duplicates += obrasEnGrupo.length - 1;
-    return createMarkerFromPosition(grupo, cachedData.position, cachedData.formatted_address);
-  }
+  await geocodeUniqueAddresses(uniqueAddresses);
 
-  // Intentar geocodificación con direcciones alternativas
-  for (let i = 0; i < addresses.length; i++) {
-    const address = addresses[i];
-    try {
-      const result = await geocodeAddress(address);
-      if (result.success) {
-        // Guardar en cache
-        geocodingCache.set(cacheKey, {
-          position: result.position,
-          formatted_address: result.formatted_address,
-        });
+  if (!isMounted.value) return;
 
-        return createMarkerFromPosition(grupo, result.position, result.formatted_address);
-      }
-    } catch (err) {
-      console.warn(`Error en intento ${i + 1}: ${address}`, err);
-    }
-  }
+  createMarkersFromGroups(obrasPorGrupo);
+  loading.value = false;
+  updateMarkers();
 
-  // Si todas las direcciones fallan, crear marcador fallback
-  processingStats.value.failed += obrasEnGrupo.length;
-  // Crear marcador fallback con offset aleatorio
-  const randomOffset = {
-    lat: (Math.random() - 0.5) * 0.02,
-    lng: (Math.random() - 0.5) * 0.02,
-  };
-
-  const fallbackPosition = {
-    lat: COMALCALCO_CENTER.lat + randomOffset.lat,
-    lng: COMALCALCO_CENTER.lng + randomOffset.lng,
-  };
-
-  return createMarkerFromPosition(grupo, fallbackPosition, "Ubicación aproximada - Comalcalco, Tabasco");
+  console.log("Marcadores creados exitosamente:", markers.value.length);
 };
 
-const geocodeAddress = (address) => {
+const normalizeAddressForGeocoding = (address) => {
+  if (!address) return "";
+  return address
+    .replace(/^RA\.\s*/, "RANCHERÍA ")
+    .replace(/(\d+)\s*DA\s*SECCION/i, "$1 SECCION")
+    .replace(/\s+/g, " ")
+    .trim();
+};
+
+const geocodeAndCacheAddress = (address) => {
+  if (!address || geocodingCache.has(address)) {
+    return Promise.resolve();
+  }
+
   return new Promise((resolve) => {
+    const normalizedAddress = normalizeAddressForGeocoding(address);
+
     const request = {
-      address: address,
-      region: 'mx',
+      address: normalizedAddress,
+      componentRestrictions: {
+        country: "MX",
+        administrativeArea: "Tabasco",
+      },
       bounds: new google.maps.LatLngBounds(
-        new google.maps.LatLng(18.1, -93.4),
-        new google.maps.LatLng(18.4, -93.0)
+        { lat: COMALCALCO_BOUNDS.south, lng: COMALCALCO_BOUNDS.west },
+        { lat: COMALCALCO_BOUNDS.north, lng: COMALCALCO_BOUNDS.east }
       ),
     };
 
     geocoder.value.geocode(request, (results, status) => {
-      if (status === "OK" && results && results.length > 0) {
-        let bestResult = null;
-
-        for (let result of results) {
-          const formatted = result.formatted_address.toLowerCase();
-
-          // Priorizar resultados que mencionen Comalcalco
-          if (formatted.includes('comalcalco')) {
-            bestResult = result;
-            break;
-          }
-
-          // Si no encuentra Comalcalco, verificar distancia
-          if (!bestResult) {
-            const position = result.geometry.location;
-            const comalcalcoCenter = new google.maps.LatLng(COMALCALCO_CENTER.lat, COMALCALCO_CENTER.lng);
-            const distance = google.maps.geometry.spherical.computeDistanceBetween(position, comalcalcoCenter);
-
-            // Si está dentro de 50km de Comalcalco, considerarlo válido
-            if (distance <= 50000) {
-              bestResult = result;
-            }
-          }
-        }
-
-        if (bestResult) {
-          const position = bestResult.geometry.location;
-          const lat = position.lat();
-          const lng = position.lng();
-
-          resolve({
-            success: true,
-            position: { lat, lng },
-            formatted_address: bestResult.formatted_address,
-          });
-        } else {
-          console.warn(`No se encontró resultado válido para "${address}"`);
-          resolve({
-            success: false,
-            status: 'NO_VALID_RESULT',
-            address,
-          });
-        }
-      } else {
-        console.warn(`Geocodificación falló para "${address}": ${status}`);
-        resolve({
-          success: false,
-          status,
-          address,
+      if (status === "OK" && results?.length) {
+        // Con la búsqueda sesgada, el primer resultado es ahora mucho más confiable
+        const bestResult = results[0];
+        geocodingCache.set(address, {
+          success: true,
+          position: {
+            lat: bestResult.geometry.location.lat(),
+            lng: bestResult.geometry.location.lng(),
+          },
+          formatted_address: bestResult.formatted_address,
         });
+      } else {
+        geocodingCache.set(address, { success: false, status });
       }
+      resolve();
     });
   });
 };
 
-const createMarkerFromPosition = (grupo, position, formatted_address) => {
-  const { obras: obrasEnPosicion, estado } = grupo;
+const groupObrasByAddressAndStatus = (obras) => {
+  const grouped = new Map();
+  obras.forEach((obra) => {
+    const key = `${obra.direccion_obra}|${obra.estado}`;
+    if (!grouped.has(key)) {
+      grouped.set(key, {
+        direccion: obra.direccion_obra,
+        estado: obra.estado,
+        obras: [],
+      });
+    }
+    grouped.get(key).obras.push(obra);
+  });
+  return grouped;
+};
 
+const geocodeUniqueAddresses = async (addresses) => {
+  const geocodingPromises = addresses.map((addr) =>
+    geocodeAndCacheAddress(addr)
+  );
+  await Promise.all(geocodingPromises);
+};
+
+const createMarkersFromGroups = (obrasPorGrupo) => {
   const statusOffsets = {
-    sin_avances: { lat: 0.00008, lng: -0.00005 }, // Arriba-Izquierda
-    abiertas:    { lat: 0,       lng: 0.0001 },   // Derecha
-    finalizadas: { lat: -0.00004,lng: -0.00005 }, // Abajo-Izquierda
+    sin_avances: { lat: 0.00008, lng: -0.00005 },
+    abiertas: { lat: 0, lng: 0.0001 },
+    finalizadas: { lat: -0.00004, lng: -0.00005 },
   };
 
-  const offset = statusOffsets[estado] || { lat: 0, lng: 0 };
-  const lat = position.lat + offset.lat;
-  const lng = position.lng + offset.lng;
-
-  // Usar la primera obra para definir el marcador principal
-  const obraPrincipal = obrasEnPosicion[0];
-
-  const marker = new google.maps.Marker({
-    position: new google.maps.LatLng(lat, lng),
-    map: map.value,
-    title: obrasEnPosicion.length > 1
-    ? `${obrasEnPosicion.length} obras en ${obraPrincipal.direccion_obra} (${estado.replace('_', ' ')})`
-      : `${obraPrincipal.num_proyecto} - ${obraPrincipal.direccion_obra}`,
-    icon: createCustomMarker(estado), // El color del marcador depende del estado del grupo.
-    visible: filters[estado],
-    animation: google.maps.Animation.DROP,
-  });
-
-  // Info window con todas las obras en esa posición
-  const infoWindow = new google.maps.InfoWindow({
-    content: createMultipleInfoWindowContent(obrasEnPosicion, formatted_address),
-  });
-
-  marker.addListener("click", () => {
-    markers.value.forEach((m) => m.infoWindow?.close());
-    infoWindow.open(map.value, marker);
-  });
-
-  markers.value.push({
-    marker,
-    infoWindow,
-    estado: obraPrincipal.estado,
-    obras: obrasEnPosicion,
-    visible: filters[obraPrincipal.estado],
-    position: { lat, lng },
-  });
-
-  processingStats.value.successful += obrasEnPosicion.length;
-};
-
-const createCustomMarker = (estado) => {
-  const color = markerColors[estado];
-
-    return {
-    url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-      <svg width="24" height="36" viewBox="0 0 24 36" xmlns="http://www.w3.org/2000/svg">
-        <path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24c0-6.627-5.373-12-12-12z" fill="${color}"/>
-        <circle cx="12" cy="12" r="6" fill="white"/>
-        <circle cx="12" cy="12" r="3" fill="${color}"/>
-      </svg>
-    `)}`,
-    scaledSize: new google.maps.Size(24, 36),
-    anchor: new google.maps.Point(12, 36)
-  };
-};
-
-const createMultipleInfoWindowContent = (obras, formatted_address = null) => {
-  if (obras.length === 1) {
-    return createInfoWindowContent(obras[0], formatted_address);
+  for (const grupo of obrasPorGrupo.values()) {
+    const geocodedResult = geocodingCache.get(grupo.direccion);
+    if (geocodedResult?.success) {
+      const offset = statusOffsets[grupo.estado] || { lat: 0, lng: 0 };
+      const position = {
+        lat: geocodedResult.position.lat + offset.lat,
+        lng: geocodedResult.position.lng + offset.lng,
+      };
+      createMarker(
+        position,
+        grupo.estado,
+        grupo.obras,
+        geocodedResult.formatted_address
+      );
+    } else {
+      failedGeocodings.value.push({
+        direccion: grupo.direccion,
+        motivo: geocodedResult?.status || "NOT_FOUND",
+        obras: grupo.obras,
+      });
+    }
   }
-
-  const direccion = obras[0].direccion_obra;
-
-  let obrasHtml = '';
-  obras.forEach(obra => {
-    const estadoConfig = {
-      sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
-      abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
-      finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
-    };
-
-    const config = estadoConfig[obra.estado];
-    const cumplimiento = obra.cumplimiento_total ? `${Number(obra.cumplimiento_total).toFixed(1)}%` : "N/A";
-
-    obrasHtml += `
-      <div class="border-b border-gray-200 pb-3 mb-3 last:border-b-0 last:pb-0 last:mb-0">
-        <div class="flex items-center justify-between mb-2">
-          <h4 class="font-semibold text-gray-900">${obra.num_proyecto || "N/A"}</h4>
-          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${config.color}">
-            ${config.label}
-          </span>
-        </div>
-        <div class="flex items-center space-x-2">
-          <div class="flex-1 bg-gray-200 rounded-full h-1.5">
-            <div class="h-1.5 rounded-full transition-all duration-300 ${
-              obra.estado === "finalizadas" ? "bg-green-500" : obra.estado === "abiertas" ? "bg-yellow-500" : "bg-red-500"
-            }" style="width: ${Number(obra.cumplimiento_total) || 0}%"></div>
-          </div>
-          <span class="text-xs font-medium text-gray-700 min-w-[35px]">${cumplimiento}</span>
-        </div>
-      </div>
-    `;
-  });
-
-  return `
-    <div class="p-4 max-w-sm">
-      <div class="mb-3">
-        <h3 class="font-bold text-gray-900 text-lg mb-1">${obras.length} Obras en esta ubicación</h3>
-        <p class="text-xs text-gray-600">${direccion}</p>
-        ${formatted_address ? `<p class="text-xs text-gray-500 mt-1">${formatted_address}</p>` : ''}
-      </div>
-      <div class="space-y-3 text-sm max-h-60 overflow-y-auto">
-        ${obrasHtml}
-      </div>
-    </div>
-  `;
 };
 
-const createInfoWindowContent = (obra, formatted_address = null) => {
-  const estadoConfig = {
-    sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
-    abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
-    finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
-  };
+const createMarker = (position, estado, obras, formatted_address) => {
+  try {
+    const svgIcon = createSVGIcon(estado, obras.length);
 
-  const config = estadoConfig[obra.estado];
-  const cumplimiento = obra.cumplimiento_total
-    ? `${Number(obra.cumplimiento_total).toFixed(1)}%`
-    : "N/A";
+    const marker = new google.maps.Marker({
+      position: new google.maps.LatLng(position.lat, position.lng),
+      map: map.value,
+      title: `${obras.length} obra(s) en ${obras[0].direccion_obra}`,
+      icon: {
+        url: svgIcon,
+        scaledSize: new google.maps.Size(32, 40),
+        anchor: new google.maps.Point(16, 40),
+      },
+      animation: google.maps.Animation.DROP,
+      optimized: false,
+    });
 
-  return `
-    <div class="p-4 max-w-sm">
-      <div class="flex items-center justify-between mb-3">
-        <h3 class="font-bold text-gray-900 text-lg">${
-          obra.num_proyecto || "N/A"
-        }</h3>
-        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-          config.color
-        }">
-          ${config.label}
-        </span>
-      </div>
+    const infoWindow = new google.maps.InfoWindow({
+      content: createMultipleInfoWindowContent(obras, formatted_address),
+      maxWidth: 400,
+    });
 
-      <div class="space-y-3 text-sm">
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Dirección Original:</p>
-          <p class="text-gray-600 text-xs">${obra.direccion_obra || "N/A"}</p>
-        </div>
+    marker.addListener("click", () => {
+      markers.value.forEach((m) => m.infoWindow?.close());
+      infoWindow.open(map.value, marker);
+    });
 
-        ${
-          formatted_address
-            ? `
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Ubicación Encontrada:</p>
-          <p class="text-gray-500 text-xs">${formatted_address}</p>
-        </div>
-        `
-            : ""
-        }
+    markers.value.push({
+      marker,
+      infoWindow,
+      estado,
+      obras,
+      visible: filters[estado],
+      position,
+    });
+  } catch (error) {
+    console.error("Error creando marcador:", error);
+  }
+};
 
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Cumplimiento:</p>
-          <div class="flex items-center space-x-2">
-            <div class="flex-1 bg-gray-200 rounded-full h-2">
-              <div class="h-2 rounded-full transition-all duration-300 ${
-                obra.estado === "finalizadas"
-                  ? "bg-green-500"
-                  : obra.estado === "abiertas"
-                  ? "bg-yellow-500"
-                  : "bg-red-500"
-              }"
-                   style="width: ${
-                     Number(obra.cumplimiento_total) || 0
-                   }%"></div>
-            </div>
-            <span class="text-xs font-medium text-gray-700 min-w-[40px]">${cumplimiento}</span>
-          </div>
-        </div>
-      </div>
-    </div>
+// Crear icono SVG
+const createSVGIcon = (estado, count) => {
+  const color = markerColors[estado];
+  const svg = `
+    <svg width="32" height="40" viewBox="0 0 32 40" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.3"/>
+        </filter>
+      </defs>
+      <path d="M16 0C7.163 0 0 7.163 0 16c0 12 16 24 16 24s16-12 16-24c0-8.837-7.163-16-16-16z"
+            fill="${color}"
+            stroke="white"
+            stroke-width="2"
+            filter="url(#shadow)"/>
+      <circle cx="16" cy="16" r="10" fill="white"/>
+      <circle cx="16" cy="16" r="7" fill="${color}"/>
+      <text x="16" y="21" text-anchor="middle" fill="white" font-size="10" font-weight="bold" font-family="Arial">${count}</text>
+    </svg>
   `;
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
 };
 
 const updateMarkers = () => {
-  let visibleCount = 0;
-  markers.value.forEach(({ marker, estado }) => {
-    const shouldShow = filters[estado];
-    marker.setVisible(shouldShow);
-
-    if (shouldShow) visibleCount++;
-
-    // Actualizar el estado visible del marcador
-    const markerIndex = markers.value.findIndex((m) => m.marker === marker);
-    if (markerIndex !== -1) {
-      markers.value[markerIndex].visible = shouldShow;
-    }
+  markers.value.forEach((m) => {
+    const shouldShow = filters[m.estado];
+    m.marker.setVisible(shouldShow);
+    m.visible = shouldShow;
   });
+  console.log("Marcadores actualizados. Visibles:", visibleMarkersCount.value);
 };
 
 const clearMarkers = () => {
   markers.value.forEach(({ marker, infoWindow }) => {
-    infoWindow?.close();
-    marker.setMap(null);
+    try {
+      infoWindow?.close();
+      marker.setMap(null);
+    } catch (error) {
+      console.error("Error limpiando marcador:", error);
+    }
   });
   markers.value = [];
-  geocodingCache.clear(); // Limpiar cache al recargar
+  // No limpiar cache para mejorar rendimiento
 };
 
-// Función para ajustar el viewport del mapa a todos los marcadores visibles
 const fitMapToMarkers = () => {
   if (!map.value || markers.value.length === 0) return;
 
@@ -608,29 +347,116 @@ const fitMapToMarkers = () => {
 
   map.value.fitBounds(bounds);
 
-  // Asegurar zoom mínimo
   const listener = google.maps.event.addListener(map.value, "idle", () => {
     if (map.value.getZoom() > 15) map.value.setZoom(15);
     google.maps.event.removeListener(listener);
   });
 };
 
-// Recargar marcadores cuando cambien los contadores
-watch(
-  () => props.counters,
-  () => {
-    if (map.value) {
-      loadMarkers();
-    }
-  },
-  { deep: true }
-);
+const getAllObras = () => {
+  try {
+    return [
+      ...props.counters.sin_avances.detalles.map((o) => ({
+        ...o,
+        estado: "sin_avances",
+      })),
+      ...props.counters.abiertas.detalles.map((o) => ({
+        ...o,
+        estado: "abiertas",
+      })),
+      ...props.counters.finalizadas.detalles.map((o) => ({
+        ...o,
+        estado: "finalizadas",
+      })),
+    ];
+  } catch (error) {
+    console.error("Error obteniendo obras:", error);
+    return [];
+  }
+};
 
-onMounted(() => {
-  initMap();
-});
+const searchAddresses = () => {
+  if (!searchQuery.value.trim()) {
+    searchResults.value = [];
+    showSearchResults.value = false;
+    return;
+  }
+  const query = searchQuery.value.toLowerCase();
+  const allObras = getAllObras();
+  searchResults.value = allObras
+    .filter(
+      (obra) =>
+        obra.direccion_obra?.toLowerCase().includes(query) ||
+        obra.num_proyecto?.toLowerCase().includes(query)
+    )
+    .slice(0, 10);
+  showSearchResults.value = true;
+};
+
+const goToObra = (obra) => {
+  searchQuery.value = "";
+  searchResults.value = [];
+  showSearchResults.value = false;
+
+  const markerData = markers.value.find((m) =>
+    m.obras.some((o) => o.num_proyecto === obra.num_proyecto)
+  );
+
+  if (markerData) {
+    map.value.setCenter(markerData.position);
+    map.value.setZoom(16);
+    markers.value.forEach((m) => m.infoWindow?.close());
+    markerData.infoWindow.open(map.value, markerData.marker);
+  }
+};
+
+const clearSearch = () => {
+  searchQuery.value = "";
+  searchResults.value = [];
+  showSearchResults.value = false;
+};
+
+const createMultipleInfoWindowContent = (obras, formatted_address) => {
+  const direccion = obras[0].direccion_obra;
+  let obrasHtml = obras
+    .map((obra) => {
+      const estadoConfig = {
+        sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
+        abiertas: {
+          color: "bg-yellow-100 text-yellow-800",
+          label: "En proceso",
+        },
+        finalizadas: {
+          color: "bg-green-100 text-green-800",
+          label: "Finalizada",
+        },
+      };
+      const config = estadoConfig[obra.estado];
+      const cumplimiento = obra.cumplimiento_total
+        ? `${Number(obra.cumplimiento_total).toFixed(1)}%`
+        : "N/A";
+      return `<div class="border-b border-gray-200 pb-3 mb-3 last:border-b-0 last:pb-0 last:mb-0"><div class="flex items-center justify-between mb-2"><h4 class="font-semibold text-gray-900">${
+        obra.num_proyecto || "N/A"
+      }</h4><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+        config.color
+      }">${
+        config.label
+      }</span></div><div class="flex items-center space-x-2"><div class="flex-1 bg-gray-200 rounded-full h-1.5"><div class="h-1.5 rounded-full" style="width: ${
+        Number(obra.cumplimiento_total) || 0
+      }%; background-color: ${
+        markerColors[obra.estado]
+      };"></div></div><span class="text-xs font-medium text-gray-700 min-w-[35px]">${cumplimiento}</span></div></div>`;
+    })
+    .join("");
+  return `<div class="p-4 max-w-sm"><div class="mb-3"><h3 class="font-bold text-gray-900 text-lg mb-1">${
+    obras.length
+  } Obra(s) en esta ubicación</h3><p class="text-xs text-gray-600">${direccion}</p>${
+    formatted_address
+      ? `<p class="text-xs text-gray-500 mt-1">${formatted_address}</p>`
+      : ""
+  }</div><div class="space-y-3 text-sm max-h-60 overflow-y-auto">${obrasHtml}</div></div>`;
+};
 </script>
-
 <template>
   <div class="bg-white rounded-lg shadow-lg overflow-hidden">
     <div
@@ -644,116 +470,95 @@ onMounted(() => {
           </p>
         </div>
 
-        <!-- Filtros por estado -->
         <div class="flex items-center space-x-4">
-          <!-- NUEVO: Buscador de direcciones -->
           <div class="relative">
-            <div class="flex items-center space-x-2">
-              <div class="relative">
-                <input
-                  v-model="searchQuery"
-                  @input="searchAddresses"
-                  @focus="searchAddresses"
-                  type="text"
-                  placeholder="Buscar obra o dirección..."
-                  class="w-64 px-3 py-1 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
-                />
-                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
-                  <svg
-                    v-if="searchLoading"
-                    class="animate-spin h-4 w-4 text-gray-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <circle
-                      class="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      stroke-width="4"
-                    ></circle>
-                    <path
-                      class="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    ></path>
-                  </svg>
-                  <svg
-                    v-else-if="searchQuery"
-                    @click="clearSearch"
-                    class="h-4 w-4 text-gray-400 cursor-pointer hover:text-gray-600"
-                    fill="none"
-                    viewBox="0 0 24 24"
+            <div class="relative">
+              <input
+                v-model="searchQuery"
+                @input="searchAddresses"
+                @focus="showSearchResults = true"
+                type="text"
+                placeholder="Buscar obra o dirección..."
+                class="w-64 px-3 py-1 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+              />
+              <div
+                class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
+              >
+                <svg
+                  v-if="searchLoading"
+                  class="animate-spin h-4 w-4 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
                     stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
-                  <svg
-                    v-else
-                    class="h-4 w-4 text-gray-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                    />
-                  </svg>
-                </div>
+                    stroke-width="4"
+                  ></circle>
+                  <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                <svg
+                  v-else-if="searchQuery"
+                  @click="clearSearch"
+                  class="h-4 w-4 text-gray-400 cursor-pointer hover:text-gray-600 pointer-events-auto"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+                <svg
+                  v-else
+                  class="h-4 w-4 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  />
+                </svg>
               </div>
             </div>
-
-            <!-- NUEVO: Resultados de búsqueda -->
             <div
               v-if="showSearchResults && searchResults.length > 0"
               class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto"
             >
               <div
                 v-for="obra in searchResults"
-                :key="`${obra.num_proyecto}-${obra.direccion_obra}`"
+                :key="obra.num_proyecto"
                 @click="goToObra(obra)"
-                class="px-3 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0"
+                class="px-3 py-2 hover:bg-gray-50 cursor-pointer"
               >
-                <div class="flex items-center justify-between">
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900 truncate">
-                      {{ obra.num_proyecto || 'N/A' }}
-                    </p>
-                    <p class="text-xs text-gray-500 truncate">
-                      {{ obra.direccion_obra }}
-                    </p>
-                  </div>
-                  <div class="flex-shrink-0 ml-2">
-                    <span
-                      class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
-                      :class="{
-                        'bg-red-100 text-red-800': obra.estado === 'sin_avances',
-                        'bg-yellow-100 text-yellow-800': obra.estado === 'abiertas',
-                        'bg-green-100 text-green-800': obra.estado === 'finalizadas'
-                      }"
-                    >
-                      {{
-                        obra.estado === 'sin_avances' ? 'Sin avances' :
-                        obra.estado === 'abiertas' ? 'Abierta' : 'Finalizada'
-                      }}
-                    </span>
-                  </div>
-                </div>
+                <p class="text-sm font-medium text-gray-900 truncate">
+                  {{ obra.num_proyecto || "N/A" }}
+                </p>
+                <p class="text-xs text-gray-500 truncate">
+                  {{ obra.direccion_obra }}
+                </p>
               </div>
             </div>
-
-            <!-- NUEVO: Mensaje cuando no hay resultados -->
             <div
-              v-else-if="showSearchResults && searchResults.length === 0 && searchQuery.trim()"
+              v-else-if="
+                showSearchResults &&
+                searchResults.length === 0 &&
+                searchQuery.trim()
+              "
               class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg"
             >
               <div class="px-3 py-2 text-sm text-gray-500 text-center">
@@ -761,7 +566,6 @@ onMounted(() => {
               </div>
             </div>
           </div>
-
           <div class="flex items-center space-x-2">
             <input
               id="sin-avances"
@@ -778,7 +582,6 @@ onMounted(() => {
               Sin avances ({{ counters.sin_avances.count }})
             </label>
           </div>
-
           <div class="flex items-center space-x-2">
             <input
               id="abiertas"
@@ -795,7 +598,6 @@ onMounted(() => {
               Abiertas ({{ counters.abiertas.count }})
             </label>
           </div>
-
           <div class="flex items-center space-x-2">
             <input
               id="finalizadas"
@@ -814,13 +616,10 @@ onMounted(() => {
           </div>
         </div>
       </div>
-
-      <!-- Controles adicionales -->
       <div class="flex items-center justify-between mt-3">
         <div class="text-sm text-gray-600">
           Marcadores visibles: {{ visibleMarkersCount }} de {{ markers.length }}
         </div>
-
         <div class="flex items-center space-x-2">
           <button
             @click="fitMapToMarkers"
@@ -838,11 +637,10 @@ onMounted(() => {
       </div>
     </div>
 
-    <!-- Mapa -->
-    <div ref="mapContainer" class="w-full h-96 relative">
+    <div ref="mapContainer" class="w-full h-[600px] relative">
       <div
         v-if="loading"
-        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
+        class="absolute inset-0 bg-gray-100/80 flex items-center justify-center z-10 backdrop-blur-sm"
       >
         <div class="text-center">
           <div
@@ -851,37 +649,20 @@ onMounted(() => {
           <p class="mt-2 text-sm text-gray-600">
             Cargando mapa y geocodificando direcciones...
           </p>
-          <p class="mt-1 text-xs text-gray-500">
-            Esto puede tomar unos segundos
-          </p>
         </div>
       </div>
-
       <div
         v-if="error"
-        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
+        class="absolute inset-0 bg-red-50 flex items-center justify-center z-10"
       >
         <div class="text-center">
-          <svg
-            class="mx-auto h-12 w-12 text-red-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <h3 class="mt-2 text-sm font-medium text-gray-900">
+          <h3 class="text-sm font-medium text-red-800">
             Error al cargar el mapa
           </h3>
-          <p class="mt-1 text-sm text-gray-500">{{ error }}</p>
+          <p class="mt-1 text-sm text-red-600">{{ error }}</p>
           <button
             @click="initMap"
-            class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
+            class="mt-4 bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700"
           >
             Reintentar
           </button>
@@ -889,24 +670,25 @@ onMounted(() => {
       </div>
     </div>
 
-    <!-- Leyenda mejorada -->
-    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
-      <div class="flex items-center justify-between text-xs text-gray-600">
-        <div class="flex items-center space-x-4">
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-red-500 rounded-full mr-1"></div>
-            Sin avances
-          </span>
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-yellow-500 rounded-full mr-1"></div>
-            En proceso
-          </span>
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-green-500 rounded-full mr-1"></div>
-            Finalizadas
-          </span>
-        </div>
-      </div>
+    <div
+      v-if="!loading && failedGeocodings.length > 0"
+      class="px-6 py-4 bg-yellow-50 border-t border-yellow-200"
+    >
+      <h4 class="text-sm font-semibold text-yellow-800">
+        {{ failedGeocodings.flatMap((f) => f.obras).length }} obra(s) no
+        pudieron ser ubicadas
+      </h4>
+      <p class="text-xs text-yellow-700 mb-2">
+        Las siguientes direcciones no fueron encontradas o la coincidencia era
+        de baja calidad. Considera revisarlas en la base de datos.
+      </p>
+      <ul class="text-xs text-gray-700 list-disc pl-5 max-h-32 overflow-y-auto">
+        <li v-for="item in failedGeocodings" :key="item.direccion">
+          <strong>{{ item.direccion }}</strong> ({{ item.obras.length }} obra/s)
+          - Motivo:
+          <span class="font-mono text-red-600">{{ item.motivo }}</span>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/resources/js/Components/Dashboard/MapsCopy.vue b/resources/js/Components/Dashboard/MapsCopy.vue
deleted file mode 100644
index bc18343..0000000
--- a/resources/js/Components/Dashboard/MapsCopy.vue
+++ /dev/null
@@ -1,721 +0,0 @@
-<script setup>
-import { ref, reactive, onMounted, computed, watch } from "vue";
-import { Loader } from "@googlemaps/js-api-loader";
-
-const props = defineProps({
-  counters: {
-    type: Object,
-    required: true,
-  },
-});
-
-const mapContainer = ref(null);
-const loading = ref(true);
-const error = ref(null);
-const map = ref(null);
-const markers = ref([]);
-const geocoder = ref(null);
-
-// Filtros activos
-const filters = reactive({
-  sin_avances: true,
-  abiertas: true,
-  finalizadas: true,
-});
-
-// Configuración de colores por estado
-const markerColors = {
-  sin_avances: "#EF4444", // Rojo
-  abiertas: "#F59E0B", // Amarillo
-  finalizadas: "#10B981", // Verde
-};
-
-// Estadísticas de procesamiento
-const processingStats = ref({
-  total: 0,
-  successful: 0,
-  failed: 0,
-  outOfBounds: 0,
-});
-
-// Contador de marcadores visibles
-const visibleMarkersCount = computed(() => {
-  return markers.value.filter((marker) => marker.visible).length;
-});
-
-// Coordenadas del centro de Comalcalco, Tabasco
-const COMALCALCO_CENTER = {
-  lat: 18.2669,
-  lng: -93.2072,
-};
-
-// Límites expandidos de Tabasco (más amplios para capturar todas las obras)
-const TABASCO_BOUNDS = {
-  north: 18.7, // Expandido hacia el norte
-  south: 17.3, // Expandido hacia el sur
-  east: -92.0, // Expandido hacia el este
-  west: -94.7, // Expandido hacia el oeste
-};
-
-// Cache para geocodificación (evitar llamadas duplicadas)
-const geocodingCache = new Map();
-
-const initMap = async () => {
-  loading.value = true;
-  error.value = null;
-
-  try {
-    const loader = new Loader({
-      apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
-      version: "weekly",
-      libraries: ["places"],
-    });
-
-    const google = await loader.load();
-
-    if (!google.maps) {
-      throw new Error("Google Maps no se cargó correctamente");
-    }
-
-    // Inicializar el mapa con zoom más amplio
-    map.value = new google.maps.Map(mapContainer.value, {
-      center: COMALCALCO_CENTER,
-      zoom: 11, // Zoom más amplio para ver toda la región
-      restriction: {
-        latLngBounds: TABASCO_BOUNDS,
-        strictBounds: false,
-      },
-      mapTypeControl: true,
-      streetViewControl: true,
-      fullscreenControl: true,
-      zoomControl: true,
-    });
-
-    geocoder.value = new google.maps.Geocoder();
-
-    await loadMarkers();
-  } catch (err) {
-    console.error("Error loading Google Maps:", err);
-    error.value = err.message || "Error al cargar Google Maps";
-  } finally {
-    loading.value = false;
-  }
-};
-
-const loadMarkers = async () => {
-  if (!map.value || !geocoder.value) return;
-
-  // Limpiar marcadores existentes
-  clearMarkers();
-
-  // Resetear estadísticas
-  processingStats.value = {
-    total: 0,
-    successful: 0,
-    failed: 0,
-    outOfBounds: 0,
-    duplicates: 0,
-  };
-
-  const allObras = [
-    ...props.counters.sin_avances.detalles.map((obra) => ({
-      ...obra,
-      estado: "sin_avances",
-    })),
-    ...props.counters.abiertas.detalles.map((obra) => ({
-      ...obra,
-      estado: "abiertas",
-    })),
-    ...props.counters.finalizadas.detalles.map((obra) => ({
-      ...obra,
-      estado: "finalizadas",
-    })),
-  ];
-
-  processingStats.value.total = allObras.length;
-
-  console.table(
-    allObras.map((obra) => ({
-      proyecto: obra.num_proyecto,
-      direccion: obra.direccion_obra,
-      estado: obra.estado,
-    }))
-  );
-
-  // Agrupar obras por dirección
-  const obrasPorDireccion = new Map();
-  allObras.forEach(obra => {
-    const direccion = obra.direccion_obra;
-    if (!obrasPorDireccion.has(direccion)) {
-      obrasPorDireccion.set(direccion, []);
-    }
-    obrasPorDireccion.get(direccion).push(obra);
-  });
-
-  processingStats.value.total = allObras.length;
-
-  // Procesar grupos de obras por dirección en lotes
-  const direcciones = Array.from(obrasPorDireccion.keys());
-  const batchSize = 5;
-
-  for (let i = 0; i < direcciones.length; i += batchSize) {
-    const batch = direcciones.slice(i, i + batchSize);
-    const batchPromises = batch.map(direccion =>
-      createMarkerForDireccion(direccion, obrasPorDireccion.get(direccion))
-    );
-
-    await Promise.allSettled(batchPromises);
-
-    if (i + batchSize < direcciones.length) {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    }
-  }
-  updateMarkers();
-};
-
-const createMarkerForDireccion = async (direccion, obrasEnDireccion) => {
-  if (!direccion || !geocoder.value) {
-    obrasEnDireccion.forEach(() => processingStats.value.failed++);
-    return;
-  }
-
-  // Construir direcciones alternativas para geocodificación
-  const addresses = [
-    `${direccion}, Comalcalco, Tabasco, México`,
-    `${direccion}, Tabasco, México`,
-    `${direccion}, México`,
-  ];
-
-  // Verificar cache primero
-  const cacheKey = direccion;
-  if (geocodingCache.has(cacheKey)) {
-    const cachedData = geocodingCache.get(cacheKey);
-    processingStats.value.duplicates += obrasEnDireccion.length - 1;
-    return createMarkerFromPosition(obrasEnDireccion, cachedData.position, cachedData.formatted_address);
-  }
-
-  // Intentar geocodificación con direcciones alternativas
-  for (const address of addresses) {
-    try {
-      const result = await geocodeAddress(address);
-      if (result.success) {
-        // Guardar en cache
-        geocodingCache.set(cacheKey, {
-          position: result.position,
-          formatted_address: result.formatted_address,
-        });
-
-        return createMarkerFromPosition(obrasEnDireccion, result.position, result.formatted_address);
-      }
-    } catch (err) {
-      console.warn(`Error geocodificando ${address}:`, err);
-    }
-  }
-
-  // Si todas las direcciones fallan, crear marcador fallback
-  processingStats.value.failed += obrasEnDireccion.length;
-
-  const randomOffset = {
-    lat: (Math.random() - 0.5) * 0.02,
-    lng: (Math.random() - 0.5) * 0.02,
-  };
-
-  const fallbackPosition = {
-    lat: COMALCALCO_CENTER.lat + randomOffset.lat,
-    lng: COMALCALCO_CENTER.lng + randomOffset.lng,
-  };
-
-  return createMarkerFromPosition(obrasEnDireccion, fallbackPosition, "Ubicación aproximada - Comalcalco, Tabasco");
-};
-
-const geocodeAddress = (address) => {
-  return new Promise((resolve, reject) => {
-    geocoder.value.geocode({ address }, (results, status) => {
-      if (status === "OK" && results[0]) {
-        const position = results[0].geometry.location;
-        const lat = position.lat();
-        const lng = position.lng();
-
-        resolve({
-          success: true,
-          position: { lat, lng },
-          formatted_address: results[0].formatted_address,
-        });
-      } else {
-        resolve({
-          success: false,
-          status,
-          address,
-        });
-      }
-    });
-  });
-};
-
-const createMarkerFromPosition = (obrasEnPosicion, position, formatted_address) => {
-  const lat = position.lat;
-  const lng = position.lng;
-
-  // Verificar límites expandidos
-  if (
-    lat < TABASCO_BOUNDS.south ||
-    lat > TABASCO_BOUNDS.north ||
-    lng < TABASCO_BOUNDS.west ||
-    lng > TABASCO_BOUNDS.east
-  ) {
-    processingStats.value.outOfBounds += obrasEnPosicion.length;
-  }
-
-  // Usar la primera obra para definir el marcador principal
-  const obraPrincipal = obrasEnPosicion[0];
-
-  const marker = new google.maps.Marker({
-    position: new google.maps.LatLng(lat, lng),
-    map: map.value,
-    title: obrasEnPosicion.length === 1
-      ? `${obraPrincipal.num_proyecto} - ${obraPrincipal.direccion_obra}`
-      : `${obrasEnPosicion.length} obras en ${obraPrincipal.direccion_obra}`,
-    icon: createCustomMarker(obraPrincipal.estado),
-    visible: filters[obraPrincipal.estado],
-    animation: google.maps.Animation.DROP,
-  });
-
-  // Info window con todas las obras en esa posición
-  const infoWindow = new google.maps.InfoWindow({
-    content: createMultipleInfoWindowContent(obrasEnPosicion, formatted_address),
-  });
-
-  marker.addListener("click", () => {
-    markers.value.forEach((m) => m.infoWindow?.close());
-    infoWindow.open(map.value, marker);
-  });
-
-  markers.value.push({
-    marker,
-    infoWindow,
-    estado: obraPrincipal.estado,
-    obras: obrasEnPosicion,
-    visible: filters[obraPrincipal.estado],
-    position: { lat, lng },
-  });
-
-  processingStats.value.successful += obrasEnPosicion.length;
-};
-
-const createCustomMarker = (estado) => {
-  const color = markerColors[estado];
-  const width = 32;
-  const height = 48;
-
-  return {
-    url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-      <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <!-- Sombra para el marcador -->
-          <filter id="dropshadow-${estado}" x="-50%" y="-50%" width="200%" height="200%">
-            <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.3)" flood-opacity="0.5"/>
-          </filter>
-
-          <!-- Gradiente para dar volumen -->
-          <radialGradient id="gradient-${estado}" cx="30%" cy="20%" r="70%">
-            <stop offset="0%" style="stop-color:white;stop-opacity:0.3" />
-            <stop offset="100%" style="stop-color:${color};stop-opacity:1" />
-          </radialGradient>
-        </defs>
-
-        <!-- Forma principal del marcador (gota/pin) -->
-        <path d="M ${width / 2} ${height - 4}
-                 C ${width / 2} ${height - 4},
-                   ${width * 0.125} ${height * 0.58},
-                   ${width * 0.125} ${height * 0.375}
-                 C ${width * 0.125} ${height * 0.167},
-                   ${width * 0.292} 2,
-                   ${width / 2} 2
-                 C ${width * 0.708} 2,
-                   ${width * 0.875} ${height * 0.167},
-                   ${width * 0.875} ${height * 0.375}
-                 C ${width * 0.875} ${height * 0.58},
-                   ${width / 2} ${height - 4},
-                   ${width / 2} ${height - 4} Z"
-              fill="url(#gradient-${estado})"
-              stroke="white"
-              stroke-width="1.5"
-              filter="url(#dropshadow-${estado})"/>
-
-        <!-- Borde interior más oscuro -->
-        <path d="M ${width / 2} ${height - 4}
-                 C ${width / 2} ${height - 4},
-                   ${width * 0.125} ${height * 0.58},
-                   ${width * 0.125} ${height * 0.375}
-                 C ${width * 0.125} ${height * 0.167},
-                   ${width * 0.292} 2,
-                   ${width / 2} 2
-                 C ${width * 0.708} 2,
-                   ${width * 0.875} ${height * 0.167},
-                   ${width * 0.875} ${height * 0.375}
-                 C ${width * 0.875} ${height * 0.58},
-                   ${width / 2} ${height - 4},
-                   ${width / 2} ${height - 4} Z"
-              fill="none"
-              stroke="${color}"
-              stroke-width="1"
-              opacity="0.8"/>
-
-        <!-- Círculo interior blanco -->
-        <circle cx="${width / 2}"
-                cy="${height * 0.375}"
-                r="${width * 0.25}"
-                fill="white"
-                stroke="${color}"
-                stroke-width="1"/>
-      </svg>
-    `)}`,
-    scaledSize: new google.maps.Size(width, height),
-    anchor: new google.maps.Point(width / 2, height - 4),
-    origin: new google.maps.Point(0, 0),
-  };
-};
-
-const createMultipleInfoWindowContent = (obras, formatted_address = null) => {
-  if (obras.length === 1) {
-    return createInfoWindowContent(obras[0], formatted_address);
-  }
-
-  const direccion = obras[0].direccion_obra;
-
-  let obrasHtml = '';
-  obras.forEach(obra => {
-    const estadoConfig = {
-      sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
-      abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
-      finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
-    };
-
-    const config = estadoConfig[obra.estado];
-    const cumplimiento = obra.cumplimiento_total ? `${Number(obra.cumplimiento_total).toFixed(1)}%` : "N/A";
-
-    obrasHtml += `
-      <div class="border-b border-gray-200 pb-3 mb-3 last:border-b-0 last:pb-0 last:mb-0">
-        <div class="flex items-center justify-between mb-2">
-          <h4 class="font-semibold text-gray-900">${obra.num_proyecto || "N/A"}</h4>
-          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${config.color}">
-            ${config.label}
-          </span>
-        </div>
-        <div class="flex items-center space-x-2">
-          <div class="flex-1 bg-gray-200 rounded-full h-1.5">
-            <div class="h-1.5 rounded-full transition-all duration-300 ${
-              obra.estado === "finalizadas" ? "bg-green-500" : obra.estado === "abiertas" ? "bg-yellow-500" : "bg-red-500"
-            }" style="width: ${Number(obra.cumplimiento_total) || 0}%"></div>
-          </div>
-          <span class="text-xs font-medium text-gray-700 min-w-[35px]">${cumplimiento}</span>
-        </div>
-      </div>
-    `;
-  });
-
-  return `
-    <div class="p-4 max-w-sm">
-      <div class="mb-3">
-        <h3 class="font-bold text-gray-900 text-lg mb-1">${obras.length} Obras en esta ubicación</h3>
-        <p class="text-xs text-gray-600">${direccion}</p>
-        ${formatted_address ? `<p class="text-xs text-gray-500 mt-1">${formatted_address}</p>` : ''}
-      </div>
-      <div class="space-y-3 text-sm max-h-60 overflow-y-auto">
-        ${obrasHtml}
-      </div>
-    </div>
-  `;
-};
-
-const createInfoWindowContent = (obra, formatted_address = null) => {
-  const estadoConfig = {
-    sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
-    abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
-    finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
-  };
-
-  const config = estadoConfig[obra.estado];
-  const cumplimiento = obra.cumplimiento_total
-    ? `${Number(obra.cumplimiento_total).toFixed(1)}%`
-    : "N/A";
-
-  return `
-    <div class="p-4 max-w-sm">
-      <div class="flex items-center justify-between mb-3">
-        <h3 class="font-bold text-gray-900 text-lg">${
-          obra.num_proyecto || "N/A"
-        }</h3>
-        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-          config.color
-        }">
-          ${config.label}
-        </span>
-      </div>
-
-      <div class="space-y-3 text-sm">
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Dirección Original:</p>
-          <p class="text-gray-600 text-xs">${obra.direccion_obra || "N/A"}</p>
-        </div>
-
-        ${
-          formatted_address
-            ? `
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Ubicación Encontrada:</p>
-          <p class="text-gray-500 text-xs">${formatted_address}</p>
-        </div>
-        `
-            : ""
-        }
-
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Cumplimiento:</p>
-          <div class="flex items-center space-x-2">
-            <div class="flex-1 bg-gray-200 rounded-full h-2">
-              <div class="h-2 rounded-full transition-all duration-300 ${
-                obra.estado === "finalizadas"
-                  ? "bg-green-500"
-                  : obra.estado === "abiertas"
-                  ? "bg-yellow-500"
-                  : "bg-red-500"
-              }"
-                   style="width: ${
-                     Number(obra.cumplimiento_total) || 0
-                   }%"></div>
-            </div>
-            <span class="text-xs font-medium text-gray-700 min-w-[40px]">${cumplimiento}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-};
-
-const updateMarkers = () => {
-  let visibleCount = 0;
-  markers.value.forEach(({ marker, estado }) => {
-    const shouldShow = filters[estado];
-    marker.setVisible(shouldShow);
-
-    if (shouldShow) visibleCount++;
-
-    // Actualizar el estado visible del marcador
-    const markerIndex = markers.value.findIndex((m) => m.marker === marker);
-    if (markerIndex !== -1) {
-      markers.value[markerIndex].visible = shouldShow;
-    }
-  });
-};
-
-const clearMarkers = () => {
-  markers.value.forEach(({ marker, infoWindow }) => {
-    infoWindow?.close();
-    marker.setMap(null);
-  });
-  markers.value = [];
-  geocodingCache.clear(); // Limpiar cache al recargar
-};
-
-// Función para ajustar el viewport del mapa a todos los marcadores visibles
-const fitMapToMarkers = () => {
-  if (!map.value || markers.value.length === 0) return;
-
-  const bounds = new google.maps.LatLngBounds();
-  const visibleMarkers = markers.value.filter((m) => m.visible);
-
-  if (visibleMarkers.length === 0) return;
-
-  visibleMarkers.forEach(({ position }) => {
-    bounds.extend(new google.maps.LatLng(position.lat, position.lng));
-  });
-
-  map.value.fitBounds(bounds);
-
-  // Asegurar zoom mínimo
-  const listener = google.maps.event.addListener(map.value, "idle", () => {
-    if (map.value.getZoom() > 15) map.value.setZoom(15);
-    google.maps.event.removeListener(listener);
-  });
-};
-
-// Recargar marcadores cuando cambien los contadores
-watch(
-  () => props.counters,
-  () => {
-    if (map.value) {
-      loadMarkers();
-    }
-  },
-  { deep: true }
-);
-
-onMounted(() => {
-  initMap();
-});
-</script>
-
-<template>
-  <div class="bg-white rounded-lg shadow-lg overflow-hidden">
-    <div
-      class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200"
-    >
-      <div class="flex items-center justify-between">
-        <div>
-          <h3 class="text-lg font-medium text-gray-900">Mapa de Obras</h3>
-          <p class="text-sm text-gray-600 mt-1">
-            Ubicación geográfica de proyectos en Comalcalco, Tabasco
-          </p>
-        </div>
-
-        <!-- Filtros por estado -->
-        <div class="flex items-center space-x-4">
-          <div class="flex items-center space-x-2">
-            <input
-              id="sin-avances"
-              v-model="filters.sin_avances"
-              @change="updateMarkers"
-              type="checkbox"
-              class="rounded border-gray-300 text-red-600 focus:ring-red-500"
-            />
-            <label
-              for="sin-avances"
-              class="flex items-center text-sm text-gray-700"
-            >
-              <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
-              Sin avances ({{ counters.sin_avances.count }})
-            </label>
-          </div>
-
-          <div class="flex items-center space-x-2">
-            <input
-              id="abiertas"
-              v-model="filters.abiertas"
-              @change="updateMarkers"
-              type="checkbox"
-              class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500"
-            />
-            <label
-              for="abiertas"
-              class="flex items-center text-sm text-gray-700"
-            >
-              <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
-              Abiertas ({{ counters.abiertas.count }})
-            </label>
-          </div>
-
-          <div class="flex items-center space-x-2">
-            <input
-              id="finalizadas"
-              v-model="filters.finalizadas"
-              @change="updateMarkers"
-              type="checkbox"
-              class="rounded border-gray-300 text-green-600 focus:ring-green-500"
-            />
-            <label
-              for="finalizadas"
-              class="flex items-center text-sm text-gray-700"
-            >
-              <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
-              Finalizadas ({{ counters.finalizadas.count }})
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <!-- Controles adicionales -->
-      <div class="flex items-center justify-between mt-3">
-        <div class="text-sm text-gray-600">
-          Marcadores visibles: {{ visibleMarkersCount }} de {{ markers.length }}
-        </div>
-
-        <div class="flex items-center space-x-2">
-          <button
-            @click="fitMapToMarkers"
-            class="px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
-          >
-            Ajustar Vista
-          </button>
-          <button
-            @click="loadMarkers"
-            class="px-3 py-1 text-xs bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
-          >
-            Recargar
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Mapa -->
-    <div ref="mapContainer" class="w-full h-96 relative">
-      <div
-        v-if="loading"
-        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
-      >
-        <div class="text-center">
-          <div
-            class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"
-          ></div>
-          <p class="mt-2 text-sm text-gray-600">
-            Cargando mapa y geocodificando direcciones...
-          </p>
-          <p class="mt-1 text-xs text-gray-500">
-            Esto puede tomar unos segundos
-          </p>
-        </div>
-      </div>
-
-      <div
-        v-if="error"
-        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
-      >
-        <div class="text-center">
-          <svg
-            class="mx-auto h-12 w-12 text-red-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <h3 class="mt-2 text-sm font-medium text-gray-900">
-            Error al cargar el mapa
-          </h3>
-          <p class="mt-1 text-sm text-gray-500">{{ error }}</p>
-          <button
-            @click="initMap"
-            class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
-          >
-            Reintentar
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Leyenda mejorada -->
-    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
-      <div class="flex items-center justify-between text-xs text-gray-600">
-        <div class="flex items-center space-x-4">
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-red-500 rounded-full mr-1"></div>
-            Sin avances
-          </span>
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-yellow-500 rounded-full mr-1"></div>
-            En proceso
-          </span>
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-green-500 rounded-full mr-1"></div>
-            Finalizadas
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/resources/js/Pages/App/AtencionCiudadana.vue b/resources/js/Pages/App/AtencionCiudadana.vue
index 529f8e4..77f38f9 100644
--- a/resources/js/Pages/App/AtencionCiudadana.vue
+++ b/resources/js/Pages/App/AtencionCiudadana.vue
@@ -180,15 +180,16 @@ const applyDataToComponents = (payload, includeCharts = true) => {
   const { porTipo, porGenero, porEdad, totalsShape } =
     normalizeResponse(payload);
 
-  // Actualizar totales
-  totals.value.day = totalsShape?.today ?? 0;
-  totals.value.week = totalsShape?.week ?? 0;
-  totals.value.month = totalsShape?.month ?? 0;
+  // Solo usar totales del servidor si no hay filtros activos
+  if (!selectedDepartment.value && !selectedType.value) {
+    totals.value.day = totalsShape?.today ?? 0;
+    totals.value.week = totalsShape?.week ?? 0;
+    totals.value.month = totalsShape?.month ?? 0;
+  }
 
-  // Procesar beneficiarios
+  // Procesar beneficiarios (esto también actualizará los totales filtrados)
   processBeneficiariesAsync(payload);
 
-  // Solo construir gráficas si se solicita (para evitar conflicto con DateRange)
   if (includeCharts) {
     buildTipoChart(porTipo);
     buildGeneroChart(porGenero);
@@ -230,9 +231,42 @@ const processBeneficiariesAsync = async (payload) => {
     beneficiariesList.value = beneficiariesData;
     beneficiariesByType.value = groupBeneficiariesByType(beneficiariesData);
     expandedGroups.value = new Set();
+
+    updateTotalsFromFilteredData(payload);
   }, 0);
 };
 
+const updateTotalsFromFilteredData = (payload) => {
+  const dashboardAlmacenData = payload.dashboard?.data ?? payload.dashboard ?? {};
+  const dashboardServicioData = payload.dashboard_servicio?.data ?? payload.dashboard_servicio ?? {};
+
+  // Calcular para cada período
+  const periods = ['hoy', 'semana'];
+  const totalsKeys = ['day', 'week'];
+
+  periods.forEach((periodKey, index) => {
+    const beneficiariesAlmacen = dashboardAlmacenData[periodKey] || [];
+    const beneficiariesServicio = dashboardServicioData[periodKey] || [];
+
+    let allBeneficiaries = [...beneficiariesAlmacen, ...beneficiariesServicio];
+
+    // Aplicar filtros de departamento y tipo
+    allBeneficiaries = filterBeneficiariesByDepartment(
+      allBeneficiaries,
+      selectedDepartment.value
+    );
+
+    allBeneficiaries = filterBeneficiariesByType(
+      allBeneficiaries,
+      selectedType.value
+    );
+
+    // Actualizar el total correspondiente
+    const totalKey = totalsKeys[index];
+    totals.value[totalKey] = allBeneficiaries.length;
+  });
+};
+
 const clearComponentData = () => {
   tipoChart.value = { labels: [], datasets: [] };
   generoChart.value = { labels: [], datasets: [] };
@@ -664,13 +698,6 @@ onMounted(() => {
               <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
             Entregados
-            {{
-              selectedPeriod === "hoy"
-                ? "Hoy"
-                : selectedPeriod === "semana"
-                ? "Esta Semana"
-                : "Este Mes"
-            }}
             ({{ beneficiariesList.length }})
           </h2>
 
-- 
2.45.2


From a080e679d7010850d23f1ad2592209031e63eb00 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Fri, 5 Sep 2025 14:10:05 -0600
Subject: [PATCH 17/18] RouteServiceProvider modificado

---
 app/Providers/RouteServiceProvider.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
index f5b4862..581b2b7 100644
--- a/app/Providers/RouteServiceProvider.php
+++ b/app/Providers/RouteServiceProvider.php
@@ -17,7 +17,7 @@ class RouteServiceProvider extends ServiceProvider
      *
      * @var string
      */
-    public const HOME = '/dashboard/welcome';
+    public const HOME = '/tramites';
 
     /**
      * Define your route model bindings, pattern filters, and other route configuration.
-- 
2.45.2


From 7986cc3650296864502c603c5a19ef718e06240d Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Tue, 7 Oct 2025 13:21:00 -0600
Subject: [PATCH 18/18] =?UTF-8?q?Cambio=20exportaci=C3=B3n=20Excel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dashboard/AtencionController.php          |  79 ++-----
 .../Dashboard/Modal/ExportModal.vue           | 208 ++----------------
 .../Components/Dashboard/Skeleton/Header.vue  |  10 +-
 routes/web.php                                |   1 -
 4 files changed, 51 insertions(+), 247 deletions(-)

diff --git a/app/Http/Controllers/Dashboard/AtencionController.php b/app/Http/Controllers/Dashboard/AtencionController.php
index 4c38771..7e08bc6 100644
--- a/app/Http/Controllers/Dashboard/AtencionController.php
+++ b/app/Http/Controllers/Dashboard/AtencionController.php
@@ -143,76 +143,39 @@ private function getFullData($startDate, $endDate, $period)
   }
 
 
-  public function getSupportOptions(Request $request)
-  {
-    try {
-      $typeId = $request->query('type_id');
-
-      if (!$typeId) {
-        return response()->json(['error' => 'type_id es requerido'], 400);
-      }
-
-      $url = 'https://apoyos.comalcalco.gob.mx/beneficiaries/export/support-options';
-
-      $response = Http::timeout(30)->get($url, [
-        'type_id' => $typeId
-      ]);
-
-      if (!$response->successful()) {
-        Log::error('Error al obtener opciones de apoyo', [
-          'status' => $response->status(),
-          'body' => $response->body(),
-          'type_id' => $typeId
-        ]);
-
-        return response()->json([
-          'error' => 'Error al obtener opciones de apoyo'
-        ], $response->status());
-      }
-
-      return response()->json($response->json());
-    } catch (\Exception $e) {
-      Log::error('Error en getSupportOptions', [
-        'exception' => $e->getMessage(),
-        'type_id' => $request->query('type_id')
-      ]);
-
-      return response()->json([
-        'error' => 'Error interno del servidor'
-      ], 500);
-    }
-  }
-
   public function exportExcel(Request $request)
   {
     try {
-      // CAMBIO: Usar los parámetros correctos que espera la API
+      // Obtener parámetros necesarios para la API
       $params = $request->only([
         'start_date',
         'end_date',
-        'type_id',
-        'support_id'
+        'department'
       ]);
 
       // Validaciones básicas
-      if (!$params['start_date'] || !$params['end_date']) {
+      if (!isset($params['start_date']) || !isset($params['end_date'])) {
         return response()->json([
           'error' => 'Las fechas son requeridas'
         ], 400);
       }
 
-      if (!$params['type_id']) {
+      if (!isset($params['department']) || $params['department'] === '') {
         return response()->json([
-          'error' => 'El type_id es requerido'
+          'error' => 'El departamento es requerido'
         ], 400);
       }
 
-      $url = 'https://apoyos.comalcalco.gob.mx/beneficiaries/export/excel';
+      // Validar que department sea 1 o 3
+      if (!in_array((int)$params['department'], [1, 3])) {
+        return response()->json([
+          'error' => 'El departamento debe ser Atención Ciudadana o DIF'
+        ], 400);
+      }
 
-      // Log de parámetros para debug
-      Log::info('Exportando Excel con parámetros:', $params);
+      $url = 'https://apoyos.comalcalco.gob.mx/api/beneficiaries/export-excel';
 
-      // IMPORTANTE: Hacer la petición sin timeout muy alto y con withoutVerifying para SSL
+      // Hacer la petición a la API externa
       $response = Http::withoutVerifying()
         ->timeout(60)
         ->get($url, $params);
@@ -229,24 +192,30 @@ public function exportExcel(Request $request)
         ], $response->status());
       }
 
-      // CORREGIR: Verificar que la respuesta sea realmente un Excel
+      // Verificar que la respuesta sea realmente un Excel
       $contentType = $response->header('Content-Type');
 
-      if (!str_contains($contentType, 'spreadsheet') && !str_contains($contentType, 'excel')) {
+      if (!str_contains($contentType, 'spreadsheet') && !str_contains($contentType, 'excel') && !str_contains($contentType, 'octet-stream')) {
         Log::error('Respuesta no es un archivo Excel', [
+          'url' => $url,
+          'params' => $params,
+          'status' => $response->status(),
           'content_type' => $contentType,
-          'body_preview' => substr($response->body(), 0, 200)
+          'body_preview' => substr($response->body(), 0, 500)
         ]);
 
         return response()->json([
-          'error' => 'El servidor no devolvió un archivo Excel válido'
+          'error' => 'La API externa no devolvió un archivo Excel válido. URL: ' . $url . ' | Status: ' . $response->status()
         ], 400);
       }
 
+      // Nombre del departamento para el archivo
+      $departmentName = $params['department'] == 1 ? 'AtencionCiudadana' : 'DIF';
+
       // Retornar el archivo Excel directamente con headers correctos
       return response($response->body(), 200, [
         'Content-Type' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-        'Content-Disposition' => 'attachment; filename="beneficiarios_' .
+        'Content-Disposition' => 'attachment; filename="beneficiarios_' . $departmentName . '_' .
           $params['start_date'] . '_' . $params['end_date'] . '.xlsx"',
         'Content-Length' => strlen($response->body()),
         'Cache-Control' => 'no-cache, no-store, must-revalidate',
diff --git a/resources/js/Components/Dashboard/Modal/ExportModal.vue b/resources/js/Components/Dashboard/Modal/ExportModal.vue
index 732991e..28149bf 100644
--- a/resources/js/Components/Dashboard/Modal/ExportModal.vue
+++ b/resources/js/Components/Dashboard/Modal/ExportModal.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted } from "vue";
+import { ref, watch } from "vue";
 import axios from "axios";
 import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
 
@@ -10,13 +10,10 @@ const props = defineProps({
 const emit = defineEmits(['close']);
 
 const loading = ref(false);
-const loadingOptions = ref(false);
 const form = ref({
   startDate: new Date().toISOString().slice(0, 10),
   endDate: new Date().toISOString().slice(0, 10),
-  supportType: '', // almacen o servicio
-  typeId: '', // ID del tipo específico
-  supportId: '' // Opciones específicas seleccionadas
+  department: '' // 1 para Atención Ciudadana, 3 para DIF
 });
 
 const dateRange = ref({
@@ -24,177 +21,68 @@ const dateRange = ref({
   end: new Date().toISOString().slice(0, 10)
 });
 
-const supportTypes = [
-  { id: '', name: 'Seleccionar tipo de apoyo' },
-  { id: 'almacen', name: 'Almacén', api_types: [1, 2, 3, 4, 5, 6, 11, 12, 13] },
-  { id: 'servicio', name: 'Servicio', api_types: [7, 8, 9, 10, 14] }
+const departments = [
+  { id: '', name: 'Seleccionar departamento' },
+  { id: 1, name: 'Atención Ciudadana' },
+  { id: 3, name: 'DIF' }
 ];
 
-const typeOptions = ref([]);
-const supportOptionsData = ref([]);
-
 // Watch para actualizar fechas desde DateRange
 watch(dateRange, (newRange) => {
   form.value.startDate = newRange.start;
   form.value.endDate = newRange.end;
 }, { deep: true });
 
-// Watch para cargar opciones cuando cambia el tipo de apoyo
-watch(() => form.value.supportType, async (newType) => {
-  if (newType && newType !== '') {
-    await loadSupportOptions(newType);
-  } else {
-    typeOptions.value = [];
-    supportOptionsData.value = [];
-    form.value.typeId = '';
-    form.value.supportOptions = [];
-  }
-});
-
-// Watch para cargar opciones específicas cuando cambia el typeId
-watch(() => form.value.typeId, async (newTypeId) => {
-  if (newTypeId && newTypeId !== '') {
-    await loadSpecificOptions(newTypeId);
-  } else {
-    supportOptionsData.value = [];
-    form.value.supportOptions = [];
-  }
-});
-
-const loadSupportOptions = async (supportType) => {
-  loadingOptions.value = true;
-  try {
-    const selectedType = supportTypes.find(type => type.id === supportType);
-    if (selectedType && selectedType.api_types) {
-      // Cargar tipos disponibles para este tipo de apoyo
-      const options = selectedType.api_types.map(id => ({
-        id: id,
-        name: getTypeName(id)
-      }));
-
-      typeOptions.value = [
-        { id: '', name: 'Seleccionar categoría específica' },
-        ...options
-      ];
-    }
-  } catch (error) {
-    console.error('Error cargando opciones de tipo:', error);
-  } finally {
-    loadingOptions.value = false;
-  }
-};
-
-const loadSpecificOptions = async (typeId) => {
-  loadingOptions.value = true;
-  try {
-    const response = await axios.get('/api/support-options', {
-      params: { type_id: typeId },
-      headers: { 'X-Requested-With': 'XMLHttpRequest' }
-    });
-
-    if (response.data && response.data.options) {
-      supportOptionsData.value = response.data.options;
-      // Pre-seleccionar "Todos los enlistados" si existe
-      const allOption = response.data.options.find(opt => opt.id === 'all');
-      if (allOption) {
-        form.value.supportOptions = ['all'];
-      }
-    }
-  } catch (error) {
-    console.error('Error cargando opciones específicas:', error);
-    supportOptionsData.value = [];
-
-    // Mostrar mensaje de error más específico
-    if (error.response?.data?.error) {
-      alert(`Error: ${error.response.data.error}`);
-    } else {
-      alert('Error al cargar las opciones de apoyo');
-    }
-  } finally {
-    loadingOptions.value = false;
-  }
-};
-
-const getTypeName = (id) => {
-  const names = {
-    1: "Medicamentos",
-    2: "Material de Construcción",
-    3: "Aparatos Ortopédicos",
-    4: "Despensas",
-    5: "Útiles Escolares",
-    6: "Pañales",
-    7: "Análisis Clínicos",
-    8: "Traslados",
-    9: "Monederos",
-    10: "Apoyo social DIF",
-    11: "Alimentos",
-    12: "Ataúdes",
-    13: "Ventiladores",
-    14: "Apoyo a enfermedades de la vista"
-  };
-  return names[id] || `Tipo ${id}`;
-};
-
 const exportToExcel = async () => {
-  if (!form.value.supportType || !form.value.typeId) {
-    alert('Por favor selecciona el tipo de apoyo y la categoría específica');
+  if (!form.value.department) {
+    alert('Por favor selecciona el departamento');
     return;
   }
 
   loading.value = true;
   try {
-    // CAMBIO: Usar los parámetros correctos que espera la API
     const params = {
       start_date: form.value.startDate,
       end_date: form.value.endDate,
-      type_id: form.value.typeId,
-      support_id: form.value.supportId || 'all' // Si no hay supportId, usar 'all'
+      department: form.value.department
     };
 
-    console.log('Enviando parámetros:', params); // Debug
+    console.log('Enviando parámetros:', params);
 
-    // CAMBIO: Configuración más específica para descarga de archivos
     const response = await axios({
       method: 'GET',
       url: '/api/export-excel',
       params: params,
-      responseType: 'blob', // Importante para archivos binarios
+      responseType: 'blob',
       headers: {
         'X-Requested-With': 'XMLHttpRequest',
         'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
       },
-      timeout: 60000 // 60 segundos timeout
+      timeout: 60000
     });
 
-    // VERIFICAR que la respuesta sea un blob válido
     if (!response.data || response.data.size === 0) {
       throw new Error('El archivo descargado está vacío');
     }
 
-    // VERIFICAR el tipo de contenido
     const contentType = response.headers['content-type'] || '';
     if (!contentType.includes('spreadsheet') && !contentType.includes('excel') && !contentType.includes('octet-stream')) {
-      // Si no es Excel, probablemente sea un JSON con error
       const text = await response.data.text();
       console.error('Respuesta inesperada:', text);
       throw new Error('El servidor no devolvió un archivo Excel válido');
     }
 
-    // Crear y descargar el archivo
     const blob = new Blob([response.data], {
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
     });
 
-    // Generar nombre de archivo único
     const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
-    const filename = `beneficiarios_${form.value.startDate}_${form.value.endDate}_${timestamp}.xlsx`;
+    const departmentName = departments.find(d => d.id === form.value.department)?.name.replace(/\s+/g, '_') || 'departamento';
+    const filename = `beneficiarios_${departmentName}_${form.value.startDate}_${form.value.endDate}_${timestamp}.xlsx`;
 
-    // MEJORAR la descarga
     if (window.navigator && window.navigator.msSaveOrOpenBlob) {
-      // Para Internet Explorer
       window.navigator.msSaveOrOpenBlob(blob, filename);
     } else {
-      // Para navegadores modernos
       const url = window.URL.createObjectURL(blob);
       const link = document.createElement('a');
       link.href = url;
@@ -204,12 +92,10 @@ const exportToExcel = async () => {
       document.body.appendChild(link);
       link.click();
 
-      // Cleanup
       document.body.removeChild(link);
       window.URL.revokeObjectURL(url);
     }
 
-    // Cerrar modal y mostrar éxito
     closeModal();
     alert('Archivo Excel descargado exitosamente');
 
@@ -235,13 +121,10 @@ const exportToExcel = async () => {
 };
 
 const closeModal = () => {
-  // Resetear formulario
   form.value = {
     startDate: new Date().toISOString().slice(0, 10),
     endDate: new Date().toISOString().slice(0, 10),
-    supportType: '',
-    typeId: '',
-    supportOptions: []
+    department: ''
   };
 
   dateRange.value = {
@@ -249,9 +132,6 @@ const closeModal = () => {
     end: new Date().toISOString().slice(0, 10)
   };
 
-  typeOptions.value = [];
-  supportOptionsData.value = [];
-
   emit('close');
 };
 </script>
@@ -299,65 +179,21 @@ const closeModal = () => {
           />
         </div>
 
-        <!-- Tipo de Apoyo -->
+        <!-- Departamento -->
         <div>
           <label class="block text-sm font-medium text-gray-700 mb-2">
-            Tipo de Apoyo
+            Departamento <span class="text-red-500">*</span>
           </label>
           <select
-            v-model="form.supportType"
+            v-model="form.department"
             class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
           >
-            <option v-for="type in supportTypes" :key="type.id" :value="type.id">
-              {{ type.name }}
+            <option v-for="dept in departments" :key="dept.id" :value="dept.id">
+              {{ dept.name }}
             </option>
           </select>
-        </div>
-
-        <!-- Categoría Específica -->
-        <div v-if="form.supportType && typeOptions.length > 0">
-          <label class="block text-sm font-medium text-gray-700 mb-2">
-            Categoría Específica
-          </label>
-          <select
-            v-model="form.typeId"
-            class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-            :disabled="loadingOptions"
-          >
-            <option v-for="option in typeOptions" :key="option.id" :value="option.id">
-              {{ option.name }}
-            </option>
-          </select>
-
-          <div v-if="loadingOptions" class="mt-2 text-sm text-blue-600">
-            Cargando opciones...
-          </div>
-        </div>
-
-        <!-- Opciones Específicas de Apoyo -->
-        <div v-if="supportOptionsData.length > 0">
-          <label class="block text-sm font-medium text-gray-700 mb-3">
-            Seleccionar Apoyos Específicos
-          </label>
-          <div class="max-h-64 overflow-y-auto border border-gray-200 rounded-md p-3">
-            <div class="space-y-2">
-              <label
-                v-for="option in supportOptionsData"
-                :key="option.id"
-                class="flex items-center space-x-2 text-sm"
-              >
-                <input
-                  type="checkbox"
-                  :value="option.id"
-                  v-model="form.supportOptions"
-                  class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-                />
-                <span class="flex-1">{{ option.name }}</span>
-              </label>
-            </div>
-          </div>
           <p class="text-xs text-gray-500 mt-2">
-            Seleccionados: {{ form.supportOptions.length }} de {{ supportOptionsData.length }}
+            Se exportarán todos los registros del departamento seleccionado
           </p>
         </div>
       </div>
@@ -372,7 +208,7 @@ const closeModal = () => {
         </button>
         <button
           @click="exportToExcel"
-          :disabled="loading || !form.supportType || !form.typeId"
+          :disabled="loading || !form.department"
           class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors flex items-center"
         >
           <svg v-if="loading" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
diff --git a/resources/js/Components/Dashboard/Skeleton/Header.vue b/resources/js/Components/Dashboard/Skeleton/Header.vue
index dba38f1..97ccfce 100644
--- a/resources/js/Components/Dashboard/Skeleton/Header.vue
+++ b/resources/js/Components/Dashboard/Skeleton/Header.vue
@@ -30,7 +30,7 @@ const notifications = ref(notificationCtl.notifications);
 // Otras variables
 const userId = router.page.props.user.id;
 
-// 
+//
 const darkModeStatus = ref(theme);
 
 // Métodos
@@ -137,7 +137,7 @@ onMounted(()=>{
                         :title="$t('users.menu')"
                         class="flex items-center space-x-4 text-sm border-2 border-transparent rounded-full focus:outline-none transition"
                       >
-                          <img 
+                          <img
                             class="h-8 w-8 rounded-full object-cover"
                             :alt="$page.props.user.name"
                             :src="$page.props.user.profile_photo_url"
@@ -149,9 +149,9 @@ onMounted(()=>{
                       <div class="text-center block px-4 py-2 text-sm text-gray-800 border-b truncate">
                         {{ $page.props.user.name }}
                       </div>
-                      <DropdownLink :href="route('profile.show')">
+                      <!-- <DropdownLink :href="route('profile.show')">
                            {{$t('profile')}}
-                      </DropdownLink>
+                      </DropdownLink> -->
                       <DropdownLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')">
                           API Tokens
                       </DropdownLink>
@@ -169,4 +169,4 @@ onMounted(()=>{
         </div>
       </div>
     </header>
-</template>
\ No newline at end of file
+</template>
diff --git a/routes/web.php b/routes/web.php
index 10835d4..8bb2b6d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -27,7 +27,6 @@
   Route::inertia('/tramites', 'App/Tramites')->name('tramites');
   Route::inertia('/obras', 'App/Obras')->name('obras');
   Route::inertia('/atencion', 'App/AtencionCiudadana')->name('atencion');
-  Route::get('/api/support-options', [AtencionController::class, 'getSupportOptions']);
   Route::get('/api/export-excel', [AtencionController::class, 'exportExcel']);
 });
 
-- 
2.45.2