Add ViteHelper fallback for missing frontend assets

2026-03-15 07:47:59 +02:00
parent 94f4e53860
commit dff2cd752c
6 changed files with 131 additions and 3 deletions
--- a/src/app/Helpers/ViteHelper.php
+++ b/src/app/Helpers/ViteHelper.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Helpers;
+
+class ViteHelper
+{
+    /**
+     * Check if the Vite manifest exists (assets have been built).
+     */
+    public static function manifestExists(): bool
+    {
+        return file_exists(public_path('build/manifest.json'));
+    }
+
+    /**
+     * Get fallback CSS for when Vite assets are not built.
+     * This provides basic styling so the app remains usable.
+     */
+    public static function fallbackStyles(): string
+    {
+        return <<<'CSS'
+<style>
+    /* Fallback styles when Vite assets are not built */
+    *, *::before, *::after { box-sizing: border-box; }
+    body { 
+        font-family: ui-sans-serif, system-ui, sans-serif; 
+        margin: 0; 
+        background: #f3f4f6; 
+        color: #111827;
+    }
+    .dark body { background: #111827; color: #f9fafb; }
+    .min-h-screen { min-height: 100vh; }
+    .bg-gray-100 { background: #f3f4f6; }
+    .bg-white { background: #fff; }
+    .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+    .max-w-7xl { max-width: 80rem; margin: 0 auto; }
+    .px-4 { padding-left: 1rem; padding-right: 1rem; }
+    .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
+    .font-semibold { font-weight: 600; }
+    .text-xl { font-size: 1.25rem; }
+    .text-gray-800 { color: #1f2937; }
+    a { color: #3b82f6; text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    .hidden { display: none; }
+    .flex { display: flex; }
+    .items-center { align-items: center; }
+    .justify-between { justify-content: space-between; }
+    .space-x-4 > * + * { margin-left: 1rem; }
+    nav { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 1rem; }
+    .container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
+    button, .btn { 
+        padding: 0.5rem 1rem; 
+        background: #3b82f6; 
+        color: white; 
+        border: none; 
+        border-radius: 0.375rem;
+        cursor: pointer;
+    }
+    button:hover, .btn:hover { background: #2563eb; }
+    input, select, textarea {
+        border: 1px solid #d1d5db;
+        border-radius: 0.375rem;
+        padding: 0.5rem 0.75rem;
+        width: 100%;
+    }
+    .alert { padding: 1rem; border-radius: 0.375rem; margin-bottom: 1rem; }
+    .alert-warning { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; }
+</style>
+CSS;
+    }
+
+    /**
+     * Get a warning banner HTML for development.
+     */
+    public static function devWarningBanner(): string
+    {
+        if (app()->environment('production')) {
+            return '';
+        }
+
+        return <<<'HTML'
+<div class="alert alert-warning" style="margin:1rem;padding:1rem;background:#fef3c7;border:1px solid #f59e0b;border-radius:0.5rem;color:#92400e;">
+    <strong>⚠️ Development Notice:</strong> Vite assets are not built. 
+    Run <code style="background:#fde68a;padding:0.125rem 0.25rem;border-radius:0.25rem;">docker-compose run --rm node npm run build</code> to build assets.
+</div>
+HTML;
+    }
+}