Merge pull request #265 from connorabbas/develop

connorabbas · web-flow · commit 461b03899b6f · 2025-05-14T19:12:55.000-05:00
Error Page, Menu updates
diff --git a/bootstrap/app.php b/bootstrap/app.php
@@ -1,8 +1,13 @@
 <?php
 
+use App\Http\Middleware\HandleInertiaRequests;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
+use Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Symfony\Component\HttpFoundation\Response;
 
 return Application::configure(basePath: dirname(__DIR__))
     ->withRouting(
@@ -12,12 +17,28 @@
     )
     ->withMiddleware(function (Middleware $middleware) {
         $middleware->web(append: [
-            App\Http\Middleware\HandleInertiaRequests::class,
-            Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
+            HandleInertiaRequests::class,
+            AddLinkHeadersForPreloadedAssets::class,
         ]);
-
-        //
     })
     ->withExceptions(function (Exceptions $exceptions) {
-        //
+        $exceptions->respond(function (Response $response, Throwable $exception, Request $request) {
+            if (
+                !app()->environment(['local', 'testing'])
+                && in_array($response->getStatusCode(), [500, 503, 404, 403])
+            ) {
+                return Inertia::render('Error', [
+                    'homepageRoute' => route('welcome'),
+                    'status' => $response->getStatusCode()
+                ])
+                    ->toResponse($request)
+                    ->setStatusCode($response->getStatusCode());
+            } elseif ($response->getStatusCode() === 419) {
+                return back()->with([
+                    'message' => 'The page expired, please try again.',
+                ]);
+            }
+
+            return $response;
+        });
     })->create();
diff --git a/resources/js/components/primevue/menu/Breadcrumb.vue b/resources/js/components/primevue/menu/Breadcrumb.vue
@@ -2,11 +2,11 @@
 import { ref, useTemplateRef } from 'vue';
 import Breadcrumb, { type BreadcrumbPassThroughOptions, type BreadcrumbProps } from 'primevue/breadcrumb';
 import { ChevronRight } from 'lucide-vue-next';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedBreadcrumbProps extends Omit<BreadcrumbProps, 'model'> {
-    model: ExtendedMenuItem[];
+    model: MenuItem[];
 }
 const componentProps = defineProps<ExtendedBreadcrumbProps>();
 
diff --git a/resources/js/components/primevue/menu/ContextMenu.vue b/resources/js/components/primevue/menu/ContextMenu.vue
@@ -2,11 +2,11 @@
 import { useTemplateRef } from 'vue';
 import ContextMenu, { type ContextMenuProps } from 'primevue/contextmenu';
 import { ChevronRight } from 'lucide-vue-next';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedContextMenuProps extends Omit<ContextMenuProps, 'model'> {
-    model: ExtendedMenuItem[];
+    model: MenuItem[];
 }
 const componentProps = defineProps<ExtendedContextMenuProps>();
 
diff --git a/resources/js/components/primevue/menu/Menu.vue b/resources/js/components/primevue/menu/Menu.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
 import Menu, { type MenuProps } from 'primevue/menu';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedMenuProps extends Omit<MenuProps, 'model'> {
-    model: ExtendedMenuItem[];
+    model: MenuItem[];
 }
 const componentProps = defineProps<ExtendedMenuProps>();
 
