Sistema de archivos multimedia: MediaManager, checkbox imágenes en mapa, modal visor, subida por feature/proyecto

app/Livewire/MediaManager.php

@@ -0,0 +1,169 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use Livewire\WithFileUploads;
+use Livewire\Attributes\On;
+use App\Models\Media;
+use App\Models\Project;
+use App\Models\Phase;
+use App\Models\Layer;
+use App\Models\Feature;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+
+class MediaManager extends Component
+{
+    use WithFileUploads;
+
+    // Polimórfico: a qué entidad pertenece
+    public $mediableType;
+    public $mediableId;
+
+    public $entity;     // instancia cargada
+    public $mediaItems = [];
+
+    // Subida
+    public $uploadFiles = [];
+    public $uploadDescription = '';
+    public $uploadCategory = 'image';
+
+    // Modal visor
+    public $showViewer = false;
+    public $viewingMedia = null;
+
+    protected $rules = [
+        'uploadFiles.*' => 'required|file|max:102400', // 100MB total
+        'uploadDescription' => 'nullable|string|max:500',
+        'uploadCategory' => 'required|in:image,document,other',
+    ];
+
+    protected $messages = [
+        'uploadFiles.*.max' => 'Cada archivo debe pesar menos de 100MB.',
+    ];
+
+    public function mount($mediableType, $mediableId)
+    {
+        $this->mediableType = $mediableType;
+        $this->mediableId = $mediableId;
+
+        $this->entity = $mediableType::findOrFail($mediableId);
+        $this->loadMedia();
+    }
+
+    public function loadMedia()
+    {
+        $this->mediaItems = Media::where('mediable_type', $this->mediableType)
+            ->where('mediable_id', $this->mediableId)
+            ->with('uploader')
+            ->latest()
+            ->get();
+    }
+
+    public function upload()
+    {
+        $user = Auth::user();
+        if (!$user->can('upload layers') && !$user->hasRole('Admin')) {
+            session()->flash('error', 'Sin permisos.');
+            return;
+        }
+
+        $this->validate();
+
+        if (empty($this->uploadFiles)) {
+            session()->flash('error', 'Selecciona al menos un archivo.');
+            return;
+        }
+
+        $uploaded = 0;
+        foreach ($this->uploadFiles as $file) {
+            $mime = $file->getMimeType();
+            $ext = $file->getClientOriginalExtension();
+            $size = $file->getSize();
+            $name = $file->getClientOriginalName();
+
+            // Determinar categoría automática
+            $category = $this->uploadCategory;
+            if (str_starts_with($mime, 'image/')) {
+                $category = 'image';
+            } elseif (in_array($mime, ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'])) {
+                $category = 'document';
+            }
+
+            // Guardar en disco
+            $entityType = class_basename($this->entity);
+            $dir = "uploads/{$entityType}s/{$this->mediableId}/media";
+            $path = $file->store($dir, 'public');
+
+            Media::create([
+                'mediable_type' => $this->mediableType,
+                'mediable_id' => $this->mediableId,
+                'name' => $name,
+                'file_path' => $path,
+                'file_type' => $mime,
+                'file_extension' => $ext,
+                'file_size' => $size,
+                'category' => $category,
+                'description' => $this->uploadDescription,
+                'uploaded_by' => $user->id,
+            ]);
+
+            $uploaded++;
+        }
+
+        $this->reset(['uploadFiles', 'uploadDescription']);
+        $this->loadMedia();
+
+        // Notificar al mapa si corresponde
+        $this->dispatch('mediaUploaded', [
+            'mediableType' => $this->mediableType,
+            'mediableId' => $this->mediableId,
+        ]);
+
+        session()->flash('message', "$uploaded archivo(s) subido(s) correctamente.");
+    }
+
+    public function deleteMedia($mediaId)
+    {
+        $media = Media::findOrFail($mediaId);
+
+        $user = Auth::user();
+        if (!$user->hasRole('Admin') && $media->uploaded_by !== $user->id) {
+            session()->flash('error', 'No puedes borrar archivos de otro usuario.');
+            return;
+        }
+
+        $media->delete();
+        $this->loadMedia();
+        session()->flash('message', 'Archivo eliminado.');
+    }
+
+    public function viewMedia($mediaId)
+    {
+        $media = Media::findOrFail($mediaId);
+        if (!$media->is_image) {
+            // Si no es imagen, abrir en nueva pestaña
+            $this->dispatch('openUrl', $media->url);
+            return;
+        }
+        $this->viewingMedia = $media;
+        $this->showViewer = true;
+    }
+
+    public function closeViewer()
+    {
+        $this->showViewer = false;
+        $this->viewingMedia = null;
+    }
+
+    public function render()
+    {
+        return view('livewire.media-manager', [
+            'entityName' => class_basename($this->entity) . ': ' . ($this->entity->name ?? $this->entity->id),
+            'images' => $this->mediaItems->filter(fn($m) => $m->is_image),
+            'documents' => $this->mediaItems->filter(fn($m) => !$m->is_image),
+        ]);
+    }
+}

app/Livewire/ProjectMap.php

@@ -33,6 +33,10 @@ class ProjectMap extends Component
     public $inspectionFormData = [];
     public $inspectionHistory = [];
 
+    // Imágenes en mapa
+    public $showFeatureImages = false;
+    public $featureImageMarkers = [];
+
     public function mount(Project $project)
     {
         $this->project = $project;
@@ -246,6 +250,64 @@ class ProjectMap extends Component
         $this->resetInspectionForm();
     }
 
+    /**
+     * Toggle mostrar imágenes en el mapa.
+     */
+    public function toggleFeatureImages()
+    {
+        $this->showFeatureImages = !$this->showFeatureImages;
+        $this->loadFeatureImageMarkers();
+        $this->dispatch('featureImagesToggled', $this->showFeatureImages, $this->featureImageMarkers);
+    }
+
+    /**
+     * Cargar marcadores de imágenes para el mapa.
+     */
+    public function loadFeatureImageMarkers()
+    {
+        if (!$this->showFeatureImages) {
+            $this->featureImageMarkers = [];
+            return;
+        }
+
+        $markers = [];
+        foreach ($this->phases as $phase) {
+            foreach ($phase->layers as $layer) {
+                foreach ($layer->features as $feature) {
+                    $image = $feature->images()->first();
+                    if ($image) {
+                        $geo = $feature->geometry;
+                        $coords = null;
+                        if ($geo && isset($geo['coordinates'])) {
+                            if ($geo['type'] === 'Point') {
+                                $coords = [
+                                    'lat' => $geo['coordinates'][1],
+                                    'lng' => $geo['coordinates'][0],
+                                ];
+                            } elseif (in_array($geo['type'], ['Polygon', 'LineString'])) {
+                                $coords = [
+                                    'lat' => $geo['coordinates'][0][1] ?? null,
+                                    'lng' => $geo['coordinates'][0][0] ?? null,
+                                ];
+                            }
+                        }
+                        if ($coords && $coords['lat'] && $coords['lng']) {
+                            $markers[] = [
+                                'feature_id' => $feature->id,
+                                'name' => $feature->name,
+                                'lat' => $coords['lat'],
+                                'lng' => $coords['lng'],
+                                'image_url' => $image->url,
+                                'image_name' => $image->name,
+                            ];
+                        }
+                    }
+                }
+            }
+        }
+        $this->featureImageMarkers = $markers;
+    }
+
     public function toggleFullscreen()
     {
         $this->formFullscreen = !$this->formFullscreen;

app/Models/Feature.php

@@ -29,4 +29,14 @@ class Feature extends Model
     {
         return $this->hasMany(Inspection::class, 'feature_id');
     }
+
+    public function media()
+    {
+        return $this->morphMany(Media::class, 'mediable');
+    }
+
+    public function images()
+    {
+        return $this->morphMany(Media::class, 'mediable')->where('category', 'image');
+    }
 }

app/Models/Layer.php

@@ -33,4 +33,9 @@ class Layer extends Model
     {
         return $this->hasMany(Feature::class);
     }
+
+    public function media()
+    {
+        return $this->morphMany(Media::class, 'mediable');
+    }
 }

