feat: add visual indicator for non-production environments

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>