From 69937297dc8cc8c78656d0bde495639ca1306732 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Tue, 11 Nov 2025 16:35:40 -0600
Subject: [PATCH] ADD: vistas conceptos, multas, descuentos y membresias

---
 src/components/App/AddressSection.vue    |  58 +++++++
 src/components/App/ConceptSection.vue    | 138 +++++++++++++++
 src/components/App/DiscountSection.vue   | 212 +++++++++++++++++++++++
 src/components/App/FineSection.vue       | 196 +++++++++++++++++++++
 src/components/App/MembershipSection.vue | 203 ++++++++++++++++++++++
 src/lang/es.js                           |  19 ++
 src/layouts/AppLayout.vue                |  22 ++-
 src/pages/Admin/Users/Create.vue         |  12 +-
 src/pages/App/Address/Index.vue          | 135 ++++++++++++++-
 src/pages/App/Address/Module.js          |  21 +++
 src/pages/App/Concept/Index.vue          | 117 +++++++++++++
 src/pages/App/Concept/Module.js          |  21 +++
 src/pages/App/Discount/Index.vue         |   9 +
 src/pages/App/Fine/Index.vue             |   9 +
 src/pages/App/Membership/Index.vue       |   9 +
 src/router/Index.js                      |  40 +++++
 vite.config.js                           |   1 +
 17 files changed, 1215 insertions(+), 7 deletions(-)
 create mode 100644 src/components/App/AddressSection.vue
 create mode 100644 src/components/App/ConceptSection.vue
 create mode 100644 src/components/App/DiscountSection.vue
 create mode 100644 src/components/App/FineSection.vue
 create mode 100644 src/components/App/MembershipSection.vue
 create mode 100644 src/pages/App/Address/Module.js
 create mode 100644 src/pages/App/Concept/Index.vue
 create mode 100644 src/pages/App/Concept/Module.js
 create mode 100644 src/pages/App/Discount/Index.vue
 create mode 100644 src/pages/App/Fine/Index.vue
 create mode 100644 src/pages/App/Membership/Index.vue