app/Models/Media.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Storage;
+
+class Media extends Model
+{
+    protected $table = 'media';
+
+    protected $fillable = [
+        'mediable_type', 'mediable_id',
+        'name', 'file_path', 'file_type', 'file_extension', 'file_size',
+        'category', 'description', 'metadata', 'uploaded_by',
+    ];
+
+    protected $casts = [
+        'metadata' => 'array',
+        'file_size' => 'integer',
+    ];
+
+    // Relación polimórfica: pertenece a Project, Phase, Layer o Feature
+    public function mediable()
+    {
+        return $this->morphTo();
+    }
+
+    public function uploader()
+    {
+        return $this->belongsTo(User::class, 'uploaded_by');
+    }
+
+    // Helper: URL pública del archivo
+    public function getUrlAttribute()
+    {
+        return Storage::url($this->file_path);
+    }
+
+    // Helper: si es imagen
+    public function getIsImageAttribute()
+    {
+        return str_starts_with($this->file_type, 'image/');
+    }
+
+    // Helper: tamaño formateado
+    public function getFormattedSizeAttribute()
+    {
+        $bytes = $this->file_size;
+        if ($bytes >= 1073741824) return round($bytes / 1073741824, 2) . ' GB';
+        if ($bytes >= 1048576) return round($bytes / 1048576, 1) . ' MB';
+        if ($bytes >= 1024) return round($bytes / 1024) . ' KB';
+        return $bytes . ' B';
+    }
+
+    // Scopes
+    public function scopeImages($query)
+    {
+        return $query->where('category', 'image');
+    }
+
+    public function scopeDocuments($query)
+    {
+        return $query->where('category', 'document');
+    }
+
+    // Boot: borrar archivo físico al eliminar registro
+    protected static function booted()
+    {
+        static::deleting(function ($media) {
+            Storage::delete($media->file_path);
+        });
+    }
+}

