From 661e9d4368d8ee0e78ac13c5786b608b4ad1e709 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Thu, 18 Jan 2024 08:45:41 -0400
Subject: [PATCH] Create route summary

---
 src/i18n/en/index.js                          |   3 +-
 src/i18n/es/index.js                          |   1 +
 src/pages/Route/Card/RouteCard.vue            |   3 +-
 src/pages/Route/Card/RouteDescriptor.vue      | 104 ++++
 src/pages/Route/Card/RouteDescriptorMenu.vue  |  63 +++
 src/pages/Route/Card/RouteDescriptorProxy.vue |  15 +
 src/pages/Route/Card/RouteForm.vue            |   3 +-
 src/pages/Route/Card/RouteSummary.vue         | 314 ++++++++++++
 src/pages/Route/Card/RouteSummaryDialog.vue   |  29 ++
 src/pages/Route/RouteList.vue                 | 472 ++++++++++--------
 src/router/modules/route.js                   |  18 +-
 11 files changed, 806 insertions(+), 219 deletions(-)
 create mode 100644 src/pages/Route/Card/RouteDescriptor.vue
 create mode 100644 src/pages/Route/Card/RouteDescriptorMenu.vue
 create mode 100644 src/pages/Route/Card/RouteDescriptorProxy.vue
 create mode 100644 src/pages/Route/Card/RouteSummary.vue
 create mode 100644 src/pages/Route/Card/RouteSummaryDialog.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 2056f1907..3b4482b07 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -809,7 +809,8 @@ export default {
             cmrsList: 'External CMRs list',
             RouteList: 'List',
             create: 'Create',
-            basicData: 'Basic Data'
+            basicData: 'Basic Data',
+            summary: 'Summary'
         },
         cmr: {
             list: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 970f23231..322f08df4 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -809,6 +809,7 @@ export default {
             RouteList: 'Listado',
             create: 'Crear',
             basicData: 'Datos básicos',
+            summary: 'Summary',
         },
         cmr: {
             list: {
diff --git a/src/pages/Route/Card/RouteCard.vue b/src/pages/Route/Card/RouteCard.vue
index 2082b67df..46b997b65 100644
--- a/src/pages/Route/Card/RouteCard.vue
+++ b/src/pages/Route/Card/RouteCard.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
+import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue';
 // import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
 
 const stateStore = useStateStore();
@@ -8,7 +9,7 @@ const stateStore = useStateStore();
 <template>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit">
-            <!--            <ShelvingDescriptor />-->
+            <RouteDescriptor />
             <QSeparator />
             <LeftMenu source="card" />
         </QScrollArea>
diff --git a/src/pages/Route/Card/RouteDescriptor.vue b/src/pages/Route/Card/RouteDescriptor.vue
new file mode 100644
index 000000000..218764277
--- /dev/null
+++ b/src/pages/Route/Card/RouteDescriptor.vue
@@ -0,0 +1,104 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import useCardDescription from 'composables/useCardDescription';
+import { dashIfEmpty, toDate } from 'src/filters';
+import RouteDescriptorMenu from 'pages/Route/Card/RouteDescriptorMenu.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const filter = {
+    fields: [
+        'id',
+        'workerFk',
+        'agencyModeFk',
+        'created',
+        'm3',
+        'warehouseFk',
+        'description',
+        'vehicleFk',
+        'kmStart',
+        'kmEnd',
+        'started',
+        'finished',
+        'cost',
+        'zoneFk',
+        'isOk',
+    ],
+    include: [
+        { relation: 'agencyMode', scope: { fields: ['id', 'name'] } },
+        {
+            relation: 'vehicle',
+            scope: { fields: ['id', 'm3'] },
+        },
+        { relation: 'zone', scope: { fields: ['id', 'name'] } },
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['id'],
+                        include: { relation: 'emailUser', scope: { fields: ['email'] } },
+                    },
+                },
+            },
+        },
+    ],
+};
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
+</script>
+
+<template>
+    <CardDescriptor
+        module="Route"
+        :url="`Routes/${entityId}`"
+        :filter="filter"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        data-key="Routes"
+        @on-fetch="setData"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('Date')" :value="toDate(entity?.created)" />
+            <VnLv :label="t('Agency')" :value="entity?.agencyMode?.name" />
+            <VnLv :label="t('Zone')" :value="entity?.zone?.name" />
+            <VnLv
+                :label="t('Volume')"
+                :value="`${dashIfEmpty(entity?.m3)} / ${dashIfEmpty(
+                    entity?.vehicle?.m3
+                )} m³`"
+            />
+            <VnLv :label="t('Description')" :value="entity?.description" />
+        </template>
+        <template #menu="{ entity }">
+            <RouteDescriptorMenu :route="entity" />
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+es:
+    Date: Fecha
+    Agency: Agencia
+    Zone: Zona
+    Volume: Volumen
+    Description: Descripción
+</i18n>
diff --git a/src/pages/Route/Card/RouteDescriptorMenu.vue b/src/pages/Route/Card/RouteDescriptorMenu.vue
new file mode 100644
index 000000000..b661d1cd7
--- /dev/null
+++ b/src/pages/Route/Card/RouteDescriptorMenu.vue
@@ -0,0 +1,63 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+const props = defineProps({
+    route: {
+        type: Object,
+        required: true,
+    },
+});
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+function confirmRemove() {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('confirmDeletion'),
+                message: t('confirmDeletionMessage'),
+                promise: remove,
+            },
+        })
+        .onOk(async () => await router.push({ name: 'RouteList' }));
+}
+
+async function remove() {
+    if (!props.route.id) {
+        return;
+    }
+    await axios.delete(`Routes/${props.route.id}`);
+    quasar.notify({
+        message: t('globals.dataDeleted'),
+        type: 'positive',
+    });
+}
+
+//  TODO: Add reports
+</script>
+<template>
+    <QItem @click="confirmRemove" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="delete" />
+        </QItemSection>
+        <QItemSection>{{ t('deleteRoute') }}</QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+en:
+    confirmDeletion: Confirm deletion
+    confirmDeletionMessage: Are you sure you want to delete this route?
+    deleteRoute: Delete route
+es:
+    confirmDeletion: Confirmar eliminación,
+    confirmDeletionMessage: Seguro que quieres eliminar esta ruta?
+    deleteRoute: Eliminar ruta
+</i18n>
diff --git a/src/pages/Route/Card/RouteDescriptorProxy.vue b/src/pages/Route/Card/RouteDescriptorProxy.vue
new file mode 100644
index 000000000..541f9716a
--- /dev/null
+++ b/src/pages/Route/Card/RouteDescriptorProxy.vue
@@ -0,0 +1,15 @@
+<script setup>
+import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <RouteDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>
diff --git a/src/pages/Route/Card/RouteForm.vue b/src/pages/Route/Card/RouteForm.vue
index 00ea18f4f..49a067c00 100644
--- a/src/pages/Route/Card/RouteForm.vue
+++ b/src/pages/Route/Card/RouteForm.vue
@@ -72,8 +72,7 @@ const routeFilter = {
 const onSave = (data, response) => {
     if (isNew) {
         axios.post(`Routes/${response.data?.id}/updateWorkCenter`);
-        // TODO: Add summary
-        // router.push({ name: 'RouteSummary', params: { id: response.data?.id } });
+        router.push({ name: 'RouteSummary', params: { id: response.data?.id } });
     }
 };
 </script>
diff --git a/src/pages/Route/Card/RouteSummary.vue b/src/pages/Route/Card/RouteSummary.vue
new file mode 100644
index 000000000..a10ca088e
--- /dev/null
+++ b/src/pages/Route/Card/RouteSummary.vue
@@ -0,0 +1,314 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import { QIcon } from 'quasar';
+import { dashIfEmpty, toCurrency, toDate, toHour } from 'src/filters';
+import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+import axios from 'axios';
+import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
+import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+const route = useRoute();
+const stateStore = useStateStore();
+const { t } = useI18n();
+
+const entityId = computed(() => $props.id || route.params.id);
+const isDialog = Boolean($props.id);
+const hideRightDrawer = () => {
+    if (!isDialog) {
+        stateStore.rightDrawer = false;
+    }
+};
+onMounted(hideRightDrawer);
+onUnmounted(hideRightDrawer);
+const getTotalPackages = (tickets) => {
+    return (tickets || []).reduce((sum, ticket) => sum + ticket.packages, 0);
+};
+
+const ticketColumns = ref([
+    {
+        name: 'order',
+        label: t('route.summary.order'),
+        field: (row) => dashIfEmpty(row?.priority),
+        sortable: false,
+        align: 'center',
+    },
+    {
+        name: 'street',
+        label: t('route.summary.street'),
+        field: (row) => row?.street,
+        sortable: false,
+        align: 'left',
+    },
+    {
+        name: 'city',
+        label: t('route.summary.city'),
+        field: (row) => row?.city,
+        sortable: false,
+        align: 'left',
+    },
+    {
+        name: 'pc',
+        label: t('route.summary.pc'),
+        field: (row) => row?.postalCode,
+        sortable: false,
+        align: 'center',
+    },
+    {
+        name: 'client',
+        label: t('route.summary.client'),
+        field: (row) => row?.nickname,
+        sortable: false,
+        align: 'left',
+    },
+    {
+        name: 'warehouse',
+        label: t('route.summary.warehouse'),
+        field: (row) => row?.warehouseName,
+        sortable: false,
+        align: 'left',
+    },
+    {
+        name: 'packages',
+        label: t('route.summary.packages'),
+        field: (row) => row?.packages,
+        sortable: false,
+        align: 'center',
+    },
+    {
+        name: 'volume',
+        label: t('route.summary.m3'),
+        field: (row) => row?.volume,
+        sortable: false,
+        align: 'center',
+    },
+    {
+        name: 'packaging',
+        label: t('route.summary.packaging'),
+        field: (row) => row?.ipt,
+        sortable: false,
+        align: 'center',
+    },
+    {
+        name: 'ticket',
+        label: t('route.summary.ticket'),
+        field: (row) => row?.id,
+        sortable: false,
+        align: 'right',
+    },
+    {
+        name: 'observations',
+        label: '',
+        field: (row) => row?.ticketObservation,
+        sortable: false,
+        align: 'left',
+    },
+]);
+
+const openBuscaman = async (route, ticket) => {
+    if (!route.vehicleFk) throw new Error(`The route doesn't have a vehicle`);
+    const response = await axios.get(`Routes/${route.vehicleFk}/getDeliveryPoint`);
+    if (!response.data)
+        throw new Error(`The route's vehicle doesn't have a delivery point`);
+
+    const address = `${response.data}+to:${ticket.postalCode} ${ticket.city} ${ticket.street}`;
+    window.open(
+        'https://gps.buscalia.com/usuario/localizar.aspx?bmi=true&addr=' +
+            encodeURI(address),
+        '_blank'
+    );
+};
+</script>
+
+<template>
+    <div class="q-pa-md">
+        <CardSummary ref="summary" :url="`Routes/${entityId}/summary`">
+            <template #header-left>
+                <RouterLink :to="{ name: `RouteSummary`, params: { id: entityId } }">
+                    <QIcon name="open_in_new" color="white" size="sm" />
+                </RouterLink>
+            </template>
+            <template #header="{ entity }">
+                <span>{{ `${entity?.route.id} - ${entity?.route?.description}` }}</span>
+            </template>
+            <template #body="{ entity }">
+                <QCard class="vn-one">
+                    <VnLv :label="t('ID')" :value="entity?.route.id" />
+                    <VnLv
+                        :label="t('route.summary.date')"
+                        :value="toDate(entity?.route.created)"
+                    />
+                    <VnLv
+                        :label="t('route.summary.agency')"
+                        :value="entity?.route?.agencyMode?.name"
+                    />
+                    <VnLv
+                        :label="t('route.summary.vehicle')"
+                        :value="entity.route?.vehicle?.numberPlate"
+                    />
+                    <VnLv :label="t('route.summary.driver')">
+                        <template #value>
+                            <span class="link">
+                                {{ dashIfEmpty(entity?.route?.worker?.user?.name) }}
+                                <WorkerDescriptorProxy :id="entity.route?.workerFk" />
+                            </span>
+                        </template>
+                    </VnLv>
+                    <VnLv
+                        :label="t('route.summary.cost')"
+                        :value="toCurrency(entity.route?.cost)"
+                    />
+                </QCard>
+                <QCard class="vn-one">
+                    <VnLv
+                        :label="t('route.summary.started')"
+                        :value="toHour(entity?.route.started)"
+                    />
+                    <VnLv
+                        :label="t('route.summary.finished')"
+                        :value="toHour(entity?.route.finished)"
+                    />
+                    <VnLv
+                        :label="t('route.summary.kmStart')"
+                        :value="dashIfEmpty(entity?.route?.kmStart)"
+                    />
+                    <VnLv
+                        :label="t('route.summary.kmEnd')"
+                        :value="dashIfEmpty(entity?.route?.kmEnd)"
+                    />
+                    <VnLv
+                        :label="t('route.summary.volume')"
+                        :value="`${dashIfEmpty(entity?.route?.m3)} / ${dashIfEmpty(
+                            entity?.route?.vehicle?.m3
+                        )} m³`"
+                    />
+                    <VnLv
+                        :label="t('route.summary.packages')"
+                        :value="getTotalPackages(entity.tickets)"
+                    />
+                </QCard>
+                <QCard class="vn-one">
+                    <div class="header">
+                        {{ t('route.summary.description') }}
+                    </div>
+                    <p>
+                        {{ dashIfEmpty(entity?.route?.description) }}
+                    </p>
+                </QCard>
+
+                <QCard class="vn-max">
+                    <div class="header">
+                        {{ t('route.summary.tickets') }}
+                    </div>
+                    <QTable
+                        :columns="ticketColumns"
+                        :rows="entity?.tickets"
+                        :rows-per-page-options="[0]"
+                        row-key="id"
+                        flat
+                        hide-pagination
+                    >
+                        <template #body-cell-city="{ value, row }">
+                            <QTd auto-width>
+                                <span
+                                    class="text-primary cursor-pointer"
+                                    @click="openBuscaman(entity?.route, row)"
+                                >
+                                    {{ value }}
+                                </span>
+                            </QTd>
+                        </template>
+                        <template #body-cell-client="{ value, row }">
+                            <QTd auto-width>
+                                <span class="text-primary cursor-pointer">
+                                    {{ value }}
+                                    <CustomerDescriptorProxy :id="row?.clientFk" />
+                                </span>
+                            </QTd>
+                        </template>
+                        <template #body-cell-ticket="{ value, row }">
+                            <QTd auto-width>
+                                <span class="text-primary cursor-pointer">
+                                    {{ value }}
+                                    <TicketDescriptorProxy :id="row?.id" />
+                                </span>
+                            </QTd>
+                        </template>
+                        <template #body-cell-observations="{ value }">
+                            <QTd auto-width>
+                                <QIcon
+                                    v-if="value"
+                                    name="vn:notes"
+                                    color="primary"
+                                    class="cursor-pointer"
+                                >
+                                    <QTooltip>{{ value }}</QTooltip>
+                                </QIcon>
+                            </QTd>
+                        </template>
+                    </QTable>
+                </QCard>
+            </template>
+        </CardSummary>
+    </div>
+</template>
+<i18n>
+en:
+    route:
+        summary:
+            date: Date
+            agency: Agency
+            vehicle: Vehicle
+            driver: Driver
+            cost: Cost
+            started: Started time
+            finished: Finished time
+            kmStart: Km start
+            kmEnd: Km end
+            volume: Volume
+            packages: Packages
+            description: Description
+            tickets: Tickets
+            order: Order
+            street: Street
+            city: City
+            pc: PC
+            client: Client
+            warehouse: Warehouse
+            m3: m³
+            packaging: Packaging
+            ticket: Ticket
+es:
+    route:
+        summary:
+            date: Fecha
+            agency: Agencia
+            vehicle: Vehículo
+            driver: Conductor
+            cost: Costo
+            started: Hora inicio
+            finished: Hora fin
+            kmStart: Km inicio
+            kmEnd: Km fin
+            volume: Volumen
+            packages: Bultos
+            description: Descripción
+            tickets: Tickets
+            order: Orden
+            street: Dirección fiscal
+            city: Población
+            pc: CP
+            client: Cliente
+            warehouse: Almacén
+            packaging: Encajado
+</i18n>
diff --git a/src/pages/Route/Card/RouteSummaryDialog.vue b/src/pages/Route/Card/RouteSummaryDialog.vue
new file mode 100644
index 000000000..4a943a93a
--- /dev/null
+++ b/src/pages/Route/Card/RouteSummaryDialog.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <RouteSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
+</template>
+
+<style lang="scss">
+.q-dialog .route .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 5972a6959..591f723e9 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -13,12 +13,13 @@ import VnInputTime from 'components/common/VnInputTime.vue';
 import axios from 'axios';
 import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
+import { useQuasar } from 'quasar';
+import RouteSummaryDialog from 'pages/Route/Card/RouteSummaryDialog.vue';
 
 const stateStore = useStateStore();
-// const router = useRouter();
-// const quasar = useQuasar();
 const { t } = useI18n();
 const { validate } = useValidator();
+const quasar = useQuasar();
 
 const to = Date.vnNew();
 to.setDate(to.getDate() + 1);
@@ -98,6 +99,12 @@ const columns = computed(() => [
         sortable: true,
         align: 'left',
     },
+    {
+        name: 'actions',
+        label: '',
+        sortable: false,
+        align: 'right',
+    },
 ]);
 
 const refreshKey = ref(0);
@@ -151,6 +158,18 @@ const markAsServed = () => {
     refreshKey.value++;
     startingDate.value = null;
 };
+
+function previewRoute(id) {
+    if (!id) {
+        return;
+    }
+    quasar.dialog({
+        component: RouteSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>
 
 <template>
@@ -187,7 +206,7 @@ const markAsServed = () => {
                     autofocus
                 />
             </QCardSection>
-
+            <!-- TODO: Add report -->
             <QCardActions align="right">
                 <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
                 <QBtn color="primary" v-close-popup @click="cloneRoutes">
@@ -232,213 +251,237 @@ const markAsServed = () => {
                 </QBtn>
             </div>
         </QToolbar>
-        <VnPaginate
-            :key="refreshKey"
-            data-key="RouteList"
-            url="Routes/filter"
-            :order="['created DESC', 'id DESC']"
-            :limit="20"
-            auto-load
-        >
-            <template #body="{ rows }">
-                <div class="q-pa-md">
-                    <QTable
-                        v-model:selected="selectedRows"
-                        :columns="columns"
-                        :rows="rows"
-                        flat
-                        row-key="id"
-                        selection="multiple"
-                        :rows-per-page-options="[0]"
-                    >
-                        <template #body-cell-worker="props">
-                            <QTd :props="props">
-                                {{ props.row?.workerUserName }}
-                                <QPopupEdit
-                                    :model-value="props.row.workerFk"
-                                    v-slot="scope"
-                                    buttons
-                                    @update:model-value="
-                                        (worker) => updateWorker(props.row, worker)
-                                    "
-                                >
-                                    <VnSelectFilter
-                                        :label="t('Worker')"
-                                        v-model="scope.value"
-                                        :options="workers"
-                                        option-value="id"
-                                        option-label="name"
-                                        hide-selected
-                                        autofocus
-                                        :emit-value="false"
-                                        :rules="validate('Route.workerFk')"
-                                        :is-clearable="false"
-                                        @keyup.enter="scope.set"
-                                        @focus="($event) => $event.target.select()"
+        <div class="route-list">
+            <VnPaginate
+                :key="refreshKey"
+                data-key="RouteList"
+                url="Routes/filter"
+                :order="['created DESC', 'id DESC']"
+                :limit="20"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <div class="q-pa-md">
+                        <QTable
+                            v-model:selected="selectedRows"
+                            :columns="columns"
+                            :rows="rows"
+                            flat
+                            row-key="id"
+                            selection="multiple"
+                            :rows-per-page-options="[0]"
+                            hide-pagination
+                        >
+                            <template #body-cell-worker="props">
+                                <QTd :props="props">
+                                    {{ props.row?.workerUserName }}
+                                    <QPopupEdit
+                                        :model-value="props.row.workerFk"
+                                        v-slot="scope"
+                                        buttons
+                                        @update:model-value="
+                                            (worker) => updateWorker(props.row, worker)
+                                        "
                                     >
-                                        <template #option="{ opt, itemProps }">
-                                            <QItem
-                                                v-bind="itemProps"
-                                                class="q-pa-xs row items-center"
-                                            >
-                                                <QItemSection
-                                                    class="col-9 justify-center"
+                                        <VnSelectFilter
+                                            :label="t('Worker')"
+                                            v-model="scope.value"
+                                            :options="workers"
+                                            option-value="id"
+                                            option-label="name"
+                                            hide-selected
+                                            autofocus
+                                            :emit-value="false"
+                                            :rules="validate('Route.workerFk')"
+                                            :is-clearable="false"
+                                            @keyup.enter="scope.set"
+                                            @focus="($event) => $event.target.select()"
+                                        >
+                                            <template #option="{ opt, itemProps }">
+                                                <QItem
+                                                    v-bind="itemProps"
+                                                    class="q-pa-xs row items-center"
                                                 >
-                                                    <span>{{ opt.name }}</span>
-                                                    <span class="text-grey">{{
-                                                        opt.nickname
-                                                    }}</span>
-                                                </QItemSection>
-                                            </QItem>
-                                        </template>
-                                    </VnSelectFilter>
-                                </QPopupEdit>
-                            </QTd>
-                        </template>
-                        <template #body-cell-agency="props">
-                            <QTd :props="props">
-                                {{ props.row?.agencyName }}
-                                <QPopupEdit
-                                    :model-value="props.row.agencyModeFk"
-                                    v-slot="scope"
-                                    buttons
-                                    @update:model-value="
-                                        (agency) => updateAgency(props.row, agency)
-                                    "
-                                >
-                                    <VnSelectFilter
-                                        :label="t('Agency')"
-                                        v-model="scope.value"
-                                        :options="agencyList"
-                                        option-value="id"
-                                        option-label="name"
-                                        hide-selected
-                                        autofocus
-                                        :emit-value="false"
-                                        :rules="validate('route.agencyFk')"
-                                        :is-clearable="false"
-                                        @keyup.enter="scope.set"
-                                        @focus="($event) => $event.target.select()"
-                                    />
-                                </QPopupEdit>
-                            </QTd>
-                        </template>
-                        <template #body-cell-vehicle="props">
-                            <QTd :props="props">
-                                {{ props.row?.vehiclePlateNumber }}
-                                <QPopupEdit
-                                    :model-value="props.row.vehicleFk"
-                                    v-slot="scope"
-                                    buttons
-                                    @update:model-value="
-                                        (vehicle) => updateVehicle(props.row, vehicle)
-                                    "
-                                >
-                                    <VnSelectFilter
-                                        :label="t('Vehicle')"
-                                        v-model="scope.value"
-                                        :options="vehicleList"
-                                        option-value="id"
-                                        option-label="numberPlate"
-                                        hide-selected
-                                        autofocus
-                                        :emit-value="false"
-                                        :rules="validate('route.vehicleFk')"
-                                        :is-clearable="false"
-                                        @keyup.enter="scope.set"
-                                        @focus="($event) => $event.target.select()"
-                                    />
-                                </QPopupEdit>
-                            </QTd>
-                        </template>
-                        <template #body-cell-date="props">
-                            <QTd :props="props">
-                                {{ toDate(props.row?.created) }}
-                                <QPopupEdit
-                                    v-model="props.row.created"
-                                    v-slot="scope"
-                                    @update:model-value="updateRoute(props.row)"
-                                    buttons
-                                >
-                                    <VnInputDate
-                                        v-model="scope.value"
-                                        autofocus
-                                        :label="t('Date')"
-                                        :rules="validate('route.created')"
-                                        :is-clearable="false"
-                                        @keyup.enter="scope.set"
-                                        @focus="($event) => $event.target.select()"
-                                    />
-                                </QPopupEdit>
-                            </QTd>
-                        </template>
-                        <template #body-cell-description="props">
-                            <QTd :props="props">
-                                {{ props.row?.description }}
-                                <QPopupEdit
-                                    v-model="props.row.description"
-                                    v-slot="scope"
-                                    @update:model-value="updateRoute(props.row)"
-                                    buttons
-                                >
-                                    <VnInput
-                                        v-model="scope.value"
-                                        autofocus
-                                        :label="t('Description')"
-                                        :rules="validate('route.description')"
-                                        :is-clearable="false"
-                                        @keyup.enter="scope.set"
-                                        @focus="($event) => $event.target.select()"
-                                    />
-                                </QPopupEdit>
-                            </QTd>
-                        </template>
-                        <template #body-cell-started="props">
-                            <QTd :props="props">
-                                {{ toHour(props.row.started) }}
-                                <QPopupEdit
-                                    v-model="props.row.started"
-                                    v-slot="scope"
-                                    buttons
-                                    @update:model-value="updateRoute(props.row)"
-                                >
-                                    <VnInputTime
-                                        v-model="scope.value"
-                                        autofocus
-                                        :label="t('Hour started')"
-                                        :rules="validate('route.started')"
-                                        :is-clearable="false"
-                                        @keyup.enter="scope.set"
-                                        @focus="($event) => $event.target.select()"
-                                    />
-                                </QPopupEdit>
-                            </QTd>
-                        </template>
-                        <template #body-cell-finished="props">
-                            <QTd :props="props">
-                                {{ toHour(props.row.finished) }}
-                                <QPopupEdit
-                                    v-model="props.row.finished"
-                                    v-slot="scope"
-                                    buttons
-                                    @update:model-value="updateRoute(props.row)"
-                                >
-                                    <VnInputTime
-                                        v-model="scope.value"
-                                        autofocus
-                                        :label="t('Hour finished')"
-                                        :rules="validate('route.finished')"
-                                        :is-clearable="false"
-                                        @keyup.enter="scope.set"
-                                        @focus="($event) => $event.target.select()"
-                                    />
-                                </QPopupEdit>
-                            </QTd>
-                        </template>
-                    </QTable>
-                </div>
-            </template>
-        </VnPaginate>
+                                                    <QItemSection
+                                                        class="col-9 justify-center"
+                                                    >
+                                                        <span>{{ opt.name }}</span>
+                                                        <span class="text-grey">{{
+                                                            opt.nickname
+                                                        }}</span>
+                                                    </QItemSection>
+                                                </QItem>
+                                            </template>
+                                        </VnSelectFilter>
+                                    </QPopupEdit>
+                                </QTd>
+                            </template>
+                            <template #body-cell-agency="props">
+                                <QTd :props="props">
+                                    {{ props.row?.agencyName }}
+                                    <QPopupEdit
+                                        :model-value="props.row.agencyModeFk"
+                                        v-slot="scope"
+                                        buttons
+                                        @update:model-value="
+                                            (agency) => updateAgency(props.row, agency)
+                                        "
+                                    >
+                                        <VnSelectFilter
+                                            :label="t('Agency')"
+                                            v-model="scope.value"
+                                            :options="agencyList"
+                                            option-value="id"
+                                            option-label="name"
+                                            hide-selected
+                                            autofocus
+                                            :emit-value="false"
+                                            :rules="validate('route.agencyFk')"
+                                            :is-clearable="false"
+                                            @keyup.enter="scope.set"
+                                            @focus="($event) => $event.target.select()"
+                                        />
+                                    </QPopupEdit>
+                                </QTd>
+                            </template>
+                            <template #body-cell-vehicle="props">
+                                <QTd :props="props">
+                                    {{ props.row?.vehiclePlateNumber }}
+                                    <QPopupEdit
+                                        :model-value="props.row.vehicleFk"
+                                        v-slot="scope"
+                                        buttons
+                                        @update:model-value="
+                                            (vehicle) => updateVehicle(props.row, vehicle)
+                                        "
+                                    >
+                                        <VnSelectFilter
+                                            :label="t('Vehicle')"
+                                            v-model="scope.value"
+                                            :options="vehicleList"
+                                            option-value="id"
+                                            option-label="numberPlate"
+                                            hide-selected
+                                            autofocus
+                                            :emit-value="false"
+                                            :rules="validate('route.vehicleFk')"
+                                            :is-clearable="false"
+                                            @keyup.enter="scope.set"
+                                            @focus="($event) => $event.target.select()"
+                                        />
+                                    </QPopupEdit>
+                                </QTd>
+                            </template>
+                            <template #body-cell-date="props">
+                                <QTd :props="props">
+                                    {{ toDate(props.row?.created) }}
+                                    <QPopupEdit
+                                        v-model="props.row.created"
+                                        v-slot="scope"
+                                        @update:model-value="updateRoute(props.row)"
+                                        buttons
+                                    >
+                                        <VnInputDate
+                                            v-model="scope.value"
+                                            autofocus
+                                            :label="t('Date')"
+                                            :rules="validate('route.created')"
+                                            :is-clearable="false"
+                                            @keyup.enter="scope.set"
+                                            @focus="($event) => $event.target.select()"
+                                        />
+                                    </QPopupEdit>
+                                </QTd>
+                            </template>
+                            <template #body-cell-description="props">
+                                <QTd :props="props">
+                                    {{ props.row?.description }}
+                                    <QPopupEdit
+                                        v-model="props.row.description"
+                                        v-slot="scope"
+                                        @update:model-value="updateRoute(props.row)"
+                                        buttons
+                                    >
+                                        <VnInput
+                                            v-model="scope.value"
+                                            autofocus
+                                            :label="t('Description')"
+                                            :rules="validate('route.description')"
+                                            :is-clearable="false"
+                                            @keyup.enter="scope.set"
+                                            @focus="($event) => $event.target.select()"
+                                        />
+                                    </QPopupEdit>
+                                </QTd>
+                            </template>
+                            <template #body-cell-started="props">
+                                <QTd :props="props">
+                                    {{ toHour(props.row.started) }}
+                                    <QPopupEdit
+                                        v-model="props.row.started"
+                                        v-slot="scope"
+                                        buttons
+                                        @update:model-value="updateRoute(props.row)"
+                                    >
+                                        <VnInputTime
+                                            v-model="scope.value"
+                                            autofocus
+                                            :label="t('Hour started')"
+                                            :rules="validate('route.started')"
+                                            :is-clearable="false"
+                                            @keyup.enter="scope.set"
+                                            @focus="($event) => $event.target.select()"
+                                        />
+                                    </QPopupEdit>
+                                </QTd>
+                            </template>
+                            <template #body-cell-finished="props">
+                                <QTd :props="props">
+                                    {{ toHour(props.row.finished) }}
+                                    <QPopupEdit
+                                        v-model="props.row.finished"
+                                        v-slot="scope"
+                                        buttons
+                                        @update:model-value="updateRoute(props.row)"
+                                    >
+                                        <VnInputTime
+                                            v-model="scope.value"
+                                            autofocus
+                                            :label="t('Hour finished')"
+                                            :rules="validate('route.finished')"
+                                            :is-clearable="false"
+                                            @keyup.enter="scope.set"
+                                            @focus="($event) => $event.target.select()"
+                                        />
+                                    </QPopupEdit>
+                                </QTd>
+                            </template>
+                            <template #body-cell-actions="props">
+                                <QTd :props="props">
+                                    <div class="table-actions">
+                                        <QIcon
+                                            name="vn:ticketAdd"
+                                            size="xs"
+                                            color="primary"
+                                        >
+                                            <QTooltip>{{ t('Add ticket') }}</QTooltip>
+                                        </QIcon>
+                                        <QIcon
+                                            name="preview"
+                                            size="xs"
+                                            color="primary"
+                                            @click="previewRoute(props?.row?.id)"
+                                        >
+                                            <QTooltip>{{ t('Preview') }}</QTooltip>
+                                        </QIcon>
+                                    </div>
+                                </QTd>
+                            </template>
+                        </QTable>
+                    </div>
+                </template>
+            </VnPaginate>
+        </div>
         <QPageSticky :offset="[20, 20]">
             <RouterLink :to="{ name: 'RouteCreate' }">
                 <QBtn fab icon="add" color="primary" />
@@ -451,9 +494,18 @@ const markAsServed = () => {
 </template>
 
 <style lang="scss" scoped>
-.card-list {
+.route-list {
     width: 100%;
-    max-width: 60em;
+}
+
+.table-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    i {
+        cursor: pointer;
+    }
 }
 </style>
 <i18n>
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index f6553a4f1..614345913 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -11,14 +11,14 @@ export default {
     redirect: { name: 'RouteMain' },
     menus: {
         main: ['RouteList', 'CmrList'],
-        card: [],
+        card: ['RouteBasicData'],
     },
     children: [
         {
             path: '/route',
             name: 'RouteMain',
             component: () => import('src/pages/Route/RouteMain.vue'),
-            redirect: { name: 'CmrList' },
+            redirect: { name: 'RouteList' },
             children: [
                 {
                     path: 'cmr',
@@ -34,7 +34,7 @@ export default {
                     name: 'RouteList',
                     meta: {
                         title: 'RouteList',
-                        icon: 'vn:delivery',
+                        icon: 'view_list',
                     },
                     component: () => import('src/pages/Route/RouteList.vue'),
                 },
@@ -52,8 +52,7 @@ export default {
             name: 'RouteCard',
             path: ':id',
             component: () => import('src/pages/Route/Card/RouteCard.vue'),
-            // TODO: Add summary
-            redirect: { name: 'RouteBasicData' },
+            redirect: { name: 'RouteSummary' },
             children: [
                 {
                     name: 'RouteBasicData',
@@ -64,6 +63,15 @@ export default {
                     },
                     component: () => import('pages/Route/Card/RouteForm.vue'),
                 },
+                {
+                    name: 'RouteSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'open_in_new',
+                    },
+                    component: () => import('pages/Route/Card/RouteSummary.vue'),
+                },
             ],
         },
     ],