feat: Add major features - Mejoras 5-10

- Mejora 5: Órdenes de Compra integration in obra detail
- Mejora 6: Portal de Cliente with JWT auth for clients
- Mejora 7: Diagrama de Gantt for project visualization
- Mejora 8: Push Notifications with service worker
- Mejora 9: Activity Log system with templates
- Mejora 10: PWA support with offline capabilities

New features include:
- Fotos gallery with upload/delete
- Bitácora de obra with daily logs
- PDF export for reports, gastos, presupuestos
- Control de asistencia for employees
- Client portal with granular permissions
- Gantt chart with task visualization
- Push notification system
- Activity timeline component
- PWA manifest, icons, and install prompt

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

public/icons/README.md

@@ -0,0 +1,36 @@
+# PWA Icons Generation Instructions
+
+The placeholder icons in this directory should be replaced with properly generated icons.
+
+## Option 1: Use an online tool
+1. Go to https://realfavicongenerator.net/
+2. Upload the icon.svg file from this directory
+3. Download the generated icons
+4. Replace the placeholder PNGs
+
+## Option 2: Use sharp (Node.js)
+If you have libvips installed, you can use the generate-icons.js script:
+```bash
+npm install sharp --save-dev
+node scripts/generate-icons.js
+```
+
+## Option 3: Use ImageMagick
+If you have ImageMagick installed:
+```bash
+for size in 72 96 128 144 152 192 384 512; do
+  convert icon.svg -resize ${size}x${size} icon-${size}x${size}.png
+done
+```
+
+## Required icon sizes:
+- 72x72
+- 96x96
+- 128x128
+- 144x144
+- 152x152
+- 192x192
+- 384x384
+- 512x512
+- 180x180 (apple-touch-icon.png)
+- 32x32 (favicon.png)

public/icons/icon.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#2563eb;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Background -->
+  <rect width="512" height="512" rx="64" fill="url(#grad1)"/>
+  <!-- Building icon -->
+  <g fill="#ffffff">
+    <!-- Main building -->
+    <rect x="156" y="180" width="200" height="252" rx="8"/>
+    <!-- Windows row 1 -->
+    <rect x="180" y="210" width="40" height="35" rx="4" fill="#2563eb"/>
+    <rect x="236" y="210" width="40" height="35" rx="4" fill="#2563eb"/>
+    <rect x="292" y="210" width="40" height="35" rx="4" fill="#2563eb"/>
+    <!-- Windows row 2 -->
+    <rect x="180" y="265" width="40" height="35" rx="4" fill="#2563eb"/>
+    <rect x="236" y="265" width="40" height="35" rx="4" fill="#2563eb"/>
+    <rect x="292" y="265" width="40" height="35" rx="4" fill="#2563eb"/>
+    <!-- Windows row 3 -->
+    <rect x="180" y="320" width="40" height="35" rx="4" fill="#2563eb"/>
+    <rect x="236" y="320" width="40" height="35" rx="4" fill="#2563eb"/>
+    <rect x="292" y="320" width="40" height="35" rx="4" fill="#2563eb"/>
+    <!-- Door -->
+    <rect x="226" y="375" width="60" height="57" rx="4" fill="#2563eb"/>
+    <!-- Crane -->
+    <rect x="356" y="100" width="12" height="200" fill="#ffffff"/>
+    <rect x="280" y="100" width="100" height="12" fill="#ffffff"/>
+    <rect x="280" y="100" width="12" height="60" fill="#ffffff"/>
+    <!-- Crane hook -->
+    <line x1="286" y1="160" x2="286" y2="200" stroke="#ffffff" stroke-width="4"/>
+    <rect x="276" y="200" width="20" height="15" rx="2" fill="#ffffff"/>
+    <!-- Letter M -->
+    <text x="256" y="90" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="#ffffff" text-anchor="middle">M</text>
+  </g>
+</svg>