feat: add visual indicator for non-production environments

resources/js/Layouts/AdminLayout.vue

@@ -4,11 +4,13 @@ import { Link } from '@inertiajs/vue3';
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 import Dropdown from '@/Components/Dropdown.vue';
 import DropdownLink from '@/Components/DropdownLink.vue';
+import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
 
 const isSidebarOpen = ref(true);
 </script>
 
 <template>
+    <EnvironmentBanner />
     <div class="min-h-screen bg-slate-50 dark:bg-slate-900 flex text-slate-900 dark:text-slate-100">
         <!-- Sidebar -->
         <aside

resources/js/Layouts/AuthenticatedLayout.vue

@@ -6,11 +6,13 @@ import DropdownLink from '@/Components/DropdownLink.vue';
 import NavLink from '@/Components/NavLink.vue';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
 import { Link } from '@inertiajs/vue3';
+import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
 
 const showingNavigationDropdown = ref(false);
 </script>
 
 <template>
+    <EnvironmentBanner />
     <div>
         <div class="min-h-screen bg-gray-100">
             <nav

resources/js/Layouts/GuestLayout.vue

@@ -1,9 +1,11 @@
 <script setup>
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 import { Link } from '@inertiajs/vue3';
+import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
 </script>
 
 <template>
+    <EnvironmentBanner />
     <div
         class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 sm:justify-center sm:pt-0"
     >