feat: add visual indicator for non-production environments

app/Http/Middleware/HandleInertiaRequests.php

@@ -38,6 +38,7 @@ class HandleInertiaRequests extends Middleware
                 'success' => $request->session()->get('success'),
                 'error' => $request->session()->get('error'),
             ],
+            'app_env' => config('app.env'),
         ];
     }
 }

resources/js/Components/EnvironmentBanner.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+
+const page = usePage();
+const appEnv = computed(() => page.props.app_env);
+
+const isDevelopment = computed(() => appEnv.value !== 'production');
+
+const bannerStyles = computed(() => {
+    if (appEnv.value === 'local') {
+        return 'bg-amber-400 text-amber-950 border-amber-500/50';
+    } else if (appEnv.value === 'staging') {
+        return 'bg-blue-500 text-white border-blue-600/50';
+    }
+    return 'bg-rose-500 text-white border-rose-600/50';
+});
+
+const label = computed(() => {
+    if (appEnv.value === 'local') return 'DEV';
+    if (appEnv.value === 'staging') return 'STG';
+    return appEnv.value?.toUpperCase() || 'ENV';
+});
+</script>
+
+<template>
+    <div 
+        v-if="isDevelopment" 
+        class="fixed top-0 left-0 right-0 z-[9999] h-1 pointer-events-none shadow-sm shadow-black/10"
+        :class="bannerStyles"
+    ></div>
+    
+    <div 
+        v-if="isDevelopment"
+        class="fixed top-4 -right-12 z-[9999] pointer-events-none select-none"
+    >
+        <div 
+            class="transform rotate-45 py-1 px-14 text-[10px] font-black tracking-tighter shadow-lg border-y whitespace-nowrap text-center flex flex-col items-center justify-center leading-none"
+            :class="bannerStyles"
+        >
+            <span>ENV {{ label }}</span>
+            <span class="text-[7px] opacity-70 mt-0.5">{{ appEnv }}</span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* No specific styles needed as Tailwind handles most of it, but ensure z-index is high */
+</style>

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"
     >