app/Models/Phase.php

@@ -38,4 +38,14 @@ class Phase extends Model
     {
         return $this->hasManyThrough(Feature::class, Layer::class);
     }
+
+    public function media()
+    {
+        return $this->morphMany(Media::class, 'mediable');
+    }
+
+    public function images()
+    {
+        return $this->morphMany(Media::class, 'mediable')->where('category', 'image');
+    }
 }

app/Models/Project.php

@@ -39,6 +39,16 @@ class Project extends Model
         return $this->belongsTo(User::class, 'created_by');
     }
 
+    public function media()
+    {
+        return $this->morphMany(Media::class, 'mediable');
+    }
+
+    public function images()
+    {
+        return $this->morphMany(Media::class, 'mediable')->where('category', 'image');
+    }
+
     // Scope to filter accessible projects for non-admin users
     public function scopeAccessibleBy($query, User $user)
     {

database/migrations/2026_05_09_210000_create_media_table.php

@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up()
+    {
+        Schema::create('media', function (Blueprint $table) {
+            $table->id();
+            $table->morphs('mediable');           // project, phase, layer, feature
+            $table->string('name');
+            $table->string('file_path');
+            $table->string('file_type');           // image/jpeg, application/pdf, etc.
+            $table->string('file_extension', 10);
+            $table->unsignedInteger('file_size');
+            $table->enum('category', ['image', 'document', 'other'])->default('image');
+            $table->text('description')->nullable();
+            $table->json('metadata')->nullable();  // EXIF, GPS coords, etc.
+            $table->foreignId('uploaded_by')->constrained('users');
+            $table->timestamps();
+        });
+    }
+
+    public function down()
+    {
+        Schema::dropIfExists('media');
+    }
+};

resources/views/livewire/media-manager.blade.php

