mejoras en la gestión de proyectos y documentos: se añaden nuevos campos y validaciones para optimizar la organización y el seguimiento de los mismos.

resources/views/components/accordion-item.blade.php

@@ -0,0 +1,34 @@
+@props(['title' => ''])
+
+<div 
+  x-data="{ 
+    id: $id('accordion'),
+    isOpen: false 
+  }"
+  x-init="
+    isOpen = $parent.isMultiple 
+      ? $parent.active.includes(id) 
+      : $parent.active === id;
+    $watch('$parent.active', value => {
+      isOpen = $parent.isMultiple 
+        ? value.includes(id) 
+        : value === id;
+    });
+  "
+  {{ $attributes->merge(['class' => 'border rounded-lg']) }}
+>
+  <button 
+    @click="$parent.toggleItem(id)"
+    class="w-full px-4 py-3 text-left bg-gray-100 hover:bg-gray-200 transition-colors"
+  >
+    {{ $title }}
+  </button>
+  
+  <div 
+    x-show="isOpen"
+    x-collapse
+    class="p-4 bg-white"
+  >
+    {{ $slot }}
+  </div>
+</div>

resources/views/components/accordion.blade.php

@@ -0,0 +1,19 @@
+@props(['allowMultiple' => false])
+
+<div 
+  x-data="{
+    active: {{ $allowMultiple ? '[]' : 'null' }},
+    isMultiple: {{ $allowMultiple ? 'true' : 'false' }},
+    toggleItem(id) {
+      if (this.isMultiple) {
+        const index = this.active.indexOf(id);
+        index === -1 ? this.active.push(id) : this.active.splice(index, 1);
+      } else {
+        this.active = this.active === id ? null : id;
+      }
+    }
+  }"
+  {{ $attributes->merge(['class' => 'space-y-4']) }}
+>
+  {{ $slot }}
+</div>

resources/views/components/folder-item.blade.php

@@ -1,17 +1,20 @@
 @props(['folder', 'currentFolder', 'expandedFolders', 'level' => 0, 'itemsCount' => 0])
 <li class="pl-{{ $level * 4 }}">
-    <div class="flex items-center justify-between p-2 hover:bg-gray-50 
+    <div class="flex items-center justify-between p-1 hover:bg-gray-50 
               {{ $folder->id === optional($currentFolder)->id ? 'bg-blue-50' : '' }}">
         <div class="flex items-center relative flex-1" wire:click="selectFolder({{ $folder->id }})">
-            <button wire:click.prevent="toggleFolder({{ $folder->id }})" 
-                    class="mr-2">
+            <button wire:click.prevent="toggleFolder({{ $folder->id }})" class="mr-2">
                 @if(in_array($folder->id, $expandedFolders))
                     <x-icons icon="chevron-down" class="w-4 h-4" />
                 @else
                     <x-icons icon="chevron-right" class="w-4 h-4" />
                 @endif
             </button>
-            <flux:icon.folder class="size-5 mr-2 text-yellow-500"/> 
+            @if(in_array($folder->id, $expandedFolders))
+                <flux:icon.folder-open class="size-5 mr-2"/> 
+            @else
+                <flux:icon.folder class="size-5 mr-2"/>
+            @endif
             <span class="flex-1 whitespace-nowrap">{{ $folder->name }}</span>
             @if($itemsCount > 0)
                 <flux:badge class="text-xs font-medium rounded-sm px-1 py-0.5 text-gray-700 dark:text-gray-200 bg-gray-400/15 dark:bg-white/10" size="sm" inset="top bottom">{{ $itemsCount }}</flux:badge>

resources/views/components/stats-card.blade.php

@@ -7,17 +7,23 @@
     'trendColor' => 'text-gray-500'  // Color por defecto
 ])
 
-<div class="bg-white p-6 rounded-lg shadow">
+<div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition duration-300">
     <div class="flex items-center justify-between">
         <div>
-            <p class="text-sm text-gray-500">{{ $title }}</p>
-            <p class="text-3xl font-bold">{{ $value }}</p>
+            <h2>
+                <p class="text-xl font-bold text-gray-500">{{ $title }}</p>
+            </h2>
+            <p class="text-2xl font-bold">{{ $value }}</p>
         </div>
         <div class="{{ $color }} p-3 rounded-full">
             @if($icon === 'folder')
-            <x-icons icon="folder" class="w-8 h-8 text-white" />
+            <flux:icon.folder variant="solid" class="w-8 h-8 text-white"/>
             @elseif($icon === 'document')
-            <x-icons icon =  "document" class="w-8 h-8 text-white" />
+            <flux:icon.document variant="solid" class="w-8 h-8 text-white"/>
+            @elseif($icon === 'storage')
+            <flux:icon.server variant="solid" class="w-8 h-8 text-white"/>
+            @elseif($icon === 'clock')
+            <flux:icon.clock variant="solid" class="w-8 h-8 text-white"/>
             @endif
         </div>
     </div>