diff --git a/src/components/App/AddressSection.vue b/src/components/App/AddressSection.vue
new file mode 100644
index 0000000..f5ea06c
--- /dev/null
+++ b/src/components/App/AddressSection.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from "vue";
+
+/** Eventos */
+const emit = defineEmits(['address-created']);
+
+/** Refs */
+const addressName = ref("");
+
+/** Métodos */
+const handleSubmit = () => {
+  if (!addressName.value.trim()) {
+    alert("Por favor ingresa un nombre de dirección");
+    return;
+  }
+  
+  // Emitir evento al padre con la nueva dirección
+  emit('address-created', {
+    description: addressName.value
+  });
+  
+  // Limpiar el formulario
+  addressName.value = "";
+};
+</script>
+
+<template>
+  <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-10">
+    <h3 class="text-xl font-semibold mb-4 text-gray-800">
+      Crear nueva dirección
+    </h3>
+
+    <form @submit.prevent="handleSubmit">
+      <div class="mb-5">
+        <label
+          for="addressName"
+          class="block text-sm text-gray-600 font-medium mb-2"
+        >
+          Nombre de la Dirección:
+        </label>
+        <input
+          type="text"
+          id="adddressName"
+          v-model="addressName"
+          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+      </div>
+      <div class="mb-3 flex justify-center">
+        <button
+          type="submit"
+          class="w-1/4 bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
+        >
+          Guardar
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/src/components/App/ConceptSection.vue b/src/components/App/ConceptSection.vue
new file mode 100644
index 0000000..3e0ddf4
--- /dev/null
+++ b/src/components/App/ConceptSection.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { ref } from "vue";
+import { useForm } from "@Services/Api";
+
+import Input from "@Holos/Form/Input.vue";
+import Textarea from "@Holos/Form/Textarea.vue";
+import Selectable from "@Holos/Form/Selectable.vue";
+
+const form = useForm({
+  address: [],
+  shortName: "",
+  name: "",
+  legal: "",
+  article: "",
+  description: "",
+  minimumAmount: "",
+  maximumAmount: "",
+  sizeUnit: [],
+});
+
+const addresses = ref([]);
+const sizeUnit = ref([]);
+</script>
+
+<template>
+  <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-10">
+    <h3 class="text-xl font-semibold mb-4 text-gray-800">
+      Crear nuevo concepto de cobro
+    </h3>
+
+    <form>
+      <div class="mb-5 grid grid-cols-2 gap-4">
+        <Selectable
+          v-model="form.address"
+          label="description"
+          title="Direcciones"
+          :options="addresses"
+          multiple
+          required
+        />
+        <Input
+          v-model="form.shortName"
+          class="col-span-2"
+          id="Nombre corto"
+          type="text"
+          :onError="form.errors.shortName"
+          required
+        />
+      </div>
+      <Input
+        v-model="form.name"
+        class="col-span-2"
+        id="Nombre"
+        type="text"
+        :onError="form.errors.name"
+        required
+      />
+      <div class="mb-5 grid grid-cols-2 gap-4 py-2">
+        <Input
+          v-model="form.legal"
+          class="col-span-2"
+          id="Instrumento Legal"
+          type="text"
+          :onError="form.errors.legal"
+          required
+        />
+        <Input
+          v-model="form.article"
+          class="col-span-2"
+          id="Articulado"
+          type="text"
+          :onError="form.errors.article"
+          required
+        />
+      </div>
+      <Textarea
+        v-model="form.description"
+        class="col-span-2"
+        id="Descripción"
+        :onError="form.errors.description"
+        required
+      />
+      <div class="mb-5 grid grid-cols-2 gap-4 py-2">
+        <Input
+          v-model="form.minimumAmount"
+          class="col-span-2"
+          id="Monto mínimo (UMAs)"
+          type="text"
+          :onError="form.errors.minimumAmount"
+          required
+        />
+        <Input
+          v-model="form.maximumAmount"
+          class="col-span-2"
+          id="Monto máximo (UMAs)"
+          type="text"
+          :onError="form.errors.maximumAmount"
+          required
+        />
+      </div>
+      <hr class="my-4 border-gray-300" />
+      <div class="mb-5 grid grid-cols-3 gap-4 py-2">
+        <Selectable
+          v-model="form.sizeUnit"
+          label="description"
+          title="Unidad de medida"
+          :options="sizeUnit"
+          multiple
+          required
+        />
+        <Input
+          v-model="form.costMin"
+          class="col-span-2"
+          id="Costo mínimo (UMAs)"
+          type="text"
+          :onError="form.errors.costMin"
+          required
+        />
+        <Input
+          v-model="form.costMax"
+          class="col-span-2"
+          id="Costo máximo (UMAs)"
+          type="text"
+          :onError="form.errors.costMax"
+          required
+        /> 
+      </div>
+      <div class="mb-3 p-7 flex justify-center">
+        <button
+          type="submit"
+          class="w-1/4 bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
+        >
+          Guardar
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/src/components/App/DiscountSection.vue b/src/components/App/DiscountSection.vue
new file mode 100644
index 0000000..dc9b5f9
--- /dev/null
+++ b/src/components/App/DiscountSection.vue
@@ -0,0 +1,212 @@
+<script setup>
+import { ref } from "vue";
+import Input from "@Holos/Form/Input.vue";
+
+/** Eventos */
+const emit = defineEmits(['discount-authorized']);
+
+/** Refs */
+const searchForm = ref({
+  fineNumber: "",
+  placa: "",
+  curp: ""
+});
+
+const discountData = ref({
+  fecha: "",
+  placa: "",
+  vin: "",
+  licencia: "",
+  tarjeta: "",
+  rfc: "",
+  nombre: "",
+  montoOriginal: "",
+  pagoMinimo: "",
+  nuevoMonto: ""
+});
+
+/** Métodos */
+const handleSearch = () => {
+  if (!searchForm.value.fineNumber && !searchForm.value.placa && !searchForm.value.curp) {
+    alert("Por favor ingresa al menos un criterio de búsqueda");
+    return;
+  }
+
+  console.log("Buscando multa:", searchForm.value);
+
+  // Simular datos encontrados (temporal)
+  discountData.value = {
+    fecha: "2025-11-11",
+    placa: "ABC-123-DEF",
+    vin: "1HGBH41JXMN109186",
+    licencia: "LIC123456",
+    tarjeta: "TC987654",
+    rfc: "XAXX010101000",
+    nombre: "Juan Pérez García",
+    montoOriginal: "$1,500.00",
+    pagoMinimo: "$750.00",
+    nuevoMonto: ""
+  };
+};
+
+const handleAuthorize = () => {
+  if (!discountData.value.nuevoMonto) {
+    alert("Por favor ingresa el nuevo monto autorizado");
+    return;
+  }
+
+  console.log("Autorizando descuento:", discountData.value);
+  emit('discount-authorized', discountData.value);
+};
+</script>
+
+<template>
+  <div class="p-6">
+    <!-- Formulario de búsqueda -->
+    <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-6">
+      <h3 class="text-xl font-semibold mb-6 text-gray-800">
+        Buscar Multa para Autorización
+      </h3>
+
+      <form @submit.prevent="handleSearch">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
+          <!-- Número de Multa -->
+          <Input
+            v-model="searchForm.fineNumber"
+            id="Número de Multa"
+            type="text"
+            placeholder=""
+          />
+
+          <!-- Placa -->
+          <Input
+            v-model="searchForm.placa"
+            id="Placa"
+            type="text"
+            placeholder=""
+          />
+
+          <!-- CURP -->
+          <Input
+            v-model="searchForm.curp"
+            id="CURP"
+            type="text"
+            placeholder=""
+          />
+
+          <!-- Botón Buscar -->
+          <button
+            type="submit"
+            class="py-3 px-8 rounded-lg transition-colors h-[42px] bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium"
+          >
+            Buscar
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <!-- Detalles para Autorización -->
+    <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg">
+      <h3 class="text-xl font-semibold mb-6 text-gray-800">
+        Detalles para Autorización
+      </h3>
+
+      <form @submit.prevent="handleAuthorize">
+        <!-- Fecha y Placa -->
+        <div class="grid grid-cols-2 gap-4 mb-5">
+          <Input
+            v-model="discountData.fecha"
+            id="Fecha de Multa"
+            type="text"
+            disabled
+          />
+          <Input
+            v-model="discountData.placa"
+            id="Placa"
+            type="text"
+            disabled
+          />
+        </div>
+
+        <!-- VIN y Licencia -->
+        <div class="grid grid-cols-2 gap-4 mb-5">
+          <Input
+            v-model="discountData.vin"
+            id="VIN"
+            type="text"
+            disabled
+          />
+          <Input
+            v-model="discountData.licencia"
+            id="Licencia"
+            type="text"
+            disabled
+          />
+        </div>
+
+        <!-- Tarjeta de Circulación y RFC -->
+        <div class="grid grid-cols-2 gap-4 mb-5">
+          <Input
+            v-model="discountData.tarjeta"
+            id="Tarjeta de Circulación"
+            type="text"
+            disabled
+          />
+          <Input
+            v-model="discountData.rfc"
+            id="RFC"
+            type="text"
+            disabled
+          />
+        </div>
+
+        <!-- Nombre -->
+        <div class="mb-5">
+          <Input
+            v-model="discountData.nombre"
+            id="Nombre"
+            type="text"
+            disabled
+          />
+        </div>
+
+        <!-- Línea separadora -->
+        <hr class="my-6 border-gray-300" />
+
+        <!-- Monto Original y Pago Mínimo -->
+        <div class="grid grid-cols-2 gap-4 mb-5">
+          <Input
+            v-model="discountData.montoOriginal"
+            id="Monto a Pagar (Original)"
+            type="text"
+            disabled
+          />
+          <Input
+            v-model="discountData.pagoMinimo"
+            id="Pago Mínimo"
+            type="text"
+            disabled
+          />
+        </div>
+
+        <!-- Nuevo Monto a Cobrar (editable) -->
+        <div class="mb-6">
+          <Input
+            v-model="discountData.nuevoMonto"
+            id="Nuevo Monto a Cobrar (Autorizado)"
+            type="text"
+            placeholder="Ingrese el nuevo monto autorizado"
+          />
+        </div>
+
+        <!-- Botón Autorizar -->
+        <button
+          type="submit"
+          class="w-full bg-green-700 hover:bg-green-600 text-white font-medium py-3.5 rounded-lg transition-colors"
+        >
+          Autorizar descuento
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/src/components/App/FineSection.vue b/src/components/App/FineSection.vue
new file mode 100644
index 0000000..faf631e
--- /dev/null
+++ b/src/components/App/FineSection.vue
@@ -0,0 +1,196 @@
+<script setup>
+import { ref } from "vue";
+
+import Input from "@Holos/Form/Input.vue";
+
+/** Eventos */
+const emit = defineEmits(["fine-searched"]);
+
+/** Refs */
+const fineNumber = ref("");
+const fineData = ref({
+  fecha: "",
+  placa: "",
+  vin: "",
+  licencia: "",
+  tarjeta: "",
+  rfc: "",
+  nombre: "",
+  monto: "",
+});
+
+/** Métodos */
+const handleSearch = () => {
+  if (!fineNumber.value.trim()) {
+    alert("Por favor ingresa un número de multa");
+    return;
+  }
+
+  // Aquí harías la llamada a la API para buscar la multa
+  console.log("Buscando multa:", fineNumber.value);
+
+  // Simular datos encontrados (temporal)
+  fineData.value = {
+    fecha: "2025-11-11",
+    placa: "ABC-123-DEF",
+    vin: "1HGBH41JXMN109186",
+    licencia: "LIC123456",
+    tarjeta: "TC987654",
+    rfc: "XAXX010101000",
+    nombre: "Juan Pérez García",
+    monto: "$1,500.00",
+  };
+
+  emit("fine-searched", fineData.value);
+};
+
+const handlePayment = () => {
+  if (!fineData.value.monto) {
+    alert("No hay multa cargada para cobrar");
+    return;
+  }
+
+  console.log("Procesando pago de:", fineData.value.monto);
+  emit("payment-processed", fineData.value);
+};
+</script>
+<template>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
+    <div class="bg-white rounded-xl p-6 shadow-lg">
+      <h3 class="text-xl font-semibold mb-4 text-gray-800">Buscar Multa</h3>
+
+      <div class="mb-6">
+        <label class="block text-sm text-gray-600 font-medium mb-2">
+          Escanear Código QR
+        </label>
+        <div
+          class="w-full h-64 bg-gray-800 rounded-lg flex flex-col items-center justify-center"
+        >
+          <!-- Icono de QR -->
+          <div class="text-gray-500 mb-3">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-16 w-16"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
+              />
+            </svg>
+          </div>
+          <p class="text-gray-500 text-sm">Simulador de cámara QR</p>
+        </div>
+      </div>
+
+      <div class="mb-5">
+        <Input
+          v-model="fineNumber"
+          id="Número de Multa"
+          type="text"
+          placeholder="Ingrese el número de multa"
+          @keyup.enter="handleSearch"
+        />
+      </div>
+
+      <button
+        @click="handleSearch"
+        type="button"
+        class="w-full bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
+      >
+        Buscar
+      </button>
+    </div>
+     <div class="bg-white rounded-xl p-6 shadow-lg">
+      <h3 class="text-xl font-semibold mb-4 text-gray-800">
+        Detalles de la Multa
+      </h3>
+
+      <form @submit.prevent="handlePayment">
+        <!-- Fecha y Placa -->
+        <div class="grid grid-cols-2 gap-4 mb-5">
+          <Input
+            v-model="fineData.fecha"
+            id="Fecha de Multa"
+            type="text"
+            disabled
+          />
+          <Input
+            v-model="fineData.placa"
+            id="Placa"
+            type="text"
+            disabled
+          />
+        </div>
+
+        <!-- VIN y Licencia -->
+        <div class="grid grid-cols-2 gap-4 mb-5">
+          <Input
+            v-model="fineData.vin"
+            id="VIN"
+            type="text"
+            disabled
+          />
+          <Input
+            v-model="fineData.licencia"
+            id="Licencia"
+            type="text"
+            disabled
+          />
+        </div>
+
+        <!-- Tarjeta de Circulación y RFC -->
+        <div class="grid grid-cols-2 gap-4 mb-5">
+          <Input
+            v-model="fineData.tarjeta"
+            id="Tarjeta de Circulación"
+            type="text"
+            disabled
+          />
+          <Input
+            v-model="fineData.rfc"
+            id="RFC"
+            type="text"
+            disabled
+          />
+        </div>
+
+        <!-- Nombre -->
+        <div class="mb-5">
+          <Input
+            v-model="fineData.nombre"
+            id="Nombre"
+            type="text"
+            disabled
+          />
+        </div>
+
+        <!-- Línea separadora -->
+        <hr class="my-6 border-gray-300" />
+
+        <!-- Monto a Pagar -->
+        <div class="mb-5">
+          <Input
+            v-model="fineData.monto"
+            id="Monto a Pagar"
+            type="text"
+            disabled
+            class="text-lg font-semibold"
+          />
+        </div>
+
+        <!-- Botón Cobrar -->
+        <button
+          type="submit"
+          class="w-full bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
+        >
+          Cobrar
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/src/components/App/MembershipSection.vue b/src/components/App/MembershipSection.vue
new file mode 100644
index 0000000..45f281b
--- /dev/null
+++ b/src/components/App/MembershipSection.vue
@@ -0,0 +1,203 @@
+<script setup>
+import { ref } from "vue";
+
+import Input from "@Holos/Form/Input.vue";
+import Selectable from "@Holos/Form/Selectable.vue";
+
+/** Eventos */
+const emit = defineEmits(["membership-paid"]);
+
+/** Refs */
+const searchForm = ref({
+  membershipNumber: "",
+  curp: "",
+});
+
+const memberData = ref({
+  image: null,
+  name: "",
+  curp: "",
+  tutorName: "",
+});
+
+const paymentData = ref({
+  service: [],
+  quantity: 1,
+  totalAmount: "",
+});
+
+const serviceOptions = ref([
+  { id: 1, description: "Membresía Mensual" },
+  { id: 2, description: "Membresía Trimestral" },
+  { id: 3, description: "Membresía Semestral" },
+  { id: 4, description: "Membresía Anual" },
+]);
+
+/** Métodos */
+const handleSearch = () => {
+  if (!searchForm.value.membershipNumber && !searchForm.value.curp) {
+    alert("Por favor ingresa al menos un criterio de búsqueda");
+    return;
+  }
+
+  console.log("Buscando miembro:", searchForm.value);
+
+  // Simular datos encontrados
+  memberData.value = {
+    name: "Juan Pérez García",
+    curp: "PEGJ900101HDFRNN09",
+    tutorName: "María López Hernández",
+    image: null,
+  };
+};
+
+const handlePayment = () => {
+  if (!paymentData.value.service) {
+    alert("Por favor selecciona un servicio");
+    return;
+  }
+
+  console.log("Procesando pago de membresía:", {
+    member: memberData.value,
+    payment: paymentData.value,
+  });
+
+  emit("membership-paid", {
+    member: memberData.value,
+    payment: paymentData.value,
+  });
+};
+
+const calculateTotal = () => {
+  paymentData.value.totalAmount = "0.00";
+};
+</script>
+
+<template>
+  <div class="p-6">
+    <!-- Formulario de búsqueda -->
+    <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-6">
+      <h3 class="text-xl font-semibold mb-6 text-gray-800">Buscar miembro</h3>
+      <form @submit.prevent="handleSearch">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
+          <!-- Número de Membresía -->
+          <Input
+            v-model="searchForm.membershipNumber"
+            id="Número de Membresía"
+            type="text"
+            placeholder=""
+          />
+
+          <!-- CURP -->
+          <Input
+            v-model="searchForm.curp"
+            id="CURP"
+            type="text"
+            placeholder=""
+          />
+
+          <!-- Botón Buscar -->
+          <button
+            type="submit"
+            class="py-3 px-8 rounded-lg transition-colors h-[42px] bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium"
+          >
+            Buscar
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <!-- Información del Miembro -->
+    <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-6">
+      <h3 class="text-xl font-semibold mb-6 text-gray-800">
+        Información del Miembro
+      </h3>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <!-- Fotografía -->
+        <div>
+          <label class="block text-sm text-gray-600 font-medium mb-2">
+            Fotografía
+          </label>
+          <div
+            class="w-full h-64 bg-gray-200 rounded-lg flex items-center justify-center"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-24 w-24 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <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>
+
+        <!-- Datos del miembro -->
+        <div class="space-y-5">
+          <Input v-model="memberData.name" id="Nombre" type="text" disabled />
+
+          <Input v-model="memberData.curp" id="CURP" type="text" disabled />
+
+          <Input
+            v-model="memberData.tutorName"
+            id="Nombre Tutor"
+            type="text"
+            disabled
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Realizar Cobro de Membresía -->
+    <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg">
+      <h3 class="text-xl font-semibold mb-6 text-gray-800">
+        Realizar Cobro de Membresía
+      </h3>
+
+      <form @submit.prevent="handlePayment">
+        <div class="grid grid-cols-3 gap-4 mb-6">
+          <!-- Servicio a Pagar -->
+          <Selectable
+            v-model="paymentData.service"
+            label="description"
+            title="Servicio a pagar"
+            :options="serviceOptions"
+            multiple
+          />
+
+          <!-- Cantidad -->
+          <Input
+            v-model="paymentData.quantity"
+            id="Cantidad (días)"
+            type="number"
+            min="1"
+            @input="calculateTotal"
+          />
+
+          <!-- Monto Total -->
+          <Input
+            v-model="paymentData.totalAmount"
+            id="Monto Total"
+            type="text"
+            disabled
+          />
+        </div>
+
+        <!-- Botón Cobrar -->
+        <button
+          type="submit"
+          class="w-full bg-green-700 hover:bg-green-600 text-white font-medium py-3.5 rounded-lg transition-colors"
+        >
+          Pagar membresía
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/src/lang/es.js b/src/lang/es.js
index bc0039a..ea64679 100644
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -80,6 +80,25 @@ export default {
             description: 'Historial de acciones realizadas por los usuarios en orden cronológico.'
         }
     },