@@ -0,0 +1,120 @@
+<div>
+    @if(session()->has('message'))
+        <div class="alert alert-success mb-2">{{ session('message') }}</div>
+    @endif
+    @if(session()->has('error'))
+        <div class="alert alert-error mb-2">{{ session('error') }}</div>
+    @endif
+
+    {{-- Subida --}}
+    <div class="card bg-base-100 shadow-xl mb-4">
+        <div class="card-body">
+            <h3 class="card-title text-sm">Subir archivos</h3>
+
+            <form wire:submit.prevent="upload" class="space-y-3">
+                <div class="form-control">
+                    <label class="label-text">Archivos (hasta 100MB c/u)</label>
+                    <input type="file" wire:model="uploadFiles" multiple class="file-input file-input-bordered file-input-sm" />
+                    @error('uploadFiles.*') <span class="text-error text-xs">{{ $message }}</span> @enderror
+                </div>
+
+                <div class="grid grid-cols-2 gap-2">
+                    <div class="form-control">
+                        <label class="label-text">Categoría</label>
+                        <select wire:model="uploadCategory" class="select select-bordered select-sm">
+                            <option value="image">Imagen</option>
+                            <option value="document">Documento</option>
+                            <option value="other">Otro</option>
+                        </select>
+                    </div>
+                    <div class="form-control">
+                        <label class="label-text">Descripción</label>
+                        <input type="text" wire:model="uploadDescription" class="input input-bordered input-sm" placeholder="Opcional" />
+                    </div>
+                </div>
+
+                <button type="submit" class="btn btn-primary btn-sm w-full">Subir archivos</button>
+            </form>
+        </div>
+    </div>
+
+    {{-- Galería de imágenes --}}
+    @if($images->isNotEmpty())
+        <div class="card bg-base-100 shadow-xl mb-4">
+            <div class="card-body">
+                <h3 class="card-title text-sm">Imágenes ({{ $images->count() }})</h3>
+                <div class="grid grid-cols-3 gap-2">
+                    @foreach($images as $media)
+                        <div class="relative group cursor-pointer" wire:click="viewMedia({{ $media->id }})">
+                            <img src="{{ $media->url }}" alt="{{ $media->name }}"
+                                 class="w-full h-20 object-cover rounded border hover:opacity-80 transition-opacity" />
+                            <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-[10px] px-1 truncate rounded-b">
+                                {{ $media->name }}
+                            </div>
+                            <button wire:click.stop="deleteMedia({{ $media->id }})"
+                                    class="absolute top-0 right-0 bg-error text-white text-xs w-4 h-4 rounded-full opacity-0 group-hover:opacity-100 transition-opacity leading-none"
+                                    onclick="return confirm('¿Borrar {{ $media->name }}?')">×</button>
+                        </div>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+    @endif
+
+    {{-- Documentos --}}
+    @if($documents->isNotEmpty())
+        <div class="card bg-base-100 shadow-xl mb-4">
+            <div class="card-body">
+                <h3 class="card-title text-sm">Documentos ({{ $documents->count() }})</h3>
+                <div class="space-y-1">
+                    @foreach($documents as $media)
+                        <div class="flex items-center gap-2 p-2 border rounded text-sm hover:bg-base-200">
+                            <span class="text-lg">
+                                @switch($media->file_extension)
+                                    @case('pdf') 📄 @break
+                                    @case('doc') @case('docx') 📝 @break
+                                    @case('xls') @case('xlsx') 📊 @break
+                                    @default 📎
+                                @endswitch
+                            </span>
+                            <a href="{{ $media->url }}" target="_blank" class="flex-1 truncate link link-primary">
+                                {{ $media->name }}
+                            </a>
+                            <span class="text-xs text-gray-400">{{ $media->formatted_size }}</span>
+                            <button wire:click="deleteMedia({{ $media->id }})"
+                                    class="btn btn-xs btn-ghost text-error"
+                                    onclick="return confirm('¿Borrar {{ $media->name }}?')">×</button>
+                        </div>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+    @endif
+
+    {{-- Vacío --}}
+    @if($mediaItems->isEmpty())
+        <div class="text-center text-gray-400 py-6 text-sm">
+            <p class="text-2xl mb-2">📁</p>
+            <p>No hay archivos. Sube imágenes o documentos.</p>
+        </div>
+    @endif
+
+    {{-- Modal visor de imágenes --}}
+    @if($showViewer && $viewingMedia)
+        <div class="fixed inset-0 z-[5000] bg-black bg-opacity-80 flex items-center justify-center p-4"
+             wire:click.self="closeViewer">
+            <div class="relative max-w-4xl max-h-[90vh]">
+                <button wire:click="closeViewer"
+                        class="absolute -top-8 right-0 text-white text-2xl hover:text-gray-300 z-10">✕</button>
+                <img src="{{ $viewingMedia->url }}" alt="{{ $viewingMedia->name }}"
+                     class="max-w-full max-h-[85vh] object-contain rounded shadow-2xl" />
+                <div class="text-white text-center text-sm mt-2">
+                    {{ $viewingMedia->name }}
+                    @if($viewingMedia->description)
+                        — {{ $viewingMedia->description }}
+                    @endif
+                </div>
+            </div>
+        </div>
+    @endif
+</div>

resources/views/livewire/projects/project-map.blade.php

@@ -46,8 +46,22 @@
                 @endforeach
             </div>
 
+            {{-- Checkbox imágenes en mapa --}}
+            <div class="mt-3">
+                <label class="flex items-center gap-2 text-xs cursor-pointer">
+                    <input type="checkbox" wire:change="toggleFeatureImages" @if($showFeatureImages) checked @endif class="checkbox checkbox-xs checkbox-primary" />
+                    🖼️ Mostrar imágenes en mapa
+                    @if($featureImageMarkers)
+                        <span class="badge badge-xs">{{ count($featureImageMarkers) }}</span>
+                    @endif
+                </label>
+            </div>
+
             {{-- Botones generales --}}
-            <div class="mt-3 space-y-1">
+            <div class="mt-2 space-y-1">
+                <a href="{{ route('projects.media', $project) }}" class="btn btn-sm btn-outline w-full">
+                    📁 Archivos del proyecto
+                </a>
                 <button wire:click="$dispatch('centerMap')" class="btn btn-sm btn-outline w-full">
                     📍 Centrar mapa
                 </button>