diff --git a/resources/js/components/primevue/menu/Menubar.vue b/resources/js/components/primevue/menu/Menubar.vue
@@ -2,11 +2,11 @@
 import { useTemplateRef } from 'vue';
 import Menubar, { type MenubarProps } from 'primevue/menubar';
 import { ChevronDown, ChevronRight } from 'lucide-vue-next';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedMenubarProps extends Omit<MenubarProps, 'model'> {
-    model: ExtendedMenuItem[];
+    model: MenuItem[];
 }
 const componentProps = withDefaults(
     defineProps<ExtendedMenubarProps>(),
diff --git a/resources/js/components/primevue/menu/PanelMenu.vue b/resources/js/components/primevue/menu/PanelMenu.vue
@@ -2,11 +2,11 @@
 import { useTemplateRef } from 'vue';
 import PanelMenu, { type PanelMenuPassThroughOptions, type PanelMenuProps } from 'primevue/panelmenu';
 import { ChevronDown, ChevronRight } from 'lucide-vue-next';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedPanelMenuProps extends Omit<PanelMenuProps, 'model'> {
-    model: ExtendedMenuItem[];
+    model: MenuItem[];
 }
 const componentProps = defineProps<ExtendedPanelMenuProps>();
 
diff --git a/resources/js/components/primevue/menu/TabMenu.vue b/resources/js/components/primevue/menu/TabMenu.vue
@@ -5,11 +5,11 @@ import { route } from 'ziggy-js';
 import Tabs from 'primevue/tabs';
 import TabList, { type TabListProps } from 'primevue/tablist';
 import Tab from 'primevue/tab';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedTabListProps extends Omit<TabListProps, 'items'> {
-    items: ExtendedMenuItem[];
+    items: MenuItem[];
 }
 const componentProps = defineProps<ExtendedTabListProps>();
 
diff --git a/resources/js/components/primevue/menu/TieredMenu.vue b/resources/js/components/primevue/menu/TieredMenu.vue
@@ -2,11 +2,11 @@
 import { useTemplateRef } from 'vue';
 import TieredMenu, { type TieredMenuProps } from 'primevue/tieredmenu';
 import { ChevronRight } from 'lucide-vue-next';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedTieredMenuProps extends Omit<TieredMenuProps, 'model'> {
-    model: ExtendedMenuItem[];
+    model: MenuItem[];
 }
 const componentProps = defineProps<ExtendedTieredMenuProps>();
 
diff --git a/resources/js/composables/useAppLayout.ts b/resources/js/composables/useAppLayout.ts
@@ -2,7 +2,7 @@ import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue';
 import { usePage, useForm } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
 import { LayoutGrid, House, Info, Github, Code, Settings, LogOut, BookOpen } from 'lucide-vue-next';
-import { ExtendedMenuItem } from '@/types';
+import { MenuItem } from '@/types';
 
 export function useAppLayout() {
     const page = usePage();
@@ -15,7 +15,7 @@ export function useAppLayout() {
     });
 
     // Menu items
-    const menuItems = computed<ExtendedMenuItem[]>(() => [
+    const menuItems = computed<MenuItem[]>(() => [
         {
             label: 'Home',
             lucideIcon: House,
@@ -56,7 +56,7 @@ export function useAppLayout() {
     const logout = () => {
         logoutForm.post(route('logout'));
     };
-    const userMenuItems: ExtendedMenuItem[] = [
+    const userMenuItems: MenuItem[] = [
         {
             label: 'Settings',
             route: route('profile.edit'),
diff --git a/resources/js/pages/Error.vue b/resources/js/pages/Error.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from 'vue';
+import { ArrowLeft } from 'lucide-vue-next';
+
+const props = defineProps({
+    homepageRoute: String,
+    status: Number
+});
+
+const title = computed(() => {
+    return {
+        503: 'Service Unavailable',
+        500: 'Server Error',
+        404: 'Page Not Found',
+        403: 'Forbidden',
+    }[props.status];
+});
+
+const description = computed(() => {
+    return {
+        503: 'Sorry, we are doing some maintenance. Please check back soon.',
+        500: 'Whoops, something went wrong on our servers.',
+        404: 'Sorry, the page you are looking for could not be found.',
+        403: 'Sorry, you are forbidden from accessing this page.',
+    }[props.status];
+});
+</script>
+
+<template>
+    <InertiaHead title="Error" />
+    <Container fluid>
+        <main>
+            <div class="h-screen flex items-center justify-center">
+                <Card class="p-4 py-6 sm:p-12">
+                    <template #content>
+                        <div class="flex flex-col gap-8 items-center justify-center text-center">
+                            <h1 class="font-extrabold text-5xl md:text-8xl text-primary">
+                                {{ props.status }}
+                            </h1>
+                            <h2 class="font-extrabold text-4xl md:text-6xl">
+                                {{ title }}
+                            </h2>
+                            <p class="text-xl font-semibold md:text-3xl text-muted-color">
+                                {{ description }}
+                            </p>
+                            <InertiaLink :href="props.homepageRoute">
+                                <Button
+                                    label="Back to homepage"
+                                    raised
+                                >
+                                    <template #icon>
+                                        <ArrowLeft />
+                                    </template>
+                                </Button>
+                            </InertiaLink>
+                        </div>
+                    </template>
+                </Card>
+            </div>
+        </main>
+    </Container>
+</template>
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
@@ -1,6 +1,6 @@
 import type { DataTableFilterMetaData } from 'primevue';
 import type { Page, PageProps, Errors } from '@inertiajs/core';
-import type { MenuItem } from 'primevue/menuitem';
+import type { MenuItem as PrimeVueMenuItem } from 'primevue/menuitem';
 import type { LucideIcon } from 'lucide-vue-next';
 
 export interface User {
@@ -18,9 +18,10 @@ export type PrimeVueDataFilters = {
     [key: string]: DataTableFilterMetaData;
 };
 
-export interface ExtendedMenuItem extends MenuItem {
+export interface MenuItem extends PrimeVueMenuItem {
     route?: string;
     lucideIcon?: LucideIcon;
+    active?: boolean;
 }
 
 export interface InertiaRouterFetchCallbacks {