+    address: {
+        title: 'Direcciones',
+        create: {
+            title: 'Crear dirección',
+            description: 'Permite crear nuevas direcciones.',
+            onSuccess: 'Dirección creada exitosamente',
+            onError: 'Error al crear la dirección'
+        },
+        edit: {
+            title: 'Editar dirección',
+            description: 'Permite editar direcciones existentes.',
+            onSuccess: 'Dirección actualizada exitosamente',
+            onError: 'Error al actualizar la dirección'
+        },
+        deleted: 'Dirección eliminada',
+        permissions: {
+            title: 'Permisos de dirección'
+        }
+    },
     app: {
         theme: {
             dark: 'Tema oscuro',
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 0dbbabd..727d6b0 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -36,9 +36,29 @@ onMounted(() => {
                 />
                 <Link
                     icon="add_home"
-                    name="Crear Dirección" 
+                    name="Gestionar Direcciones" 
                     to="address.index"
                 />
+                <Link
+                    icon="how_to_vote"
+                    name="Gestionar Conceptos" 
+                    to="concept.index"
+                />
+                <Link
+                    icon="receipt_long"
+                    name="Gestionar Multas" 
+                    to="fine.index"
+                />
+                <Link
+                    icon="car_tag"
+                    name="Autorizar Descuentos" 
+                    to="discount.index"
+                />
+                <Link
+                    icon="card_membership"
+                    name="Cobro de Membresía" 
+                    to="membership.index"
+                />
             </Section>
             <Section
                 v-if="hasPermission('users.index')"
diff --git a/src/pages/Admin/Users/Create.vue b/src/pages/Admin/Users/Create.vue
index f08e1ff..3699fe6 100644
--- a/src/pages/Admin/Users/Create.vue
+++ b/src/pages/Admin/Users/Create.vue
@@ -21,11 +21,12 @@ const form = useForm({
     email: '',
     phone: '',
     password: '',
-    roles: []
+    roles: [],
+    address: ''
 });
 
 const roles = ref([]);
-
+const addresses = ref([]);
 /** Métodos */
 function submit() {
     form.transform(data => ({
@@ -80,5 +81,12 @@ onMounted(() => {
             :options="roles"
             multiple
         />
+        <Selectable
+            v-model="form.address"
+            label="description"
+            title="Direcciones"
+            :options="addresses"
+            multiple
+        />
     </Form>
 </template>
diff --git a/src/pages/App/Address/Index.vue b/src/pages/App/Address/Index.vue
index 1b0dd60..d4d2e79 100644
--- a/src/pages/App/Address/Index.vue
+++ b/src/pages/App/Address/Index.vue
@@ -1,9 +1,136 @@
 <script setup>
-import PageHeader from '@Holos/PageHeader.vue';
+import { onMounted, ref } from "vue";
+import { RouterLink } from "vue-router";
+import { useSearcher } from "@Services/Api";
+import { can, apiTo, viewTo, transl } from "./Module";
 
+import Table           from "@Holos/Table.vue";
+import IconButton      from "@Holos/Button/Icon.vue";
+import PageHeader      from "@Holos/PageHeader.vue";
+import AddressForm     from "@App/AddressSection.vue";
+import DestroyView     from '@Holos/Modal/Template/Destroy.vue';
+import ModalController from "@Controllers/ModalController.js";
+
+/** Controladores */
+const Modal = new ModalController();
+
+/** Propiedades */
+const destroyModal = ref(Modal.destroyModal);
+const editModal = ref(Modal.editModal);
+const modelModal = ref(Modal.modelModal);
+
+/** Inicializar searcher */
+//const models = ref(searcher.models);
+const models = ref({
+  data: [],
+  total: 0,
+});
+const processing = ref(false);
+//const searcher = useSearcher(apiTo("index"));
+const searcher = {
+  models,
+  processing,
+  pagination: () => {},
+  search: () => {},
+};
+
+/** Cargar datos iniciales */
+onMounted(() => {
+  searcher.search();
+});
+
+/** Manejar creación de nueva dirección */
+const handleAddressCreated = async (address) => {
+  try {
+    // Aquí harías la llamada a la API para crear la dirección
+    // const response = await axios.post(apiTo('store'), address);
+    // Recargar la tabla desde la API
+    await searcher.search();
+
+    // O agregar localmente si no tienes API aún:
+    if (!models.value.data) {
+      models.value.data = [];
+    }
+    models.value.data.unshift({
+      id: Date.now(),
+      description: address.description,
+    });
+    models.value.total = models.value.data.length;
+  } catch (error) {
+    console.error("Error al crear dirección:", error);
+    alert("Error al crear la dirección");
+  }
+};
 </script>
 
 <template>
-    <PageHeader title="Dashboard" />
-    <p><b>{{ $t('welcome') }}</b>, {{ $page.user.name }}.</p>
-</template>
\ No newline at end of file
+  <PageHeader title="Creación de Dirección" />
+  <AddressForm @address-created="handleAddressCreated" />
+  <div class="m-3">
+    <Table
+      :items="models"
+      :processing="searcher.processing.value"
+      @send-pagination="(page) => searcher.pagination(page)"
+    >
+      <template #head>
+        <th v-text="$t('name')" />
+        <th v-text="$t('actions')" class="w-32 text-center" />
+      </template>
+      <template #body="{ items }">
+        <tr v-for="model in items" :key="model.id" class="table-row">
+          <td class="table-cell border">
+            {{ model.description }}
+          </td>
+          <td class="table-cell">
+            <div class="table-actions">
+              <IconButton
+                v-if="can('edit') && ![1, 2].includes(model.id)"
+                icon="license"
+                :title="transl('permissions.title')"
+                @click="Modal.switchEditModal(model)"
+                outline
+              />
+              <RouterLink
+                v-if="can('edit')"
+                class="h-fit"
+                :to="viewTo({ name: 'edit', params: { id: model.id } })"
+              >
+                <IconButton icon="edit" :title="$t('crud.edit')" outline />
+              </RouterLink>
+              <IconButton
+                v-if="can('destroy') && ![1, 2].includes(model.id)"
+                icon="delete"
+                :title="$t('crud.destroy')"
+                @click="Modal.switchDestroyModal(model)"
+                outline
+              />
+            </div>
+          </td>
+        </tr>
+      </template>
+      <template #empty>
+        <td colspan="2" class="table-cell text-center py-4 text-gray-500">
+          No hay direcciones registradas
+        </td>
+      </template>
+    </Table>
+    <DestroyView
+      v-if="can('destroy')"
+      title="description"
+      subtitle=""
+      :model="modelModal"
+      :show="destroyModal"
+      :to="(address) => apiTo('destroy', { address: address.id })"
+      @close="Modal.switchDestroyModal"
+      @update="
+        () => {
+          const index = models.data.findIndex((m) => m.id === modelModal.id);
+          if (index > -1) {
+            models.data.splice(index, 1);
+            models.total--;
+          }
+        }
+      "
+    />
+  </div>
+</template>
diff --git a/src/pages/App/Address/Module.js b/src/pages/App/Address/Module.js
new file mode 100644
index 0000000..9777050
--- /dev/null
+++ b/src/pages/App/Address/Module.js
@@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`address.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `address.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`address.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`address.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file
diff --git a/src/pages/App/Concept/Index.vue b/src/pages/App/Concept/Index.vue
new file mode 100644
index 0000000..4986266
--- /dev/null
+++ b/src/pages/App/Concept/Index.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { onMounted, ref } from "vue";
+import { RouterLink } from "vue-router";
+import { useSearcher } from "@Services/Api";
+import { can, apiTo, viewTo, transl } from "./Module";
+
+import Table from "@Holos/Table.vue";
+import IconButton from "@Holos/Button/Icon.vue";
+import PageHeader from "@Holos/PageHeader.vue";
+import ConceptForm from "@App/ConceptSection.vue";
+import DestroyView from "@Holos/Modal/Template/Destroy.vue";
+import ModalController from "@Controllers/ModalController.js";
+
+/** Controladores */
+const Modal = new ModalController();
+
+/** Propiedades */
+const destroyModal = ref(Modal.destroyModal);
+const editModal = ref(Modal.editModal);
+const modelModal = ref(Modal.modelModal);
+
+/** Inicializar searcher */
+//const models = ref(searcher.models);
+const models = ref({
+  data: [],
+  total: 0,
+});
+const processing = ref(false);
+//const searcher = useSearcher(apiTo("index"));
+const searcher = {
+  models,
+  processing,
+  pagination: () => {},
+  search: () => {},
+};
+
+/** Cargar datos iniciales */
+onMounted(() => {
+  searcher.search();
+});
+</script>
+<template>
+  <PageHeader title="Creación de Concepto" />
+  <ConceptForm />
+  <div class="m-3">
+    <Table
+      :items="models"
+      :processing="searcher.processing.value"
+      @send-pagination="(page) => searcher.pagination(page)"
+    >
+      <template #head>
+        <th v-text="'Dirección'" />
+        <th v-text="'Nombre corto'" />
+        <th v-text="'Nombre'" />
+        <th v-text="'Instrumento Legal'" />
+        <th v-text="'Articulado'" />
+        <th v-text="'Descripción'" />
+        <th v-text="$t('actions')" class="w-32 text-center" />
+      </template>
+      <template #body="{ items }">
+        <tr v-for="model in items" :key="model.id" class="table-row">
+          <td class="table-cell border">
+            {{ model.description }}
+          </td>
+          <td class="table-cell">
+            <div class="table-actions">
+              <IconButton
+                v-if="can('edit') && ![1, 2].includes(model.id)"
+                icon="license"
+                :title="transl('permissions.title')"
+                @click="Modal.switchEditModal(model)"
+                outline
+              />
+              <RouterLink
+                v-if="can('edit')"
+                class="h-fit"
+                :to="viewTo({ name: 'edit', params: { id: model.id } })"
+              >
+                <IconButton icon="edit" :title="$t('crud.edit')" outline />
+              </RouterLink>
+              <IconButton
+                v-if="can('destroy') && ![1, 2].includes(model.id)"
+                icon="delete"
+                :title="$t('crud.destroy')"
+                @click="Modal.switchDestroyModal(model)"
+                outline
+              />
+            </div>
+          </td>
+        </tr>
+      </template>
+      <template #empty>
+        <td colspan="2" class="table-cell text-center py-4 text-gray-500">
+          No hay direcciones registradas
+        </td>
+      </template>
+    </Table>
+    <DestroyView
+      v-if="can('destroy')"
+      title="description"
+      subtitle=""
+      :model="modelModal"
+      :show="destroyModal"
+      :to="(address) => apiTo('destroy', { address: address.id })"
+      @close="Modal.switchDestroyModal"
+      @update="
+        () => {
+          const index = models.data.findIndex((m) => m.id === modelModal.id);
+          if (index > -1) {
+            models.data.splice(index, 1);
+            models.total--;
+          }
+        }
+      "
+    />
+  </div>
+</template>
diff --git a/src/pages/App/Concept/Module.js b/src/pages/App/Concept/Module.js
new file mode 100644
index 0000000..9891556
--- /dev/null
+++ b/src/pages/App/Concept/Module.js
@@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`concept.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `concept.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`concept.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`concept.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file
diff --git a/src/pages/App/Discount/Index.vue b/src/pages/App/Discount/Index.vue
new file mode 100644
index 0000000..3ee6441
--- /dev/null
+++ b/src/pages/App/Discount/Index.vue
@@ -0,0 +1,9 @@
+<script setup>
+import PageHeader      from "@Holos/PageHeader.vue";
+import Discount from '@App/DiscountSection.vue';
+</script>
+
+<template>
+  <PageHeader title="Autorizar Descuentos" />
+  <Discount />
+</template>
\ No newline at end of file
diff --git a/src/pages/App/Fine/Index.vue b/src/pages/App/Fine/Index.vue
new file mode 100644
index 0000000..3a173d5
--- /dev/null
+++ b/src/pages/App/Fine/Index.vue
@@ -0,0 +1,9 @@
+<script setup>
+import PageHeader      from "@Holos/PageHeader.vue";
+import FineSection     from '@App/FineSection.vue';
+</script>
+
+<template>
+    <PageHeader title="Cobro de Multa" />
+    <FineSection />
+</template>
\ No newline at end of file
diff --git a/src/pages/App/Membership/Index.vue b/src/pages/App/Membership/Index.vue
new file mode 100644
index 0000000..bfaacd6
--- /dev/null
+++ b/src/pages/App/Membership/Index.vue
@@ -0,0 +1,9 @@
+<script setup>
+import PageHeader from '@Holos/PageHeader.vue';
+import MembershipSection from '@App/MembershipSection.vue';
+</script>
+
+<template>
+    <PageHeader title="Cobro de Membresía" />
+    <MembershipSection />
+</template>
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index 7462a79..347e774 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -57,6 +57,46 @@ const router = createRouter({
                             component: () => import('@Pages/App/Address/Index.vue')
                         }
                     ]
+                },
+                {
+                    path: 'concept',
+                    children: [
+                        {
+                            path: '',
+                            name: 'concept.index',
+                            component: () => import('@Pages/App/Concept/Index.vue')
+                        }
+                    ]
+                },
+                {
+                    path: 'fine',
+                    children: [
+                        {
+                            path: '',
+                            name: 'fine.index',
+                            component: () => import('@Pages/App/Fine/Index.vue')
+                        }
+                    ]
+                },
+                {
+                    path: 'discount',
+                    children: [
+                        {
+                            path: '',
+                            name: 'discount.index',
+                            component: () => import('@Pages/App/Discount/Index.vue')
+                        }
+                    ]
+                },
+                {
+                    path: 'membership',
+                    children: [
+                        {
+                            path: '',
+                            name: 'membership.index',
+                            component: () => import('@Pages/App/Membership/Index.vue')
+                        }
+                    ]
                 }
             ],
         },
diff --git a/vite.config.js b/vite.config.js
index d570e01..61d1e55 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -16,6 +16,7 @@ export default defineConfig({
       '@Components': fileURLToPath(new URL('./src/components', import.meta.url)),
       '@Controllers': fileURLToPath(new URL('./src/controllers', import.meta.url)),
       '@Holos': fileURLToPath(new URL('./src/components/Holos', import.meta.url)),
+      '@App': fileURLToPath(new URL('./src/components/App', import.meta.url)),
       '@Layouts': fileURLToPath(new URL('./src/layouts', import.meta.url)),
       '@Lang': fileURLToPath(new URL('./src/lang', import.meta.url)),
       '@Router': fileURLToPath(new URL('./src/router', import.meta.url)),