refactor: core functionality files converted to TS

Author: connorabbas

package-lock.json

@@ -17,8 +17,9 @@
     "dependencies": {
         "@primeuix/themes": "^1.0.0",
         "@tailwindcss/vite": "^4.1.13",
-        "@vueuse/core": "^12.2.0",
-        "axios": "^1.7.2",
+        "@vueuse/core": "^12.8.2",
+        "@vueuse/integrations": "^13.9.0",
+        "axios": "^1.12.2",
         "lucide-vue-next": "^0.487.0",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
@@ -34,6 +35,7 @@
         "@primevue/auto-import-resolver": "^4.2.5",
         "@tsconfig/node22": "^22.0.2",
         "@types/node": "^24.5.2",
+        "@types/nprogress": "^0.2.3",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vue/eslint-config-typescript": "^14.6.0",
         "@vue/tsconfig": "^0.8.1",
@@ -46,4 +48,4 @@
         "vite-plugin-vue-devtools": "^8.0.2",
         "vue-tsc": "^3.0.8"
     }
-}
+}

package.json

@@ -2,16 +2,17 @@ import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
 import { LayoutGrid, House, Info, Settings, LogOut, ExternalLink, FileSearch, FolderGit2 } from 'lucide-vue-next';
 import { useAuthStore } from '@/stores/auth';
+import { MenuItem } from '@/types';
 
 export function useAppLayout() {
     const authStore = useAuthStore();
     const route = useRoute();
-    const currentRoute = computed(() => route.name);
 
+    const currentRoute = computed(() => route.name);
     const userName = computed(() => authStore?.user?.name ?? 'User');
 
     // Menu items
-    const menuItems = computed(() => [
+    const menuItems = computed<MenuItem[]>(() => [
         {
             label: 'Home',
             lucideIcon: House,
@@ -57,7 +58,7 @@ export function useAppLayout() {
     ]);
 
     // User menu and logout functionality.
-    const userMenuItems = [
+    const userMenuItems: MenuItem[] = [
         {
             label: 'Settings',
             route: { name: 'settings.profile.edit' },

src/composables/useAppLayout.ts

@@ -1,54 +1,83 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useToast } from 'primevue/usetoast';
+import type { AxiosError } from 'axios';
+
+type ValidationErrors = Record<string, string[]>;
+
+interface ValidationErrorResponse {
+    errors: ValidationErrors;
+}
+
+interface ErrorHandlingOptions {
+    onError?: (error: AxiosError) => void;
+}
 
 export function useAxiosErrorHandling() {
     const router = useRouter();
     const toast = useToast();
-    const validationErrors = ref({});
+    const validationErrors = ref<ValidationErrors>({});
 
-    const clearErrors = (...fields) => {
+    function clearErrors(...fields: string[]): void {
         if (fields.length > 0) {
-            fields.forEach((field) => {
+            fields.forEach(field => {
                 if (field in validationErrors.value) {
                     delete validationErrors.value[field];
                 }
             });
         } else {
             validationErrors.value = {};
         }
-    };
+    }
 
-    const showErrorToast = (summary, detail) => {
+    function showErrorToast(summary: string, detail: string, severity: 'error' | 'warn' = 'error'): void {
         toast.add({
-            severity: 'error',
+            severity,
             summary,
             detail,
-            life: 3000,
+            life: 5000,
         });
-    };
+    }
 
-    const handleAxiosError = (error, options = {}) => {
+    function handleAxiosError(
+        error: AxiosError,
+        options: ErrorHandlingOptions = {}
+    ): void {
         if (error.response) {
-            const status = error.response.status;
-            const responseData = error.response.data;
-
-            if (status === 419) {
-                router.push({ name: 'login' });
-                showErrorToast('Session Expired', 'Please log in again.');
-            } else if (status === 422 && responseData?.errors) {
-                validationErrors.value = responseData.errors;
-                //showErrorToast('Validation Error', 'Validation failed.');
-            } else if (status >= 500) {
-                showErrorToast('Server Error', 'A critical error occurred.');
+            const { status, data: responseData } = error.response;
+
+            if (status === 401) {
+                console.log('User is unauthorized');
+                //showErrorToast('401 - Unauthorized', 'Please reload the page and login in.', 'warn');
+            } else if (status === 403) {
+                showErrorToast('403 - Forbidden', 'Sorry, you are unauthorized to access this resource/action.', 'warn');
+            } else if (status === 404) {
+                showErrorToast('404 - Not Found', 'Sorry, the resource you are looking for could not be found.', 'warn');
+            } else if (status === 419) {
+                router.push({ name: 'login' }).then(() => {
+                    showErrorToast('419 - Session Expired ', 'Please reload the page.', 'warn');
+                });
+            } else if (status === 422) {
+                const errorData = responseData as ValidationErrorResponse;
+                if (errorData.errors) {
+                    validationErrors.value = errorData.errors;
+                }
+            } else if (status === 500) {
+                showErrorToast('500 - Server Error', 'Whoops, something went wrong on our end. Please try again.');
+            } else if (status === 503) {
+                showErrorToast(
+                    '503 - Service Unavailable',
+                    'Sorry, we are doing some maintenance. Please check back soon.'
+                );
+            } else {
+                showErrorToast('Error', 'Something went wrong...');
             }
         } else if (error.request) {
-            showErrorToast('Network Error', 'Technical difficulties, please try again later.');
-            //console.error('Network Error:', error.message);
+            showErrorToast('Error', 'Technical difficulties, please contact I.T. support.');
         }
 
-        if (options.onError) options.onError(error);
-    };
+        options.onError?.(error);
+    }
 
     return {
         validationErrors,