refactor: handle url to tab

src/components/00_home/MenuItem.vue

@@ -15,6 +15,7 @@ defineProps<{
     hidden?: boolean;
     disabled?: boolean;
     isax?: boolean;
+    tab?: string;
     color:
       | 'green'
       | 'red'
@@ -28,8 +29,8 @@ defineProps<{
   }[];
 }>();
 
-function navigateTo(destination: string) {
-  router.push(`${destination}`);
+function navigateTo(destination: string, tab?: string) {
+  router.push({ path: `${destination}`, query: tab ? { tab } : {} });
 }
 </script>
 
@@ -44,7 +45,7 @@ function navigateTo(destination: string) {
       v-for="(v, i) in list.filter((item) => !item.hidden)"
       :key="i"
       :bordered="$q.dark.isActive"
-      @click="!v.disabled && navigateTo(v.value)"
+      @click="!v.disabled && navigateTo(v.value, v.tab)"
     >
       <AppCircle
         :id="`menu-icon-${v.value}`"

src/pages/09_task-order/MainPage.vue

@@ -4,6 +4,7 @@ import { computed, onMounted, reactive, watch, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 
 // NOTE:  Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -29,6 +30,7 @@ import { PaginationResult } from 'src/types';
 
 const { t } = useI18n();
 const $q = useQuasar();
+const route = useRoute();
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
 const taskOrderStore = useTaskOrderStore();
@@ -143,6 +145,10 @@ onMounted(async () => {
   navigatorStore.current.path = [{ text: 'taskOrder.caption', i18n: true }];
   fetchTaskOrderList();
   taskOrderStore.getTaskOrderStats();
+
+  if (route.query['tab'] && typeof route.query['tab'] === 'string') {
+    pageState.currentTab = route.query['tab'];
+  }
 });
 
 watch(

src/pages/MainPage.vue

@@ -84,11 +84,12 @@ onMounted(() => {
       isax: true,
     },
     {
-      value: 'receipt',
+      value: 'task-order',
       icon: 'material-symbols:box',
       color: 'camo',
       title: 'menu.invoice',
       caption: 'menu.invoiceCaption',
+      tab: 'Complete',
     },
     {
       value: '',