añadir funicionalidades de permisos y grupos

resources/views/livewire/file-upload.blade.php

@@ -0,0 +1,69 @@
+<!-- resources/views/livewire/file-upload.blade.php -->
+<div class="relative p-8 mt-4 border-2 border-dashed rounded-lg"
+     x-data="{ isDragging: false }"
+     @dragover.prevent="isDragging = true"
+     @dragleave.prevent="isDragging = false"
+     @drop.prevent="isDragging = false; $wire.uploadFiles(event.dataTransfer.files)"
+     :class="{ 'border-blue-500 bg-blue-50': isDragging }">
+     
+    <div class="text-center">
+        <input type="file" id="fileInput" wire:model="files" multiple class="hidden">
+        
+        <template x-if="!$wire.previews.length">
+            <div>
+                <x-icons icon="upload" class="w-12 h-12 mx-auto text-gray-400" />
+                <p class="mt-2 text-sm text-gray-600">
+                    Arrastra archivos aquí o 
+                    <button class="text-blue-600 hover:underline" 
+                            @click="document.getElementById('fileInput').click()">
+                        selecciona desde tu equipo
+                    </button>
+                </p>
+                <p class="mt-1 text-xs text-gray-500">
+                    Máximo {{ $maxSize }}MB por archivo
+                </p>
+            </div>
+        </template>
+
+        <template x-if="$wire.previews.length">
+            <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
+                <template x-for="(preview, index) in $wire.previews" :key="index">
+                    <div class="relative p-2 border rounded-lg">
+                        <button class="absolute top-1 right-1 text-red-500 hover:text-red-700"
+                                @click="$wire.removePreview(index)">
+                            <x-icons icon="x" class="w-4 h-4" />
+                        </button>
+                        
+                        <template x-if="preview.preview">
+                            <img :src="preview.preview" class="object-cover h-32 mx-auto rounded">
+                        </template>
+                        
+                        <template x-if="!preview.preview">
+                            <x-icons icon="document" class="w-32 h-32 mx-auto text-gray-400" />
+                        </template>
+                        
+                        <div class="mt-2 text-xs truncate" x-text="preview.name"></div>
+                        <div class="text-xs text-gray-500" 
+                             x-text="formatBytes(preview.size)"></div>
+                    </div>
+                </template>
+            </div>
+        </template>
+    </div>
+</div>
+
+<script>
+function formatBytes(bytes) {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let size = bytes;
+    let unitIndex = 0;
+    
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex++;
+    }
+    
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+}
+</script>
+