juan.zapata/comal-pagos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: conceptos y multa

Browse Source
This commit is contained in:
Juan Felipe Zapata Moreno 2025-11-19 13:07:31 -06:00
parent 7f82f57588
commit d9e71eaf55
6 changed files with 164 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example
View File

@ -1,4 +1,4 @@
VITE_APP_NAME=GOLSCONTROL VITE_APP_NAME=Ayuntamiento de Comalcalco
VITE_APP_URL=http://frontend.golscontrol.test VITE_APP_URL=http://frontend.golscontrol.test
VITE_APP_LANG=es-MX VITE_APP_LANG=es-MX
VITE_APP_PORT=3000 VITE_APP_PORT=3000

2
index.html
View File

@ -2,7 +2,7 @@
<html id="main-page" lang="es"> <html id="main-page" lang="es">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Holos</title> <title>Holos</title>
</head> </head>

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
public/vite.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

22
src/components/App/ConceptSection.vue
View File

@ -46,17 +46,17 @@ onMounted(async () => {
/** Métodos */ /** Métodos */
const handleSubmit = () => { const handleSubmit = () => {
const transformedData = { const transformedData = {
direction_id: typeof modelModal.value.direction === 'object' ? modelModal.value.direction.id : Number(modelModal.value.direction_id), direction_id: typeof form.direction === 'object' ? form.direction.id : Number(form.direction_id),
unit_id: modelModal.value.unit ? (typeof modelModal.value.unit === 'object' ? modelModal.value.unit.id : Number(modelModal.value.unit)) : null, unit_id: form.unit ? (typeof form.unit === 'object' ? form.unit.id : Number(form.unit)) : null,
short_name: modelModal.value.short_name, short_name: form.short_name,
name: modelModal.value.name, name: form.name,
legal_instrument: modelModal.value.legal_instrument, legal_instrument: form.legal_instrument,
article: modelModal.value.article, article: form.article,
content: modelModal.value.content, content: form.content,
min_amount_uma: modelModal.value.min_amount_uma ? Number(modelModal.value.min_amount_uma) : null, min_amount_uma: form.min_amount_uma ? Number(form.min_amount_uma) : null,
max_amount_uma: modelModal.value.max_amount_uma ? Number(modelModal.value.max_amount_uma) : null, max_amount_uma: form.max_amount_uma ? Number(form.max_amount_uma) : null,
min_amount_peso: modelModal.value.min_amount_peso ? Number(modelModal.value.min_amount_peso) : null, min_amount_peso: form.min_amount_peso ? Number(form.min_amount_peso) : null,
max_amount_peso: modelModal.value.max_amount_peso ? Number(modelModal.value.max_amount_peso) : null, max_amount_peso: form.max_amount_peso ? Number(form.max_amount_peso) : null,
unit_cost_uma: form.unit_cost_uma ? Number(form.unit_cost_uma) : null, unit_cost_uma: form.unit_cost_uma ? Number(form.unit_cost_uma) : null,
unit_cost_peso: form.unit_cost_peso ? Number(form.unit_cost_peso) : null, unit_cost_peso: form.unit_cost_peso ? Number(form.unit_cost_peso) : null,
}; };

185
src/components/App/FineSection.vue
View File

@ -1,5 +1,6 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import { useApi, apiURL } from "@/services/Api.js";
import Input from "@Holos/Form/Input.vue"; import Input from "@Holos/Form/Input.vue";
import QRscan from "./QRscan.vue"; import QRscan from "./QRscan.vue";
@ -7,6 +8,8 @@ import QRscan from "./QRscan.vue";
/** Eventos */ /** Eventos */
const emit = defineEmits(["fine-searched"]); const emit = defineEmits(["fine-searched"]);
const api = useApi();
/** Refs */ /** Refs */
const fineNumber = ref(""); const fineNumber = ref("");
const fineData = ref({ const fineData = ref({
@ -21,35 +24,129 @@ const fineData = ref({
}); });
/** Métodos */ /** Métodos */
const handleSearch = () => { const handleSearch = async () => {
if (!fineNumber.value.trim()) { if (!fineNumber.value.trim()) {
alert("Por favor ingresa un número de multa"); window.Notify.warning("Por favor ingresa o escanea una multa");
return; return;
} }
// Simular datos encontrados (temporal) await api.get(apiURL(`fines/search`), {
params: {
id: fineNumber.value.trim(),
},
onSuccess: (data) => {
const model = data.model;
if (model.payments && model.payments.length > 0) {
const payment = model.payments[0];
if (payment.status === "paid") {
window.Notify.info("La multa ya ha sido pagada previamente");
fineData.value = { fineData.value = {
fecha: "2025-11-11", id: model.id,
placa: "ABC-123-DEF", fecha: new Date(model.created_at).toLocaleDateString("es-MX"),
vin: "1HGBH41JXMN109186", placa: model.plate || "",
licencia: "LIC123456", vin: model.vin || "",
tarjeta: "TC987654", licencia: model.license || "",
rfc: "XAXX010101000", tarjeta: model.circulation || "",
nombre: "Juan Pérez García", rfc: model.rfc || "",
monto: "$1,500.00", nombre: model.name || "",
monto: `$${data.total_to_pay.toFixed(2)}`,
isPaid: true,
}; };
emit("fine-searched", fineData.value); return;
}
}
fineData.value = {
id: model.id,
fecha: new Date(model.created_at).toLocaleDateString("es-MX"),
placa: model.plate || "",
vin: model.vin || "",
licencia: model.license || "",
tarjeta: model.circulation || "",
rfc: model.rfc || "",
nombre: model.name || "",
monto: `$${data.total_to_pay.toFixed(2)}`,
isPaid: false,
};
emit("fine-searched", {
...fineData.value,
rawData: data,
});
},
onFail: (error) => {
window.Notify.error(error.message || "Error al buscar la multa");
fineData.value = {
fecha: "",
placa: "",
vin: "",
licencia: "",
tarjeta: "",
rfc: "",
nombre: "",
monto: "",
};
},
onError: (error) => {
console.error("Error al buscar multa:", error);
window.Notify.error("Ocurrió un error al buscar la multa");
},
});
}; };
const handlePayment = () => { const handlePayment = async () => {
if (!fineData.value.monto) { if (!fineData.value.monto) {
alert("No hay multa cargada para cobrar"); window.Notify.warning("No hay multa cargada para cobrar");
return; return;
} }
console.log("Procesando pago de:", fineData.value.monto); await api.post(apiURL(`fines/${fineData.value.id}/mark-as-paid`), {
emit("payment-processed", fineData.value); onSuccess: (data) => {
window.Notify.success("Multa cobrada exitosamente");
emit("payment-processed", { ...fineData.value, paymentData: data });
fineData.value = {
id: null,
fecha: "",
placa: "",
vin: "",
licencia: "",
tarjeta: "",
rfc: "",
nombre: "",
monto: "",
};
fineNumber.value = "";
},
onFail: (error) => {
window.Notify.error(
error.message || "Error al procesar el pago de la multa"
);
},
onError: (error) => {
window.Notify.error("Ocurrió un error al procesar el pago de la multa");
},
});
};
const clearForm = () => {
fineData.value = {
id: null,
fecha: "",
placa: "",
vin: "",
licencia: "",
tarjeta: "",
rfc: "",
nombre: "",
monto: "",
};
fineNumber.value = "";
}; };
</script> </script>
<template> <template>
@ -62,10 +159,13 @@ const handlePayment = () => {
Escanear Código QR Escanear Código QR
</label> </label>
<div <div
class="w-full h-1/2 bg-gray-800 rounded-lg flex flex-col items-center justify-center" class="w-full h-80 bg-gray-800 rounded-lg flex flex-col items-center justify-center"
> >
<!-- QR --> <!-- QR -->
<QRscan v-model:fineNumber="fineNumber" @fine-searched="handleSearch" /> <QRscan
v-model:fineNumber="fineNumber"
@fine-searched="handleSearch"
/>
</div> </div>
</div> </div>
@ -101,22 +201,12 @@ const handlePayment = () => {
type="text" type="text"
disabled disabled
/> />
<Input <Input v-model="fineData.placa" id="Placa" type="text" disabled />
v-model="fineData.placa"
id="Placa"
type="text"
disabled
/>
</div> </div>
<!-- VIN y Licencia --> <!-- VIN y Licencia -->
<div class="grid grid-cols-2 gap-4 mb-5"> <div class="grid grid-cols-2 gap-4 mb-5">
<Input <Input v-model="fineData.vin" id="VIN" type="text" disabled />
v-model="fineData.vin"
id="VIN"
type="text"
disabled
/>
<Input <Input
v-model="fineData.licencia" v-model="fineData.licencia"
id="Licencia" id="Licencia"
@ -133,22 +223,12 @@ const handlePayment = () => {
type="text" type="text"
disabled disabled
/> />
<Input <Input v-model="fineData.rfc" id="RFC" type="text" disabled />
v-model="fineData.rfc"
id="RFC"
type="text"
disabled
/>
</div> </div>
<!-- Nombre --> <!-- Nombre -->
<div class="mb-5"> <div class="mb-5">
<Input <Input v-model="fineData.nombre" id="Nombre" type="text" disabled />
v-model="fineData.nombre"
id="Nombre"
type="text"
disabled
/>
</div> </div>
<!-- Línea separadora --> <!-- Línea separadora -->
@ -164,14 +244,33 @@ const handlePayment = () => {
class="text-lg font-semibold" class="text-lg font-semibold"
/> />
</div> </div>
<div class="space-y-6">
<div v-if="fineData.isPaid">
<button
type="button"
@click="clearForm"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3.5 rounded-lg transition-colors flex items-center justify-center gap-2"
>
Limpiar y buscar otra multa
</button>
</div>
<!-- Botón Cobrar --> <!-- Botón Cobrar -->
<div>
<button <button
type="submit" type="submit"
class="w-full bg-green-700 hover:bg-green-600 text-white font-medium py-3.5 rounded-lg transition-colors" :disabled="fineData.isPaid"
:class="[
'w-full font-medium py-3.5 rounded-lg transition-colors',
fineData.isPaid
? 'bg-gray-400 cursor-not-allowed'
: 'bg-green-700 hover:bg-green-600 text-white',
]"
> >
Cobrar Cobrar
</button> </button>
</div>
</div>
</form> </form>
</div> </div>
</div> </div>