404 page

src/layouts/components/KunafaLogo.vue

@@ -0,0 +1,27 @@
+<template>
+    <!-- Small logo icon , TODO: replace with logo (dynamically) -->
+    <Icon icon="emojione:up-arrow" class="" />
+    <!-- System name -->
+    <span class="text-xl font-semibold text-primary mx-2">Kunafa Vue</span>
+</template>
+
+<script>
+export default {
+    name: 'KunafaLogo',
+    props: {
+        height: {
+            type: Number,
+            default: 24,
+        },
+        start: {
+            type: String,
+            default: 'primary',
+        },
+        end: {
+            type: String,
+            default: 'secondary',
+        },
+    },
+}
+
+</script>

src/layouts/components/Sidebar.vue

@@ -31,12 +31,7 @@
         </button>
         <!-- Logo and system name -->
         <router-link class="flex items-center" to="/">
-          <!-- Small logo icon , TODO: replace with logo (dynamically) -->
-          <Icon icon="emojione:up-arrow" class="" />
-          <!-- System name -->
-          <span class="text-xl font-semibold text-primary mx-2"
-            >Kunafa Vue</span
-          >
+          <KunafaLogo />
         </router-link>
       </div>
 
@@ -185,12 +180,14 @@ import { useRouter } from "vue-router"; // Import useRouter
 import SidebarLinkGroup from "../../layouts/components/SidebarLinkGroup.vue";
 import { useI18n } from "vue-i18n";
 import SelectedLanguage from "@/services/LanguageService.js";
+import KunafaLogo from "./KunafaLogo.vue";
 
 export default {
   name: "Sidebar",
   props: ["sidebarOpen"],
   components: {
     SidebarLinkGroup,
+    KunafaLogo,
   },
   setup(props, { emit }) {
     const routes = ref([]);

src/libs/i18n/locales/ar.json

@@ -63,5 +63,16 @@
 
   "breadcrumbs": {
     "home": "الرئيسية"
+  },
+
+  "pages": {
+    "errors" : {
+      "404": {
+        "title": "الصفحة غير موجودة",
+        "message": "عذراً، الصفحة التي تبحث عنها غير موجودة.",
+        "go_to_home_btn": "الذهاب للصفحة الرئيسية",
+        "open_issue_github_btn": "افتح مشكلة في Github"
+      }
+    }
   }
 }

src/libs/i18n/locales/en.json

@@ -62,5 +62,16 @@
   },
   "breadcrumbs": {
     "home": "Home"
+  },
+
+  "pages": {
+    "errors" : {
+      "404": {
+        "title": "Page not found",
+        "message": "The page you are looking for might have been removed had its name changed or is temporarily unavailable.",
+        "go_to_home_btn": "Go to Home",
+        "open_issue_github_btn": "Open Issue in Github"
+      }
+    }
   }
 }

src/router/index.js

@@ -193,7 +193,16 @@ const router = createRouter({
           }
         },
       ]
-    }
+    },
+    {
+      name: '404',
+      path: '/404',
+      component: () => import('@/views/pages/errors/404.vue'),
+      meta: {
+        label: '404',
+        icon: 'bx:bx-error'
+      }
+    },
   ]
 })
 

src/views/pages/errors/404.vue

@@ -0,0 +1,39 @@
+<script setup>
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-6 px-4 my-8">
+    <div class="fof">
+                <h1 class="va-h1 text-center sm:text-5xl text-4xl">{{$t('pages.errors.404.title')}}</h1>
+    	</div>
+
+      <p class="text-center">{{$t('pages.errors.404.message')}}</p>
+
+      <div class="flex flex-col sm:flex-row gap-4">
+        <RouterLink to="/" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">{{$t('pages.errors.404.go_to_home_btn')}}</RouterLink>
+        <a href="https://github.com/kunafaPlus/kunafa-dashboard-vue/issues/new/choose" preset="secondary" target="_blank"
+          class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
+          <Icon class="!text-gray-800" icon="entypo-social:github" width="20" height="20" />
+          <span class="mx-2">{{ $t('pages.errors.404.open_issue_github_btn') }}</span>
+      </a>
+      </div>
+    </div>
+</template>
+<style scoped>
+.fof{
+	  display: table-cell;
+	  vertical-align: middle;
+}
+
+.fof h1{
+	  font-size: 50px;
+	  display: inline-block;
+	  padding-right: 12px;
+	  animation: type .5s alternate infinite;
+}
+
+@keyframes type{
+	  from{box-shadow: inset -3px 0px 0px #888;}
+	  to{box-shadow: inset -3px 0px 0px transparent;}
+}
+</style>