From 5ee73c309ff301b41c8c482597564f54f0537b41 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <juan.zapata@golsystems.com.mx>
Date: Sun, 29 Mar 2026 16:06:43 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20m=C3=A9todos=20de=20pago=20y?=
 =?UTF-8?q?=20mejorar=20la=20visualizaci=C3=B3n=20de=20descuentos=20en=20m?=
 =?UTF-8?q?ultas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/App/FinePaymentSummary.vue | 105 ++++++++++++++++++----
 src/components/App/FineResultCard.vue     |  36 +++++++-
 src/components/App/FineSection.vue        |  52 +++++++----
 src/pages/App/Fine/Dashboard.vue          |  51 +++++++++--
 4 files changed, 200 insertions(+), 44 deletions(-)

diff --git a/src/components/App/FinePaymentSummary.vue b/src/components/App/FinePaymentSummary.vue
index 8669313..ca4ecf2 100644
--- a/src/components/App/FinePaymentSummary.vue
+++ b/src/components/App/FinePaymentSummary.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 
 const props = defineProps({
   selectedFines:       { type: Array,   default: () => [] },
@@ -8,16 +8,44 @@ const props = defineProps({
 
 const emit = defineEmits(["pay"]);
 
+const selectedPaymentMethod = ref(null);
+
+const paymentMethods = [
+  { value: "cash",        label: "Efectivo" },
+  { value: "debit_card",  label: "Tarjeta de Débito" },
+  { value: "credit_card", label: "Tarjeta de Crédito" },
+];
+
 const hasSelection = computed(() => props.selectedFines.length > 0);
+const canPay       = computed(() => hasSelection.value && selectedPaymentMethod.value !== null);
 
 const totalSelected = computed(() =>
+  props.selectedFines.reduce((sum, f) => sum + parseFloat(f.discount ?? f.total_amount ?? 0), 0)
+);
+
+const originalTotal = computed(() =>
   props.selectedFines.reduce((sum, f) => sum + parseFloat(f.total_amount || 0), 0)
 );
 
+const hasAnyDiscount = computed(() =>
+  props.selectedFines.some((f) => f.discount != null)
+);
+
+const totalSavings = computed(() => originalTotal.value - totalSelected.value);
+
 const getConcepts = (fine) => {
   if (!fine.charge_concepts?.length) return [];
   return fine.charge_concepts.map((c) => c.short_name || c.name || "").filter(Boolean);
 };
+
+watch(() => props.selectedFines.length, (len) => {
+  if (len === 0) selectedPaymentMethod.value = null;
+});
+
+const handlePay = () => {
+  if (!canPay.value) return;
+  emit("pay", selectedPaymentMethod.value);
+};
 </script>
 
 <template>
@@ -57,9 +85,17 @@ const getConcepts = (fine) => {
         >
           <div class="flex justify-between items-start mb-2">
             <span class="text-sm font-medium text-white">Folio: {{ fine.id }}</span>
-            <span class="text-sm font-semibold text-white shrink-0 ml-2">
-              ${{ parseFloat(fine.total_amount || 0).toFixed(2) }}
-            </span>
+            <div class="flex flex-col items-end shrink-0 ml-2">
+              <span
+                v-if="fine.discount != null"
+                class="text-xs text-white/40 line-through leading-none mb-0.5"
+              >
+                ${{ parseFloat(fine.total_amount || 0).toFixed(2) }}
+              </span>
+              <span class="text-sm font-semibold text-white leading-none">
+                ${{ parseFloat(fine.discount ?? fine.total_amount ?? 0).toFixed(2) }}
+              </span>
+            </div>
           </div>
           <ul class="space-y-1">
             <li
@@ -76,24 +112,60 @@ const getConcepts = (fine) => {
           </ul>
         </div>
       </div>
+
+      <!-- Método de pago -->
+      <div class="mt-4">
+        <p class="text-xs text-white/60 mb-2">Método de pago</p>
+        <div class="flex flex-col gap-2">
+          <button
+            v-for="method in paymentMethods"
+            :key="method.value"
+            @click="selectedPaymentMethod = method.value"
+            :class="[
+              'w-full px-3 py-2.5 rounded-xl text-sm font-medium transition-all text-left',
+              selectedPaymentMethod === method.value
+                ? 'bg-white text-primary shadow-md'
+                : 'bg-white/10 text-white/70 hover:bg-white/20',
+            ]"
+          >
+            {{ method.label }}
+          </button>
+        </div>
+      </div>
     </div>
 
     <!-- Totales y botón -->
     <div class="mt-auto pt-4 border-t border-white/20">
-      <div class="flex justify-between text-sm text-white/60 mb-2">
-        <span>Subtotal</span>
-        <span>${{ totalSelected.toFixed(2) }}</span>
-      </div>
-      <div class="flex justify-between font-bold text-white text-base mb-4">
-        <span>Total</span>
-        <span>${{ totalSelected.toFixed(2) }}</span>
-      </div>
+      <template v-if="!hasAnyDiscount">
+        <div class="flex justify-between text-sm text-white/60 mb-2">
+          <span>Subtotal</span>
+          <span>${{ totalSelected.toFixed(2) }}</span>
+        </div>
+        <div class="flex justify-between font-bold text-white text-base mb-4">
+          <span>Total</span>
+          <span>${{ totalSelected.toFixed(2) }}</span>
+        </div>
+      </template>
+      <template v-else>
+        <div class="flex justify-between text-sm text-white/60 mb-1">
+          <span>Subtotal original</span>
+          <span>${{ originalTotal.toFixed(2) }}</span>
+        </div>
+        <div class="flex justify-between text-sm text-success mb-2">
+          <span>Descuento</span>
+          <span>-${{ totalSavings.toFixed(2) }}</span>
+        </div>
+        <div class="flex justify-between font-bold text-white text-base mb-4">
+          <span>Total</span>
+          <span>${{ totalSelected.toFixed(2) }}</span>
+        </div>
+      </template>
       <button
-        @click="emit('pay')"
-        :disabled="!hasSelection || isProcessingPayment"
+        @click="handlePay"
+        :disabled="!canPay || isProcessingPayment"
         :class="[
           'w-full py-3 rounded-xl font-semibold text-sm flex items-center justify-center gap-2 transition-all',
-          hasSelection && !isProcessingPayment
+          canPay && !isProcessingPayment
             ? 'bg-success hover:bg-success/90 text-white shadow-lg shadow-black/20'
             : 'bg-white/10 text-white/30 cursor-not-allowed',
         ]"
@@ -103,6 +175,9 @@ const getConcepts = (fine) => {
         </svg>
         {{ isProcessingPayment ? "Procesando..." : "Cobrar Total" }}
       </button>
+      <p v-if="hasSelection && !selectedPaymentMethod" class="text-xs text-white/40 text-center mt-2">
+        Seleccione un método de pago para continuar
+      </p>
     </div>
 
   </div>
diff --git a/src/components/App/FineResultCard.vue b/src/components/App/FineResultCard.vue
index e448bee..6325fc8 100644
--- a/src/components/App/FineResultCard.vue
+++ b/src/components/App/FineResultCard.vue
@@ -15,6 +15,17 @@ const formatDate = (dateStr) => {
   return new Date(dateStr).toLocaleDateString("es-MX");
 };
 
+const paymentMethodLabels = {
+  cash:        "Efectivo",
+  debit_card:  "T. Débito",
+  credit_card: "T. Crédito",
+};
+
+const getPaidPaymentMethod = (fine) => {
+  const payment = fine.payments?.find(p => p.status === "paid");
+  return payment?.payment_method ? (paymentMethodLabels[payment.payment_method] ?? null) : null;
+};
+
 const getConcepts = (fine) => {
   if (!fine.charge_concepts?.length) return [];
   return fine.charge_concepts.map((c) => c.short_name || c.name || "").filter(Boolean);
@@ -52,11 +63,30 @@ const getConcepts = (fine) => {
         >
           Pagada
         </span>
+        <span
+          v-if="fine.status === 'paid' && getPaidPaymentMethod(fine)"
+          class="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full"
+        >
+          {{ getPaidPaymentMethod(fine) }}
+        </span>
       </div>
       <div class="flex items-center gap-2">
-        <span class="font-semibold text-gray-800 text-lg">
-          ${{ parseFloat(fine.total_amount || 0).toFixed(2) }}
-        </span>
+        <div class="flex flex-col items-end">
+          <span
+            v-if="fine.discount != null"
+            class="text-xs text-gray-400 line-through leading-none mb-0.5"
+          >
+            ${{ parseFloat(fine.total_amount || 0).toFixed(2) }}
+          </span>
+          <span
+            :class="[
+              'font-semibold text-lg leading-none',
+              fine.discount != null ? 'text-success' : 'text-gray-800',
+            ]"
+          >
+            ${{ parseFloat(fine.discount ?? fine.total_amount ?? 0).toFixed(2) }}
+          </span>
+        </div>
         <button
           v-if="fine.pdf_path"
           @click.stop="downloadFineTicket(fine)"
diff --git a/src/components/App/FineSection.vue b/src/components/App/FineSection.vue
index 74a1577..f19e6e6 100644
--- a/src/components/App/FineSection.vue
+++ b/src/components/App/FineSection.vue
@@ -110,31 +110,45 @@ const isFineSelected = (fine) => selectedFines.value.some((f) => f.id === fine.i
 // ─── Cobro ────────────────────────────────────────────────────────────────────
 const isProcessingPayment = ref(false);
 
-const handlePayment = async () => {
-  if (!hasSelection.value) return;
+const handlePayment = (paymentMethod) => {
+  if (!hasSelection.value || !paymentMethod) return;
   isProcessingPayment.value = true;
-  let successCount = 0;
-  for (const fine of selectedFines.value) {
-    await api.post(apiURL(`fines/${fine.id}/mark-as-paid`), {
+
+  const finesToPay = [...selectedFines.value];
+  const total = finesToPay.length;
+  let paidCount = 0;
+
+  for (const fine of finesToPay) {
+    api.post(apiURL(`fines/${fine.id}/mark-as-paid`), {
+      data: { payment_method: paymentMethod },
       onSuccess: (data) => {
-        successCount++;
+        paidCount++;
+        const index = searchResults.value.findIndex(f => f.id === fine.id);
+        if (index !== -1) {
+          searchResults.value[index] = data.fine;
+        }
+        selectedFines.value = selectedFines.value.filter(f => f.id !== fine.id);
         emit("payment-processed", { fine, paymentData: data });
+        if (paidCount === total) {
+          isProcessingPayment.value = false;
+          Notify.success(
+            total === 1
+              ? "Multa cobrada exitosamente"
+              : `${total} multas cobradas exitosamente`
+          );
+          searchMessage.value = "";
+        }
+      },
+      onFail: (e) => {
+        isProcessingPayment.value = false;
+        Notify.error(e.message || "Error al procesar el pago");
+      },
+      onError: () => {
+        isProcessingPayment.value = false;
+        Notify.error("Ocurrió un error al procesar el pago");
       },
-      onFail:  (e) => Notify.error(e.message || "Error al procesar el pago"),
-      onError: ()  => Notify.error("Ocurrió un error al procesar el pago"),
     });
   }
-  isProcessingPayment.value = false;
-  if (successCount > 0) {
-    Notify.success(
-      successCount === 1
-        ? "Multa cobrada exitosamente"
-        : `${successCount} multas cobradas exitosamente`
-    );
-    searchResults.value = [];
-    selectedFines.value = [];
-    searchMessage.value = "";
-  }
 };
 
 // ─── Cambio de pestaña ────────────────────────────────────────────────────────
diff --git a/src/pages/App/Fine/Dashboard.vue b/src/pages/App/Fine/Dashboard.vue
index d284896..9e4ce01 100644
--- a/src/pages/App/Fine/Dashboard.vue
+++ b/src/pages/App/Fine/Dashboard.vue
@@ -31,6 +31,20 @@ const usersSearcher = useSearcher({
     },
 });
 
+const setPresetToday = () => {
+    const d = DateTime.now().toISODate();
+    filters.value.date_from = d;
+    filters.value.date_to   = d;
+    load();
+};
+
+const setPresetThisMonth = () => {
+    const now = DateTime.now();
+    filters.value.date_from = now.startOf('month').toISODate();
+    filters.value.date_to   = now.endOf('month').toISODate();
+    load();
+};
+
 const load = () => {
     processing.value = true;
     const params = { date_from: filters.value.date_from, date_to: filters.value.date_to };
@@ -39,8 +53,8 @@ const load = () => {
     api.get(apiTo('dashboard'), {
         params,
         onSuccess: (data) => {
-            fines.value  = data.today_fines ?? [];
-            stats.value  = data.stats       ?? {};
+            fines.value  = data.fines ?? [];
+            stats.value  = data.stats ?? {};
             processing.value = false;
         },
         onError: () => { processing.value = false; },
@@ -62,6 +76,15 @@ const pendingAmount = computed(() =>
 const formatCurrency = (n) =>
     new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(n);
 
+const periodLabel = computed(() => {
+    const from     = filters.value.date_from;
+    const to       = filters.value.date_to;
+    const todayIso = DateTime.now().toISODate();
+    if (from === todayIso && to === todayIso) return 'hoy';
+    if (from === to) return DateTime.fromISO(from).toFormat('dd/MM/yyyy');
+    return `${DateTime.fromISO(from).toFormat('dd/MM/yyyy')} – ${DateTime.fromISO(to).toFormat('dd/MM/yyyy')}`;
+});
+
 onMounted(() => { usersSearcher.search(); load(); });
 </script>
 
@@ -98,6 +121,23 @@ onMounted(() => { usersSearcher.search(); load(); });
                 </option>
             </select>
         </div>
+        <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Periodo rápido</label>
+            <div class="flex gap-2">
+                <button
+                    @click="setPresetToday"
+                    class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer"
+                >
+                    Hoy
+                </button>
+                <button
+                    @click="setPresetThisMonth"
+                    class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer"
+                >
+                    Este mes
+                </button>
+            </div>
+        </div>
         <button
             @click="load"
             class="px-4 py-2 rounded-md bg-primary text-white text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer"
@@ -112,19 +152,16 @@ onMounted(() => { usersSearcher.search(); load(); });
             icon="receipt_long"
             title="Total Multas"
             :value="stats.total_fines ?? 0"
-            :to="viewTo({ name: 'index' })"
         />
         <IndicatorCard
             icon="check_circle"
             title="Pagadas"
             :value="stats.total_paid ?? 0"
-            :to="viewTo({ name: 'index' })"
         />
         <IndicatorCard
             icon="pending_actions"
             title="Pendientes"
             :value="stats.total_unpaid ?? 0"
-            :to="viewTo({ name: 'index' })"
         />
     </div>
 
@@ -175,8 +212,8 @@ onMounted(() => { usersSearcher.search(); load(); });
 
         <div>
             <h2 class="text-base font-semibold mb-3 tracking-wide">
-                Multas del periodo
-                <span class="text-gray-400 font-normal">({{ fines.length }})</span>
+                Multas de <span class="text-primary dark:text-primary-dt">{{ periodLabel }}</span>
+                <span class="text-gray-400 font-normal"> ({{ fines.length }})</span>
             </h2>
             <div v-if="!processing && fines.length" class="flex flex-col gap-3 max-h-[520px] overflow-y-auto pr-1">
                 <FineResultCard