@@ -95,6 +109,19 @@
                         💾 Guardar progreso
                     </button>
 
+                    {{-- Gestor de archivos del feature --}}
+                    <details class="mb-3 border rounded-lg">
+                        <summary class="text-xs font-semibold cursor-pointer p-2 bg-base-200 rounded-t-lg">
+                            📎 Archivos del elemento
+                        </summary>
+                        <div class="p-2">
+                            @livewire('media-manager', [
+                                'mediableType' => 'App\\Models\\Feature',
+                                'mediableId' => $selectedFeature->id,
+                            ], key('media-feature-' . $selectedFeature->id))
+                        </div>
+                    </details>
+
                     {{-- Templates / Inspecciones --}}
                     @if($templates->isNotEmpty())
                         <div class="divider text-xs">Inspección</div>
@@ -190,6 +217,8 @@
 <script>
     let map;
     const layers = {};
+    let imageMarkersLayer = null;
+    let imageViewerModal = null;
 
     function initMap() {
         if (map) return;
@@ -301,6 +330,46 @@
 
         Livewire.on('centerMap', zoomToAllFeatures);
         Livewire.on('mapResize', () => { if (map) setTimeout(() => map.invalidateSize(), 100); });
+
+        // Toggle imágenes en mapa
+        Livewire.on('featureImagesToggled', (show, markers) => {
+            const m = Array.isArray(markers) ? markers : markers[1];
+            const s = Array.isArray(show) ? show[0] : show;
+            if (imageMarkersLayer) { map.removeLayer(imageMarkersLayer); imageMarkersLayer = null; }
+            if (s && m && m.length > 0) {
+                imageMarkersLayer = L.layerGroup().addTo(map);
+                const photoIcon = L.divIcon({
+                    html: '<span style="font-size: 20px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));">🖼️</span>',
+                    className: '',
+                    iconSize: [20, 20],
+                    iconAnchor: [10, 10]
+                });
+                m.forEach(marker => {
+                    const popupContent = `<b>${marker.name}</b><br>
+                                         <img src="${marker.image_url}" class="max-w-[200px] max-h-[150px] rounded cursor-pointer"
+                                              onclick="window.openViewer('${marker.image_url}', '${marker.image_name}')" />`;
+                    L.marker([marker.lat, marker.lng], { icon: photoIcon })
+                        .bindPopup(popupContent)
+                        .addTo(imageMarkersLayer);
+                });
+            }
+        });
+
+        // Modal para ver imagen al hacer clic
+        window.openViewer = function(url, name) {
+            if (imageViewerModal) imageViewerModal.remove();
+            const overlay = document.createElement('div');
+            overlay.id = 'imageViewerModal';
+            overlay.style.cssText = 'position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;padding:20px;cursor:pointer';
+            overlay.innerHTML = `<div style="position:relative;max-width:90vw;max-height:90vh">
+                <button onclick="this.closest('#imageViewerModal').remove()" style="position:absolute;top:-30px;right:0;color:white;font-size:24px;background:none;border:none;cursor:pointer">✕</button>
+                <img src="${url}" alt="${name}" style="max-width:100%;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.5)" />
+                <p style="color:white;text-align:center;margin-top:8px;font-size:14px">${name}</p>
+            </div>`;
+            overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+            document.body.appendChild(overlay);
+            imageViewerModal = overlay;
+        };
     });
 </script>
 @endpush

resources/views/projects/media.blade.php

@@ -0,0 +1,20 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            Archivos del proyecto: {{ $project->name }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
+            <div class="mb-4">
+                <a href="{{ route('projects.map', $project) }}" class="btn btn-outline btn-sm">← Volver al mapa</a>
+            </div>
+
+            @livewire('media-manager', [
+                'mediableType' => 'App\Models\Project',
+                'mediableId' => $project->id,
+            ])
+        </div>
+    </div>
+</x-app-layout>

routes/web.php

@@ -88,6 +88,11 @@ Route::middleware(['auth'])->group(function () {
     // Rutas para el LayerManager:
     Route::get('/projects/{project}/phases/{phase}/layers/manage', \App\Livewire\LayerManager::class)->name('layers.manage');
 
+    // Gestor de medios
+    Route::get('/projects/{project}/media', function (\App\Models\Project $project) {
+        return view('projects.media', compact('project'));
+    })->name('projects.media');
+
     // ------------------------------------------------------------
     // Sincronización offline (para trabajadores en campo)
     // ------------------------------------------------------------