From 9a477c2c2513a3d4accbca01be8855540680019b Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Mon, 11 Dec 2023 10:47:16 -0400
Subject: [PATCH 01/10] Create order page

---
 src/components/FormModel.vue                 |  16 +-
 src/components/ui/VnPaginate.vue             |   4 +-
 src/i18n/en/index.js                         |  49 ++++
 src/pages/Order/Card/OrderBasicData.vue      |  12 +
 src/pages/Order/Card/OrderCard.vue           |  36 +++
 src/pages/Order/Card/OrderDescriptor.vue     | 128 ++++++++++
 src/pages/Order/Card/OrderDescriptorMenu.vue |  65 +++++
 src/pages/Order/Card/OrderFilter.vue         | 245 +++++++++++++++++++
 src/pages/Order/Card/OrderForm.vue           | 209 ++++++++++++++++
 src/pages/Order/Card/OrderSearchbar.vue      |  25 ++
 src/pages/Order/Card/OrderSummary.vue        | 161 ++++++++++++
 src/pages/Order/OrderList.vue                | 150 ++++++++++++
 src/pages/Order/OrderMain.vue                |  17 ++
 src/router/modules/index.js                  |   2 +
 src/router/modules/order.js                  |  69 ++++++
 src/router/routes.js                         |   2 +
 src/stores/useNavigationStore.js             |   1 +
 17 files changed, 1186 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Order/Card/OrderBasicData.vue
 create mode 100644 src/pages/Order/Card/OrderCard.vue
 create mode 100644 src/pages/Order/Card/OrderDescriptor.vue
 create mode 100644 src/pages/Order/Card/OrderDescriptorMenu.vue
 create mode 100644 src/pages/Order/Card/OrderFilter.vue
 create mode 100644 src/pages/Order/Card/OrderForm.vue
 create mode 100644 src/pages/Order/Card/OrderSearchbar.vue
 create mode 100644 src/pages/Order/Card/OrderSummary.vue
 create mode 100644 src/pages/Order/OrderList.vue
 create mode 100644 src/pages/Order/OrderMain.vue
 create mode 100644 src/router/modules/order.js

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 453b3ffe1..1345ec955 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -55,6 +55,10 @@ const $props = defineProps({
         description:
             'Esto se usa principalmente para permitir guardar sin hacer cambios (Útil para la feature de clonar ya que en este caso queremos poder guardar de primeras)',
     },
+    mapper: {
+        type: Function,
+        default: null,
+    }
 });
 
 const emit = defineEmits(['onFetch']);
