From 7d4261b71a850af4b8fe80f48d5ef739cd55a1b7 Mon Sep 17 00:00:00 2001
From: ayntk-ai <122374094+ayntk-ai@users.noreply.github.com>
Date: Mon, 19 Aug 2024 00:14:09 +0200
Subject: [PATCH] new design for execution log

---
 .../database/backup-executions.blade.php      | 56 +++++++++++--------
 .../scheduled-task/executions.blade.php       | 26 +++++----
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/resources/views/livewire/project/database/backup-executions.blade.php b/resources/views/livewire/project/database/backup-executions.blade.php
index c3fc01fb4..b1cc7fa66 100644
--- a/resources/views/livewire/project/database/backup-executions.blade.php
+++ b/resources/views/livewire/project/database/backup-executions.blade.php
@@ -4,33 +4,45 @@
         <h3 class="py-4">Executions</h3>
         <x-forms.button wire:click='cleanupFailed'>Cleanup Failed Backups</x-forms.button>
     </div>
-    <div class="flex flex-col-reverse gap-2">
+    <div class="flex flex-col-reverse gap-4">
         @forelse($executions as $execution)
-        <form wire:key="{{ data_get($execution, 'id') }}"
-            class="relative flex flex-col p-4 bg-white box-without-bg dark:bg-coolgray-100"
-            @class([ 'border-green-500'=> data_get($execution, 'status') === 'success',
-            'border-red-500' => data_get($execution, 'status') === 'failed',
+        <div wire:key="{{ data_get($execution, 'id') }}"
+            @class([
+                'flex flex-col border-l-4 transition-colors cursor-pointer p-4 rounded',
+                'bg-white hover:bg-gray-100 dark:bg-coolgray-100 dark:hover:bg-coolgray-200',
+                'text-black dark:text-white',
+                'border-green-500' => data_get($execution, 'status') === 'success',
+                'border-red-500' => data_get($execution, 'status') === 'failed',
+                'border-yellow-500' => data_get($execution, 'status') === 'running',
             ])>
             @if (data_get($execution, 'status') === 'running')
             <div class="absolute top-2 right-2">
                 <x-loading />
             </div>
             @endif
-            <div>Database: {{ data_get($execution, 'database_name', 'N/A') }}</div>
-            <div>Status: {{ data_get($execution, 'status') }}</div>
-            <div>Started At: {{ $this->formatDateInServerTimezone(data_get($execution, 'created_at')) }}</div>
-            @if (data_get($execution, 'message'))
-            <div>Message: {{ data_get($execution, 'message') }}</div>
-            @endif
-            <div>Size: {{ data_get($execution, 'size') }} B /
-                {{ round((int) data_get($execution, 'size') / 1024, 2) }}
-                kB / {{ round((int) data_get($execution, 'size') / 1024 / 1024, 3) }} MB
+            <div class="text-gray-700 dark:text-gray-300 font-semibold mb-1">Status: {{ data_get($execution, 'status') }}</div>
+            <div class="text-gray-600 dark:text-gray-400 text-sm">
+                Started At: {{ $this->formatDateInServerTimezone(data_get($execution, 'created_at')) }}
             </div>
-            <div>Location: {{ data_get($execution, 'filename', 'N/A') }}</div>
-            <div class="flex gap-2">
-                <div class="flex-1"></div>
+            <div class="text-gray-600 dark:text-gray-400 text-sm">
+                Database: {{ data_get($execution, 'database_name', 'N/A') }}
+            </div>
+            <div class="text-gray-600 dark:text-gray-400 text-sm">
+                Size: {{ data_get($execution, 'size') }} B / 
+                {{ round((int) data_get($execution, 'size') / 1024, 2) }} kB / 
+                {{ round((int) data_get($execution, 'size') / 1024 / 1024, 3) }} MB
+            </div>
+            <div class="text-gray-600 dark:text-gray-400 text-sm">
+                Location: {{ data_get($execution, 'filename', 'N/A') }}
+            </div>
+            @if (data_get($execution, 'message'))
+            <div class="mt-2 p-2 bg-gray-100 dark:bg-coolgray-200 rounded">
+                <pre class="whitespace-pre-wrap text-sm">{{ data_get($execution, 'message') }}</pre>
+            </div>
+            @endif
+            <div class="flex gap-2 mt-4">
                 @if (data_get($execution, 'status') === 'success')
-                <x-forms.button class=" dark:hover:bg-coolgray-400"
+                <x-forms.button class="dark:hover:bg-coolgray-400"
                     x-on:click="download_file('{{ data_get($execution, 'id') }}')">Download</x-forms.button>
                 @endif
                 <x-modal-confirmation isErrorButton action="deleteBackup({{ data_get($execution, 'id') }})">
@@ -40,10 +52,9 @@
                     This will delete this backup. It is not reversible.<br>Please think again.
                 </x-modal-confirmation>
             </div>
-        </form>
-
+        </div>
         @empty
-        <div>No executions found.</div>
+        <div class="p-4 bg-gray-100 dark:bg-coolgray-200 rounded">No executions found.</div>
         @endforelse
     </div>
     <script>
@@ -52,5 +63,4 @@
         }
     </script>
     @endisset
-
-</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/project/shared/scheduled-task/executions.blade.php b/resources/views/livewire/project/shared/scheduled-task/executions.blade.php
index 58b53688d..a52713522 100644
--- a/resources/views/livewire/project/shared/scheduled-task/executions.blade.php
+++ b/resources/views/livewire/project/shared/scheduled-task/executions.blade.php
@@ -1,32 +1,36 @@
-<div class="flex flex-col-reverse gap-2">
+<div class="flex flex-col-reverse gap-4">
     @forelse($executions as $execution)
     @if (data_get($execution, 'id') == $selectedKey)
-    <div class="p-2">
+    <div class="p-4 mb-2 bg-gray-100 dark:bg-coolgray-200 rounded">
         @if (data_get($execution, 'message'))
         <div>
-            <pre>{{ data_get($execution, 'message') }}</pre>
+            <pre class="whitespace-pre-wrap">{{ data_get($execution, 'message') }}</pre>
         </div>
         @else
         <div>No output was recorded for this execution.</div>
         @endif
     </div>
     @endif
-    <a wire:click="selectTask({{ data_get($execution, 'id') }})" @class([ 'flex flex-col border-l  transition-colors box-without-bg bg-coolgray-100 hover:bg-coolgray-200 cursor-pointer' , 'bg-coolgray-200 dark:text-white hover:bg-coolgray-200'=>
-        data_get($execution, 'id') == $selectedKey,
+    <a wire:click="selectTask({{ data_get($execution, 'id') }})" @class([
+        'flex flex-col border-l-4 transition-colors cursor-pointer p-4 rounded',
+        'bg-white hover:bg-gray-100 dark:bg-coolgray-100 dark:hover:bg-coolgray-200',
+        'text-black dark:text-white',
+        'bg-gray-200 dark:bg-coolgray-200' => data_get($execution, 'id') == $selectedKey,
         'border-green-500' => data_get($execution, 'status') === 'success',
         'border-red-500' => data_get($execution, 'status') === 'failed',
-        ])>
+        'border-yellow-500' => data_get($execution, 'status') === 'running',
+    ])>
         @if (data_get($execution, 'status') === 'running')
         <div class="absolute top-2 right-2">
             <x-loading />
         </div>
         @endif
-        <div>Status: {{ data_get($execution, 'status') }}</div>
-        <div>Started At:
-            {{ $this->formatDateInServerTimezone(data_get($execution, 'created_at', now())) }}
+        <div class="text-gray-700 dark:text-gray-300 font-semibold mb-1">Status: {{ data_get($execution, 'status') }}</div>
+        <div class="text-gray-600 dark:text-gray-400 text-sm">
+            Started At: {{ $this->formatDateInServerTimezone(data_get($execution, 'created_at', now())) }}
         </div>
     </a>
     @empty
-    <div>No executions found.</div>
+    <div class="p-4 bg-gray-100 dark:bg-coolgray-200 rounded">No executions found.</div>
     @endforelse
-</div>
+</div>
\ No newline at end of file