From 98b55de0507ae9cd14d390a37ccfdd42d5936926 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Sat, 15 Nov 2025 10:12:33 -0600
Subject: [PATCH] =?UTF-8?q?ADD:=20Vista=20gesti=C3=B3n=20de=20membres?=
 =?UTF-8?q?=C3=ADas=20con=20creaci=C3=B3n=20y=20formulario?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lang/es.js                      |  9 ++++
 src/pages/App/Membership/Create.vue | 64 +++++++++++++++++++++++++++
 src/pages/App/Membership/Form.vue   | 67 +++++++++++++++++++++++++++++
 src/pages/App/Membership/Index.vue  | 22 +++++++---
 src/pages/App/Membership/Module.js  | 21 +++++++++
 src/router/Index.js                 |  5 +++
 6 files changed, 183 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/App/Membership/Create.vue
 create mode 100644 src/pages/App/Membership/Form.vue
 create mode 100644 src/pages/App/Membership/Module.js

diff --git a/src/lang/es.js b/src/lang/es.js
index ea64679..2f43999 100644
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -99,6 +99,15 @@ export default {
             title: 'Permisos de dirección'
         }
     },
+    membership: {
+        title: 'Membresías',
+        create: {
+            title: 'Crear membresía',
+            description: 'Permite crear nuevas membresías.',
+            onSuccess: 'Membresía creada exitosamente',
+            onError: 'Error al crear la membresía'
+        }
+    },
     app: {
         theme: {
             dark: 'Tema oscuro',
diff --git a/src/pages/App/Membership/Create.vue b/src/pages/App/Membership/Create.vue
new file mode 100644
index 0000000..baef13a
--- /dev/null
+++ b/src/pages/App/Membership/Create.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import Input           from '@Holos/Form/Input.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
+import PageHeader      from '@Holos/PageHeader.vue';
+import Form            from './Form.vue'
+
+/** Definidores */
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+    name: '',
+    paternal: '',
+    maternal: '',
+    curp: '',
+    membership_number: '',
+});
+
+/** Métodos */
+function submit() {
+    form.transform(data => ({
+        ...data,
+    })).post(apiTo('store'), {
+        onSuccess: () => {
+            Notify.success(Lang('register.create.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.get(route('system.roles'), {
+        onSuccess: (r) => {
+            roles.value = r.roles;
+        }
+    });
+})
+</script>
+
+<template>
+    <PageHeader :title="transl('create.title')">
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    <Form
+        action="create"
+        :form="form"
+        @submit="submit"
+    >
+    </Form>
+</template>
diff --git a/src/pages/App/Membership/Form.vue b/src/pages/App/Membership/Form.vue
new file mode 100644
index 0000000..54d60cf
--- /dev/null
+++ b/src/pages/App/Membership/Form.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { transl } from './Module';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+defineProps({
+    action: {
+        default: 'create',
+        type: String
+    },
+    form: Object
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+</script>
+
+<template>
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
+    </div>
+    <div class="w-full">
+        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <Input
+                v-model="form.name"
+                id="name"
+                :onError="form.errors.name"
+                autofocus
+                required
+            />
+            <Input
+                v-model="form.paternal"
+                id="paternal"
+                :onError="form.errors.paternal"
+                required
+            />
+            <Input
+                v-model="form.maternal"
+                id="maternal"
+                :onError="form.errors.maternal"
+            />
+            <Input
+                v-model="form.curp"
+                id="Curp"
+                :onError="form.errors.curp"
+                type="text"
+            />
+            <slot />
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
+                <PrimaryButton
+                    v-text="$t(action)"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </div>
+        </form>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/App/Membership/Index.vue b/src/pages/App/Membership/Index.vue
index bfaacd6..1b28f93 100644
--- a/src/pages/App/Membership/Index.vue
+++ b/src/pages/App/Membership/Index.vue
@@ -1,9 +1,21 @@
 <script setup>
-import PageHeader from '@Holos/PageHeader.vue';
-import MembershipSection from '@App/MembershipSection.vue';
+import { can, viewTo,  } from "./Module";
+
+import SearcherHead from "@Holos/Searcher.vue";
+import IconButton   from '@Holos/Button/Icon.vue'
+import MembershipSection from "@App/MembershipSection.vue";
 </script>
 
 <template>
-    <PageHeader title="Cobro de Membresía" />
-    <MembershipSection />
-</template>
\ No newline at end of file
+  <SearcherHead title="Cobro de Membresía" @search="(x) => searcher.search(x)">
+    <RouterLink v-if="can('create')" :to="viewTo({ name: 'create' })">
+      <IconButton
+        class="text-white"
+        icon="add"
+        :title="$t('crud.create')"
+        filled
+      />
+    </RouterLink>
+  </SearcherHead>
+  <MembershipSection />
+</template>
diff --git a/src/pages/App/Membership/Module.js b/src/pages/App/Membership/Module.js
new file mode 100644
index 0000000..2ef8139
--- /dev/null
+++ b/src/pages/App/Membership/Module.js
@@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`membership.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `membership.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`membership.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => true//hasPermission(`membership.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index 347e774..573ff7b 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -95,6 +95,11 @@ const router = createRouter({
                             path: '',
                             name: 'membership.index',
                             component: () => import('@Pages/App/Membership/Index.vue')
+                        },
+                        {
+                            path: 'create',
+                            name: 'membership.create',
+                            component: () => import('@Pages/App/Membership/Create.vue')
                         }
                     ]
                 }