UPDATE:Creación de conceptos

src/components/App/ConceptSection.vue

@@ -24,6 +24,7 @@ const form = useForm({
   unit_cost_uma: "",
   unit_cost_peso: "",
   charge_type: null,
+  concept_type: null,
 });
 
 const resetForm = () => {
@@ -41,6 +42,7 @@ const resetForm = () => {
   form.unit_cost_uma = "";
   form.unit_cost_peso = "";
   form.charge_type = null;
+  form.concept_type = null;
 };
 
 const isFormOpen = ref(false);
@@ -54,10 +56,15 @@ const chargeTypeId = computed(() => {
 });
 
 const chargeTypesOptions = ref([
-  { id: "uma_range", name: "Rango en UMA" },
+  { id: "uma_range", name: "Rango por UMA" },
-  { id: "peso_range", name: "Rango en Peso" },
+  { id: "peso_range", name: "Rango en pesos (MXN$)" },
-  { id: "uma_fixed", name: "UMA unitario" },
+  { id: "uma_fixed", name: "Tabulador en UMA" },
-  { id: "peso_fixed", name: "Peso unitario" },
+  { id: "peso_fixed", name: "Tabulador en pesos (MXN$)" },
+]);
+
+const conceptTypesOptions = ref([
+  { id: "membership", name: "Membresía" },
+  { id: "fine", name: "Multa" }
 ]);
 
 const showUmaFields = computed(() => {
@@ -108,6 +115,10 @@ const handleSubmit = () => {
         : Number(form.direction_id),
     unit_id:
       typeof form.unit_id === "object" ? form.unit_id.id : Number(form.unit_id),
+    concept_type:
+      typeof form.concept_type === "object"
+        ? form.concept_type.id
+        : String(form.concept_type),
     short_name: form.short_name,
     name: form.name,
     legal_instrument: form.legal_instrument,
@@ -174,6 +185,14 @@ const handleSubmit = () => {
 
       <form @submit.prevent="handleSubmit">
         <div class="mb-5 grid grid-cols-2 gap-4">
+          <Selectable
+            v-model="form.concept_type"
+            label="name"
+            value="id"
+            :title="$t('concept.conceptType')"
+            :options="conceptTypesOptions"
+            required
+          />
           <Selectable
             v-model="form.direction_id"
             label="name"
@@ -190,7 +209,6 @@ const handleSubmit = () => {
             :onError="form.errors.short_name"
             required
           />
-        </div>
           <Input
             v-model="form.name"
             class="col-span-2"
@@ -199,6 +217,7 @@ const handleSubmit = () => {
             :onError="form.errors.name"
             required
           />
+        </div>
         <div class="mb-5 grid grid-cols-2 gap-4 py-2">
           <Input
             v-model="form.legal_instrument"
@@ -225,7 +244,12 @@ const handleSubmit = () => {
           required
         />
 
-        <div class="mb-5 py-2">
+        <div class="">
+          <hr class="my-6 border-gray-300" />
+          <h4 class="text-lg font-semibold mb-4 text-gray-700">
+            {{ $t("concept.defineChargeType") }}
+          </h4>
+          <div class="mb-5 grid grid-cols-3 gap-4 py-2">
             <Selectable
               v-model="form.charge_type"
               label="name"
@@ -235,10 +259,19 @@ const handleSubmit = () => {
               required
             />
           </div>
+        </div>
         <div
           v-if="showUmaFields && isRangeType"
-          class="mb-5 grid grid-cols-2 gap-4 py-2"
+          class="mb-5 grid grid-cols-3 gap-4 py-2"
         >
+          <Selectable
+            v-model="form.unit_id"
+            label="name"
+            value="id"
+            :title="$t('concept.sizeUnit')"
+            :options="units"
+            required
+          />
           <Input
             v-model="form.min_amount_uma"
             :id="$t('concept.minimumAmountUma')"
@@ -256,8 +289,16 @@ const handleSubmit = () => {
         </div>
         <div
           v-if="showPesoFields && isRangeType"
-          class="mb-5 grid grid-cols-2 gap-4 py-2"
+          class="mb-5 grid grid-cols-3 gap-4 py-2"
         >
+          <Selectable
+            v-model="form.unit_id"
+            label="name"
+            value="id"
+            :title="$t('concept.sizeUnit')"
+            :options="units"
+            required
+          />
           <Input
             v-model="form.min_amount_peso"
             :id="$t('concept.minimumAmountPeso')"
@@ -273,6 +314,12 @@ const handleSubmit = () => {
             :onError="form.errors.max_amount_peso"
           />
         </div>
+        <div v-if="isFixedType">
+          <hr class="my-4 border-gray-300" />
+          <h4 class="text-lg font-semibold mb-4 text-gray-700">
+            {{ $t("concept.tabulator") }}
+          </h4>
+          <div class="mb-5 grid grid-cols-3 gap-4 py-2">
             <Selectable
               v-model="form.unit_id"
               label="name"
@@ -281,12 +328,6 @@ const handleSubmit = () => {
               :options="units"
               required
             />
-        <div v-if="isFixedType">
-          <hr class="my-4 border-gray-300" />
-          <h4 class="text-lg font-semibold mb-4 text-gray-700">
-            {{ $t("concept.tabulator") }}
-          </h4>
-          <div class="mb-5 grid grid-cols-3 gap-4 py-2">
             <Input
               v-if="showUmaFields"
               v-model="form.unit_cost_uma"

src/lang/es.js

@@ -117,14 +117,16 @@ export default {
         article: 'Articulado',
         description: 'Contenido',
         chargeType: 'Tipo de Cobro',
+        conceptType: 'Tipo de Concepto',
+        defineChargeType: 'Definiciones del Concepto de Cobro',
         minimumAmountUma: 'Monto Mínimo (UMAs)',
         maximumAmountUma: 'Monto Máximo (UMAs)',
         minimumAmountPeso: 'Monto Mínimo (Pesos)',
         maximumAmountPeso: 'Monto Máximo (Pesos)',
         tabulator: 'Tabulador',
         sizeUnit: 'Unidad de Medida',
-        costUnitUma: 'Costo Unitario (UMAs)',
+        costUnitUma: 'Costo por unidad en UMA',
-        costUnitPeso: 'Costo Unitario (Pesos)',
+        costUnitPeso: 'Costo por unidad en Pesos',
         validation: {
             required: 'Por favor complete todos los campos requeridos'
         },

src/pages/App/Concept/Modal/Edit.vue

@@ -26,20 +26,42 @@ const chargeTypesOptions = [
   { id: 'peso_fixed', name: 'Peso unitario' },
 ];
 
+const conceptTypesOptions = [
+  { id: "membership", name: "Membresía" },
+  { id: "fine", name: "Multa" },
+];
+
 const chargeTypeObject = computed({
   get() {
     if (!props.model.charge_type) return null;
-
+    return typeof props.model.charge_type === 'object' && props.model.charge_type?.id
-    if (typeof props.model.charge_type === 'object') {
+      ? props.model.charge_type.id
-      return props.model.charge_type;
+      : chargeTypesOptions.find(opt => opt.id === props.model.charge_type) || null;
-    }
-    return chargeTypesOptions.find(opt => opt.id === props.model.charge_type) || null;
   },
   set(value) {
     props.model.charge_type = value;
   }
 });
 
+const conceptTypeObject = computed({
+  get() {
+    if (!props.model.concept_type) return null;
+    const conceptTypeId = typeof props.model.concept_type === 'object' && props.model.concept_type?.id
+      ? props.model.concept_type.id
+      : props.model.concept_type;
+    return conceptTypesOptions.find(opt => opt.id === conceptTypeId) || null;
+  },
+  set(value) {
+    if (value && typeof value === 'object' && value.id) {
+      props.model.concept_type = value.id;
+    } else if (value) {
+      props.model.concept_type = value;
+    } else {
+      props.model.concept_type = null;
+    }
+  }
+});
+
 const editChargeTypeId = computed(() => {
   if (!props.model.charge_type) return null;
   return typeof props.model.charge_type === 'object' && props.model.charge_type?.id
@@ -69,6 +91,7 @@ const handleUpdate = async () => {
     direction_id: typeof props.model.direction === 'object' ? props.model.direction.id : Number(props.model.direction_id),
     unit_id: props.model.unit ? (typeof props.model.unit === 'object' ? props.model.unit.id : Number(props.model.unit)) : null,
     short_name: props.model.short_name,
+    concept_type: props.model.concept_type,
     name: props.model.name,
     legal_instrument: props.model.legal_instrument,
     article: props.model.article,
@@ -107,6 +130,13 @@ const handleUpdate = async () => {
     @update="handleUpdate"
   >
     <div class="p-4 space-y-4">
+      <Selectable
+        v-model="conceptTypeObject"
+        label="name"
+        :title="$t('concept.conceptType')"
+        :options="conceptTypesOptions"
+        required
+      />
       <Selectable
         v-model="model.direction"
         label="name"