src/pages/Customer/Card/CustomerConsumption.vue

@@ -61,6 +61,60 @@ const columns = computed(() => [
         columnFilter: false,
         cardVisible: true,
     },
+    {
+        align: 'left',
+        name: 'buyerId',
+        label: t('components.itemsFilterPanel.salesPersonFk'),
+        component: 'select',
+        attrs: {
+            url: 'TicketRequests/getItemTypeWorker',
+            optionLabel: 'nickname',
+            optionValue: 'id',
+
+            fields: ['id', 'nickname'],
+            sortBy: ['nickname ASC'],
+            optionFilter: 'firstName',
+        },
+        cardVisible: false,
+        visible: false,
+    },
+    // {
+    //     align: 'left',
+    //     name: 'typeId',
+    //     label: t('globals.pageTitles.itemType'),
+    //     component: 'select',
+    //     attrs: ({ model }) => {
+    //         return {
+    //             url: 'ItemTypes',
+    //             optionLabel: 'name',
+    //             optionValue: (row) => row.category?.name,
+    //             optionCaption: (row) => row.category?.name,
+    //             template: ``,
+    //             htmlContent: ``,
+    //             include: 'category',
+    //             fields: ['id', 'name', 'categoryFk'],
+    //             sortBy: ['name ASC'],
+    //             'phone-number': model,
+    //         };
+    //     },
+    // attrs: {
+    // },
+    //     cardVisible: false,
+    //     visible: false,
+    // },
+    // {
+    //     align: 'left',
+    //     name: 'categoryId',
+    //     label: t('item.list.category'),
+    //     component: 'select',
+    //     attrs: {
+    //         url: 'ItemCategories',
+    //         fields: ['id', 'name'],
+    //         sortBy: ['name ASC'],
+    //     },
+    //     cardVisible: false,
+    //     visible: false,
+    // },
     {
         name: 'description',
         align: 'left',
@@ -119,7 +173,7 @@ const openSendEmailDialog = async () => {
     openConfirmationModal(
         t('The consumption report will be sent'),
         t('Please, confirm'),
-        () => sendCampaignMetricsEmail({ address: arrayData.store.data.email })
+        () => sendCampaignMetricsEmail({ address: arrayData.store.data.email }),
     );
 };
 const sendCampaignMetricsEmail = ({ address }) => {
@@ -152,7 +206,7 @@ const updateDateParams = (value, params) => {
         v-if="campaignList"
         data-key="CustomerConsumption"
         url="Clients/consumption"
-        :order="['itemTypeFk', 'itemName', 'itemSize', 'description']"        
+        :order="['itemTypeFk', 'itemName', 'itemSize', 'description']"
         :filter="{ where: { clientFk: route.params.id } }"
         :columns="columns"
         search-url="consumption"
@@ -204,6 +258,40 @@ const updateDateParams = (value, params) => {
         </template>
         <template #moreFilterPanel="{ params }">
             <div class="column no-wrap flex-center q-gutter-y-md q-mt-xs q-pr-xl">
+                <VnSelect
+                    :filled="true"
+                    class="q-px-sm q-pt-none fit"
+                    url="ItemTypes"
+                    v-model="params.typeId"
+                    :label="t('item.list.typeName')"
+                    :fields="['id', 'name', 'categoryFk']"
+                    :include="'category'"
+                    :sortBy="'name ASC'"
+                    dense
+                    @update:model-value="(data) => updateDateParams(data, params)"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                <QItemLabel caption>{{
+                                    scope.opt?.category?.name
+                                }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
+                <VnSelect
+                    :filled="true"
+                    class="q-px-sm q-pt-none fit"
+                    url="ItemCategories"
+                    v-model="params.categoryId"
+                    :label="t('item.list.category')"
+                    :fields="['id', 'name']"
+                    :sortBy="'name ASC'"
+                    dense
+                    @update:model-value="(data) => updateDateParams(data, params)"
+                />
                 <VnSelect
                     v-model="params.campaign"
                     :options="campaignList"

src/pages/Customer/locale/en.yml

@@ -107,6 +107,9 @@ customer:
         defaulterSinced: Defaulted Since
         hasRecovery: Has Recovery
         socialName: Social name
+        typeId: Type
+        buyerId: Buyer
+        categoryId: Category
         city: City
         phone: Phone
         postcode: Postcode

src/pages/Customer/locale/es.yml

@@ -108,6 +108,9 @@ customer:
         hasRecovery: Tiene recobro
         socialName: Razón social
         campaign: Campaña
+        typeId: Familia
+        buyerId: Familia
+        categoryId: Reino
         city: Ciudad
         phone: Teléfono
         postcode: Código postal