@@ -83,6 +87,7 @@ onUnmounted(() => {
 
 const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
+const isResetting = ref(false);
 const hasChanges = ref(!$props.observeFormChanges);
 const originalData = ref({...$props.formInitialData});
 const formData = computed(() => state.get($props.model));
@@ -92,7 +97,10 @@ const startFormWatcher = () => {
     watch(
         () => formData.value,
         (val) => {
-            if (val) hasChanges.value = true;
+            if (!isResetting.value && val) {
+                hasChanges.value = true;
+            }
+            isResetting.value = false;
         },
         { deep: true }
     );
@@ -121,11 +129,12 @@ async function save() {
     isLoading.value = true;
 
     try {
+        const body = $props.mapper ? $props.mapper(formData.value) : formData.value
         if ($props.urlCreate) {
-            await axios.post($props.urlCreate, formData.value);
+            await axios.post($props.urlCreate, body);
             notify('globals.dataCreated', 'positive');
         } else {
-            await axios.patch($props.urlUpdate || $props.url, formData.value);
+            await axios.patch($props.urlUpdate || $props.url, body);
         }
     } catch (err) {
         notify('errors.create', 'negative');
@@ -143,6 +152,7 @@ function reset() {
     emit('onFetch', state.get($props.model));
     if ($props.observeFormChanges) {
         hasChanges.value = false;
+        isResetting.value = true;
     }
 }
 
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index c75761462..0849cebe5 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -31,7 +31,7 @@ const props = defineProps({
         default: null,
     },
     order: {
-        type: String,
+        type: [String, Array],
         default: '',
     },
     limit: {
@@ -149,7 +149,7 @@ async function onLoad(...params) {
             v-if="props.skeleton && props.autoLoad && !store.data"
             class="card-list q-gutter-y-md"
         >
-            <QCard class="card" v-for="$index in $props.limit" :key="$index">
+            <QCard class="card" v-for="$index in props.limit" :key="$index">
                 <QItem v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
                     <QItemSection class="q-pa-md">
                         <QSkeleton type="rect" class="q-mb-md" square />
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index fb603deca..05a2622f1 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -473,6 +473,55 @@ export default {
             recyclable: 'Recyclable',
         },
     },
+    order: {
+        pageTitles: {
+            order: 'Orders',
+            orderList: 'List',
+            create: 'Create',
+            summary: 'Summary',
+            basicData: 'Basic Data',
+        },
+        field: {
+            salesPersonFk: 'Sales Person',
+            clientFk: 'Client',
+            isConfirmed: 'Confirmed',
+            created: 'Created',
+            landed: 'Landed',
+            hour: 'Hour',
+            agency: 'Agency',
+            total: 'Total'
+        },
+        form: {
+            clientFk: 'Client',
+            addressFk: 'Address',
+            landed: 'Landed',
+            agencyModeFk: 'Agency',
+        },
+        list: {
+            newOrder: 'New Order'
+        },
+        summary: {
+            basket: 'Basket',
+            nickname: 'Nickname',
+            company: 'Company',
+            confirmed: 'Confirmed',
+            notConfirmed: 'Not confirmed',
+            created: 'Created',
+            landed: 'Landed',
+            phone: 'Phone',
+            createdFrom: 'Created From',
+            address: 'Address',
+            notes: 'Notes',
+            subtotal: 'Subtotal',
+            total: 'Total',
+            vat: 'VAT',
+            state: 'State',
+            alias: 'Alias',
+            items: 'Items',
+            orderTicketList: 'Order Ticket List',
+            details: 'Details',
+        }
+    },
     worker: {
         pageTitles: {
             workers: 'Workers',
diff --git a/src/pages/Order/Card/OrderBasicData.vue b/src/pages/Order/Card/OrderBasicData.vue
new file mode 100644
index 000000000..0611fa874
--- /dev/null
+++ b/src/pages/Order/Card/OrderBasicData.vue
@@ -0,0 +1,12 @@
+<script setup>
+import OrderForm from 'pages/Order/Card/OrderForm.vue';
+</script>
+<template>
+    <QToolbar>
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+    <OrderForm />
+</template>
+<style lang="scss" scoped></style>
diff --git a/src/pages/Order/Card/OrderCard.vue b/src/pages/Order/Card/OrderCard.vue
new file mode 100644
index 000000000..5a9a6452a
--- /dev/null
+++ b/src/pages/Order/Card/OrderCard.vue
@@ -0,0 +1,36 @@
+<script setup>
+import LeftMenu from 'components/LeftMenu.vue';
+import { useStateStore } from 'stores/useStateStore';
+import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
+import OrderDescriptor from "pages/Order/Card/OrderDescriptor.vue";
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+        <OrderSearchbar />
+    </Teleport>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <OrderDescriptor />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <div class="q-pa-md">
+                <RouterView></RouterView>
+            </div>
+        </QPage>
+    </QPageContainer>
+</template>
+
+<i18n>
+es:
+    Search claim: Buscar reclamación
+    You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
+    Details: Detalles
+    Notes: Notas
+    Action: Acción
+</i18n>
diff --git a/src/pages/Order/Card/OrderDescriptor.vue b/src/pages/Order/Card/OrderDescriptor.vue
new file mode 100644
index 000000000..3b6d91cb4
--- /dev/null
+++ b/src/pages/Order/Card/OrderDescriptor.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toCurrency, toDate } from 'src/filters';
+import { useState } from 'src/composables/useState';
+
+import useCardDescription from 'src/composables/useCardDescription';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import OrderDescriptorMenu from "pages/Order/Card/OrderDescriptorMenu.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const state = useState();
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const filter = {
+    include: [
+        { relation: 'agencyMode', scope: { fields: ['name'] } },
+        {
+            relation: 'address',
+            scope: { fields: ['nickname'] },
+        },
+        { relation: 'rows', scope: { fields: ['id'] } },
+        {
+            relation: 'client',
+            scope: {
+                fields: [
+                    'salesPersonFk',
+                    'name',
+                    'isActive',
+                    'isFreezed',
+                    'isTaxDataChecked',
+                ],
+                include: {
+                    relation: 'salesPersonUser',
+                    scope: { fields: ['id', 'name'] },
+                },
+            },
+        },
+    ],
+};
+
+const data = ref(useCardDescription());
+const setData = (entity) => {
+    if (!entity) return;
+    data.value = useCardDescription(entity.client.name, entity.id);
+    state.set('ClaimDescriptor', entity);
+};
+</script>
+
+<template>
+    <CardDescriptor
+        ref="descriptor"
+        :url="`Orders/${entityId}`"
+        :filter="filter"
+        module="Order"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        @on-fetch="setData"
+        data-key="orderData"
+    >
+        <template #menu="{ entity }">
+            <OrderDescriptorMenu :order="entity" />
+        </template>
+        <template #body="{ entity }">
+            <VnLv
+                :label="t('order.summary.state')"
+                :value="
+                    t(
+                        entity.isConfirmed
+                            ? 'order.summary.confirmed'
+                            : 'order.summary.notConfirmed'
+                    )
+                "
+            />
+            <VnLv :label="t('order.field.salesPersonFk')">
+                <template #value>
+                    <span class="link">
+                        {{ entity?.client?.salesPersonUser?.name || '-' }}
+                        <WorkerDescriptorProxy :id="entity?.client?.salesPersonFk" />
+                    </span>
+                </template>
+            </VnLv>
+            <VnLv :label="t('order.summary.landed')" :value="toDate(entity?.landed)" />
+            <VnLv :label="t('order.field.agency')" :value="entity?.agencyMode?.name" />
+            <VnLv :label="t('order.summary.alias')" :value="entity?.address?.nickname" />
+            <VnLv :label="t('order.summary.items')" :value="entity?.rows?.length || 0" />
+            <VnLv :label="t('order.summary.total')" :value="toCurrency(entity?.total)" />
+        </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <QBtn
+                    size="md"
+                    icon="vn:ticket"
+                    color="primary"
+                    :to="{
+                        name: 'TicketList',
+                        query: { params: JSON.stringify({ orderFk: entity.id }) },
+                    }"
+                >
+                    <QTooltip>{{ t('order.summary.orderTicketList') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="vn:client"
+                    color="primary"
+                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
+                >
+                    <QTooltip>{{ t('claim.card.customerSummary') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
diff --git a/src/pages/Order/Card/OrderDescriptorMenu.vue b/src/pages/Order/Card/OrderDescriptorMenu.vue
new file mode 100644
index 000000000..267c47c1d
--- /dev/null
+++ b/src/pages/Order/Card/OrderDescriptorMenu.vue
@@ -0,0 +1,65 @@
+<script setup>
+import axios from 'axios';
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+const $props = defineProps({
+    order: {
+        type: Object,
+        required: true,
+    },
+});
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+const order = ref($props.order);
+
+function confirmRemove() {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('confirmDeletion'),
+                message: t('confirmDeletionMessage'),
+                promise: remove,
+            },
+        })
+        .onOk(async () => await router.push({ name: 'OrderList' }));
+}
+
+async function remove() {
+    const id = order.value.id;
+    await axios.delete(`Orders/${id}`);
+    quasar.notify({
+        message: t('globals.dataDeleted'),
+        type: 'positive',
+    });
+}
+</script>
+<template>
+    <QItem @click="confirmRemove()" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="delete" />
+        </QItemSection>
+        <QItemSection>{{ t('deleteOrder') }}</QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+{
+    "en": {
+        "deleteOrder": "Delete order",
+        "confirmDeletion": "Confirm deletion",
+        "confirmDeletionMessage": "Are you sure you want to delete this order?"
+    },
+    "es": {
+        "deleteOrder": "Eliminar pedido",
+        "confirmDeletion": "Confirmar eliminación",
+        "confirmDeletionMessage": "Seguro que quieres eliminar este pedido?"
+    }
+}
+</i18n>
diff --git a/src/pages/Order/Card/OrderFilter.vue b/src/pages/Order/Card/OrderFilter.vue
new file mode 100644
index 000000000..60f087b98
--- /dev/null
+++ b/src/pages/Order/Card/OrderFilter.vue
@@ -0,0 +1,245 @@
+<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';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const workers = ref();
+const states = ref();
+
+// New
+const agencyFilter = { fields: ['id', 'name'] };
+const agencyList = ref(null);
+const salesPersonFilter = {
+    fields: ['id', 'nickname'],
+};
+const salesPersonList = ref(null);
+const sourceFilter = { fields: ['value'] };
+const sourceList = ref(null)
+</script>
+
+<template>
+    <FetchData
+        url="AgencyMode/isActive"
+        :filter="agencyFilter"
+        limit="30"
+        sort-by="name ASC"
+        auto-load
+        @on-fetch="(data) => (agencyList = data)"
+    />
+    <FetchData
+        url="Workers/search"
+        :filter="salesPersonFilter"
+        limit="30"
+        sort-by="nickname ASC"
+        @on-fetch="(data) => (salesPersonList = data)"
+        auto-load
+    />
+    <FetchData
+        url="Orders/getSourceValues"
+        :filter="sourceFilter"
+        limit="30"
+        sort-by="value ASC"
+        @on-fetch="(data) => (sourceList = data)"
+        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 }">
+            <QList dense>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('Customer ID')"
+                            v-model="params.clientFk"
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('Client Name')"
+                            v-model="params.clientName"
+                            lazy-rules
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <VnSelectFilter
+                            :label="t('Salesperson')"
+                            v-model="params.salesPersonFk"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <VnSelectFilter
+                            :label="t('Attender')"
+                            v-model="params.attenderFk"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <VnSelectFilter
+                            :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"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-md">
+                    <QItemSection v-if="!states">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="states">
+                        <VnSelectFilter
+                            :label="t('State')"
+                            v-model="params.claimStateFk"
+                            @update:model-value="searchFn()"
+                            :options="states"
+                            option-value="id"
+                            option-label="description"
+                            emit-value
+                            map-options
+                        />
+                    </QItemSection>
+                </QItem>
+                <QSeparator />
+                <QExpansionItem :label="t('More options')" expand-separator>
+                    <!-- <QItem>
+                        <QItemSection>
+                            <qSelect
+                                :label="t('Item')"
+                                v-model="params.itemFk"
+                                :options="items"
+                                :loading="loading"
+                                @filter="filterFn"
+                                @virtual-scroll="onScroll"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </QItemSection>
+                    </QItem> -->
+                    <QItem>
+                        <QItemSection>
+                            <QInput
+                                v-model="params.created"
+                                :label="t('Created')"
+                                autofocus
+                                readonly
+                            >
+                                <template #append>
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <QDate v-model="params.created">
+                                                <div class="row items-center justify-end">
+                                                    <QBtn
+                                                        v-close-popup
+                                                        :label="t('globals.close')"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
+                                </template>
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                </QExpansionItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        clientFk: Customer
+        clientName: Customer
+        salesPersonFk: Salesperson
+        attenderFk: Attender
+        claimResponsibleFk: Responsible
+        claimStateFk: State
+        created: Created
+es:
+    params:
+        search: Contiene
+        clientFk: Cliente
+        clientName: Cliente
+        salesPersonFk: Comercial
+        attenderFk: Asistente
+        claimResponsibleFk: Responsable
+        claimStateFk: Estado
+        created: Creada
+    Customer ID: ID cliente
+    Client Name: Nombre del cliente
+    Salesperson: Comercial
+    Attender: Asistente
+    Responsible: Responsable
+    State: Estado
+    Item: Artículo
+    Created: Creada
+    More options: Más opciones
+</i18n>
diff --git a/src/pages/Order/Card/OrderForm.vue b/src/pages/Order/Card/OrderForm.vue
new file mode 100644
index 000000000..4c7e2c326
--- /dev/null
+++ b/src/pages/Order/Card/OrderForm.vue
@@ -0,0 +1,209 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useState } from 'composables/useState';
+import FormModel from 'components/FormModel.vue';
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const state = useState();
+const ORDER_MODEL = 'order';
+
+const isNew = Boolean(!route.params.id);
+const initialFormState = reactive({
+    clientFk: null,
+    addressFk: null,
+    agencyModeFk: null,
+    landed: null,
+});
+const clientList = ref([]);
+const agencyList = ref([]);
+const addressList = ref([]);
+
+const fetchAddressList = async (addressId) => {
+    try {
+        const { data } = await axios.get('addresses', {
+            params: {
+                filter: JSON.stringify({
+                    fields: ['id', 'nickname', 'street', 'city'],
+                    where: { id: addressId },
+                }),
+            },
+        });
+        addressList.value = data;
+        //  Set address by default
+        if (addressList.value?.length === 1) {
+            state.get(ORDER_MODEL).addressFk = addressList.value[0].id;
+        }
+    } catch (err) {
+        console.error(`Error fetching addresses`, err);
+        return err.response;
+    }
+};
+const fetchAgencyList = async (landed, addressFk) => {
+    if (!landed || !addressFk) {
+        return;
+    }
+    try {
+        const { data } = await axios.get('Agencies/landsThatDay', {
+            params: {
+                addressFk,
+                landed: new Date(landed).toISOString(),
+            },
+        });
+        agencyList.value = data;
+    } catch (err) {
+        console.error(`Error fetching agencies`, err);
+        return err.response;
+    }
+};
+
+const fetchOrderDetails = (order) => {
+    fetchAddressList(order?.addressFk)
+    fetchAgencyList(order?.landed, order?.addressFk)
+};
+
+const orderMapper = (order) => {
+    return {
+        addressId: order.addressFk,
+        agencyModeId: order.agencyModeFk,
+        landed: new Date(order.landed).toISOString(),
+    };
+};
+const orderFilter = {
+    include: [
+        { relation: 'agencyMode', scope: { fields: ['name'] } },
+        {
+            relation: 'address',
+            scope: { fields: ['nickname'] },
+        },
+        { relation: 'rows', scope: { fields: ['id'] } },
+        {
+            relation: 'client',
+            scope: {
+                fields: [
+                    'salesPersonFk',
+                    'name',
+                    'isActive',
+                    'isFreezed',
+                    'isTaxDataChecked',
+                ],
+                include: {
+                    relation: 'salesPersonUser',
+                    scope: { fields: ['id', 'name'] },
+                },
+            },
+        },
+    ],
+};
+</script>
+
+<template>
+    <QToolbar>
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+    <FetchData
+        url="Clients"
+        @on-fetch="(data) => (clientList = data)"
+        :filter="{ fields: ['id', 'name', 'defaultAddressFk'] }"
+        auto-load
+    />
+    <FormModel
+        :url="!isNew ? `Orders/${route.params.id}` : null"
+        :url-create="isNew ? 'Orders/new' : null"
+        :model="ORDER_MODEL"
+        :form-initial-data="isNew ? initialFormState : null"
+        :observe-form-changes="!isNew"
+        :mapper="isNew ? orderMapper : null"
+        :filter="orderFilter"
+        @on-fetch="fetchOrderDetails"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('order.form.clientFk')"
+                        v-model="data.clientFk"
+                        :options="clientList"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        @update:model-value="
+                            (client) => fetchAddressList(client.defaultAddressFk)
+                        "
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ `${scope.opt.id}: ${scope.opt.name}` }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('order.form.addressFk')"
+                        v-model="data.addressFk"
+                        :options="addressList"
+                        option-value="id"
+                        option-label="nickname"
+                        hide-selected
+                        :disable="!addressList?.length"
+                        @update:model-value="
+                            () => fetchAgencyList(data.landed, data.addressFk)
+                        "
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{
+                                            `${scope.opt.nickname}: ${scope.opt.street},${scope.opt.city}`
+                                        }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInputDate
+                        placeholder="dd-mm-aaa"
+                        :label="t('order.form.landed')"
+                        v-model="data.landed"
+                        @update:model-value="
+                            () => fetchAgencyList(data.landed, data.addressFk)
+                        "
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('order.form.agencyModeFk')"
+                        v-model="data.agencyModeFk"
+                        :options="agencyList"
+                        option-value="agencyModeFk"
+                        option-label="agencyMode"
+                        hide-selected
+                        :disable="!agencyList?.length"
+                    >
+                    </VnSelectFilter>
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Order/Card/OrderSearchbar.vue b/src/pages/Order/Card/OrderSearchbar.vue
new file mode 100644
index 000000000..4d354603b
--- /dev/null
+++ b/src/pages/Order/Card/OrderSearchbar.vue
@@ -0,0 +1,25 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <VnSearchbar
+        data-key="OrderList"
+        url="Orders/filter"
+        :label="t('search-order')"
+        :info="t('search-order-info')"
+    />
+</template>
+
+<style scoped lang="scss"></style>
+<i18n>
+en:
+    search-order: Search order
+    search-order-info: You can search orders by reference
+es:
+    Search shelving: Buscar orden
+    You can search by shelving reference: Puedes buscar por referencia de la orden
+</i18n>
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
new file mode 100644
index 000000000..7902204ef
--- /dev/null
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -0,0 +1,161 @@
+<script setup>
+import {computed, ref} from 'vue';
+import { useRoute } from 'vue-router';
+import CardSummary from 'components/ui/CardSummary.vue';
+import { useI18n } from 'vue-i18n';
+import VnLv from 'components/ui/VnLv.vue';
+import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
+import { toCurrency, toDateHour } from 'src/filters';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+const detailsColumns = ref([
+    {
+        name: 'item',
+        label: t('claim.summary.item'),
+        field: (row) => row?.item?.id,
+        sortable: true,
+    },
+    {
+        name: 'description',
+        label: t('claim.summary.description'),
+        field: (row) => row?.item?.name,
+    },
+    {
+        name: 'quantity',
+        label: t('claim.summary.description'),
+        field: (row) => row?.quantity,
+    },
+    {
+        name: 'price',
+        label: t('claim.summary.description'),
+        field: (row) => toCurrency(row?.price),
+    },
+    {
+        name: 'amount',
+        label: t('claim.summary.description'),
+        field: (row) => toCurrency(row?.quantity * row?.price),
+    }
+])
+</script>
+
+<template>
+    <CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
+        <template #header="{ entity }">
+            {{ t('order.summary.basket') }} #{{ entity?.id }} -
+            {{ entity?.client?.name }} ({{ entity?.clientFk }})
+        </template>
+        <template #body="{ entity }">
+            <QCard class="vn-one">
+                <VnLv label="ID" :value="entity.id" />
+                <VnLv :label="t('order.summary.nickname')">
+                    <template #value>
+                        <span class="link">
+                            {{ entity?.address?.nickname || '-' }}
+                            <CustomerDescriptorProxy :id="entity?.clientFk" />
+                        </span>
+                    </template>
+                </VnLv>
+                <VnLv
+                    :label="t('order.summary.company')"
+                    :value="entity?.address?.companyFk"
+                />
+                <VnLv
+                    :label="t('order.summary.confirmed')"
+                    :value="entity?.isConfirmed === 1"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <VnLv
+                    :label="t('order.summary.created')"
+                    :value="toDateHour(entity?.created)"
+                />
+                <VnLv
+                    :label="t('order.summary.confirmed')"
+                    :value="toDateHour(entity?.confirmed)"
+                />
+                <VnLv
+                    :label="t('order.summary.landed')"
+                    :value="toDateHour(entity?.landed)"
+                />
+                <VnLv :label="t('order.summary.phone')">
+                    <template #value>
+                        {{ entity?.address?.phone || '-' }}
+                        <a :href="`tel:${entity?.address?.phone}`" class="text-primary">
+                            <QIcon name="phone" />
+                        </a>
+                    </template>
+                </VnLv>
+                <VnLv
+                    :label="t('order.summary.createdFrom')"
+                    :value="entity?.sourceApp"
+                />
+                <VnLv :label="t('order.summary.address')">
+                    <template #value>
+                        <span class="address">
+                            {{
+                                `${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`
+                            }}
+                        </span>
+                    </template>
+                </VnLv>
+            </QCard>
+            <QCard class="vn-one">
+                <p class="header">
+                    {{ t('order.summary.notes') }}
+                </p>
+                <p v-if="entity?.note" class="no-margin">
+                    {{ entity?.note }}
+                </p>
+            </QCard>
+            <QCard class="vn-one">
+                <VnLv>
+                    <template #label>
+                        <span class="text-h6">{{ t('order.summary.subtotal') }}</span>
+                    </template>
+                    <template #value>
+                        <span class="text-h6">{{ toCurrency(entity?.subTotal) }}</span>
+                    </template>
+                </VnLv>
+                <VnLv>
+                    <template #label>
+                        <span class="text-h6">{{ t('order.summary.vat') }}</span>
+                    </template>
+                    <template #value>
+                        <span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
+                    </template>
+                </VnLv>
+                <VnLv>
+                    <template #label>
+                        <span class="text-h6">{{ t('order.summary.total') }}</span>
+                    </template>
+                    <template #value>
+                        <span class="text-h6">{{ toCurrency(entity?.total) }}</span>
+                    </template>
+                </VnLv>
+            </QCard>
+            <QCard>
+                <p class="header">
+                    {{ t('order.summary.details') }}
+                </p>
+                <QTable :columns="detailsColumns" :rows="entity?.rows" flat hide-pagination>
+
+                </QTable>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+<style lang="scss" scoped>
+.address {
+    white-space: normal;
+}
+</style>
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
new file mode 100644
index 000000000..f7ff4b9e8
--- /dev/null
+++ b/src/pages/Order/OrderList.vue
@@ -0,0 +1,150 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency, toDate } from 'src/filters';
+import CardList from 'components/ui/CardList.vue';
+import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+
+onMounted(() => (stateStore.rightDrawer = false));
+// onMounted(() => (stateStore.rightDrawer = true));
+// onUnmounted(() => (stateStore.rightDrawer = false));
+
+function navigate(id) {
+    router.push({ path: `/order/${id}` });
+}
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <OrderSearchbar />
+        </Teleport>
+        <!--            <Teleport to="#actions-append">-->
+        <!--                <div class="row q-gutter-x-sm">-->
+        <!--                    <QBtn-->
+        <!--                        flat-->
+        <!--                        @click="stateStore.toggleRightDrawer()"-->
+        <!--                        round-->
+        <!--                        dense-->
+        <!--                        icon="menu"-->
+        <!--                    >-->
+        <!--                        <QTooltip bottom anchor="bottom right">-->
+        <!--                            {{ t('globals.collapseMenu') }}-->
+        <!--                        </QTooltip>-->
+        <!--                    </QBtn>-->
+        <!--                </div>-->
+        <!--            </Teleport>-->
+    </template>
+    <!--    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>-->
+    <!--        <QScrollArea class="fit text-grey-8">-->
+    <!--            <ShelvingFilter data-key="OrderList" />-->
+    <!--        </QScrollArea>-->
+    <!--    </QDrawer>-->
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="OrderList"
+                url="Orders/filter"
+                :limit="20"
+                :order="['landed DESC', 'clientFk', 'id DESC']"
+                :user-params="{ showEmpty: false }"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :id="row.id"
+                        :title="row.code"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('order.field.salesPersonFk')"
+                                :title-label="t('order.field.salesPersonFk')"
+                            >
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row?.name || '-' }}
+                                        <WorkerDescriptorProxy :id="row?.salesPersonFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('order.field.clientFk')"
+                                :title-label="t('order.field.clientFk')"
+                            >
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row?.clientName || '-' }}
+                                        <CustomerDescriptorProxy :id="row?.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('order.field.isConfirmed')"
+                                :value="row?.isConfirmed === 1"
+                            />
+                            <VnLv
+                                :label="t('order.field.created')"
+                                :value="toDate(row?.created)"
+                            />
+                            <VnLv :label="t('order.field.landed')">
+                                <template #value>
+                                    <QBadge color="positive" dense>
+                                        {{ toDate(row?.landed) }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('order.field.hour')"
+                                :value="row.hourTheoretical || row.hourEffective"
+                            />
+                            <VnLv
+                                :label="t('order.field.agency')"
+                                :value="row?.agencyName"
+                            />
+                            <VnLv
+                                :label="t('order.field.total')"
+                                :value="toCurrency(row?.total)"
+                            />
+                        </template>
+                        <!--                        <template #actions>-->
+                        <!--                            <QBtn-->
+                        <!--                                :label="t('components.smartCard.openSummary')"-->
+                        <!--                                @click.stop="viewSummary(row.id)"-->
+                        <!--                                color="primary"-->
+                        <!--                                style="margin-top: 15px"-->
+                        <!--                            />-->
+                        <!--                        </template>-->
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky :offset="[20, 20]">
+            <RouterLink :to="{ name: 'OrderCreate' }">
+                <QBtn fab icon="add" color="primary" />
+                <QTooltip>
+                    {{ t('order.list.newOrder') }}
+                </QTooltip>
+            </RouterLink>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
diff --git a/src/pages/Order/OrderMain.vue b/src/pages/Order/OrderMain.vue
new file mode 100644
index 000000000..66ce78f23
--- /dev/null
+++ b/src/pages/Order/OrderMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 156f0d104..72d53af81 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -8,6 +8,7 @@ import Wagon from './wagon';
 import Route from './route';
 import Supplier from './Supplier';
 import Travel from './travel';
+import Order from './order';
 
 export default [
     Customer,
@@ -20,4 +21,5 @@ export default [
     Route,
     Supplier,
     Travel,
+    Order,
 ];
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 000000000..ffbc1665e
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,69 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/order',
+    name: 'Order',
+    meta: {
+        title: 'order',
+        icon: 'vn:basket',
+    },
+    component: RouterView,
+    redirect: { name: 'OrderMain' },
+    menus: {
+        main: ['OrderList'],
+        card: ['OrderBasicData'],
+    },
+    children: [
+        {
+            path: '',
+            name: 'OrderMain',
+            component: () => import('src/pages/Order/OrderMain.vue'),
+            redirect: { name: 'OrderList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'OrderList',
+                    meta: {
+                        title: 'orderList',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Order/OrderList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'OrderCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Order/Card/OrderForm.vue'),
+                },
+            ],
+        },
+        {
+            name: 'OrderCard',
+            path: ':id',
+            component: () => import('src/pages/Order/Card/OrderCard.vue'),
+            redirect: { name: 'OrderSummary' },
+            children: [
+                {
+                    name: 'OrderSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'launch',
+                    },
+                    component: () => import('src/pages/Order/Card/OrderSummary.vue'),
+                },
+                {
+                    name: 'OrderBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('src/pages/Order/Card/OrderForm.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index 25d605af8..9582b8d97 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -8,6 +8,7 @@ import supplier from './modules/Supplier';
 import route from './modules/route';
 import travel from './modules/travel';
 import shelving from 'src/router/modules/shelving';
+import order from "src/router/modules/order";
 
 const routes = [
     {
@@ -54,6 +55,7 @@ const routes = [
             shelving,
             invoiceOut,
             wagon,
+            order,
             route,
             supplier,
             travel,
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index b4882c685..41ba43940 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -13,6 +13,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'invoiceOut',
         'worker',
         'shelving',
+        'order',
         'wagon',
         'route',
         'supplier',

From 17dd42dd5c6506b9ca033921e3443c2e5899eb2b Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Thu, 14 Dec 2023 21:53:47 -0400
Subject: [PATCH 02/10] Create order filter

---
 src/components/FetchData.vue         |   6 +-
 src/pages/Order/Card/OrderFilter.vue | 275 +++++++++++++--------------
 src/pages/Order/OrderList.vue        |  50 ++---
 3 files changed, 165 insertions(+), 166 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index f0d908972..b8e7c2ac3 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -27,6 +27,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    params: {
+        type: Object,
+        default: null,
+    }
 });
 
 const emit = defineEmits(['onFetch']);
@@ -46,7 +50,7 @@ async function fetch() {
         if ($props.limit) filter.limit = $props.limit;
 
         const { data } = await axios.get($props.url, {
-            params: { filter: JSON.stringify(filter) },
+            params: { filter: JSON.stringify(filter), ...$props.params },
         });
 
         emit('onFetch', data);
diff --git a/src/pages/Order/Card/OrderFilter.vue b/src/pages/Order/Card/OrderFilter.vue
index 60f087b98..0d12f31da 100644
--- a/src/pages/Order/Card/OrderFilter.vue
+++ b/src/pages/Order/Card/OrderFilter.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const props = defineProps({
@@ -13,10 +14,6 @@ const props = defineProps({
     },
 });
 
-const workers = ref();
-const states = ref();
-
-// New
 const agencyFilter = { fields: ['id', 'name'] };
 const agencyList = ref(null);
 const salesPersonFilter = {
@@ -24,12 +21,12 @@ const salesPersonFilter = {
 };
 const salesPersonList = ref(null);
 const sourceFilter = { fields: ['value'] };
-const sourceList = ref(null)
+const sourceList = ref(null);
 </script>
 
 <template>
     <FetchData
-        url="AgencyMode/isActive"
+        url="AgencyModes/isActive"
         :filter="agencyFilter"
         limit="30"
         sort-by="name ASC"
@@ -42,6 +39,7 @@ const sourceList = ref(null)
         limit="30"
         sort-by="nickname ASC"
         @on-fetch="(data) => (salesPersonList = data)"
+        :params="{ departmentCodes: ['VT'] }"
         auto-load
     />
     <FetchData
@@ -59,12 +57,12 @@ const sourceList = ref(null)
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params, searchFn }">
+        <template #body="{ params }">
             <QList dense>
                 <QItem>
                     <QItemSection>
                         <QInput
-                            :label="t('Customer ID')"
+                            :label="t('customerId')"
                             v-model="params.clientFk"
                             lazy-rules
                         >
@@ -74,139 +72,119 @@ const sourceList = ref(null)
                         </QInput>
                     </QItemSection>
                 </QItem>
+                <QItem>
+                    <QItemSection v-if="agencyList">
+                        <VnSelectFilter
+                            :label="t('agency')"
+                            v-model="params.agencyModeFk"
+                            :options="agencyList"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                    <QItemSection v-else>
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="salesPersonList">
+                        <VnSelectFilter
+                            :label="t('salesPerson')"
+                            v-model="params.workerFk"
+                            :options="salesPersonList"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                            <template #option="{ itemProps, opt }">
+                                <QItem v-bind="itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ opt.name }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            {{ opt.nickname }},{{ opt.code }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </QItemSection>
+                    <QItemSection v-else>
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.from"
+                            :label="t('fromLanded')" />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.to"
+                            :label="t('toLanded')" />
+                    </QItemSection>
+                </QItem>
                 <QItem>
                     <QItemSection>
                         <QInput
-                            :label="t('Client Name')"
-                            v-model="params.clientName"
+                            :label="t('orderId')"
+                            v-model="params.orderFk"
                             lazy-rules
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
+                    <QItemSection v-if="sourceList">
                         <VnSelectFilter
-                            :label="t('Salesperson')"
-                            v-model="params.salesPersonFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
+                            :label="t('application')"
+                            v-model="params.sourceApp"
+                            :options="sourceList"
+                            option-label="value"
                             emit-value
                             map-options
                             use-input
                             :input-debounce="0"
                         />
                     </QItemSection>
+                    <QItemSection v-else>
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QCheckbox
+                            v-model="params.myTeam"
+                            :label="t('myTeam')"
+                            toggle-indeterminate
+                        />
+                    </QItemSection>
                 </QItem>
                 <QItem>
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <VnSelectFilter
-                            :label="t('Attender')"
-                            v-model="params.attenderFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
+                    <QItemSection>
+                        <QCheckbox
+                            v-model="params.isConfirmed"
+                            :label="t('isConfirmed')"
+                            toggle-indeterminate
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <VnSelectFilter
-                            :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"
+                    <QItemSection>
+                        <QCheckbox
+                            v-model="params.showEmpty"
+                            :label="t('showEmpty')"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
-                    <QItemSection v-if="!states">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="states">
-                        <VnSelectFilter
-                            :label="t('State')"
-                            v-model="params.claimStateFk"
-                            @update:model-value="searchFn()"
-                            :options="states"
-                            option-value="id"
-                            option-label="description"
-                            emit-value
-                            map-options
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QExpansionItem :label="t('More options')" expand-separator>
-                    <!-- <QItem>
-                        <QItemSection>
-                            <qSelect
-                                :label="t('Item')"
-                                v-model="params.itemFk"
-                                :options="items"
-                                :loading="loading"
-                                @filter="filterFn"
-                                @virtual-scroll="onScroll"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </QItemSection>
-                    </QItem> -->
-                    <QItem>
-                        <QItemSection>
-                            <QInput
-                                v-model="params.created"
-                                :label="t('Created')"
-                                autofocus
-                                readonly
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.created">
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        :label="t('globals.close')"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
             </QList>
         </template>
     </VnFilterPanel>
@@ -215,31 +193,48 @@ const sourceList = ref(null)
 <i18n>
 en:
     params:
-        search: Contains
-        clientFk: Customer
-        clientName: Customer
-        salesPersonFk: Salesperson
-        attenderFk: Attender
-        claimResponsibleFk: Responsible
-        claimStateFk: State
-        created: Created
+        search: Includes
+        clientFk: Client
+        agencyModeFk: Agency
+        salesPersonFk: Sales Person
+        from: From
+        to: To
+        orderFk: Order
+        sourceApp: Application
+        myTeam: My Team
+        isConfirmed: Is Confirmed
+        showEmpty: Show Empty
+    customerId: Customer ID
+    agency: Agency
+    salesPerson: Sales Person
+    fromLanded: From Landed
+    toLanded: To Landed
+    orderId: Order ID
+    application: Application
+    myTeam: My Team
+    isConfirmed: Order Confirmed
+    showEmpty: Show Empty
 es:
     params:
-        search: Contiene
+        search: Búsqueda
         clientFk: Cliente
-        clientName: Cliente
+        agencyModeFk: Agencia
         salesPersonFk: Comercial
-        attenderFk: Asistente
-        claimResponsibleFk: Responsable
-        claimStateFk: Estado
-        created: Creada
-    Customer ID: ID cliente
-    Client Name: Nombre del cliente
-    Salesperson: Comercial
-    Attender: Asistente
-    Responsible: Responsable
-    State: Estado
-    Item: Artículo
-    Created: Creada
-    More options: Más opciones
+        from: Desde
+        to: Hasta
+        orderFk: Cesta
+        sourceApp: Aplicación
+        myTeam: Mi Equipo
+        isConfirmed: Confirmado
+        showEmpty: Mostrar vacías
+    customerId: ID Cliente
+    agency: Agencia
+    salesPerson: Comercial
+    fromLanded: Desde F. entrega
+    toLanded: Hasta F. entrega
+    orderId: ID Cesta
+    application: Aplicación
+    myTeam: Mi Equipo
+    isConfirmed: Confirmado
+    showEmpty: Mostrar vacías
 </i18n>
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index f7ff4b9e8..28f0c3f1d 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { onMounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency, toDate } from 'src/filters';
@@ -10,14 +10,14 @@ import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
+import OrderFilter from "pages/Order/Card/OrderFilter.vue";
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 
-onMounted(() => (stateStore.rightDrawer = false));
-// onMounted(() => (stateStore.rightDrawer = true));
-// onUnmounted(() => (stateStore.rightDrawer = false));
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => (stateStore.rightDrawer = false));
 
 function navigate(id) {
     router.push({ path: `/order/${id}` });
@@ -29,27 +29,27 @@ function navigate(id) {
         <Teleport to="#searchbar">
             <OrderSearchbar />
         </Teleport>
-        <!--            <Teleport to="#actions-append">-->
-        <!--                <div class="row q-gutter-x-sm">-->
-        <!--                    <QBtn-->
-        <!--                        flat-->
-        <!--                        @click="stateStore.toggleRightDrawer()"-->
-        <!--                        round-->
-        <!--                        dense-->
-        <!--                        icon="menu"-->
-        <!--                    >-->
-        <!--                        <QTooltip bottom anchor="bottom right">-->
-        <!--                            {{ t('globals.collapseMenu') }}-->
-        <!--                        </QTooltip>-->
-        <!--                    </QBtn>-->
-        <!--                </div>-->
-        <!--            </Teleport>-->
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
     </template>
-    <!--    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>-->
-    <!--        <QScrollArea class="fit text-grey-8">-->
-    <!--            <ShelvingFilter data-key="OrderList" />-->
-    <!--        </QScrollArea>-->
-    <!--    </QDrawer>-->
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <OrderFilter data-key="OrderList" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="card-list">
             <VnPaginate
@@ -65,7 +65,7 @@ function navigate(id) {
                         v-for="row of rows"
                         :key="row.id"
                         :id="row.id"
-                        :title="row.code"
+                        :title="`${row?.clientName} (${row?.clientFk})`"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>

From 0509c1500112cb6794478192e345eefa4ebd716c Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Thu, 14 Dec 2023 21:57:53 -0400
Subject: [PATCH 03/10] Create order summary

---
 src/pages/Order/Card/OrderSummaryDialog.vue | 29 ++++++++++++++++++++
 src/pages/Order/OrderList.vue               | 30 ++++++++++++++-------
 2 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/Order/Card/OrderSummaryDialog.vue

diff --git a/src/pages/Order/Card/OrderSummaryDialog.vue b/src/pages/Order/Card/OrderSummaryDialog.vue
new file mode 100644
index 000000000..ebe891f4a
--- /dev/null
+++ b/src/pages/Order/Card/OrderSummaryDialog.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import OrderSummary from "pages/Order/Card/OrderSummary.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <OrderSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index 28f0c3f1d..362a68b4d 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -4,15 +4,18 @@ import { onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency, toDate } from 'src/filters';
+import {useQuasar} from "quasar";
 import CardList from 'components/ui/CardList.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
-import OrderFilter from "pages/Order/Card/OrderFilter.vue";
+import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
+import OrderSummaryDialog from "pages/Order/Card/OrderSummaryDialog.vue";
 
 const stateStore = useStateStore();
+const quasar = useQuasar();
 const router = useRouter();
 const { t } = useI18n();
 
@@ -22,6 +25,15 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 function navigate(id) {
     router.push({ path: `/order/${id}` });
 }
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: OrderSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>
 
 <template>
@@ -119,14 +131,14 @@ function navigate(id) {
                                 :value="toCurrency(row?.total)"
                             />
                         </template>
-                        <!--                        <template #actions>-->
-                        <!--                            <QBtn-->
-                        <!--                                :label="t('components.smartCard.openSummary')"-->
-                        <!--                                @click.stop="viewSummary(row.id)"-->
-                        <!--                                color="primary"-->
-                        <!--                                style="margin-top: 15px"-->
-                        <!--                            />-->
-                        <!--                        </template>-->
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
                     </CardList>
                 </template>
             </VnPaginate>

From a65db2f4cf49deb0314ee0c7f6d643a4b0b8b775 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Tue, 19 Dec 2023 09:15:54 -0400
Subject: [PATCH 04/10] Create order catalog section

---
 src/i18n/en/index.js                          |   1 +
 src/pages/Order/Card/OrderCard.vue            |   6 +-
 src/pages/Order/Card/OrderCatalogItem.vue     | 182 ++++++++++++++++++
 .../Order/Card/OrderCatalogItemDialog.vue     |  83 ++++++++
 src/pages/Order/Card/OrderSummary.vue         |  20 +-
 src/pages/Order/OrderCatalog.vue              |  81 ++++++++
 src/router/modules/order.js                   |  11 +-
 7 files changed, 373 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/Order/Card/OrderCatalogItem.vue
 create mode 100644 src/pages/Order/Card/OrderCatalogItemDialog.vue
 create mode 100644 src/pages/Order/OrderCatalog.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 21cb2ea74..752314813 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -555,6 +555,7 @@ export default {
             create: 'Create',
             summary: 'Summary',
             basicData: 'Basic Data',
+            catalog: 'Catalog',
         },
         field: {
             salesPersonFk: 'Sales Person',
diff --git a/src/pages/Order/Card/OrderCard.vue b/src/pages/Order/Card/OrderCard.vue
index 5a9a6452a..f6288207d 100644
--- a/src/pages/Order/Card/OrderCard.vue
+++ b/src/pages/Order/Card/OrderCard.vue
@@ -1,15 +1,11 @@
 <script setup>
 import LeftMenu from 'components/LeftMenu.vue';
 import { useStateStore } from 'stores/useStateStore';
-import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
-import OrderDescriptor from "pages/Order/Card/OrderDescriptor.vue";
+import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
 
 const stateStore = useStateStore();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <OrderSearchbar />
-    </Teleport>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit">
             <OrderDescriptor />
diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
new file mode 100644
index 000000000..d187df8ce
--- /dev/null
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -0,0 +1,182 @@
+<script setup>
+import { useSession } from 'composables/useSession';
+import VnLv from 'components/ui/VnLv.vue';
+import { useI18n } from 'vue-i18n';
+import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
+import toCurrency from '../../../filters/toCurrency';
+import { ref } from 'vue';
+
+const session = useSession();
+const token = session.getToken();
+const { t } = useI18n();
+
+defineProps({
+    item: {
+        type: Object,
+        required: true,
+    },
+});
+
+const dialog = ref(null);
+</script>
+
+<template>
+    <div class="container order-catalog-item overflow-hidden">
+        <div class="card shadow-6 bg-dark">
+            <div class="img-wrapper">
+                <QImg
+                    :src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`"
+                    spinner-color="primary"
+                    :ratio="1"
+                    height="192"
+                    width="192"
+                    class="image"
+                />
+                <div v-if="item.hex" class="item-color-container">
+                    <div
+                        class="item-color"
+                        :style="{ backgroundColor: `#${item.hex}` }"
+                    ></div>
+                </div>
+            </div>
+            <div class="content">
+                <span class="link">{{ item.name }}</span>
+                <p class="subName">{{ item.subName }}</p>
+                <template v-for="index in 4" :key="`tag-${index}`">
+                    <VnLv
+                        v-if="item?.[`tag${index + 4}`]"
+                        :label="item?.[`tag${index + 4}`] + ':'"
+                        :value="item?.[`value${index + 4}`]"
+                    />
+                </template>
+                <QRating
+                    :model-value="item.stars"
+                    icon="star"
+                    icon-selected="star"
+                    color="primary"
+                    readonly
+                />
+                <div class="footer">
+                    <div class="price">
+                        <p>{{ item.available }} to {{ item.price }}</p>
+                        <QIcon name="add_circle" class="icon">
+                            <QTooltip>{{ t('globals.add') }}</QTooltip>
+                            <QPopupProxy ref="dialog">
+                                <OrderCatalogItemDialog
+                                    :prices="item.prices"
+                                    @added="() => dialog.hide()"
+                                />
+                            </QPopupProxy>
+                        </QIcon>
+                    </div>
+                    <p v-if="item.priceKg" class="price-kg">
+                        {{ t('price-kg') }} {{ toCurrency(item.priceKg) || 1123 }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+.order-catalog-item {
+    .vn-label-value {
+        display: flex;
+        gap: 4px;
+        font-size: 11px;
+
+        .label {
+            color: var(--vn-label);
+        }
+
+        .value {
+            color: var(--vn-text);
+        }
+    }
+}
+</style>
+<style lang="scss" scoped>
+.container {
+    max-width: 448px;
+    width: 100%;
+}
+
+.card {
+    display: flex;
+    height: 100%;
+    max-height: 192px;
+}
+
+.card > * {
+    flex: 1;
+}
+
+.img-wrapper {
+    position: relative;
+    max-width: 192px;
+}
+
+.content {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .subName {
+        color: var(--vn-label);
+        text-transform: uppercase;
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+}
+
+.footer {
+    .price {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        p {
+            font-size: 12px;
+        }
+
+        .icon {
+            color: $primary;
+            font-size: 24px;
+            cursor: pointer;
+        }
+    }
+
+    .price-kg {
+        font-size: 12px;
+    }
+}
+
+.item-color-container {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    background: linear-gradient($dark, $primary);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    padding: 4px;
+
+    .item-color {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+    }
+}
+</style>
+<i18n>
+es:
+    price-kg: Precio por Kg
+en:
+    price-kg: Price per Kg
+</i18n>
diff --git a/src/pages/Order/Card/OrderCatalogItemDialog.vue b/src/pages/Order/Card/OrderCatalogItemDialog.vue
new file mode 100644
index 000000000..8d12824e6
--- /dev/null
+++ b/src/pages/Order/Card/OrderCatalogItemDialog.vue
@@ -0,0 +1,83 @@
+<script setup>
+import toCurrency from '../../../filters/toCurrency';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useRoute } from 'vue-router';
+import useNotify from 'composables/useNotify';
+
+const { t } = useI18n();
+const route = useRoute();
+const { notify } = useNotify();
+const props = defineProps({
+    prices: {
+        type: Array,
+        required: true,
+    },
+});
+
+const emit = defineEmits(['added']);
+
+const fields = ref((props.prices || []).map((item) => ({ ...item, quantity: 0 })));
+
+const addToOrder = async () => {
+    const items = (fields.value || []).filter((item) => Number(item.quantity) > 0);
+    await axios.post('/OrderRows/addToOrder', {
+        items,
+        orderFk: Number(route.params.id),
+    });
+    notify(t('globals.dataSaved'), 'positive');
+    emit('added');
+};
+</script>
+
+<template>
+    <div class="container order-catalog-item q-pb-md">
+        <QForm @submit.prevent="addToOrder">
+            <QMarkupTable class="shadow-0">
+                <tbody>
+                    <tr v-for="item in fields" :key="item.warehouse">
+                        <td class="text-bold q-py-lg">
+                            {{ item.warehouse }}
+                        </td>
+                        <td class="text-right">
+                            <span
+                                class="link"
+                                @click="
+                                    () => {
+                                        item.quantity =
+                                            Number(item.quantity) + item.grouping;
+                                    }
+                                "
+                            >
+                                {{ item.grouping }}
+                            </span>
+                            x {{ toCurrency(item.price) }}
+                        </td>
+                        <td class="text-right">
+                            <QInput
+                                v-model="item.quantity"
+                                type="number"
+                                :step="item.grouping"
+                                min="0"
+                                dense
+                            />
+                        </td>
+                    </tr>
+                </tbody>
+            </QMarkupTable>
+            <div class="flex justify-center q-mt-lg">
+                <QBtn color="primary" type="submit">
+                    {{ t('globals.add') }}
+                </QBtn>
+            </div>
+        </QForm>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+    max-width: 448px;
+    width: 100%;
+}
+</style>
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index 7902204ef..d3ecc7984 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -1,14 +1,17 @@
 <script setup>
-import {computed, ref} from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import CardSummary from 'components/ui/CardSummary.vue';
 import { useI18n } from 'vue-i18n';
 import VnLv from 'components/ui/VnLv.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import { toCurrency, toDateHour } from 'src/filters';
+import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
+import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
 const route = useRoute();
+const stateStore = useStateStore();
 
 const $props = defineProps({
     id: {
@@ -44,11 +47,14 @@ const detailsColumns = ref([
         name: 'amount',
         label: t('claim.summary.description'),
         field: (row) => toCurrency(row?.quantity * row?.price),
-    }
-])
+    },
+]);
 </script>
 
 <template>
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+        <OrderSearchbar />
+    </Teleport>
     <CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
         <template #header="{ entity }">
             {{ t('order.summary.basket') }} #{{ entity?.id }} -
@@ -147,8 +153,12 @@ const detailsColumns = ref([
                 <p class="header">
                     {{ t('order.summary.details') }}
                 </p>
-                <QTable :columns="detailsColumns" :rows="entity?.rows" flat hide-pagination>
-
+                <QTable
+                    :columns="detailsColumns"
+                    :rows="entity?.rows"
+                    flat
+                    hide-pagination
+                >
                 </QTable>
             </QCard>
         </template>
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
new file mode 100644
index 000000000..c4fec45a4
--- /dev/null
+++ b/src/pages/Order/OrderCatalog.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import { useRoute } from 'vue-router';
+import { onMounted, onUnmounted } from 'vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue';
+import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
+import { useI18n } from 'vue-i18n';
+
+const route = useRoute();
+const stateStore = useStateStore();
+const { t } = useI18n();
+
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => (stateStore.rightDrawer = false));
+
+const catalogParams = {
+    orderFk: route.params.id,
+    orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
+};
+</script>
+
+<template>
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+        <OrderSearchbar
+            data-key="OrderCatalogList"
+            url="Orders/CatalogFilter"
+            :limit="50"
+            :user-params="catalogParams"
+        />
+    </Teleport>
+    <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
+        <div class="row q-gutter-x-sm">
+            <QBtn
+                flat
+                @click.stop="stateStore.toggleRightDrawer()"
+                round
+                dense
+                icon="menu"
+            >
+                <QTooltip bottom anchor="bottom right">
+                    {{ t('globals.collapseMenu') }}
+                </QTooltip>
+            </QBtn>
+        </div>
+    </Teleport>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8"></QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="OrderCatalogList"
+                url="Orders/CatalogFilter"
+                :limit="50"
+                :user-params="catalogParams"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <div class="catalog-list">
+                        <OrderCatalogItem v-for="row in rows" :key="row.id" :item="row" />
+                    </div>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+
+<style lang="scss">
+.card-list {
+    width: 100%;
+}
+
+.catalog-list {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 16px;
+}
+</style>
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
index ffbc1665e..e91e95493 100644
--- a/src/router/modules/order.js
+++ b/src/router/modules/order.js
@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'OrderMain' },
     menus: {
         main: ['OrderList'],
-        card: ['OrderBasicData'],
+        card: ['OrderBasicData', 'OrderCatalog'],
     },
     children: [
         {
@@ -63,6 +63,15 @@ export default {
                     },
                     component: () => import('src/pages/Order/Card/OrderForm.vue'),
                 },
+                {
+                    name: 'OrderCatalog',
+                    path: 'catalog',
+                    meta: {
+                        title: 'catalog',
+                        icon: 'vn:basket',
+                    },
+                    component: () => import('src/pages/Order/OrderCatalog.vue'),
+                },
             ],
         },
     ],

From 612fe9d605bc26d783550a32e63ad8814b160f77 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Tue, 19 Dec 2023 09:58:18 -0400
Subject: [PATCH 05/10] Add translation

---
 src/i18n/en/index.js                  |  5 +++
 src/i18n/es/index.js                  | 55 +++++++++++++++++++++++++++
 src/pages/Order/Card/OrderSummary.vue | 18 ++++-----
 3 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 752314813..c9bcce645 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -596,6 +596,11 @@ export default {
             items: 'Items',
             orderTicketList: 'Order Ticket List',
             details: 'Details',
+            item: 'Item',
+            description: 'Description',
+            quantity: 'Quantity',
+            price: 'Price',
+            amount: 'Amount'
         }
     },
     worker: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index eacca664f..45c01aca8 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -457,6 +457,61 @@ export default {
             },
         },
     },
+    order: {
+        pageTitles: {
+            order: 'Cesta',
+            orderList: 'Listado',
+            create: 'Crear',
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            catalog: 'Catálogo',
+        },
+        field: {
+            salesPersonFk: 'Comercial',
+            clientFk: 'Cliente',
+            isConfirmed: 'Confirmada',
+            created: 'Creado',
+            landed: 'F. entrega',
+            hour: 'Hora',
+            agency: 'Agencia',
+            total: 'Total'
+        },
+        form: {
+            clientFk: 'Cliente',
+            addressFk: 'Dirección',
+            landed: 'F. entrega',
+            agencyModeFk: 'Agencia',
+        },
+        list: {
+            newOrder: 'Nuevo Pedido'
+        },
+        summary: {
+            basket: 'Cesta',
+            nickname: 'Alias',
+            company: 'Empresa',
+            confirmed: 'Confirmada',
+            notConfirmed: 'No confirmada',
+            created: 'Creado',
+            landed: 'F. entrega',
+            phone: 'Teléfono',
+            createdFrom: 'Creado desde',
+            address: 'Dirección',
+            notes: 'Notas',
+            subtotal: 'Subtotal',
+            total: 'Total',
+            vat: 'IVA',
+            state: 'Estado',
+            alias: 'Alias',
+            items: 'Items',
+            orderTicketList: 'Tickets del pedido',
+            details: 'Detalles',
+            item: 'Item',
+            description: 'Descripción',
+            quantity: 'Cantidad',
+            price: 'Precio',
+            amount: 'Monto'
+        }
+    },
     shelving: {
         pageTitles: {
             shelving: 'Carros',
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index d3ecc7984..8d91ac789 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -24,28 +24,28 @@ const entityId = computed(() => $props.id || route.params.id);
 const detailsColumns = ref([
     {
         name: 'item',
-        label: t('claim.summary.item'),
+        label: t('order.summary.item'),
         field: (row) => row?.item?.id,
         sortable: true,
     },
     {
-        name: 'description',
-        label: t('claim.summary.description'),
+        name: t('order.summary.description'),
+        label: t('order.summary.description'),
         field: (row) => row?.item?.name,
     },
     {
-        name: 'quantity',
-        label: t('claim.summary.description'),
+        name: t('order.summary.quantity'),
+        label: t('order.summary.quantity'),
         field: (row) => row?.quantity,
     },
     {
-        name: 'price',
-        label: t('claim.summary.description'),
+        name: t('order.summary.price'),
+        label: t('order.summary.price'),
         field: (row) => toCurrency(row?.price),
     },
     {
-        name: 'amount',
-        label: t('claim.summary.description'),
+        name: t('order.summary.amount'),
+        label: t('order.summary.amount'),
         field: (row) => toCurrency(row?.quantity * row?.price),
     },
 ]);

From 827a3a4e5a061ff107a1e7972c33759f6f178131 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Tue, 19 Dec 2023 12:45:11 -0400
Subject: [PATCH 06/10] Update order summary

---
 src/pages/Order/Card/OrderSummary.vue | 82 ++++++++++++++++++++++++---
 1 file changed, 73 insertions(+), 9 deletions(-)

diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index 8d91ac789..0d10110eb 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -1,13 +1,14 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import CardSummary from 'components/ui/CardSummary.vue';
 import { useI18n } from 'vue-i18n';
-import VnLv from 'components/ui/VnLv.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
-import { toCurrency, toDateHour } from 'src/filters';
-import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
+import { toCurrency, toDateHour } from 'src/filters';
+import VnLv from 'components/ui/VnLv.vue';
+import CardSummary from 'components/ui/CardSummary.vue';
+import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
+import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -29,22 +30,22 @@ const detailsColumns = ref([
         sortable: true,
     },
     {
-        name: t('order.summary.description'),
+        name: 'description',
         label: t('order.summary.description'),
         field: (row) => row?.item?.name,
     },
     {
-        name: t('order.summary.quantity'),
+        name: 'quantity',
         label: t('order.summary.quantity'),
         field: (row) => row?.quantity,
     },
     {
-        name: t('order.summary.price'),
+        name: 'price',
         label: t('order.summary.price'),
         field: (row) => toCurrency(row?.price),
     },
     {
-        name: t('order.summary.amount'),
+        name: 'amount',
         label: t('order.summary.amount'),
         field: (row) => toCurrency(row?.quantity * row?.price),
     },
@@ -159,6 +160,40 @@ const detailsColumns = ref([
                     flat
                     hide-pagination
                 >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh auto-width>{{ t('order.summary.item') }}</QTh>
+                            <QTh>{{ t('order.summary.description') }}</QTh>
+                            <QTh auto-width>{{ t('order.summary.quantity') }}</QTh>
+                            <QTh auto-width>{{ t('order.summary.price') }}</QTh>
+                            <QTh auto-width>{{ t('order.summary.amount') }}</QTh>
+                        </QTr>
+                    </template>
+                    <template #body="props">
+                        <QTr :props="props">
+                            <QTd key="item" :props="props" class="item">
+                                {{ props.row.item?.id }}
+                            </QTd>
+                            <QTd key="description" :props="props" class="description">
+                                <div class="name">
+                                    <span>{{ props.row.item.name }}</span>
+                                    <span v-if="props.row.item.subName" class="subName">
+                                        {{ props.row.item.subName }}
+                                    </span>
+                                </div>
+                                <fetched-tags :item="props.row.item" :max-length="5" />
+                            </QTd>
+                            <QTd key="quantity" :props="props">
+                                {{ props.row.quantity }}
+                            </QTd>
+                            <QTd key="price" :props="props">
+                                {{ props.row.price }}
+                            </QTd>
+                            <QTd key="amount" :props="props">
+                                {{ toCurrency(props.row?.quantity * props.row?.price) }}
+                            </QTd>
+                        </QTr>
+                    </template>
                 </QTable>
             </QCard>
         </template>
@@ -168,4 +203,33 @@ const detailsColumns = ref([
 .address {
     white-space: normal;
 }
+
+.item {
+    text-align: center;
+}
+
+.description {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: left;
+    height: auto;
+    padding-top: 12px;
+    padding-bottom: 12px;
+
+    .name {
+        display: flex;
+        align-items: center;
+        padding-bottom: 8px;
+
+        & > * {
+            flex: 1;
+        }
+
+        .subName {
+            text-transform: uppercase;
+            color: var(--vn-label);
+        }
+    }
+}
 </style>

From ecad46436654765805553fd9910b51c6ce7bdc2d Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Tue, 19 Dec 2023 21:27:39 -0400
Subject: [PATCH 07/10] Add search filter

---
 src/components/ui/VnSearchbar.vue | 11 +++++++++++
 src/pages/Order/OrderCatalog.vue  | 17 +++++++++++++----
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index cc6cd1971..8220aa3db 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -53,6 +53,14 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    staticParams: {
+        type: Array,
+        default: () => [],
+    },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
 });
 
 const router = useRouter();
@@ -69,8 +77,11 @@ onMounted(() => {
 });
 
 async function search() {
+    const staticParams = Object.entries(store.userParams)
+        .filter(([key, value]) => value && (props.staticParams || []).includes(key));
     await arrayData.applyFilter({
         params: {
+            ...Object.fromEntries(staticParams),
             search: searchText.value,
         },
     });
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index c4fec45a4..f4cb3fa33 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -2,10 +2,10 @@
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute } from 'vue-router';
 import { onMounted, onUnmounted } from 'vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue';
-import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
 import { useI18n } from 'vue-i18n';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue';
 
 const route = useRoute();
 const stateStore = useStateStore();
@@ -18,15 +18,24 @@ const catalogParams = {
     orderFk: route.params.id,
     orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
 };
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'search':
+            return { 'i.name': { like: `%${value}%` } };
+    }
+}
 </script>
 
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <OrderSearchbar
+        <VnSearchbar
             data-key="OrderCatalogList"
             url="Orders/CatalogFilter"
             :limit="50"
             :user-params="catalogParams"
+            :expr-builder="exprBuilder"
+            :static-params="['orderFk', 'orderBy']"
         />
     </Teleport>
     <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">

From af5f87a6a13397c9cdf8a1744459b1b70bee60fa Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Wed, 20 Dec 2023 01:52:28 -0400
Subject: [PATCH 08/10] Add catalog filter

---
 src/components/ui/VnFilterPanel.vue         |  33 ++--
 src/pages/Order/Card/OrderCatalogFilter.vue | 205 ++++++++++++++++++++
 src/pages/Order/OrderCatalog.vue            |   5 +-
 3 files changed, 229 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/Order/Card/OrderCatalogFilter.vue

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 84893b667..6f6183224 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -31,11 +31,21 @@ const props = defineProps({
         description:
             'Algunos filtros vienen con parametros de búsqueda por default y necesitan tener si o si un valor, por eso de ser necesario, esta prop nos sirve para saber que filtros podemos remover y cuales no',
     },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
+    hiddenTags: {
+        type: Array,
+        default: () => [],
+    },
 });
 
-const emit = defineEmits(['refresh', 'clear', 'search']);
+const emit = defineEmits(['refresh', 'clear', 'search', 'init']);
 
-const arrayData = useArrayData(props.dataKey);
+const arrayData = useArrayData(props.dataKey, {
+    exprBuilder: props.exprBuilder,
+});
 const store = arrayData.store;
 const userParams = ref({});
 
@@ -44,9 +54,11 @@ onMounted(() => {
     if (Object.keys(store.userParams).length > 0) {
         userParams.value = JSON.parse(JSON.stringify(store.userParams));
     }
+    emit('init', { params: userParams.value });
 });
 
 const isLoading = ref(false);
+
 async function search() {
     isLoading.value = true;
     const params = { ...userParams.value };
@@ -93,17 +105,12 @@ async function clearFilters() {
 }
 
 const tags = computed(() => {
-    const params = [];
-
-    for (const param in userParams.value) {
-        if (!userParams.value[param]) continue;
-        params.push({
-            label: param,
-            value: userParams.value[param],
-        });
-    }
-
-    return params;
+    return Object.entries(userParams.value)
+        .filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
+        .map(([key, value]) => ({
+            label: key,
+            value: value,
+        }));
 });
 
 async function remove(key) {
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
new file mode 100644
index 000000000..792a5606e
--- /dev/null
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -0,0 +1,205 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import axios from 'axios';
+import { useRoute } from 'vue-router';
+
+const { t } = useI18n();
+const route = useRoute();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const categoryList = ref(null);
+const selectedCategoryFk = ref(null);
+const typeList = ref(null);
+const selectedTypeFk = ref(null);
+
+const selectCategory = (params, category) => {
+    if (params.categoryFk === category?.id) {
+        selectedCategoryFk.value = null;
+        params.categoryFk = null;
+        typeList.value = null;
+    } else {
+        selectedCategoryFk.value = category?.id;
+        params.categoryFk = category?.id;
+        loadTypes(category?.id);
+    }
+};
+
+const loadTypes = async (categoryFk) => {
+    const { data } = await axios.get(`Orders/${route.params.id}/getItemTypeAvailable`, {
+        params: { itemCategoryId: categoryFk },
+    });
+    typeList.value = data;
+};
+
+const onFilterInit = async ({ params }) => {
+    if (params.typeFk) {
+        selectedTypeFk.value = params.typeFk;
+    }
+    if (params.categoryFk) {
+        await loadTypes(params.categoryFk);
+        selectedCategoryFk.value = params.categoryFk;
+    }
+};
+
+const selectedCategory = computed(() =>
+    (categoryList.value || []).find(
+        (category) => category?.id === selectedCategoryFk.value
+    )
+);
+
+const selectedType = computed(() => {
+    return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
+});
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'categoryFk':
+        case 'typeFk':
+            return { [param]: value };
+    }
+}
+</script>
+
+<template>
+    <FetchData
+        url="ItemCategories"
+        limit="30"
+        auto-load
+        @on-fetch="
+            (data) => {
+                categoryList = (data || [])
+                    .filter((category) => category.display)
+                    .map((category) => ({
+                        ...category,
+                        icon: `vn:${(category.icon || '').split('-')[1]}`,
+                    }));
+            }
+        "
+    />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :hidden-tags="['orderFk', 'orderBy']"
+        :expr-builder="exprBuilder"
+        @init="onFilterInit"
+    >
+        <template #tags="{ tag, formatFn }">
+            <strong v-if="tag.label === 'categoryFk'">
+                {{ t(selectedCategory?.name || '') }}
+            </strong>
+            <strong v-else-if="tag.label === 'typeFk'">
+                {{ t(selectedType?.name || '') }}
+            </strong>
+            <div v-else class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QList dense>
+                <QItem class="category-filter q-mt-md">
+                    <div
+                        v-for="category in categoryList"
+                        :key="category.name"
+                        :class="[
+                            'category',
+                            category.id === params?.categoryFk && 'active',
+                        ]"
+                    >
+                        <QIcon
+                            :name="category.icon"
+                            class="category-icon"
+                            @click="selectCategory(params, category)"
+                        >
+                            <QTooltip>
+                                {{ t(category.name) }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.type')"
+                            v-model="params.typeFk"
+                            :options="typeList"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            use-input
+                            :disable="!selectedCategoryFk"
+                            @update:model-value="(value) => (selectedTypeFk = value)"
+                        >
+                            <template #option="{ itemProps, opt }">
+                                <QItem v-bind="itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ opt.name }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            {{ opt.categoryName }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style lang="scss" scoped>
+.category-filter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+
+    .category {
+        flex: 1;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+
+        &.active {
+            .category-icon {
+                background-color: $primary;
+            }
+        }
+    }
+
+    .category-icon {
+        border-radius: 50%;
+        background-color: var(--vn-label);
+        font-size: 2.6rem;
+        padding: 8px;
+        cursor: pointer;
+    }
+}
+</style>
+
+<i18n>
+en:
+    params:
+        type: Type
+        orderBy: Order By
+es:
+    params:
+        type: Tipo
+        orderBy: Ordenar por
+    Plant: Planta
+    Flower: Flor
+    Handmade: Confección
+    Green: Verde
+    Accessories: Complemento
+    Fruit: Fruta
+</i18n>
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index f4cb3fa33..ec81c50f1 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue';
+import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
 
 const route = useRoute();
 const stateStore = useStateStore();
@@ -54,7 +55,9 @@ function exprBuilder(param, value) {
         </div>
     </Teleport>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8"></QScrollArea>
+        <QScrollArea class="fit text-grey-8">
+            <OrderCatalogFilter data-key="OrderCatalogList" />
+        </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="card-list">

From 6e76e6e1a7101bb036fa24899549ee7554996a20 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Wed, 20 Dec 2023 08:27:35 -0400
Subject: [PATCH 09/10] Update with feedback

---
 src/pages/Order/Card/OrderCard.vue           |  9 -----
 src/pages/Order/Card/OrderCatalogFilter.vue  |  5 ++-
 src/pages/Order/Card/OrderCatalogItem.vue    |  4 +-
 src/pages/Order/Card/OrderDescriptorMenu.vue | 22 +++++-----
 src/pages/Order/Card/OrderFilter.vue         | 42 +++++++++++++++++---
 5 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/src/pages/Order/Card/OrderCard.vue b/src/pages/Order/Card/OrderCard.vue
index f6288207d..4163e22a4 100644
--- a/src/pages/Order/Card/OrderCard.vue
+++ b/src/pages/Order/Card/OrderCard.vue
@@ -21,12 +21,3 @@ const stateStore = useStateStore();
         </QPage>
     </QPageContainer>
 </template>
-
-<i18n>
-es:
-    Search claim: Buscar reclamación
-    You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
-    Details: Detalles
-    Notes: Notas
-    Action: Acción
-</i18n>
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index 792a5606e..46de63abd 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -126,7 +126,7 @@ function exprBuilder(param, value) {
                         </QIcon>
                     </div>
                 </QItem>
-                <QItem>
+                <QItem class="q-mt-md">
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.type')"
@@ -134,6 +134,9 @@ function exprBuilder(param, value) {
                             :options="typeList"
                             option-value="id"
                             option-label="name"
+                            dense
+                            outlined
+                            rounded
                             emit-value
                             use-input
                             :disable="!selectedCategoryFk"
diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
index d187df8ce..6579fc261 100644
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -58,7 +58,7 @@ const dialog = ref(null);
                 />
                 <div class="footer">
                     <div class="price">
-                        <p>{{ item.available }} to {{ item.price }}</p>
+                        <p>{{ item.available }} {{ t('to') }} {{ item.price }}</p>
                         <QIcon name="add_circle" class="icon">
                             <QTooltip>{{ t('globals.add') }}</QTooltip>
                             <QPopupProxy ref="dialog">
@@ -176,7 +176,9 @@ const dialog = ref(null);
 </style>
 <i18n>
 es:
+    to: to
     price-kg: Precio por Kg
 en:
+    to: hasta
     price-kg: Price per Kg
 </i18n>
diff --git a/src/pages/Order/Card/OrderDescriptorMenu.vue b/src/pages/Order/Card/OrderDescriptorMenu.vue
index 267c47c1d..b432ba4d7 100644
--- a/src/pages/Order/Card/OrderDescriptorMenu.vue
+++ b/src/pages/Order/Card/OrderDescriptorMenu.vue
@@ -50,16 +50,14 @@ async function remove() {
 </template>
 
 <i18n>
-{
-    "en": {
-        "deleteOrder": "Delete order",
-        "confirmDeletion": "Confirm deletion",
-        "confirmDeletionMessage": "Are you sure you want to delete this order?"
-    },
-    "es": {
-        "deleteOrder": "Eliminar pedido",
-        "confirmDeletion": "Confirmar eliminación",
-        "confirmDeletionMessage": "Seguro que quieres eliminar este pedido?"
-    }
-}
+en:
+    deleteOrder: Delete order,
+    confirmDeletion: Confirm deletion,
+    confirmDeletionMessage: Are you sure you want to delete this order?
+
+es:
+    deleteOrder: Eliminar pedido,
+    confirmDeletion: Confirmar eliminación,
+    confirmDeletionMessage: Seguro que quieres eliminar este pedido?
+
 </i18n>
diff --git a/src/pages/Order/Card/OrderFilter.vue b/src/pages/Order/Card/OrderFilter.vue
index 0d12f31da..d35072519 100644
--- a/src/pages/Order/Card/OrderFilter.vue
+++ b/src/pages/Order/Card/OrderFilter.vue
@@ -5,6 +5,7 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import VnInputDate from "components/common/VnInputDate.vue";
+import VnInput from "components/common/VnInput.vue";
 
 const { t } = useI18n();
 const props = defineProps({
@@ -58,10 +59,13 @@ const sourceList = ref(null);
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
+            <QList id="orderFilter" dense>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
+                            dense
+                            outlined
+                            rounded
                             :label="t('customerId')"
                             v-model="params.clientFk"
                             lazy-rules
@@ -69,7 +73,7 @@ const sourceList = ref(null);
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -80,6 +84,9 @@ const sourceList = ref(null);
                             :options="agencyList"
                             option-value="id"
                             option-label="name"
+                            dense
+                            outlined
+                            rounded
                             emit-value
                             map-options
                             use-input
@@ -98,6 +105,9 @@ const sourceList = ref(null);
                             :options="salesPersonList"
                             option-value="id"
                             option-label="name"
+                            dense
+                            outlined
+                            rounded
                             emit-value
                             map-options
                             use-input
@@ -123,22 +133,31 @@ const sourceList = ref(null);
                     <QItemSection>
                         <VnInputDate
                             v-model="params.from"
-                            :label="t('fromLanded')" />
+                            :label="t('fromLanded')"
+                            dense
+                            outlined
+                            rounded />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
                         <VnInputDate
                             v-model="params.to"
-                            :label="t('toLanded')" />
+                            :label="t('toLanded')"
+                            dense
+                            outlined
+                            rounded />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('orderId')"
                             v-model="params.orderFk"
                             lazy-rules
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
@@ -152,6 +171,9 @@ const sourceList = ref(null);
                             emit-value
                             map-options
                             use-input
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
@@ -190,6 +212,14 @@ const sourceList = ref(null);
     </VnFilterPanel>
 </template>
 
+<style lang="scss">
+#orderFilter {
+    .q-item {
+        padding-top: 8px;
+    }
+}
+</style>
+
 <i18n>
 en:
     params:

From 4e40fbbfe035bf3f5e9f3b7f65221dc099393901 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Wed, 20 Dec 2023 08:41:18 -0400
Subject: [PATCH 10/10] Update dash

---
 src/pages/Order/Card/OrderFilter.vue  | 23 +++++++++--------------
 src/pages/Order/Card/OrderSummary.vue | 14 +++++++++-----
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/pages/Order/Card/OrderFilter.vue b/src/pages/Order/Card/OrderFilter.vue
index d35072519..b49f0b115 100644
--- a/src/pages/Order/Card/OrderFilter.vue
+++ b/src/pages/Order/Card/OrderFilter.vue
@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
-import VnInputDate from "components/common/VnInputDate.vue";
-import VnInput from "components/common/VnInput.vue";
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInput from 'components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -63,9 +63,7 @@ const sourceList = ref(null);
                 <QItem>
                     <QItemSection>
                         <VnInput
-                            dense
-                            outlined
-                            rounded
+                            is-outlined
                             :label="t('customerId')"
                             v-model="params.clientFk"
                             lazy-rules
@@ -136,7 +134,8 @@ const sourceList = ref(null);
                             :label="t('fromLanded')"
                             dense
                             outlined
-                            rounded />
+                            rounded
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -146,7 +145,8 @@ const sourceList = ref(null);
                             :label="t('toLanded')"
                             dense
                             outlined
-                            rounded />
+                            rounded
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -155,9 +155,7 @@ const sourceList = ref(null);
                             :label="t('orderId')"
                             v-model="params.orderFk"
                             lazy-rules
-                            dense
-                            outlined
-                            rounded
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -201,10 +199,7 @@ const sourceList = ref(null);
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QCheckbox
-                            v-model="params.showEmpty"
-                            :label="t('showEmpty')"
-                        />
+                        <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
                     </QItemSection>
                 </QItem>
             </QList>
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index 0d10110eb..464ab3dfc 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
-import { toCurrency, toDateHour } from 'src/filters';
+import { dashIfEmpty, toCurrency, toDateHour } from 'src/filters';
 import VnLv from 'components/ui/VnLv.vue';
 import CardSummary from 'components/ui/CardSummary.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -64,10 +64,10 @@ const detailsColumns = ref([
         <template #body="{ entity }">
             <QCard class="vn-one">
                 <VnLv label="ID" :value="entity.id" />
-                <VnLv :label="t('order.summary.nickname')">
+                <VnLv :label="t('order.summary.nickname')" dash>
                     <template #value>
                         <span class="link">
-                            {{ entity?.address?.nickname || '-' }}
+                            {{ dashIfEmpty(entity?.address?.nickname) }}
                             <CustomerDescriptorProxy :id="entity?.clientFk" />
                         </span>
                     </template>
@@ -96,8 +96,12 @@ const detailsColumns = ref([
                 />
                 <VnLv :label="t('order.summary.phone')">
                     <template #value>
-                        {{ entity?.address?.phone || '-' }}
-                        <a :href="`tel:${entity?.address?.phone}`" class="text-primary">
+                        {{ dashIfEmpty(entity?.address?.phone) }}
+                        <a
+                            v-if="entity?.address?.phone"
+                            :href="`tel:${entity?.address?.phone}`"
+                            class="text-primary"
+                        >
                             <QIcon name="phone" />
                         </a>
                     </template>