diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 8f6ffa35d..0e7218892 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { onMounted, useSlots, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const $props = defineProps({
     url: {
@@ -35,9 +35,9 @@ const $props = defineProps({
         default: null,
     },
 });
-const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 const entity = computed(() => useArrayData($props.dataKey).store.data);
 
 defineExpose({
@@ -64,15 +64,6 @@ async function getData() {
     emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: $props.summary,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -81,7 +72,7 @@ function viewSummary(id) {
             <div class="header bg-primary q-pa-sm justify-between">
                 <slot name="header-extra-action" />
                 <QBtn
-                    @click.stop="viewSummary(entity.id)"
+                    @click.stop="viewSummary(entity.id, $props.summary)"
                     round
                     flat
                     dense
diff --git a/src/pages/Claim/Card/ClaimSummaryDialog.vue b/src/pages/Claim/Card/ClaimSummaryDialog.vue
deleted file mode 100644
index 78673f54d..000000000
--- a/src/pages/Claim/Card/ClaimSummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import ClaimSummary from './ClaimSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <ClaimSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 492963399..e9462e7a9 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -29,15 +29,6 @@ function stateColor(code) {
 function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
-
-/* function viewSummary(id) {
-    quasar.dialog({
-        component: ClaimSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-} */
 </script>
 
 <template>
diff --git a/src/pages/Customer/Card/CustomerDescriptorProxy.vue b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
index 0341f66a0..9f67d02ec 100644
--- a/src/pages/Customer/Card/CustomerDescriptorProxy.vue
+++ b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
@@ -1,6 +1,6 @@
 <script setup>
 import CustomerDescriptor from './CustomerDescriptor.vue';
-import CustomerSummaryDialog from './CustomerSummaryDialog.vue';
+import CustomerSummary from './CustomerSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -12,10 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <CustomerDescriptor
-            v-if="$props.id"
-            :id="$props.id"
-            :summary="CustomerSummaryDialog"
-        />
+        <CustomerDescriptor v-if="$props.id" :id="$props.id" :summary="CustomerSummary" />
     </QPopupProxy>
 </template>
diff --git a/src/pages/Customer/Card/CustomerSummaryDialog.vue b/src/pages/Customer/Card/CustomerSummaryDialog.vue
deleted file mode 100644
index b19917712..000000000
--- a/src/pages/Customer/Card/CustomerSummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import CustomerSummary from './CustomerSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <CustomerSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>
diff --git a/src/pages/Entry/Card/EntrySummaryDialog.vue b/src/pages/Entry/Card/EntrySummaryDialog.vue
deleted file mode 100644
index 6bf65f0ef..000000000
--- a/src/pages/Entry/Card/EntrySummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import EntrySummary from './EntrySummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <EntrySummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummaryDialog.vue b/src/pages/InvoiceIn/Card/InvoiceInSummaryDialog.vue
deleted file mode 100644
index f0c37f8e3..000000000
--- a/src/pages/InvoiceIn/Card/InvoiceInSummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import InvoiceInSummary from './InvoiceInSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <InvoiceInSummary v-if="$props.id" :id="$props.id" full-width />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue
deleted file mode 100644
index 89ea808e4..000000000
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import InvoiceOutSummary from './InvoiceOutSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <InvoiceOutSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>
diff --git a/src/pages/Item/Card/ItemDescriptorProxy.vue b/src/pages/Item/Card/ItemDescriptorProxy.vue
index 58471dc83..5ddf434d5 100644
--- a/src/pages/Item/Card/ItemDescriptorProxy.vue
+++ b/src/pages/Item/Card/ItemDescriptorProxy.vue
@@ -1,6 +1,6 @@
 <script setup>
 import ItemDescriptor from './ItemDescriptor.vue';
-import ItemSummaryDialog from './ItemSummaryDialog.vue';
+import ItemSummary from './ItemSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -19,7 +19,7 @@ const $props = defineProps({
         <ItemDescriptor
             v-if="$props.id"
             :id="$props.id"
-            :summary="ItemSummaryDialog"
+            :summary="ItemSummary"
             :dated="dated"
         />
     </QPopupProxy>
diff --git a/src/pages/Item/Card/ItemSummaryDialog.vue b/src/pages/Item/Card/ItemSummaryDialog.vue
deleted file mode 100644
index 4af617fd9..000000000
--- a/src/pages/Item/Card/ItemSummaryDialog.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <QDialog
-        >Item summary dialog (A DESARROLLAR CUANDO SE CREE EL MODULO DE ITEMS)</QDialog
-    >
-</template>
diff --git a/src/pages/Order/Card/OrderSummaryDialog.vue b/src/pages/Order/Card/OrderSummaryDialog.vue
deleted file mode 100644
index 4ba02f21d..000000000
--- a/src/pages/Order/Card/OrderSummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <OrderSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>
diff --git a/src/pages/Route/Card/RouteSummaryDialog.vue b/src/pages/Route/Card/RouteSummaryDialog.vue
deleted file mode 100644
index 00f0e8e18..000000000
--- a/src/pages/Route/Card/RouteSummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<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" full-width>
-        <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 1d47fb8d7..c4eaa1fcb 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -13,14 +13,14 @@ 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';
+import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
-const quasar = useQuasar();
+const { viewSummary } = useSummaryDialog();
 
 const to = Date.vnNew();
 to.setDate(to.getDate() + 1);
@@ -159,18 +159,6 @@ const markAsServed = () => {
     refreshKey.value++;
     startingDate.value = null;
 };
-
-function previewRoute(id) {
-    if (!id) {
-        return;
-    }
-    quasar.dialog({
-        component: RouteSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -473,7 +461,9 @@ function previewRoute(id) {
                                             name="preview"
                                             size="xs"
                                             color="primary"
-                                            @click="previewRoute(props?.row?.id)"
+                                            @click="
+                                                viewSummary(props?.row?.id, RouteSummary)
+                                            "
                                             class="cursor-pointer"
                                         >
                                             <QTooltip>{{ t('Preview') }}</QTooltip>
diff --git a/src/pages/Shelving/Card/ShelvingSummaryDialog.vue b/src/pages/Shelving/Card/ShelvingSummaryDialog.vue
deleted file mode 100644
index 8416a080e..000000000
--- a/src/pages/Shelving/Card/ShelvingSummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import ShelvingSummary from 'pages/Shelving/Card/ShelvingSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <ShelvingSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>
diff --git a/src/pages/Supplier/Card/SupplierSummaryDialog.vue b/src/pages/Supplier/Card/SupplierSummaryDialog.vue
deleted file mode 100644
index 0bbcb1198..000000000
--- a/src/pages/Supplier/Card/SupplierSummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import SupplierSummary from './SupplierSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <SupplierSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>
diff --git a/src/pages/Ticket/Card/TicketSummaryDialog.vue b/src/pages/Ticket/Card/TicketSummaryDialog.vue
deleted file mode 100644
index 57df6c807..000000000
--- a/src/pages/Ticket/Card/TicketSummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import TicketSummary from './TicketSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <TicketSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>
diff --git a/src/pages/Travel/Card/TravelSummaryDialog.vue b/src/pages/Travel/Card/TravelSummaryDialog.vue
deleted file mode 100644
index fe9d5e95f..000000000
--- a/src/pages/Travel/Card/TravelSummaryDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import TravelSummary from './TravelSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <TravelSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>
diff --git a/src/pages/Worker/Card/WorkerDescriptorProxy.vue b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
index 98b06ad6e..a142570f9 100644
--- a/src/pages/Worker/Card/WorkerDescriptorProxy.vue
+++ b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
@@ -1,6 +1,6 @@
 <script setup>
 import WorkerDescriptor from './WorkerDescriptor.vue';
-import WorkerSummaryDialog from './WorkerSummaryDialog.vue';
+import WorkerSummary from './WorkerSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -12,10 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <WorkerDescriptor
-            v-if="$props.id"
-            :id="$props.id"
-            :summary="WorkerSummaryDialog"
-        />
+        <WorkerDescriptor v-if="$props.id" :id="$props.id" :summary="WorkerSummary" />
     </QPopupProxy>
 </template>
diff --git a/src/pages/Worker/Card/WorkerSummaryDialog.vue b/src/pages/Worker/Card/WorkerSummaryDialog.vue
deleted file mode 100644
index 700bd5a39..000000000
--- a/src/pages/Worker/Card/WorkerSummaryDialog.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import WorkerSummary from './WorkerSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <WorkerSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>