Refine admin workflows and team access

frontend/src/components/ui/Modal.vue

@@ -1,15 +1,24 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
 import { X } from '@lucide/vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   open: boolean
   title?: string
   subtitle?: string
-}>()
+  size?: 'md' | 'lg' | 'xl'
+}>(), {
+  size: 'md',
+})
 
 const emit = defineEmits<{ (e: 'close'): void }>()
 
+const panelSizeClass = computed(() => ({
+  md: 'max-w-lg',
+  lg: 'max-w-3xl',
+  xl: 'max-w-6xl',
+}[props.size]))
+
 function onKey(event: KeyboardEvent) {
   if (event.key === 'Escape' && props.open) emit('close')
 }
@@ -38,7 +47,7 @@ onBeforeUnmount(() => {
       @click.self="emit('close')"
     >
       <div class="absolute inset-0 bg-violet-950/30 backdrop-blur-sm" @click="emit('close')" />
-      <div class="modal-panel relative z-10 w-full max-w-lg overflow-hidden rounded-[28px] border border-violet-200/70 bg-white shadow-[0_40px_90px_rgba(76,40,160,0.28)]">
+      <div class="modal-panel relative z-10 w-full overflow-hidden rounded-[28px] border border-violet-200/70 bg-white shadow-[0_40px_90px_rgba(76,40,160,0.28)]" :class="panelSizeClass">
           <div class="flex items-start justify-between gap-4 border-b border-violet-100 bg-[linear-gradient(135deg,#f3edff,#fff4e6)] px-6 py-5">
             <div>
               <h3 v-if="title" class="font-[Cormorant_Garamond] text-3xl text-violet-800">{{ title }}</h3>