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',

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>

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>

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>
+  <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>

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
+}

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')
                         }
                     ]
                 }