Cleanup: Remove debug console logs and prepare for release

resources/views/components/form/form-elements/dropzone.blade.php

@@ -15,7 +15,6 @@
                 
                 if (validFiles.length > 0) {
                     this.files = [...this.files, ...validFiles];
-                    console.log('Files uploaded:', validFiles);
                     
                     // Here you can add logic to upload files to server
                     this.uploadFiles(validFiles);
@@ -24,7 +23,6 @@
             uploadFiles(files) {
                 // Implement your file upload logic here
                 // Example: Use FormData and fetch/axios to upload
-                console.log('Uploading files:', files);
             },
             removeFile(index) {
                 this.files.splice(index, 1);

resources/views/components/ui/flash-message.blade.php

@@ -7,23 +7,23 @@
         if (session()->has('success')) {
             $variant = 'success';
             $message = session('success');
-            $title = 'Success';
+            $title = session('title') ?? 'Success';
         } elseif (session()->has('error')) {
             $variant = 'error';
             $message = session('error');
-            $title = 'Error';
+            $title = session('title') ?? 'Error';
         } elseif (session()->has('warning')) {
             $variant = 'warning';
             $message = session('warning');
-            $title = 'Warning';
+            $title = session('title') ?? 'Warning';
         } elseif (session()->has('info')) {
             $variant = 'info';
             $message = session('info');
-            $title = 'Information';
+            $title = session('title') ?? 'Information';
         } elseif (session()->has('status')) {
             $variant = 'success'; // Default status to success/info style
             $message = session('status');
-            $title = 'Notification';
+            $title = session('title') ?? 'Notification';
         }
 
         // Copy styles from ui.alert

resources/views/components/ui/realtime-toast.blade.php

@@ -1,49 +1,23 @@
 <div
-    x-data="{
-        toasts: [],
-        add(data) {
-            const id = Date.now();
-            this.toasts.push({
-                id: id,
-                title: data.title || 'Notification',
-                body: data.body || '',
-                type: data.type || 'info',
-                icon: data.icon || 'notification',
-                progress: 100
-            });
-
-            // Handle progress bar animation
-            const duration = 6000;
-            const interval = 50;
-            const step = (interval / duration) * 100;
-            
-            const timer = setInterval(() => {
-                const toast = this.toasts.find(t => t.id === id);
-                if (toast) {
-                    toast.progress -= step;
-                } else {
-                    clearInterval(timer);
-                }
-            }, interval);
-
-            setTimeout(() => {
-                this.remove(id);
-                clearInterval(timer);
-            }, duration);
-        },
-        remove(id) {
-            this.toasts = this.toasts.filter(t => t.id !== id);
+    x-data="realtimeToast({
+        session: {
+            success: '{{ session('success') }}',
+            error: '{{ session('error') }}',
+            warning: '{{ session('warning') }}',
+            info: '{{ session('info') }}',
+            status: '{{ session('status') }}',
+            title: '{{ session('title') }}'
         }
-    }"
+    })"
     @reverb-notification.window="add($event.detail)"
     class="fixed top-24 right-5 sm:right-10 z-[1000] flex flex-col gap-4 w-auto pointer-events-none"
 >
     <template x-for="toast in toasts" :key="toast.id">
         <div
             x-show="true"
-            x-transition:enter="transition ease-out duration-500"
-            x-transition:enter-start="opacity-0 translate-y-[-20px] translate-x-12 scale-90"
-            x-transition:enter-end="opacity-100 translate-y-0 translate-x-0 scale-100"
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0 -translate-y-4 scale-95"
+            x-transition:enter-end="opacity-100 translate-y-0 scale-100"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="opacity-100 translate-x-0"
             x-transition:leave-end="opacity-0 translate-x-20"
@@ -73,7 +47,18 @@
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                 </template>
                 <template x-if="toast.icon !== 'ticket' && toast.icon !== 'chat'">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    <template x-if="toast.type === 'success'">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                    </template>
+                    <template x-if="toast.type === 'error'">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                    </template>
+                    <template x-if="toast.type === 'warning'">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
+                    </template>
+                    <template x-if="toast.type === 'info'">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    </template>
                 </template>
             </div>
 
@@ -101,3 +86,60 @@
     </template>
 </div>
 
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('realtimeToast', (initialData = {}) => ({
+            toasts: [],
+            init() {
+                const session = initialData.session || {};
+                
+                if (session.success) {
+                    this.add({ title: session.title || 'Success', body: session.success, type: 'success', icon: 'check' });
+                } else if (session.error) {
+                    this.add({ title: session.title || 'Error', body: session.error, type: 'error', icon: 'error' });
+                } else if (session.warning) {
+                    this.add({ title: session.title || 'Warning', body: session.warning, type: 'warning', icon: 'warning' });
+                } else if (session.info) {
+                    this.add({ title: session.title || 'Information', body: session.info, type: 'info', icon: 'info' });
+                } else if (session.status) {
+                    this.add({ title: session.title || 'Notification', body: session.status, type: 'info', icon: 'info' });
+                }
+            },
+            add(data) {
+                const id = Date.now();
+                // New toasts at top (unshift), pushing others down.
+                this.toasts.unshift({
+                    id: id,
+                    title: data.title || 'Notification',
+                    body: data.body || '',
+                    type: data.type || 'info',
+                    icon: data.icon || 'notification',
+                    progress: 100
+                });
+
+                // Handle progress bar animation
+                const duration = 6000;
+                const interval = 50;
+                const step = (interval / duration) * 100;
+                
+                const timer = setInterval(() => {
+                    const toast = this.toasts.find(t => t.id === id);
+                    if (toast) {
+                        toast.progress -= step;
+                    } else {
+                        clearInterval(timer);
+                    }
+                }, interval);
+
+                setTimeout(() => {
+                    this.remove(id);
+                    clearInterval(timer);
+                }, duration);
+            },
+            remove(id) {
+                this.toasts = this.toasts.filter(t => t.id !== id);
+            }
+        }));
+    });
+</script>
+