Merge

README.md

@@ -10,6 +10,12 @@ yarn
 npm install
 ```
 
+### Install quasar cli
+
+```bash
+sudo npm install -g @quasar/cli
+```
+
 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
 
 ```bash

package.json

@@ -32,11 +32,11 @@
         "@intlify/vue-i18n-loader": "^4.1.0",
         "@quasar/app-webpack": "^3.6.2",
         "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.2.2",
-        "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.10",
+        "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-beta.5",
         "eslint": "^8.10.0",
         "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-cypress": "^2.11.3",
-        "eslint-plugin-jest": "^25.2.2",
+        "eslint-plugin-jest": "^27.1.5",
         "eslint-plugin-vue": "^8.5.0",
         "eslint-webpack-plugin": "^3.1.1",
         "jest-junit": "^13.0.0",

src/i18n/en/index.js

@@ -21,6 +21,7 @@ export default {
         reset: 'Reset',
         cancel: 'Cancel',
         confirm: 'Confirm',
+        back: 'Back',
         yes: 'Yes',
         no: 'No',
         noChanges: 'No changes to save',

src/i18n/es/index.js

@@ -21,6 +21,7 @@ export default {
         reset: 'Restaurar',
         cancel: 'Cancelar',
         confirm: 'Confirmar',
+        back: 'Volver',
         yes: 'Si',
         no: 'No',
         noChanges: 'Sin cambios que guardar',

src/pages/NotFound.vue

@@ -1,20 +1,39 @@
-<template>
-    <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
-        <div>
-            <div style="font-size: 30vh">404</div>
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
-            <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
+const router = useRouter();
+const { t } = useI18n();
+</script>
+<template>
+    <div class="text-center q-pa-md flex flex-center">
+        <div>
+            <div class="text-grey-5" style="opacity: 0.4; font-size: 30vh">
+                <q-icon name="vn:claims" />
+            </div>
+
+            <div class="text-h2 text-grey-5" style="opacity: 0.4">{{ t('notFound') }}</div>
 
             <q-btn
+                @click="router.go(-1)"
+                :label="t('globals.back')"
                 class="q-mt-xl"
-                color="white"
-                text-color="blue"
+                color="primary"
                 unelevated
-                to="/"
-                label="Go Home"
+                outline
                 no-caps
             />
         </div>
     </div>
 </template>
-
+<style lang="scss" scoped></style>
+<i18n>
+{
+    "en": {
+        "notFound": "Oops. Nothing here..."
+    },
+    "es": {
+        "notFound": "Vaya. Nada por aquí..."
+    }
+}
+</i18n>

src/router/routes.js

@@ -25,12 +25,12 @@ const routes = [
             customer,
             ticket,
             claim,
+            {
+                path: '/:pathMatch(.*)*',
+                name: 'NotFound',
+                component: () => import('../pages/NotFound.vue'),
+            }
         ],
-    },
-    {
-        path: '/:pathMatch(.*)*',
-        name: 'NotFound',
-        component: () => import('../pages/NotFound.vue'),
     }
 ];