From a5f83b553b2e8e965f449c16d1bbeea64f959a9f Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 28 Feb 2023 11:31:24 +0100
Subject: [PATCH] Added claim & invoice out filters

---
 src/components/ui/VnFilterPanel.vue       |   4 +-
 src/composables/useArrayData.js           |   1 +
 src/pages/Claim/ClaimFilter.vue           | 192 +++++------
 src/pages/Claim/ClaimList.vue             |   5 +-
 src/pages/Customer/CustomerFilter.vue     |  23 +-
 src/pages/InvoiceOut/InvoiceOutFilter.vue | 246 ++++++++++++++
 src/pages/InvoiceOut/InvoiceOutList.vue   |  13 +-
 src/pages/Ticket/TicketFilter.vue         | 391 ++++++++++------------
 8 files changed, 523 insertions(+), 352 deletions(-)
 create mode 100644 src/pages/InvoiceOut/InvoiceOutFilter.vue

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index f09fa7858..06bd16723 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -176,8 +176,8 @@ function formatValue(value) {
                 </q-item>
                 <q-separator />
             </template>
-            <slot name="body" :params="userParams" :search-fn="search"></slot>
         </q-list>
+        <slot name="body" :params="userParams" :search-fn="search"></slot>
     </q-form>
     <q-inner-loading
         :showing="isLoading"
@@ -193,4 +193,6 @@ es:
     Remove filters: Eliminar filtros
     Refresh: Refrescar
     Search: Buscar
+    Yes: Si
+    No: No
 </i18n>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 2794d6806..9339fb456 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -79,6 +79,7 @@ export function useArrayData(key, userOptions) {
         canceller = null;
     }
 
+    
     function clear() {
         if (arrayDataStore.get(key)) {
             arrayDataStore.clear(key);
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index b6d6f0d29..ad6e63b5a 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -38,7 +38,7 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-list>
+            <q-list dense>
                 <q-item>
                     <q-item-section>
                         <q-input
@@ -54,7 +54,11 @@ function setWorkers(data) {
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-input :label="t('Name')" v-model="params.name" lazy-rules />
+                        <q-input
+                            :label="t('Client Name')"
+                            v-model="params.clientName"
+                            lazy-rules
+                        />
                     </q-item-section>
                 </q-item>
                 <q-item>
@@ -73,17 +77,7 @@ function setWorkers(data) {
                             map-options
                             use-input
                             :input-debounce="0"
-                        >
-                            <template #prepend>
-                                <q-avatar color="orange" size="xs">
-                                    <q-img
-                                        v-if="params.salesPersonFk"
-                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </q-avatar>
-                            </template>
-                        </q-select>
+                        />
                     </q-item-section>
                 </q-item>
                 <q-item>
@@ -106,10 +100,29 @@ function setWorkers(data) {
                     </q-item-section>
                 </q-item>
                 <q-item>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
+                        <q-select
+                            :label="t('Responsible')"
+                            v-model="params.claimResponsibleFk"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item class="q-mb-md">
                     <q-item-section>
                         <q-select
                             :label="t('State')"
-                            v-model="params.stateFk"
+                            v-model="params.claimStateFk"
                             @update:model-value="searchFn()"
                             :options="states"
                             option-value="id"
@@ -119,62 +132,14 @@ function setWorkers(data) {
                         />
                     </q-item-section>
                 </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-select
-                            :label="t('Item')"
-                            v-model="params.itemFk"
-                            :options="items"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-item class="q-mb-md">
-                    <q-item-section>
-                        <q-input :label="t('City')" v-model="params.city" lazy-rules />
-                    </q-item-section>
-                </q-item>
                 <q-separator />
                 <q-expansion-item :label="t('More options')" expand-separator>
                     <q-item>
                         <q-item-section>
-                            <q-input
-                                :label="t('Phone')"
-                                v-model="params.phone"
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <q-icon name="phone" size="sm"></q-icon>
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                :label="t('Email')"
-                                v-model="params.email"
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <q-icon name="email" size="sm"></q-icon>
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section v-if="!zones">
-                            <q-skeleton type="QInput" class="full-width" />
-                        </q-item-section>
-                        <q-item-section v-if="zones">
                             <q-select
-                                :label="t('Zone')"
-                                v-model="params.zoneFk"
-                                @update:model-value="searchFn()"
-                                :options="zones"
+                                :label="t('Item')"
+                                v-model="params.itemFk"
+                                :options="items"
                                 option-value="id"
                                 option-label="name"
                                 emit-value
@@ -185,10 +150,32 @@ function setWorkers(data) {
                     <q-item>
                         <q-item-section>
                             <q-input
-                                :label="t('Postcode')"
-                                v-model="params.postcode"
-                                lazy-rules
-                            />
+                                v-model="params.created"
+                                :label="t('Created')"
+                                autofocus
+                                readonly
+                            >
+                                <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <q-date v-model="params.created">
+                                                <div class="row items-center justify-end">
+                                                    <q-btn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </q-date>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template>
+                            </q-input>
                         </q-item-section>
                     </q-item>
                 </q-expansion-item>
@@ -201,59 +188,30 @@ function setWorkers(data) {
 en:
     params:
         search: Contains
-        fi: FI
-        name: Name
-        socialName: Social Name
+        clientFk: Customer
+        clientName: Customer
         salesPersonFk: Salesperson
-        provinceFk: Province
-        city: City
-        phone: Phone
-        email: Email
-        zoneFk: Zone
-        postcode: Postcode
+        attenderFk: Attender
+        claimResponsibleFk: Responsible
+        claimStateFk: State
+        created: Created
 es:
     params:
         search: Contiene
-        fi: NIF
-        name: Nombre
-        socialName: Razón Social
+        clientFk: Cliente
+        clientName: Cliente
         salesPersonFk: Comercial
-        provinceFk: Provincia
-        city: Ciudad
-        phone: Teléfono
-        email: Email
-        zoneFk: Zona
-        postcode: CP
-    FI: NIF
-    Name: Nombre
-    Social Name: Razón social
+        attenderFk: Asistente
+        claimResponsibleFk: Responsable
+        claimStateFk: Estado
+        created: Creada
+    Customer ID: ID cliente
+    Client Name: Nombre del cliente
     Salesperson: Comercial
-    Province: Provincia
-    City: Ciudad
+    Attender: Asistente
+    Responsible: Responsable
+    State: Estado
+    Item: Artículo
+    Created: Creada
     More options: Más opciones
-    Phone: Teléfono
-    Email: Email
-    Zone: Zona
-    Postcode: Código postal
 </i18n>
-
-<!-- <i18n>
-{
-    "en": {
-        "fi": "Fiscal ID",
-        "name": "Name",
-        "socialName": "Social Name",
-        "salesPersonFk": "Salesperson",
-        "provinceFk": "Province",
-        "city": "City",
-        "zoneFk": "Zone",
-        "postcode": "Postcode"
-    },
-    "es": {
-        "fi": "NIF",
-        "name": "Nombre",
-        "socialName": "Razón social",
-        "salesPersonFk": "Comercial"
-    }
-}
-</i18n> -->
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 07628b906..69c436ee9 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -59,9 +59,6 @@ function viewSummary(id) {
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
                             <div class="text-h6 link">
                                 {{ row.clientName }}
-                                <q-popup-proxy>
-                                    <customer-descriptor-popover :customer="row.client" />
-                                </q-popup-proxy>
                             </div>
                             <q-item-label caption>#{{ row.id }}</q-item-label>
                             <q-list>
@@ -154,7 +151,7 @@ function viewSummary(id) {
                                     {{ t('components.smartCard.viewDescription') }}
                                 </q-tooltip>
                                 <q-popup-proxy>
-                                    <customer-descriptor-popover :customer="row.client" />
+                                    <CustomerDescriptorPopover :id="row.clientFk" />
                                 </q-popup-proxy>
                             </q-btn>
                         </q-card-actions>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index df8c5dc16..9d4f8f0f6 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -40,7 +40,7 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-list>
+            <q-list dense>
                 <q-item>
                     <q-item-section>
                         <q-input :label="t('FI')" v-model="params.fi" lazy-rules>
@@ -214,24 +214,3 @@ es:
     Zone: Zona
     Postcode: Código postal
 </i18n>
-
-<!-- <i18n>
-{
-    "en": {
-        "fi": "Fiscal ID",
-        "name": "Name",
-        "socialName": "Social Name",
-        "salesPersonFk": "Salesperson",
-        "provinceFk": "Province",
-        "city": "City",
-        "zoneFk": "Zone",
-        "postcode": "Postcode"
-    },
-    "es": {
-        "fi": "NIF",
-        "name": "Nombre",
-        "socialName": "Razón social",
-        "salesPersonFk": "Comercial"
-    }
-}
-</i18n> -->
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
new file mode 100644
index 000000000..356e5498e
--- /dev/null
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -0,0 +1,246 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const workers = ref();
+const workersCopy = ref();
+const states = ref();
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
+</script>
+
+<template>
+    <fetch-data url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <q-list dense>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('Customer ID')"
+                            v-model="params.clientFk"
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <q-icon name="vn:client" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input :label="t('FI')" v-model="params.fi" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="badge" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input :label="t('Amount')" v-model="params.amount" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="euro" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('Min')"
+                            type="number"
+                            v-model.number="params.min"
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <q-icon name="euro" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input
+                            :label="t('Max')"
+                            type="number"
+                            v-model.number="params.max"
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <q-icon name="euro" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item class="q-mb-md">
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.hasPdf"
+                            @update:model-value="searchFn()"
+                            :label="t('Has PDF')"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-expansion-item :label="t('More options')" expand-separator>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Issued')"
+                                v-model="params.issued"
+                                @update:model-value="searchFn()"
+                                type="date"
+                                stack-label
+                            >
+                                <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <q-date v-model="params.issued">
+                                                <div class="row items-center justify-end">
+                                                    <q-btn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </q-date>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Created')"
+                                v-model="params.created"
+                                @update:model-value="searchFn()"
+                                type="date"
+                                stack-label
+                            >
+                                <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <q-date v-model="params.created">
+                                                <div class="row items-center justify-end">
+                                                    <q-btn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </q-date>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Dued')"
+                                v-model="params.dued"
+                                @update:model-value="searchFn()"
+                                type="date"
+                                stack-label
+                            >
+                                <!--        <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <q-date v-model="params.dued">
+                                                <div class="row items-center justify-end">
+                                                    <q-btn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </q-date>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template> -->
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                </q-expansion-item>
+            </q-list>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        clientFk: Customer
+        fi: FI
+        amount: Amount
+        max: Max
+        min: Min
+        hasPdf: Has PDF
+        issued: Issued
+        created: Created
+        dued: Dued
+es:
+    params:
+        search: Contiene
+        clientFk: Cliente
+        fi: CIF
+        amount: Importe
+        max: Max
+        min: Min
+        hasPdf: Tiene PDF
+        issued: Emitida
+        created: Creada
+        dued: Vencida
+    Customer ID: ID cliente
+    FI: CIF
+    Amount: Importe
+    Has PDF: Tiene PDF
+    Issued: Fecha emisión
+    Created: Fecha creación
+    Dued: Fecha vencimiento
+    More options: Más opciones
+</i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index a855f2695..2113bfdbb 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -1,18 +1,24 @@
 <script setup>
+import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
 import { toDate, toCurrency } from 'src/filters/index';
-
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import InvoiceOutFilter from './InvoiceOutFilter.vue';
 
+const state = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
+onMounted(() => state.toggleRightDrawer());
+onUnmounted(() => state.toggleRightDrawer());
+
 function navigate(id) {
     router.push({ path: `/invoiceOut/${id}` });
 }
@@ -34,6 +40,9 @@ function viewSummary(id) {
             :label="t('Search by invoice id or reference')"
         />
     </teleport-slot>
+    <teleport-slot to="#rightPanel">
+        <InvoiceOutFilter data-key="InvoiceOutList" />
+    </teleport-slot>
     <q-page class="q-pa-md">
         <paginate
             data-key="InvoiceOutList"
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 1672c70c2..72cbad627 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -38,177 +38,105 @@ const warehouses = ref([]);
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-item>
-                <q-item-section>
-                    <q-input
-                        v-model="params.clientFk"
-                        :label="t('Customer ID')"
-                        lazy-rules
-                        autofocus
-                    />
-                </q-item-section>
-                <q-item-section>
-                    <q-input v-model="params.orderFk" :label="t('Order ID')" lazy-rules />
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-input
-                        v-model="params.dateFrom"
-                        :label="t('From')"
-                        autofocus
-                        readonly
-                    >
-                        <template #append>
-                            <q-icon name="event" class="cursor-pointer">
-                                <q-popup-proxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <q-date v-model="params.dateFrom">
-                                        <div class="row items-center justify-end">
-                                            <q-btn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </q-date>
-                                </q-popup-proxy>
-                            </q-icon>
-                        </template>
-                    </q-input>
-                </q-item-section>
-                <q-item-section>
-                    <q-input v-model="params.dateTo" :label="t('To')" autofocus readonly>
-                        <template #append>
-                            <q-icon name="event" class="cursor-pointer">
-                                <q-popup-proxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <q-date v-model="params.dateTo">
-                                        <div class="row items-center justify-end">
-                                            <q-btn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </q-date>
-                                </q-popup-proxy>
-                            </q-icon>
-                        </template>
-                    </q-input>
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-select
-                        :label="t('Salesperson')"
-                        v-model="params.salesPersonFk"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    >
-                        <template #prepend>
-                            <q-avatar color="orange" size="xs">
-                                <q-img
-                                    v-if="params.salesPersonFk"
-                                    :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
-                                    spinner-color="white"
-                                />
-                            </q-avatar>
-                        </template>
-                    </q-select>
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-select
-                        :label="t('State')"
-                        v-model="params.stateFk"
-                        @update:model-value="searchFn()"
-                        :options="states"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                    />
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-input
-                        v-model="params.refFk"
-                        :label="t('Invoice Ref.')"
-                        lazy-rules
-                    />
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-checkbox
-                        v-model="params.myTeam"
-                        @update:model-value="searchFn()"
-                        :label="t('My team')"
-                        toggle-indeterminate
-                    />
-                </q-item-section>
-                <q-item-section>
-                    <q-checkbox
-                        v-model="params.pending"
-                        @update:model-value="searchFn()"
-                        :label="t('Pending')"
-                        toggle-indeterminate
-                    />
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-checkbox
-                        v-model="params.hasInvoice"
-                        @update:model-value="searchFn()"
-                        :label="t('Invoiced')"
-                        toggle-indeterminate
-                    />
-                </q-item-section>
-                <q-item-section>
-                    <q-checkbox
-                        v-model="params.hasRoute"
-                        @update:model-value="searchFn()"
-                        :label="t('Routed')"
-                        toggle-indeterminate
-                    />
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-checkbox
-                        v-model="params.problems"
-                        @update:model-value="searchFn()"
-                        :label="t('With problems')"
-                        toggle-indeterminate
-                    />
-                </q-item-section>
-            </q-item>
-            <q-separator />
-            <q-expansion-item :label="t('More options')" expand-separator>
+            <q-list dense>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            v-model="params.clientFk"
+                            :label="t('Customer ID')"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input
+                            v-model="params.orderFk"
+                            :label="t('Order ID')"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input v-model="params.dateFrom" :label="t('From')" readonly>
+                            <template #append>
+                                <q-icon name="event" class="cursor-pointer">
+                                    <q-popup-proxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <q-date v-model="params.dateFrom">
+                                            <div class="row items-center justify-end">
+                                                <q-btn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </q-date>
+                                    </q-popup-proxy>
+                                </q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input v-model="params.dateTo" :label="t('To')" readonly>
+                            <template #append>
+                                <q-icon name="event" class="cursor-pointer">
+                                    <q-popup-proxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <q-date v-model="params.dateTo">
+                                            <div class="row items-center justify-end">
+                                                <q-btn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </q-date>
+                                    </q-popup-proxy>
+                                </q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
                 <q-item>
                     <q-item-section>
                         <q-select
-                            :label="t('Province')"
-                            v-model="params.provinceFk"
+                            :label="t('Salesperson')"
+                            v-model="params.salesPersonFk"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                            <template #prepend>
+                                <q-avatar color="orange" size="xs">
+                                    <q-img
+                                        v-if="params.salesPersonFk"
+                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
+                                        spinner-color="white"
+                                    />
+                                </q-avatar>
+                            </template>
+                        </q-select>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            :label="t('State')"
+                            v-model="params.stateFk"
                             @update:model-value="searchFn()"
-                            :options="provinces"
+                            :options="states"
                             option-value="id"
                             option-label="name"
                             emit-value
@@ -218,33 +146,105 @@ const warehouses = ref([]);
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-select
-                            :label="t('Agency')"
-                            v-model="params.agencyModeFk"
-                            @update:model-value="searchFn()"
-                            :options="agencies"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
+                        <q-input
+                            v-model="params.refFk"
+                            :label="t('Invoice Ref.')"
+                            lazy-rules
                         />
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-select
-                            :label="t('Warehouse')"
-                            v-model="params.warehouseFk"
+                        <q-checkbox
+                            v-model="params.myTeam"
                             @update:model-value="searchFn()"
-                            :options="warehouses"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
+                            :label="t('My team')"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.pending"
+                            @update:model-value="searchFn()"
+                            :label="t('Pending')"
+                            toggle-indeterminate
                         />
                     </q-item-section>
                 </q-item>
-            </q-expansion-item>
+                <q-item>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.hasInvoice"
+                            @update:model-value="searchFn()"
+                            :label="t('Invoiced')"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.hasRoute"
+                            @update:model-value="searchFn()"
+                            :label="t('Routed')"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.problems"
+                            @update:model-value="searchFn()"
+                            :label="t('With problems')"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-expansion-item :label="t('More options')" expand-separator>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                :label="t('Province')"
+                                v-model="params.provinceFk"
+                                @update:model-value="searchFn()"
+                                :options="provinces"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                :label="t('Agency')"
+                                v-model="params.agencyModeFk"
+                                @update:model-value="searchFn()"
+                                :options="agencies"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                :label="t('Warehouse')"
+                                v-model="params.warehouseFk"
+                                @update:model-value="searchFn()"
+                                :options="warehouses"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                </q-expansion-item>
+            </q-list>
         </template>
     </VnFilterPanel>
 </template>
@@ -300,24 +300,3 @@ es:
     Yes: Si
     No: No
 </i18n>
-
-<!-- <i18n>
-{
-    "en": {
-        "search": "Contains",
-        "clientFk": 'Customer',
-        "orderFk": 'Order',
-        "dateFrom": 'From',
-        "dateTo": 'To',
-        "salesPersonFk": "Sales Person"
-    },
-    "es": {
-        "search": "Contiene",
-        "clientFk": 'Cliente',
-        "orderFk": 'Pedido',
-        "dateFrom": 'Desde',
-        "dateTo": 'Hasta',
-        "salesPersonFk": "Comercial"
-    }
-}
-</i18n> -->