diff --git a/src/pages/Route/RouteAutonomous.vue b/src/pages/Route/RouteAutonomous.vue
index 2ed024d29..eee9ff9c5 100644
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/src/pages/Route/RouteAutonomous.vue
@@ -4,22 +4,22 @@ import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
-import RouteSummaryDialog from 'pages/Route/Card/RouteSummaryDialog.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import RouteDescriptorProxy from 'pages/Route/Card/RouteDescriptorProxy.vue';
 import InvoiceInDescriptorProxy from 'pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue';
 import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import { useQuasar } from 'quasar';
 import useNotify from 'composables/useNotify';
 import RouteAutonomousFilter from 'pages/Route/Card/RouteAutonomousFilter.vue';
 import { useRouter } from 'vue-router';
+import RouteSummary from "pages/Route/Card/RouteSummary.vue";
+import {useSummaryDialog} from "composables/useSummaryDialog";
 
 const stateStore = useStateStore();
 const { t } = useI18n();
-const quasar = useQuasar();
 const { notify } = useNotify();
 const router = useRouter();
+const { viewSummary } = useSummaryDialog();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -131,18 +131,6 @@ const openCreateInvoiceIn = () => {
 
     router.push({ name: 'RouteAutonomousCreateInvoiceIn', query: { q: params } });
 };
-
-function previewRoute(id) {
-    if (!id) {
-        return;
-    }
-    quasar.dialog({
-        component: RouteSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -245,7 +233,7 @@ function previewRoute(id) {
                                             name="preview"
                                             size="xs"
                                             color="primary"
-                                            @click="previewRoute(props?.row?.routeFk)"
+                                            @click="viewSummary(props?.row?.routeFk, RouteSummary)"
                                         >
                                             <QTooltip>{{ t('Preview') }}</QTooltip>
                                         </QIcon>
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index f38601a26..abb6450d3 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -29,24 +29,6 @@ export default {
                     },
                     component: () => import('src/pages/Route/RouteList.vue'),
                 },
-                {
-                    path: 'roadmap',
-                    name: 'RouteRoadmap',
-                    meta: {
-                        title: 'RouteRoadmap',
-                        icon: 'vn:troncales',
-                    },
-                    component: () => import('src/pages/Route/RouteRoadmap.vue'),
-                },
-                {
-                    path: 'roadmap/create',
-                    name: 'RouteRoadmapCreate',
-                    meta: {
-                        title: 'RouteRoadmapCreate',
-                        icon: 'vn:troncales',
-                    },
-                    component: () => import('src/pages/Route/Roadmap/RoadmapCreate.vue'),
-                },
                 {
                     path: 'create',
                     name: 'RouteCreate',
@@ -72,6 +54,24 @@ export default {
                     },
                     component: () => import('src/pages/Route/RouteAutonomousCreateInvoiceIn.vue'),
                 },
+                {
+                    path: 'roadmap',
+                    name: 'RouteRoadmap',
+                    meta: {
+                        title: 'RouteRoadmap',
+                        icon: 'vn:troncales',
+                    },
+                    component: () => import('src/pages/Route/RouteRoadmap.vue'),
+                },
+                {
+                    path: 'roadmap/create',
+                    name: 'RouteRoadmapCreate',
+                    meta: {
+                        title: 'RouteRoadmapCreate',
+                        icon: 'vn:troncales',
+                    },
+                    component: () => import('src/pages/Route/Roadmap/RoadmapCreate.vue'),
+                },
                 {
                     path: 'cmr',
                     name: 'CmrList',