merge with dev and resolve conflicts

src/components/ui/CardDescriptor.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { onMounted, useSlots, ref, watch, computed } from 'vue';
+import { onMounted, useSlots, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 

src/i18n/en/index.js

@@ -339,6 +339,11 @@ export default {
             observationType: 'Observation type',
             description: 'Description',
         },
+        descriptor: {
+            agency: 'Agency',
+            landed: 'Landed',
+            warehouseOut: 'Warehouse Out',
+        },
     },
     ticket: {
         pageTitles: {

src/i18n/es/index.js

@@ -338,6 +338,11 @@ export default {
             observationType: 'Tipo de observación',
             description: 'Descripción',
         },
+        descriptor: {
+            agency: 'Agency',
+            landed: 'F. entrega',
+            warehouseOut: 'Alm. salida',
+        },
     },
     ticket: {
         pageTitles: {

src/pages/Customer/Card/CustomerConsignees.vue

@@ -5,7 +5,6 @@ import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -13,6 +12,38 @@ const router = useRouter();
 
 const provincesLocation = ref([]);
 
+const consigneeFilter = {
+    fields: [
+        'id',
+        'isDefaultAddress',
+        'isActive',
+        'nickname',
+        'street',
+        'city',
+        'provinceFk',
+        'phone',
+        'mobile',
+        'isEqualizated',
+        'isLogifloraAllowed',
+        'postalCode',
+    ],
+    order: ['isDefaultAddress DESC', 'isActive DESC', 'nickname ASC'],
+    include: [
+        {
+            relation: 'observations',
+            scope: {
+                include: 'observationType',
+            },
+        },
+        {
+            relation: 'province',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+};
+
 const setProvince = (provinceFk) => {
     const result = provincesLocation.value.filter(
         (province) => province.id === provinceFk
@@ -24,8 +55,14 @@ const toCustomerConsigneeCreate = () => {
     router.push({ name: 'CustomerConsigneeCreate' });
 };
 
-const toCustomerConsigneeEdit = () => {
+const toCustomerConsigneeEdit = (consigneeId) => {
-    router.push({ name: 'CustomerConsigneeEdit' });
+    router.push({
+        name: 'CustomerConsigneeEdit',
+        params: {
+            id: route.params.id,
+            consigneeId,
+        },
+    });
 };
 </script>
 
@@ -42,6 +79,7 @@ const toCustomerConsigneeEdit = () => {
             :url="`Clients/${route.params.id}/addresses`"
             order="id"
             auto-load
+            :filter="consigneeFilter"
         >
             <template #body="{ rows }">
                 <QCard
@@ -51,7 +89,7 @@ const toCustomerConsigneeEdit = () => {
                         'consignees-card': true,
                         'q-mb-md': index < rows.length - 1,
                     }"
-                    @click="toCustomerConsigneeEdit()"
+                    @click="toCustomerConsigneeEdit(item.id)"
                 >
                     <div class="consignees-card-icon">
                         <QIcon name="star" size="md" color="primary" />
@@ -70,14 +108,36 @@ const toCustomerConsigneeEdit = () => {
                                 :label="t('Is equalizated')"
                                 v-model="item.isEqualizated"
                                 class="q-mr-lg"
+                                disable
                             />
                             <QCheckbox
                                 :label="t('Is logiflora allowed')"
                                 v-model="item.isLogifloraAllowed"
+                                disable
                             />
                         </div>
                     </div>
+
+                    <QSeparator
+                        class="q-mx-lg"
+                        v-if="item.observations.length"
+                        vertical
+                    />
+
+                    <div v-if="item.observations.length">
+                        <div
+                            :key="index"
+                            class="flex q-mb-sm"
+                            v-for="(observation, index) in item.observations"
+                        >
+                            <div class="text-weight-bold q-mr-sm">
+                                {{ observation.observationType.description }}:
+                            </div>
+                            <div>{{ observation.description }}</div>
+                        </div>
+                    </div>
                 </QCard>
+
                 <QPageSticky :offset="[18, 18]">
                     <QBtn
                         @click.stop="toCustomerConsigneeCreate()"

src/pages/Customer/Card/CustomerCredits.vue

@@ -1,3 +1,154 @@
+<script setup>
+import { ref, computed, onBeforeMount, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { date, QBtn } from 'quasar';
+
+import { toCurrency, toDate } from 'src/filters';
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+const workerId = ref(0);
+
+onBeforeMount(async () => {
+    const filter = {
+        include: [
+            {
+                relation: 'worker',
+                scope: {
+                    fields: ['id'],
+                    include: { relation: 'user', scope: { fields: ['name'] } },
+                },
+            },
+        ],
+        where: { clientFk: '1' },
+        order: ['created DESC'],
+        limit: 20,
+    };
+    arrayData.value = useArrayData('CustomerCreditsCard', {
+        url: 'ClientCredits',
+        filter,
+    });
+    await arrayData.value.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
+
+onMounted(() => {
+    const filteredColumns = columns.value.filter(
+        (col) => col.name !== 'actions' && col.name !== 'customerStatus'
+    );
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+});
+
+const rows = computed(() => arrayData.value.store.data);
+const allColumnNames = ref([]);
+
+const tableColumnComponents = {
+    created: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    employee: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            selectWorkerId(prop.row.clientFk);
+        },
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'created',
+        label: t('Since'),
+        name: 'created',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm:ss'),
+    },
+    {
+        align: 'left',
+        field: (value) => value.worker.user.name,
+        label: t('Employee'),
+        name: 'employee',
+    },
+    {
+        align: 'left',
+        field: 'amount',
+        label: t('Credit'),
+        name: 'amount',
+        format: (value) => toCurrency(value),
+    },
+]);
+
+const selectWorkerId = (id) => {
+    workerId.value = id;
+};
+
+const toCustomerCreditCreate = () => {
+    router.push({ name: 'CustomerCreditCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Credits</div>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                        >
+                            {{ props.value }}
+                            <WorkerDescriptorProxy :id="workerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerCreditCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New credit') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px;
+}
+</style>
+
+<i18n>
+es:
+    Since: Desde
+    Employee: Empleado
+    Credit: Credito
+    New credit: Nuevo credito
+</i18n>

src/pages/Customer/Card/CustomerNotes.vue

@@ -1,3 +1,94 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date } from 'quasar';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const noteFilter = {
+    order: 'created DESC',
+    where: {
+        clientFk: `${route.params.id}`,
+    },
+};
+
+const toCustomerNoteCreate = () => {
+    router.push({ name: 'CustomerNoteCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Notes</div>
+    <QCard class="q-pa-lg">
+        <VnPaginate
+            data-key="CustomerNotes"
+            :url="'clientObservations'"
+            auto-load
+            :filter="noteFilter"
+        >
+            <template #body="{ rows }">
+                <div v-if="rows.length">
+                    <QCard
+                        v-for="(item, index) in rows"
+                        :key="index"
+                        :class="{
+                            'consignees-card': true,
+                            'q-mb-md': index < rows.length - 1,
+                        }"
+                    >
+                        <div class="flex justify-between">
+                            <p class="label-color">{{ item.worker.user.nickname }}</p>
+                            <p class="label-color">
+                                {{
+                                    date.formatDate(item?.created, 'DD-MM-YYYY HH:mm:ss')
+                                }}
+                            </p>
+                        </div>
+                        <h6 class="q-mt-xs q-mb-none">{{ item.text }}</h6>
+                    </QCard>
+                </div>
+
+                <div v-else>
+                    <h5 class="flex justify-center label-color">
+                        {{ t('globals.noResults') }}
+                    </h5>
+                </div>
+
+                <QPageSticky :offset="[18, 18]">
+                    <QBtn
+                        @click.stop="toCustomerConsigneeCreate()"
+                        color="primary"
+                        fab
+                        icon="add"
+                    />
+                    <QTooltip>
+                        {{ t('New consignee') }}
+                    </QTooltip>
+                </QPageSticky>
+            </template>
+        </VnPaginate>
+    </QCard>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerNoteCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New consignee') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss">
+.consignees-card {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.label-color {
+    color: var(--vn-label);
+}
+</style>

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -485,7 +485,6 @@ const selectCustomerId = (id) => {
 };
 
 const selectSalesPersonId = (id) => {
-    console.log('selectedSalesPersonId:: ', selectedSalesPersonId.value);
     selectedSalesPersonId.value = id;
 };
 </script>

src/pages/Customer/components/CustomerConsigneeCreate.vue

@@ -3,6 +3,8 @@ import { onBeforeMount, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
+import axios from 'axios';
+
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -31,16 +33,18 @@ const formInitialData = reactive({
 
 const townsFetchDataRef = ref(null);
 const postcodeFetchDataRef = ref(null);
+const urlCreate = ref('');
+
+const postcodesOptions = ref([]);
+const citiesLocationOptions = ref([]);
+const provincesLocationOptions = ref([]);
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const postcodesOptions = ref([]);
-const urlCreate = ref('');
 
 onBeforeMount(() => {
     urlCreate.value = `Clients/${route.params.id}/createAddress`;
+    getCustomsAgents();
 });
 
 const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
@@ -50,6 +54,15 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
     formData.provinceFk = provinceFk;
     formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
 };
+
+const getCustomsAgents = async () => {
+    const { data } = await axios.get('CustomsAgents');
+    customsAgents.value = data;
+};
+
+const refreshData = () => {
+    getCustomsAgents();
+};
 </script>
 
 <template>
@@ -76,17 +89,12 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
         url="AgencyModes/isActive"
     />
     <fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
-    <fetch-data
-        @on-fetch="(data) => (customsAgents = data)"
-        auto-load
-        url="CustomsAgents"
-    />
 
     <FormModel
         :form-initial-data="formInitialData"
         :observe-form-changes="false"
-        model="client"
         :url-create="urlCreate"
+        model="client"
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
@@ -225,7 +233,7 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
                         v-model="data.customsAgentFk"
                     >
                         <template #form>
-                            <CustomsNewCustomsAgent />
+                            <CustomsNewCustomsAgent @on-data-saved="refreshData()" />
                         </template>
                     </VnSelectCreate>
                 </div>

src/pages/Customer/components/CustomerConsigneeEdit.vue

@@ -1,3 +1,371 @@
+<script setup>
+import { onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import axios from 'axios';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const townsFetchDataRef = ref(null);
+const postcodeFetchDataRef = ref(null);
+const urlUpdate = ref('');
+
+const postcodesOptions = ref([]);
+const citiesLocationOptions = ref([]);
+const provincesLocationOptions = ref([]);
+const agencyModes = ref([]);
+const incoterms = ref([]);
+const customsAgents = ref([]);
+const observationTypes = ref([]);
+const notes = ref([]);
+
+onBeforeMount(() => {
+    urlUpdate.value = `Clients/${route.params.id}/updateAddress/${route.params.consigneeId}`;
+});
+
+const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
+    await postcodeFetchDataRef.value.fetch();
+    await townsFetchDataRef.value.fetch();
+    formData.postalCode = code;
+    formData.provinceFk = provinceFk;
+    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
+};
+
+const getData = async (observations) => {
+    observationTypes.value = observations;
+
+    if (observationTypes.value.length) {
+        const filter = {
+            fields: ['id', 'addressFk', 'observationTypeFk', 'description'],
+            where: { addressFk: `${route.params.consigneeId}` },
+        };
+        const { data } = await axios.get('AddressObservations', {
+            params: { filter: JSON.stringify(filter) },
+        });
+
+        if (data.length) {
+            notes.value = data
+                .map((observation) => {
+                    const type = observationTypes.value.find(
+                        (type) => type.id === observation.observationTypeFk
+                    );
+                    return type
+                        ? {
+                              $isNew: false,
+                              $oldData: null,
+                              $orgIndex: null,
+                              addressFk: `${route.params.consigneeId}`,
+                              description: observation.description,
+                              observationTypeFk: type.id,
+                          }
+                        : null;
+                })
+                .filter((item) => item !== null);
+        }
+    }
+};
+
+const addNote = () => {
+    notes.value.push({
+        $isNew: true,
+        $oldData: null,
+        $orgIndex: null,
+        addressFk: `${route.params.consigneeId}`,
+        description: '',
+        observationTypeFk: '',
+    });
+};
+
+const deleteNote = (index) => {
+    notes.value.splice(index, 1);
+};
+
+const onDataSaved = () => {
+    const payload = {
+        creates: notes.value,
+    };
+    axios.post('AddressObservations/crud', payload);
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Customer consignee edit</div>
+    <FetchData
+        ref="postcodeFetchDataRef"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+        url="Postcodes/location"
+    />
+    <FetchData
+        ref="townsFetchDataRef"
+        @on-fetch="(data) => (citiesLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (provincesLocationOptions = data)"
+        auto-load
+        url="Provinces/location"
+    />
+    <fetch-data
+        @on-fetch="(data) => (agencyModes = data)"
+        auto-load
+        url="AgencyModes/isActive"
+    />
+    <fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
+    <fetch-data
+        @on-fetch="(data) => (customsAgents = data)"
+        auto-load
+        url="CustomsAgents"
+    />
+    <fetch-data @on-fetch="getData" auto-load url="ObservationTypes" />
+
+    <FormModel
+        :observe-form-changes="false"
+        :url-update="urlUpdate"
+        :url="`Addresses/${route.params.consigneeId}`"
+        @on-data-saved="onDataSaved()"
+        auto-load
+        model="client"
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox :label="t('Enabled')" v-model="data.isActive" />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('Is equalizated')"
+                        v-model="data.isEqualizated"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('Is Loginflora allowed')"
+                        v-model="data.isLogifloraAllowed"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Consignee')" v-model="data.nickname" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Street address')" v-model="data.street" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectCreate
+                        :label="t('Postcode')"
+                        :options="postcodesOptions"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :rules="validate('Worker.postcode')"
+                        hide-selected
+                        option-label="code"
+                        option-value="code"
+                        v-model="data.postalCode"
+                    >
+                        <template #form>
+                            <CustomerCreateNewPostcode
+                                @on-data-saved="onPostcodeCreated($event, data)"
+                            />
+                        </template>
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection v-if="scope.opt">
+                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ scope.opt.code }} -
+                                        {{ scope.opt.town.name }}
+                                        ({{ scope.opt.town.province.name }},
+                                        {{ scope.opt.town.province.country.country }})
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectCreate>
+                </div>
+                <div class="col">
+                    <!-- ciudades -->
+                    <VnSelectFilter
+                        :label="t('City')"
+                        :options="citiesLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="name"
+                        v-model="data.city"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{
+                                            `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
+                                        }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Province')"
+                        :options="provincesLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.provinceFk"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        `${scope.opt.name} (${scope.opt.country.country})`
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Agency')"
+                        :options="agencyModes"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.agencyModeFk"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Phone')" v-model="data.phone" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Mobile')" v-model="data.mobile" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Incoterms')"
+                        :options="incoterms"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        v-model="data.incotermsFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectCreate
+                        :label="t('Customs agent')"
+                        :options="customsAgents"
+                        hide-selected
+                        option-label="fiscalName"
+                        option-value="id"
+                        v-model="data.customsAgentFk"
+                    >
+                        <template #form>
+                            <CustomsNewCustomsAgent />
+                        </template>
+                    </VnSelectCreate>
+                </div>
+            </VnRow>
+
+            <h4 class="q-mb-xs">{{ t('Notes') }}</h4>
+            <VnRow
+                :key="index"
+                class="row q-gutter-md q-mb-md"
+                v-for="(note, index) in notes"
+            >
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Observation type')"
+                        :options="observationTypes"
+                        hide-selected
+                        option-label="description"
+                        option-value="id"
+                        v-model="note.observationTypeFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Description')" v-model="note.description" />
+                </div>
+                <div class="flex items-center">
+                    <QIcon
+                        @click.stop="deleteNote(index)"
+                        class="cursor-pointer"
+                        color="primary"
+                        name="delete"
+                        size="sm"
+                    >
+                        <QTooltip>
+                            {{ t('Remove') }}
+                        </QTooltip>
+                    </QIcon>
+                </div>
+            </VnRow>
+
+            <QIcon
+                @click.stop="addNote()"
+                class="cursor-pointer add-icon q-mt-md"
+                name="add"
+                size="sm"
+            >
+                <QTooltip>
+                    {{ t('Add note') }}
+                </QTooltip>
+            </QIcon>
+        </template>
+    </FormModel>
 </template>
+
+<style lang="scss" scoped>
+.add-icon {
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
+<i18n>
+es:
+    Enabled: Activo
+    Is equalizated: Recargo de equivalencia
+    Is Loginflora allowed: Compra directa en Holanda
+    Consignee: Consignatario
+    Street address: Dirección postal
+    Postcode: Código postal
+    City: Población
+    Province: Provincia
+    Agency: Agencia
+    Phone: Teléfono
+    Mobile: Movíl
+    Incoterms: Incoterms
+    Customs agent: Agente de aduanas
+    Notes: Notas
+    Observation type: Tipo de observación
+    Description: Descripción
+    Add note: Añadir nota
+    Remove note: Eliminar nota
+</i18n>

src/pages/Customer/components/CustomerCreditCreate.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const initialData = reactive({
+    credit: null,
+});
+
+const toCustomerCredits = () => {
+    router.push({
+        name: 'CustomerCredits',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <FormModel
+        :form-initial-data="initialData"
+        :observe-form-changes="false"
+        :url-update="`/Clients/${route.params.id}`"
+        @on-data-saved="toCustomerCredits()"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Credit')"
+                        type="number"
+                        v-model.number="data.credit"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Credit: Crédito
+</i18n>

src/pages/Customer/components/CustomerNoteCreate.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { onMounted, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const initialData = reactive({
+    text: null,
+});
+
+onMounted(() => {
+    initialData.clientFk = `${route.params.id}`;
+});
+
+const toCustomerNotes = () => {
+    router.push({
+        name: 'CustomerNotes',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <FormModel
+        :form-initial-data="initialData"
+        :observe-form-changes="false"
+        url-create="ClientObservations"
+        @on-data-saved="toCustomerNotes()"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput :label="t('Note')" type="textarea" v-model="data.text" />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Note: Nota
+</i18n>

src/pages/Entry/Card/EntryCard.vue

@@ -1,15 +1,29 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
+
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import EntryDescriptor from './EntryDescriptor.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
+const { t } = useI18n();
 const stateStore = useStateStore();
 </script>
 <template>
-    <!-- Entry searchbar -->
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="EntryList"
+                :label="t('Search entries')"
+                :info="t('You can search by entry reference')"
+            />
+        </Teleport>
+    </template>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit">
-            <!-- EntryDescriptor -->
+            <EntryDescriptor />
             <QSeparator />
             <LeftMenu source="card" />
         </QScrollArea>
@@ -22,3 +36,9 @@ const stateStore = useStateStore();
         </QPage>
     </QPageContainer>
 </template>
+
+<i18n>
+es:
+    Search entries: Buscar entradas
+    You can search by entry reference: Puedes buscar por referencia de la entrada
+</i18n>

src/pages/Entry/Card/EntryDescriptor.vue

@@ -0,0 +1,165 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+
+import { toDate } from 'src/filters';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entryFilter = {
+    include: [
+        {
+            relation: 'travel',
+            scope: {
+                fields: ['id', 'landed', 'agencyModeFk', 'warehouseOutFk'],
+                include: [
+                    {
+                        relation: 'agency',
+                        scope: {
+                            fields: ['name'],
+                        },
+                    },
+                    {
+                        relation: 'warehouseOut',
+                        scope: {
+                            fields: ['name'],
+                        },
+                    },
+                    {
+                        relation: 'warehouseIn',
+                        scope: {
+                            fields: ['name'],
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            relation: 'supplier',
+            scope: {
+                fields: ['id', 'nickname'],
+            },
+        },
+    ],
+};
+
+const getEntryRedirectionFilter = (entry) => {
+    let entryTravel = entry && entry.travel;
+
+    if (!entryTravel || !entryTravel.landed) return null;
+
+    const date = new Date(entryTravel.landed);
+    date.setHours(0, 0, 0, 0);
+
+    const from = new Date(date.getTime());
+    from.setDate(from.getDate() - 10);
+
+    const to = new Date(date.getTime());
+    to.setDate(to.getDate() + 10);
+
+    return JSON.stringify({
+        supplierFk: entry.supplierFk,
+        from,
+        to,
+    });
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+const setData = (entity) =>
+    (data.value = useCardDescription(entity.supplier.nickname, entity.id));
+</script>
+
+<template>
+    <CardDescriptor
+        module="Entry"
+        :url="`Entries/${entityId}`"
+        :filter="entryFilter"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        @on-fetch="setData"
+        data-key="entryData"
+    >
+        <template #body="{ entity }">
+            <VnLv
+                :label="t('entry.descriptor.agency')"
+                :value="entity.travel.agency.name"
+            />
+            <VnLv
+                :label="t('entry.descriptor.landed')"
+                :value="toDate(entity.travel.landed)"
+            />
+            <VnLv
+                :label="t('entry.descriptor.warehouseOut')"
+                :value="entity.travel.warehouseOut.name"
+            />
+        </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <QBtn
+                    :to="`/supplier/${entity.supplier.id}`"
+                    size="md"
+                    icon="vn:supplier"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('Supplier card') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    :to="{
+                        name: 'TravelMain',
+                        query: {
+                            params: JSON.stringify({
+                                agencyModeFk: entity.travel?.agencyModeFk,
+                            }),
+                        },
+                    }"
+                    size="md"
+                    icon="local_airport"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('All travels with current agency') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    :to="{
+                        name: 'EntryMain',
+                        query: {
+                            params: getEntryRedirectionFilter(entity),
+                        },
+                    }"
+                    size="md"
+                    icon="vn:entry"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('All entries with current supplier') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+es:
+    Supplier card: Ficha del proveedor
+    All travels with current agency: Todos los envíos con la agencia actual
+    All entries with current supplier: Todas las entradas con el proveedor actual
+</i18n>

src/pages/Entry/Card/EntryDescriptorProxy.vue

@@ -0,0 +1,16 @@
+<script setup>
+import EntryDescriptor from './EntryDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <EntryDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

src/pages/Entry/EntryList.vue

@@ -1,28 +1,19 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
 
-import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
 
-const stateStore = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-});
-onUnmounted(() => (stateStore.rightDrawer = false));
-
 function navigate(id) {
     router.push({ path: `/entry/${id}` });
 }
@@ -42,16 +33,6 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="EntryList"
-                :label="t('Search entries')"
-                :info="t('You can search by entry reference')"
-            />
-        </Teleport>
-    </template>
-
     <QPage class="column items-center q-pa-md">
         <div class="card-list">
             <VnPaginate

src/pages/Entry/EntryMain.vue

@@ -1,11 +1,24 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
 import LeftMenu from 'src/components/LeftMenu.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
+const { t } = useI18n();
 const stateStore = useStateStore();
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="EntryList"
+                :label="t('Search entries')"
+                :info="t('You can search by entry reference')"
+            />
+        </Teleport>
+    </template>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit text-grey-8">
             <LeftMenu />
@@ -15,3 +28,9 @@ const stateStore = useStateStore();
         <RouterView></RouterView>
     </QPageContainer>
 </template>
+
+<i18n>
+es:
+    Search entries: Buscar entradas
+    You can search by entry reference: Puedes buscar por referencia de la entrada
+</i18n>

src/pages/Travel/ExtraCommunity.vue

@@ -9,6 +9,7 @@ import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.v
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import ExtraCommunityFilter from './ExtraCommunityFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import EntryDescriptorProxy from '../Entry/Card/EntryDescriptorProxy.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'src/filters';
@@ -231,7 +232,7 @@ const navigateToTravelId = (id) => {
 };
 
 const stopEventPropagation = (event, col) => {
-    if (!['ref', 'id', 'supplier'].includes(col.name)) return;
+    if (!['ref', 'id', 'cargoSupplierNickname'].includes(col.name)) return;
     event.preventDefault();
     event.stopPropagation();
 };
@@ -359,10 +360,9 @@ onMounted(async () => {
                     :props="props"
                     class="secondary-row"
                 >
-                    <QTd
+                    <QTd>
-                        ><QBtn flat color="blue" class="col-content">{{ entry.id }}</QBtn>
+                        <QBtn flat color="blue" class="col-content">{{ entry.id }} </QBtn>
-                        <!-- Cuando se cree el modulo relacionado a entries, crear su descriptor y colocarlo acá -->
+                        <EntryDescriptorProxy :id="entry.id" />
-                        <!-- <EntryDescriptorProxy :id="entry.id"/> -->
                     </QTd>
                     <QTd
                         ><QBtn flat color="blue" class="col-content">{{

src/router/modules/customer.js

@@ -177,36 +177,80 @@ export default {
                                 ),
                         },
                         {
-                            path: 'edit',
+                            path: ':consigneeId',
-                            name: 'CustomerConsigneeEdit',
+                            name: 'CustomerConsigneeEditCard',
-                            meta: {
+                            redirect: { name: 'CustomerConsigneeEdit' },
-                                title: 'consignee-edit',
+                            children: [
-                            },
+                                {
-                            component: () =>
+                                    path: 'edit',
-                                import(
+                                    name: 'CustomerConsigneeEdit',
-                                    'src/pages/Customer/components/CustomerConsigneeEdit.vue'
+                                    meta: {
-                                ),
+                                        title: 'consignee-edit',
+                                    },
+                                    component: () =>
+                                        import(
+                                            'src/pages/Customer/components/CustomerConsigneeEdit.vue'
+                                        ),
+                                },
+                            ],
                         },
                     ],
                 },
                 {
                     path: 'notes',
-                    name: 'CustomerNotes',
+                    name: 'NotesCard',
-                    meta: {
+                    redirect: { name: 'CustomerNotes' },
-                        title: 'notes',
+                    children: [
-                        icon: 'vn:notes',
+                        {
-                    },
+                            path: '',
-                    component: () => import('src/pages/Customer/Card/CustomerNotes.vue'),
+                            name: 'CustomerNotes',
+                            meta: {
+                                title: 'notes',
+                                icon: 'vn:notes',
+                            },
+                            component: () =>
+                                import('src/pages/Customer/Card/CustomerNotes.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'CustomerNoteCreate',
+                            meta: {
+                                title: 'note-create',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/components/CustomerNoteCreate.vue'
+                                ),
+                        },
+                    ],
                 },
                 {
                     path: 'credits',
-                    name: 'CustomerCredits',
+                    name: 'CreditsCard',
-                    meta: {
+                    redirect: { name: 'CustomerCredits' },
-                        title: 'credits',
+                    children: [
-                        icon: 'vn:credit',
+                        {
-                    },
+                            path: '',
-                    component: () =>
+                            name: 'CustomerCredits',
-                        import('src/pages/Customer/Card/CustomerCredits.vue'),
+                            meta: {
+                                title: 'credits',
+                                icon: 'vn:credit',
+                            },
+                            component: () =>
+                                import('src/pages/Customer/Card/CustomerCredits.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'CustomerCreditCreate',
+                            meta: {
+                                title: 'credit-create',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/components/CustomerCreditCreate.vue'
+                                ),
+                        },
+                    ],
                 },
                 {
                     path: 'greuges',