From e0806cda3b2251ca259cb97d541e4670890904b1 Mon Sep 17 00:00:00 2001
From: abdulmohsen <admin@arabcoders.org>
Date: Tue, 18 Jun 2024 22:35:22 +0300
Subject: [PATCH 1/8] Use updated_at for displaying records instead of updated
 as it's only updated when action happens from backends.

---
 frontend/pages/history/index.vue | 5 +++--
 frontend/pages/index.vue         | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/history/index.vue b/frontend/pages/history/index.vue
index 5fcdde7d..af376145 100644
--- a/frontend/pages/history/index.vue
+++ b/frontend/pages/history/index.vue
@@ -170,8 +170,9 @@
                 <div class="column is-4-tablet is-6-mobile has-text-left-mobile">
                   <div class="is-text-overflow">
                     <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
-                    <span class="has-tooltip" v-tooltip="moment.unix(item.updated_at).format('YYYY-MM-DD h:mm:ss A')">
-                      {{ moment.unix(item.updated_at).fromNow() }}
+                    <span class="has-tooltip"
+                          v-tooltip="moment.unix(item.updated_at??item.updated).format('YYYY-MM-DD h:mm:ss A')">
+                      {{ moment.unix(item.updated_at ?? item.updated).fromNow() }}
                     </span>
                   </div>
                 </div>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 4a227256..ba6ad975 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -28,8 +28,9 @@
               <div class="columns is-multiline is-mobile has-text-centered">
                 <div class="column is-4-tablet is-6-mobile has-text-left-mobile">
                   <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
-                  <span class="has-tooltip" v-tooltip="moment.unix(history.updated).format('YYYY-MM-DD h:mm:ss A')">
-                    {{ moment.unix(history.updated).fromNow() }}
+                  <span class="has-tooltip"
+                        v-tooltip="moment.unix(history.updated_at ?? history.updated).format('YYYY-MM-DD h:mm:ss A')">
+                    {{ moment.unix(history.updated_at ?? history.updated).fromNow() }}
                   </span>
                 </div>
                 <div class="column is-4-tablet is-6-mobile has-text-right-mobile">

From 5b36ea6a9f0e91116cec234c1984e202a7e3a604 Mon Sep 17 00:00:00 2001
From: "Abdulmhsen B. A. A." <admin@arabcoders.org>
Date: Wed, 19 Jun 2024 14:31:26 +0300
Subject: [PATCH 2/8] Added Backup to the API and exposed via WebUI. Also made
 it possible to delete queued task from WebUI.

---
 frontend/layouts/default.vue |   5 ++
 frontend/pages/backup.vue    | 153 +++++++++++++++++++++++++++++++++++
 frontend/pages/tasks.vue     |  33 +++++---
 frontend/utils/index.js      |   3 +
 src/API/Logs/Index.php       |   2 +-
 src/API/System/Backup.php    |  83 +++++++++++++++++++
 src/API/Tasks/Index.php      |  10 ++-
 7 files changed, 274 insertions(+), 15 deletions(-)
 create mode 100644 frontend/pages/backup.vue
 create mode 100644 src/API/System/Backup.php

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index d694b5ca..94b81267 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -90,6 +90,11 @@
                 <span class="icon"><i class="fas fa-bug-slash"></i></span>
                 <span>Log Suppression</span>
               </NuxtLink>
+
+              <NuxtLink class="navbar-item" to="/backup" @click.native="showMenu=false">
+                <span class="icon"><i class="fas fa-sd-card"></i></span>
+                <span>Backups</span>
+              </NuxtLink>
             </div>
           </div>
 
diff --git a/frontend/pages/backup.vue b/frontend/pages/backup.vue
new file mode 100644
index 00000000..d65a215f
--- /dev/null
+++ b/frontend/pages/backup.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="columns is-multiline">
+    <div class="column is-12 is-clearfix is-unselectable">
+      <span class="title is-4">
+        <span class="icon"><i class="fas fa-sd-card"></i></span>
+        Backups
+      </span>
+      <div class="is-pulled-right">
+        <div class="field is-grouped">
+          <p class="control">
+            <button class="button is-primary" @click="queueTask" :disabled="isLoading"
+                    :class="{'is-loading':isLoading, 'is-primary':!queued, 'is-danger':queued}">
+              <span class="icon"><i class="fas fa-sd-card"></i></span>
+            </button>
+          </p>
+          <p class="control">
+            <button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
+              <span class="icon"><i class="fas fa-sync"></i></span>
+            </button>
+          </p>
+        </div>
+      </div>
+      <div class="is-hidden-mobile">
+        <span class="subtitle">
+          This page contains all of your manually generated and automatic backups.
+        </span>
+      </div>
+    </div>
+
+    <div class="column is-12" v-if="items.length < 1 || isLoading">
+      <Message v-if="isLoading" message_class="is-background-info-90 has-text-dark" icon="fas fa-spinner fa-spin"
+               title="Loading" message="Loading data. Please wait..."/>
+      <Message v-else title="Warning" message_class="is-background-warning-80 has-text-dark"
+               icon="fas fa-exclamation-triangle">
+        No backups found.
+      </Message>
+    </div>
+
+    <div class="column is-6-tablet" v-for="(item, index) in items" :key="'backup-'+index">
+      <div class="card">
+        <header class="card-header">
+          <p class="card-header-title is-text-overflow pr-1">
+            <NuxtLink @click="downloadFile(item)" v-text="item.filename"/>
+          </p>
+          <span class="card-header-icon">
+            <span class="icon"><i class="fas fa-download" :class="{'fa-spin':item?.isDownloading}"></i></span>
+          </span>
+        </header>
+        <div class="card-footer-item">
+          <div class="card-footer-item">
+            <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
+            <span v-tooltip="`Last Update: ${moment.unix(item.modified_at).format(TOOLTIP_DATE_FORMAT)} `"
+                  class="has-tooltip">
+              {{ moment.unix(item.created_at).fromNow() }}
+            </span>
+          </div>
+          <div class="card-footer-item">
+            <span class="icon"><i class="fas fa-hdd"></i>&nbsp;</span>
+            <span>{{ humanFileSize(item.size) }}</span>
+          </div>
+          <div class="card-footer-item">
+            <span class="icon"><i class="fas fa-tag"></i>&nbsp;</span>
+            <span class="is-capitalized">{{ item.type }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import request from '~/utils/request.js'
+import moment from 'moment'
+import {humanFileSize, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
+import Message from '~/components/Message.vue'
+
+useHead({title: 'Backups'})
+const items = ref([])
+const isLoading = ref(false)
+const queued = ref(true)
+
+const loadContent = async () => {
+  items.value = []
+  isLoading.value = true
+
+  try {
+    const response = await request('/system/backup')
+    items.value = await response.json()
+
+    queued.value = await isQueued()
+  } catch (e) {
+    notification('error', 'Error', e.message)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const downloadFile = async item => {
+  if (true === item?.isDownloading) {
+    return
+  }
+  const filename = item.filename
+  item.isDownloading = true
+
+  const response = request(`/system/backup/${filename}`)
+
+  if ('showSaveFilePicker' in window) {
+    response.then(async res => {
+      item.isDownloading = false
+
+      return res.body.pipeTo(await (await showSaveFilePicker({
+        suggestedName: `${filename}`
+      })).createWritable())
+    })
+  } else {
+    response.then(res => res.blob()).then(blob => {
+      const fileURL = URL.createObjectURL(blob)
+      const fileLink = document.createElement('a')
+      fileLink.href = fileURL
+      fileLink.download = `${filename}`
+      fileLink.click()
+      item.isDownloading = false
+    })
+  }
+}
+
+const queueTask = async () => {
+  const is_queued = await isQueued()
+  const message = is_queued ? 'Remove backup task from queue?' : 'Queue backup task to run in background?'
+
+  if (!confirm(message)) {
+    return
+  }
+
+  try {
+    const response = await request(`/tasks/backup/queue`, {method: is_queued ? 'DELETE' : 'POST'})
+    if (response.ok) {
+      notification('success', 'Success', `Task backup has been ${is_queued ? 'removed from the queue' : 'queued'}.`)
+      queued.value = !is_queued
+    }
+  } catch (e) {
+    notification('error', 'Error', `Request error. ${e.message}`)
+  }
+}
+
+const isQueued = async () => {
+  const response = await request('/tasks/backup')
+  const json = await response.json()
+  return Boolean(json.queued)
+}
+
+onMounted(async () => await loadContent())
+</script>
diff --git a/frontend/pages/tasks.vue b/frontend/pages/tasks.vue
index 56ac7cdb..20a2a70a 100644
--- a/frontend/pages/tasks.vue
+++ b/frontend/pages/tasks.vue
@@ -65,7 +65,9 @@
             <div class="column is-6 has-text-left">
               <strong class="is-hidden-mobile">Prev Run:&nbsp;</strong>
               <template v-if="task.enabled">
-                {{ task.prev_run ? moment(task.prev_run).fromNow() : '???' }}
+                <span class="has-tooltip" v-tooltip="`Prev Run: ${moment(task.prev_run).format(TOOLTIP_DATE_FORMAT)}`">
+                  {{ task.prev_run ? moment(task.prev_run).fromNow() : '???' }}
+                </span>
               </template>
               <template v-else>
                 <span class="tag is-danger">Disabled</span>
@@ -74,7 +76,9 @@
             <div class="column is-6 has-text-right">
               <strong class="is-hidden-mobile">Next Run:&nbsp;</strong>
               <template v-if="task.enabled">
-                {{ task.next_run ? moment(task.next_run).fromNow() : 'Never' }}
+                <span class="has-tooltip" v-tooltip="`Next Run: ${moment(task.next_run).format(TOOLTIP_DATE_FORMAT)}`">
+                  {{ task.next_run ? moment(task.next_run).fromNow() : 'Never' }}
+                </span>
               </template>
               <template v-else>
                 <span class="tag is-danger">Disabled</span>
@@ -84,12 +88,13 @@
         </div>
         <footer class="card-footer">
           <div class="card-footer-item">
-            <button class="button is-info" @click="queueTask(task)" :disabled="task.queued">
+            <button class="button is-info" @click="queueTask(task)"
+                    :class="{'is-danger':task.queued,'is-info':!task.queued}">
               <span class="icon-text">
                 <span class="icon"><i class="fas fa-clock"></i></span>
                 <span>
                   <template v-if="!task.queued">Queue Task</template>
-                  <template v-else>Queued</template>
+                  <template v-else>Remove from queue</template>
                 </span>
               </span>
             </button>
@@ -133,8 +138,8 @@
 <script setup>
 import 'assets/css/bulma-switch.css'
 import moment from 'moment'
-import request from '~/utils/request.js'
-import {notification} from '~/utils/index.js'
+import request from '~/utils/request'
+import {notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
 import cronstrue from 'cronstrue'
 import Message from '~/components/Message.vue'
 import {useStorage} from '@vueuse/core'
@@ -169,7 +174,7 @@ const toggleTask = async task => {
     await request(`/system/env/${keyName}`, {
       method: 'POST',
       body: JSON.stringify({"value": !task.enabled})
-    });
+    })
 
     const response = await request(`/tasks/${task.name}`)
     tasks.value[tasks.value.findIndex(b => b.name === task.name)] = await response.json()
@@ -179,15 +184,17 @@ const toggleTask = async task => {
 }
 
 const queueTask = async task => {
-  if (!confirm(`Queue '${task.name}' to run in background?`)) {
+  const is_queued = Boolean(task.queued)
+  const message = is_queued ? `Remove '${task.name}' from the queue?` : `Queue '${task.name}' to run in background?`
+  if (!confirm(message)) {
     return
   }
 
   try {
-    const response = await request(`/tasks/${task.name}/queue`, {method: 'POST'})
+    const response = await request(`/tasks/${task.name}/queue`, {method: is_queued ? 'DELETE' : 'POST'})
     if (response.ok) {
-      notification('success', 'Success', `Task ${task.name} has been queued.`)
-      await loadContent()
+      notification('success', 'Success', `Task '${task.name}' has been ${is_queued ? 'removed from the queue' : 'queued'}.`)
+      task.queued = !is_queued
     }
   } catch (e) {
     notification('error', 'Error', `Request error. ${e.message}`)
@@ -195,9 +202,9 @@ const queueTask = async task => {
 }
 
 const confirmRun = async task => {
-  if (!confirm(`Are you sure you want to run '${task.name}' via web console now?`)) {
+  if (!confirm(`Run '${task.name}' via web console now?`)) {
     return
   }
-  await navigateTo({path: '/console', query: {task: task.name, keep: 1}})
+  await navigateTo({path: '/console', query: {task: task.name}})
 }
 </script>
diff --git a/frontend/utils/index.js b/frontend/utils/index.js
index 48237e47..dabd1e08 100644
--- a/frontend/utils/index.js
+++ b/frontend/utils/index.js
@@ -4,6 +4,8 @@ const {notify} = useNotification();
 
 const AG_SEPARATOR = '.'
 
+const TOOLTIP_DATE_FORMAT = 'YYYY-MM-DD h:mm:ss A'
+
 const guid_links = {
     'episode': {
         'imdb': 'https://www.imdb.com/title/{_guid}',
@@ -425,4 +427,5 @@ export {
     dEvent,
     makeName,
     makePagination,
+    TOOLTIP_DATE_FORMAT,
 }
diff --git a/src/API/Logs/Index.php b/src/API/Logs/Index.php
index 89fc736b..36eb8ac2 100644
--- a/src/API/Logs/Index.php
+++ b/src/API/Logs/Index.php
@@ -186,7 +186,7 @@ private function download(string $filePath): iResponse
                 'Content-Type' => false === $mime ? 'application/octet-stream' : $mime,
                 'Content-Length' => filesize($filePath),
             ],
-            body: stream::make($filePath, 'r')
+            body: Stream::make($filePath, 'r')
         );
     }
 
diff --git a/src/API/System/Backup.php b/src/API/System/Backup.php
new file mode 100644
index 00000000..3ded4b08
--- /dev/null
+++ b/src/API/System/Backup.php
@@ -0,0 +1,83 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\API\System;
+
+use App\Libs\Attributes\Route\Get;
+use App\Libs\Attributes\Route\Route;
+use App\Libs\Config;
+use App\Libs\HTTP_STATUS;
+use App\Libs\Stream;
+use finfo;
+use Nyholm\Psr7\Response;
+use Psr\Http\Message\ResponseInterface as iResponse;
+use Psr\Http\Message\ServerRequestInterface as iRequest;
+
+final class Backup
+{
+    public const string URL = '%{api.prefix}/system/backup';
+
+    #[Get(self::URL . '[/]', name: 'system.backup')]
+    public function __invoke(iRequest $request, array $args = []): iResponse
+    {
+        $path = fixPath(Config::get('path') . '/backup');
+
+        $list = [];
+
+        foreach (glob($path . '/*.json') as $file) {
+            $isTemp = 1 === preg_match('/\w+\.\d+\.json/i', basename($file));
+
+            $builder = [
+                'filename' => basename($file),
+                'type' => $isTemp ? 'temporary' : 'permanent',
+                'size' => filesize($file),
+                'created_at' => filectime($file),
+                'modified_at' => filemtime($file),
+            ];
+
+            $list[] = $builder;
+        }
+
+        $sorter = array_column($list, 'created_at');
+        array_multisort($sorter, SORT_DESC, $list);
+
+        return api_response(HTTP_STATUS::HTTP_OK, $list);
+    }
+
+    #[Route(['GET', 'DELETE'], self::URL . '/{filename}[/]', name: 'system.backup.view')]
+    public function logView(iRequest $request, array $args = []): iResponse
+    {
+        if (null === ($filename = ag($args, 'filename'))) {
+            return api_error('Invalid value for filename path parameter.', HTTP_STATUS::HTTP_BAD_REQUEST);
+        }
+
+        $path = realpath(fixPath(Config::get('path') . '/backup'));
+
+        $filePath = realpath($path . '/' . $filename);
+
+        if (false === $filePath) {
+            return api_error('File not found.', HTTP_STATUS::HTTP_NOT_FOUND);
+        }
+
+        if (false === str_starts_with($filePath, $path)) {
+            return api_error('Invalid file path.', HTTP_STATUS::HTTP_BAD_REQUEST);
+        }
+
+        if ('DELETE' === $request->getMethod()) {
+            unlink($filePath);
+            return api_response(HTTP_STATUS::HTTP_OK);
+        }
+
+        $mime = (new finfo(FILEINFO_MIME_TYPE))->file($filePath);
+
+        return new Response(
+            status: HTTP_STATUS::HTTP_OK->value,
+            headers: [
+                'Content-Type' => false === $mime ? 'application/octet-stream' : $mime,
+                'Content-Length' => filesize($filePath),
+            ],
+            body: Stream::make($filePath, 'r')
+        );
+    }
+}
diff --git a/src/API/Tasks/Index.php b/src/API/Tasks/Index.php
index 0b583efd..844c5542 100644
--- a/src/API/Tasks/Index.php
+++ b/src/API/Tasks/Index.php
@@ -80,6 +80,9 @@ public function taskQueue(iRequest $request, array $args = []): iResponse
         ]);
     }
 
+    /**
+     * @throws InvalidArgumentException
+     */
     #[Get(self::URL . '/{id:[a-zA-Z0-9_-]+}[/]', name: 'tasks.task.view')]
     public function taskView(iRequest $request, array $args = []): iResponse
     {
@@ -93,7 +96,12 @@ public function taskView(iRequest $request, array $args = []): iResponse
             return api_error('Task not found.', HTTP_STATUS::HTTP_NOT_FOUND);
         }
 
-        return api_response(HTTP_STATUS::HTTP_OK, Index::formatTask($task));
+        $queuedTasks = $this->cache->get('queued_tasks', []);
+
+        $data = Index::formatTask($task);
+        $data['queued'] = in_array(ag($task, 'name'), $queuedTasks);
+
+        return api_response(HTTP_STATUS::HTTP_OK, $data);
     }
 
     private function formatTask(array $task): array

From 815100ab31c8c9e4398096d3f4bcf3692fe30f40 Mon Sep 17 00:00:00 2001
From: "Abdulmhsen B. A. A." <admin@arabcoders.org>
Date: Wed, 19 Jun 2024 15:21:15 +0300
Subject: [PATCH 3/8] Added warning about placeholders within the console page.

---
 frontend/pages/console.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/pages/console.vue b/frontend/pages/console.vue
index 25919d09..6638ba83 100644
--- a/frontend/pages/console.vue
+++ b/frontend/pages/console.vue
@@ -60,6 +60,13 @@
                 input. You should use the command directly, For example i.e <code>db:list --output yaml</code></span>
             </span>
           </p>
+          <p class="help" v-if="hasPlaceholder">
+            <span class="icon-text">
+              <span class="icon has-text-warning"><i class="fas fa-exclamation-circle"></i></span>
+              <span>The command contains <code>[...]</code> which are considered a placeholder, So, please replace
+                <code>[...]</code> with the intended value if applicable.</span>
+            </span>
+          </p>
         </div>
       </form>
     </div>
@@ -121,6 +128,7 @@ const command = ref(fromCommand);
 const isLoading = ref(false);
 const outputConsole = ref();
 const hasPrefix = computed(() => command.value.startsWith('console') || command.value.startsWith('docker'));
+const hasPlaceholder = computed(() => command.value && command.value.match(/\[.*\]/));
 const show_page_tips = useStorage('show_page_tips', true)
 
 const RunCommand = async () => {
@@ -136,6 +144,13 @@ const RunCommand = async () => {
     return
   }
 
+  // use regex to check if command contains [...]
+  if (userCommand.match(/\[.*\]/)) {
+    if (!confirm(`The command contains placeholders '[...]'. Are you sure you want to run as it is?`)) {
+      return
+    }
+  }
+
   response.value = []
 
   const searchParams = new URLSearchParams();

From 509d62abb0ffd4af2e5157dfe17fd0b95fbd8af9 Mon Sep 17 00:00:00 2001
From: "Abdulmhsen B. A. A." <admin@arabcoders.org>
Date: Wed, 19 Jun 2024 15:21:35 +0300
Subject: [PATCH 4/8] Added tips to the backup page.

---
 frontend/pages/backup.vue | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/backup.vue b/frontend/pages/backup.vue
index d65a215f..88cc276d 100644
--- a/frontend/pages/backup.vue
+++ b/frontend/pages/backup.vue
@@ -11,6 +11,7 @@
             <button class="button is-primary" @click="queueTask" :disabled="isLoading"
                     :class="{'is-loading':isLoading, 'is-primary':!queued, 'is-danger':queued}">
               <span class="icon"><i class="fas fa-sd-card"></i></span>
+              <span>{{ !queued ? 'Queue backup' : 'Remove from queue' }}</span>
             </button>
           </p>
           <p class="control">
@@ -65,19 +66,45 @@
         </div>
       </div>
     </div>
+
+    <div class="column is-12">
+      <Message message_class="has-background-info-90 has-text-dark" :toggle="show_page_tips"
+               @toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
+        <ul>
+          <li>
+            Backups that are tagged <code>Automatic</code> are subject to auto deletion after <code>9</code> days from
+            the date of creation.
+          </li>
+          <li>
+            You can trigger a backup task to run in the background by clicking the
+            <code><span class="icon"><i class="fas fa-sd-card"></i></span> Queue backup</code> button. on top right.
+            Those backups will be tagged as <code>Automatic</code>.
+          </li>
+          <li>
+            To generate a manual backup, you need to use the <code>state:backup</code> command from the console.
+            or by <span class="icon"><i class="fas fa-terminal"></i></span>
+            <NuxtLink :to="makeConsoleCommand('state:backup -s [backend] --file /config/backup/[file]')"
+                      v-text="'Web Console'"/>
+            page.
+          </li>
+        </ul>
+      </Message>
+    </div>
   </div>
 </template>
 
 <script setup>
 import request from '~/utils/request.js'
 import moment from 'moment'
-import {humanFileSize, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
+import {humanFileSize, makeConsoleCommand, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
 import Message from '~/components/Message.vue'
+import {useStorage} from "@vueuse/core";
 
 useHead({title: 'Backups'})
 const items = ref([])
 const isLoading = ref(false)
 const queued = ref(true)
+const show_page_tips = useStorage('show_page_tips', true)
 
 const loadContent = async () => {
   items.value = []

From adba7b7871b0a6edea436fb91e3dd119eefd13f7 Mon Sep 17 00:00:00 2001
From: "Abdulmhsen B. A. A." <admin@arabcoders.org>
Date: Wed, 19 Jun 2024 15:21:56 +0300
Subject: [PATCH 5/8] Made the prune command more picky about removing files
 within the backup directory.

---
 src/API/System/Backup.php            |  4 ++--
 src/Commands/System/PruneCommand.php | 32 +++++++++++++++++++++++-----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/API/System/Backup.php b/src/API/System/Backup.php
index 3ded4b08..72a30da9 100644
--- a/src/API/System/Backup.php
+++ b/src/API/System/Backup.php
@@ -26,11 +26,11 @@ public function __invoke(iRequest $request, array $args = []): iResponse
         $list = [];
 
         foreach (glob($path . '/*.json') as $file) {
-            $isTemp = 1 === preg_match('/\w+\.\d+\.json/i', basename($file));
+            $isAuto = 1 === preg_match('/\w+\.\d{8}\.json/i', basename($file));
 
             $builder = [
                 'filename' => basename($file),
-                'type' => $isTemp ? 'temporary' : 'permanent',
+                'type' => $isAuto ? 'Automatic' : 'Manual',
                 'size' => filesize($file),
                 'created_at' => filectime($file),
                 'modified_at' => filemtime($file),
diff --git a/src/Commands/System/PruneCommand.php b/src/Commands/System/PruneCommand.php
index 1fab1928..ee274614 100644
--- a/src/Commands/System/PruneCommand.php
+++ b/src/Commands/System/PruneCommand.php
@@ -77,33 +77,39 @@ protected function runCommand(InputInterface $input, OutputInterface $output): i
 
         $directories = [
             [
+                'name' => 'logs_remover',
                 'path' => Config::get('tmpDir') . '/logs',
                 'base' => Config::get('tmpDir'),
                 'filter' => '*.log',
                 'time' => strtotime('-7 DAYS', $time)
             ],
             [
+                'name' => 'webhooks_remover',
                 'path' => Config::get('tmpDir') . '/webhooks',
                 'base' => Config::get('tmpDir'),
                 'filter' => '*.json',
                 'time' => strtotime('-3 DAYS', $time)
             ],
             [
+                'name' => 'profiler_remover',
                 'path' => Config::get('tmpDir') . '/profiler',
                 'base' => Config::get('tmpDir'),
                 'filter' => '*.json',
                 'time' => strtotime('-3 DAYS', $time)
             ],
             [
+                'name' => 'debug_remover',
                 'path' => Config::get('tmpDir') . '/debug',
                 'base' => Config::get('tmpDir'),
                 'filter' => '*.json',
                 'time' => strtotime('-3 DAYS', $time)
             ],
             [
+                'name' => 'backup_remover',
                 'path' => Config::get('path') . '/backup',
                 'base' => Config::get('path'),
                 'filter' => '*.*.json',
+                'validate' => fn(SplFileInfo $f): bool => 1 === @preg_match('/\w+\.\d{8}\.json/i', $f->getBasename()),
                 'time' => strtotime('-9 DAYS', $time)
             ],
         ];
@@ -111,10 +117,12 @@ protected function runCommand(InputInterface $input, OutputInterface $output): i
         $inDryRunMode = $input->getOption('dry-run');
 
         foreach ($directories as $item) {
+            $name = ag($item, 'name');
             $path = ag($item, 'path');
 
             if (null === ($expiresAt = ag($item, 'time'))) {
-                $this->logger->warning('Error No expected time to live was found for [{path}].', [
+                $this->logger->warning("No expected time to live was found for '{name}' - '{path}'.", [
+                    'name' => $name,
                     'path' => $path
                 ]);
                 continue;
@@ -122,34 +130,48 @@ protected function runCommand(InputInterface $input, OutputInterface $output): i
 
             if (null === $path || !is_dir($path)) {
                 if (true === (bool)ag($item, 'report', true)) {
-                    $this->logger->warning('Path [{path}] not found or inaccessible.', [
+                    $this->logger->warning("{name}: Path '{path}' not found or is inaccessible.", [
+                        'name' => $name,
                         'path' => $path
                     ]);
                 }
                 continue;
             }
 
+            $validate = ag($item, 'validate', null);
+
             foreach (glob(ag($item, 'path') . '/' . ag($item, 'filter')) as $file) {
                 $file = new SplFileInfo($file);
 
                 $fileName = $file->getBasename();
 
                 if ('.' === $fileName || '..' === $fileName || true === $file->isDir() || false === $file->isFile()) {
-                    $this->logger->debug('Path [{path}] is not considered valid file.', [
+                    $this->logger->debug("{name}: Path '{path}' is not considered valid file.", [
+                        'name' => $name,
                         'path' => $file->getRealPath(),
                     ]);
                     continue;
                 }
 
+                if (null !== $validate && false === $validate($file)) {
+                    $this->logger->debug("{name}: File '{file}' did not pass validation checks.", [
+                        'name' => $name,
+                        'file' => after($file->getRealPath(), ag($item, 'base') . '/'),
+                    ]);
+                    continue;
+                }
+
                 if ($file->getMTime() > $expiresAt) {
-                    $this->logger->debug('File [{file}] Not yet expired. {ttl} left seconds.', [
+                    $this->logger->debug("{name}: File '{file}' Not yet expired. '{ttl}' seconds left.", [
+                        'name' => $name,
                         'file' => after($file->getRealPath(), ag($item, 'base') . '/'),
                         'ttl' => number_format($file->getMTime() - $expiresAt),
                     ]);
                     continue;
                 }
 
-                $this->logger->notice('Removing [{file}].', [
+                $this->logger->notice("{name}: Removing '{file}'. expired TTL.", [
+                    'name' => $name,
                     'file' => after($file->getRealPath(), ag($item, 'base') . '/')
                 ]);
 

From b6a0321477d7b4751d8e3756f09cfb6236c0b73d Mon Sep 17 00:00:00 2001
From: "Abdulmhsen B. A. A." <admin@arabcoders.org>
Date: Wed, 19 Jun 2024 19:46:03 +0300
Subject: [PATCH 6/8] Added delete backup file to the WebUI

---
 frontend/pages/backup.vue | 39 ++++++++++++++++++++++++++++++++++++---
 frontend/pages/tasks.vue  |  5 +++++
 src/API/System/Backup.php |  2 +-
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/backup.vue b/frontend/pages/backup.vue
index 88cc276d..f7842cd8 100644
--- a/frontend/pages/backup.vue
+++ b/frontend/pages/backup.vue
@@ -41,10 +41,15 @@
       <div class="card">
         <header class="card-header">
           <p class="card-header-title is-text-overflow pr-1">
-            <NuxtLink @click="downloadFile(item)" v-text="item.filename"/>
+            <span class="icon"><i class="fas fa-download" :class="{'fa-spin':item?.isDownloading}"></i>&nbsp;</span>
+            <span>
+              <NuxtLink @click="downloadFile(item)" v-text="item.filename"/>
+            </span>
           </p>
           <span class="card-header-icon">
-            <span class="icon"><i class="fas fa-download" :class="{'fa-spin':item?.isDownloading}"></i></span>
+            <NuxtLink @click="deleteFile(item)" class="has-text-danger" v-tooltip="'Delete this backup file.'">
+              <span class="icon"><i class="fas fa-trash"></i></span>
+            </NuxtLink>
           </span>
         </header>
         <div class="card-footer-item">
@@ -98,7 +103,7 @@ import request from '~/utils/request.js'
 import moment from 'moment'
 import {humanFileSize, makeConsoleCommand, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
 import Message from '~/components/Message.vue'
-import {useStorage} from "@vueuse/core";
+import {useStorage} from '@vueuse/core'
 
 useHead({title: 'Backups'})
 const items = ref([])
@@ -170,6 +175,34 @@ const queueTask = async () => {
   }
 }
 
+const deleteFile = async (item) => {
+  if (!confirm(`Delete backup file '${item.filename}'?`)) {
+    return
+  }
+
+  try {
+    const response = await request(`/system/backup/${item.filename}`, {method: 'DELETE'})
+
+    if (200 === response.status) {
+      notification('success', 'Success', `Backup file '${item.filename}' has been deleted.`)
+      items.value = items.value.filter(i => i.filename !== item.filename)
+      return
+    }
+
+    let json
+
+    try {
+      json = await response.json()
+    } catch (e) {
+      json = {error: {code: response.status, message: response.statusText}}
+    }
+
+    notification('error', 'Error', `API error. ${json.error.code}: ${json.error.message}`)
+  } catch (e) {
+    notification('error', 'Error', `Request error. ${e.message}`)
+  }
+}
+
 const isQueued = async () => {
   const response = await request('/tasks/backup')
   const json = await response.json()
diff --git a/frontend/pages/tasks.vue b/frontend/pages/tasks.vue
index 20a2a70a..55f77c1d 100644
--- a/frontend/pages/tasks.vue
+++ b/frontend/pages/tasks.vue
@@ -195,6 +195,11 @@ const queueTask = async task => {
     if (response.ok) {
       notification('success', 'Success', `Task '${task.name}' has been ${is_queued ? 'removed from the queue' : 'queued'}.`)
       task.queued = !is_queued
+      if (task.queued) {
+        queued.value.push(task.name)
+      } else {
+        queued.value = queued.value.filter(t => t !== task.name)
+      }
     }
   } catch (e) {
     notification('error', 'Error', `Request error. ${e.message}`)
diff --git a/src/API/System/Backup.php b/src/API/System/Backup.php
index 72a30da9..9aefa0d9 100644
--- a/src/API/System/Backup.php
+++ b/src/API/System/Backup.php
@@ -30,7 +30,7 @@ public function __invoke(iRequest $request, array $args = []): iResponse
 
             $builder = [
                 'filename' => basename($file),
-                'type' => $isAuto ? 'Automatic' : 'Manual',
+                'type' => $isAuto ? 'automatic' : 'manual',
                 'size' => filesize($file),
                 'created_at' => filectime($file),
                 'modified_at' => filemtime($file),

From 850063d9e91d2f0518ff5575e92b8d336e52675f Mon Sep 17 00:00:00 2001
From: "Abdulmhsen B. A. A." <admin@arabcoders.org>
Date: Wed, 19 Jun 2024 21:37:00 +0300
Subject: [PATCH 7/8] automatically transfer running command in WebUI to
 background in-case connection dropped/closed.

---
 frontend/pages/console.vue |  9 ++++++++
 src/API/System/Command.php | 43 +++++++++++++++++++++-----------------
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/frontend/pages/console.vue b/frontend/pages/console.vue
index 6638ba83..54c409d7 100644
--- a/frontend/pages/console.vue
+++ b/frontend/pages/console.vue
@@ -180,6 +180,15 @@ const finished = () => {
   }
 
   isLoading.value = false;
+
+  const route = useRoute();
+  const router = useRouter();
+
+  if (route.query?.cmd || route.query?.task) {
+    route.query.cmd = '';
+    route.query.task = '';
+    router.push({path: '/console'});
+  }
 }
 
 onUpdated(() => outputConsole.value.scrollTop = outputConsole.value.scrollHeight);
diff --git a/src/API/System/Command.php b/src/API/System/Command.php
index ba0f3a78..850b697d 100644
--- a/src/API/System/Command.php
+++ b/src/API/System/Command.php
@@ -18,8 +18,13 @@
 final class Command
 {
     public const string URL = '%{api.prefix}/system/command';
+    private const int TIMES_BEFORE_PING = 6;
+    private const int PING_INTERVAL = 200000;
+
     private int $counter = 1;
 
+    private bool $toBackground = false;
+
     public function __construct()
     {
         set_time_limit(0);
@@ -59,10 +64,14 @@ public function __invoke(iRequest $request): iResponse
                     command: "{$path}/bin/console {$command}",
                     cwd: $path,
                     env: $_ENV,
-                    timeout: $data->get('timeout', 3600),
+                    timeout: $data->get('timeout', 7200),
                 );
 
                 $process->start(callback: function ($type, $data) use ($process) {
+                    if (true === $this->toBackground) {
+                        return;
+                    }
+
                     echo "id: " . hrtime(true) . "\n";
                     echo "event: data\n";
                     $data = (string)$data;
@@ -82,26 +91,26 @@ function ($data) {
 
                     flush();
 
-                    $this->counter = 3;
+                    $this->counter = self::TIMES_BEFORE_PING;
 
                     if (ob_get_length() > 0) {
                         ob_end_flush();
                     }
 
                     if (connection_aborted()) {
-                        $process->stop(1, 9);
+                        $this->toBackground = true;
                     }
                 });
 
-                while ($process->isRunning()) {
-                    usleep(500000);
+                while (false === $this->toBackground && $process->isRunning()) {
+                    usleep(self::PING_INTERVAL);
                     $this->counter--;
 
                     if ($this->counter > 1) {
                         continue;
                     }
 
-                    $this->counter = 3;
+                    $this->counter = self::TIMES_BEFORE_PING;
 
                     echo "id: " . hrtime(true) . "\n";
                     echo "event: ping\n";
@@ -113,13 +122,13 @@ function ($data) {
                     }
 
                     if (connection_aborted()) {
-                        $process->stop(1, 9);
+                        $this->toBackground = true;
                     }
                 }
             } catch (ProcessTimedOutException) {
             }
 
-            if (!connection_aborted()) {
+            if (false === $this->toBackground && !connection_aborted()) {
                 echo "id: " . hrtime(true) . "\n";
                 echo "event: close\n";
                 echo 'data: ' . makeDate() . "\n\n";
@@ -132,16 +141,12 @@ function ($data) {
             exit;
         };
 
-        return new Response(
-            status: HTTP_STATUS::HTTP_OK->value,
-            headers: [
-                'Content-Type' => 'text/event-stream',
-                'Cache-Control' => 'no-cache',
-                'Connection' => 'keep-alive',
-                'X-Accel-Buffering' => 'no',
-                'Last-Event-Id' => time(),
-            ],
-            body: StreamClosure::create($callable)
-        );
+        return new Response(status: HTTP_STATUS::HTTP_OK->value, headers: [
+            'Content-Type' => 'text/event-stream',
+            'Cache-Control' => 'no-cache',
+            'Connection' => 'keep-alive',
+            'X-Accel-Buffering' => 'no',
+            'Last-Event-Id' => time(),
+        ], body: StreamClosure::create($callable));
     }
 }

From 5a0678cc7a9fc723b1c14bb23b5f5dec71bbba9e Mon Sep 17 00:00:00 2001
From: "Abdulmhsen B. A. A." <admin@arabcoders.org>
Date: Wed, 19 Jun 2024 22:04:08 +0300
Subject: [PATCH 8/8] Mostly cosmetic changes to date tooltip display.

---
 frontend/pages/backend/[backend]/index.vue  |  7 ++-
 frontend/pages/backend/[backend]/search.vue |  7 ++-
 frontend/pages/backend/[backend]/users.vue  |  7 ++-
 frontend/pages/backends/index.vue           | 48 +++++++++++++---
 frontend/pages/backup.vue                   |  5 +-
 frontend/pages/history/[id]/index.vue       | 42 +++++++++++++-
 frontend/pages/history/index.vue            | 61 +++++++++++----------
 frontend/pages/ignore.vue                   |  6 +-
 frontend/pages/index.vue                    |  6 +-
 frontend/pages/logs/index.vue               | 13 +++--
 frontend/pages/parity.vue                   | 11 ++--
 frontend/pages/queue.vue                    |  4 +-
 frontend/pages/tasks.vue                    |  6 +-
 src/API/System/Backup.php                   |  9 ++-
 src/Libs/Entity/StateEntity.php             |  8 +++
 15 files changed, 166 insertions(+), 74 deletions(-)

diff --git a/frontend/pages/backend/[backend]/index.vue b/frontend/pages/backend/[backend]/index.vue
index 843f6293..34bd3901 100644
--- a/frontend/pages/backend/[backend]/index.vue
+++ b/frontend/pages/backend/[backend]/index.vue
@@ -84,8 +84,9 @@
             <div class="column is-4-tablet is-6-mobile has-text-left-mobile">
               <span class="icon-text">
                 <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
-                <span class="has-tooltip" v-tooltip="moment.unix(history.updated).format('YYYY-MM-DD h:mm:ss A')">
-                  {{ moment.unix(history.updated).fromNow() }}
+                <span class="has-tooltip"
+                      v-tooltip="`Updated at: ${moment.unix(history.updated_at ?? history.updated).format(TOOLTIP_DATE_FORMAT)}`">
+                  {{ moment.unix(history.updated_at ?? history.updated).fromNow() }}
                 </span>
               </span>
             </div>
@@ -139,7 +140,7 @@
 <script setup>
 import moment from 'moment'
 import Message from '~/components/Message.vue'
-import {formatDuration, makeName, notification} from "~/utils/index.js";
+import {formatDuration, makeName, notification, TOOLTIP_DATE_FORMAT} from "~/utils/index.js";
 
 const backend = useRoute().params.backend
 
diff --git a/frontend/pages/backend/[backend]/search.vue b/frontend/pages/backend/[backend]/search.vue
index 77ff605c..e09f592d 100644
--- a/frontend/pages/backend/[backend]/search.vue
+++ b/frontend/pages/backend/[backend]/search.vue
@@ -140,8 +140,9 @@
             <div class="card-footer">
               <div class="card-footer-item">
                 <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
-                <span class="has-tooltip" v-tooltip="moment.unix(item.updated).format('YYYY-MM-DD h:mm:ss A')">
-                  {{ moment.unix(item.updated).fromNow() }}
+                <span class="has-tooltip"
+                      v-tooltip="moment.unix(item.updated_at ?? item.updated).format(TOOLTIP_DATE_FORMAT)">
+                  {{ moment.unix(item.updated_at ?? item.updated).fromNow() }}
                 </span>
               </div>
               <div class="card-footer-item">
@@ -196,7 +197,7 @@
 <script setup>
 import request from '~/utils/request.js'
 import moment from 'moment'
-import {makeName, makeSearchLink, notification} from '~/utils/index.js'
+import {makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
 import Message from "~/components/Message.vue";
 import {useStorage} from "@vueuse/core";
 
diff --git a/frontend/pages/backend/[backend]/users.vue b/frontend/pages/backend/[backend]/users.vue
index 8d22d47b..8bf6d2bc 100644
--- a/frontend/pages/backend/[backend]/users.vue
+++ b/frontend/pages/backend/[backend]/users.vue
@@ -50,7 +50,10 @@
             </div>
 
             <div class="column is-6" v-if="item?.updatedAt">
-              <strong>Updated:</strong> {{ moment(item.updatedAt).fromNow() }}
+              <strong>Updated:&nbsp;</strong>
+              <span class="has-tooltip" v-tooltip="moment(item.updatedAt).format(TOOLTIP_DATE_FORMAT)">
+                {{ moment(item.updatedAt).fromNow() }}
+              </span>
             </div>
 
             <div class="column is-6 has-text-right" v-if="undefined !== item?.restricted">
@@ -83,7 +86,7 @@
 </template>
 
 <script setup>
-import {notification} from '~/utils/index.js'
+import {notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
 import {useStorage} from '@vueuse/core'
 import request from '~/utils/request.js'
 import moment from "moment";
diff --git a/frontend/pages/backends/index.vue b/frontend/pages/backends/index.vue
index 73d8963c..e67c4e3e 100644
--- a/frontend/pages/backends/index.vue
+++ b/frontend/pages/backends/index.vue
@@ -57,16 +57,50 @@
           </header>
           <div class="card-content">
             <div class="columns is-multiline has-text-centered">
-              <div class="column is-6 has-text-left-mobile" v-if="backend.export.enabled">
-                <strong>Last Export:</strong>
-                {{ backend.export.lastSync ? moment(backend.export.lastSync).fromNow() : 'None' }}
+              <div class="column is-6 has-text-left-mobile">
+                <strong>Last Export:&nbsp;</strong>
+                <template v-if="backend.export.enabled">
+                  <span v-if="backend.export.lastSync" class="has-tooltip"
+                        v-tooltip="moment(backend.export.lastSync).format(TOOLTIP_DATE_FORMAT)">
+                    {{ moment(backend.export.lastSync).fromNow() }}
+                  </span>
+                  <template v-else>Never</template>
+                </template>
+                <template v-else>
+                  <span class="tag is-danger is-light">Disabled</span>
+                </template>
               </div>
-              <div class="column is-6 has-text-left-mobile" v-if="backend.import.enabled">
-                <strong>Last Import:</strong>
-                {{ backend.import.lastSync ? moment(backend.import.lastSync).fromNow() : 'None' }}
+              <div class="column is-6 has-text-left-mobile">
+                <strong>Last Import:&nbsp;</strong>
+                <template v-if="backend.import.enabled">
+                  <span v-if="backend.import.lastSync" class="has-tooltip"
+                        v-tooltip="moment(backend.import.lastSync).format(TOOLTIP_DATE_FORMAT)">
+                    {{ moment(backend.import.lastSync).fromNow() }}
+                  </span>
+                  <template v-else>Never</template>
+                </template>
+                <template v-else>
+                  <span class="tag is-danger is-light">Disabled</span>
+                </template>
               </div>
             </div>
           </div>
+          <footer class="card-footer">
+            <div class="card-footer-item" v-if="backend.export.enabled">
+              <NuxtLink class="button is-danger is-fullwidth"
+                        :to="makeConsoleCommand(`state:export -v -s ${backend.name}`)">
+                <span class="icon"><i class="fas fa-upload"></i></span>
+                <span>Run export now</span>
+              </NuxtLink>
+            </div>
+            <div class="card-footer-item" v-if="backend.import.enabled">
+              <NuxtLink class="button is-primary is-fullwidth"
+                        :to="makeConsoleCommand(`state:import -v -s ${backend.name}`)">
+                <span class="icon"><i class="fas fa-download"></i></span>
+                <span>Run import now</span>
+              </NuxtLink>
+            </div>
+          </footer>
           <footer class="card-footer">
             <div class="card-footer-item">
               <div class="field">
@@ -133,7 +167,7 @@ import 'assets/css/bulma-switch.css'
 import moment from 'moment'
 import request from '~/utils/request.js'
 import BackendAdd from '~/components/BackendAdd.vue'
-import {copyText, notification} from '~/utils/index.js'
+import {copyText, makeConsoleCommand, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
 import {useStorage} from "@vueuse/core";
 import Message from "~/components/Message.vue";
 
diff --git a/frontend/pages/backup.vue b/frontend/pages/backup.vue
index f7842cd8..7b5984f4 100644
--- a/frontend/pages/backup.vue
+++ b/frontend/pages/backup.vue
@@ -55,9 +55,8 @@
         <div class="card-footer-item">
           <div class="card-footer-item">
             <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
-            <span v-tooltip="`Last Update: ${moment.unix(item.modified_at).format(TOOLTIP_DATE_FORMAT)} `"
-                  class="has-tooltip">
-              {{ moment.unix(item.created_at).fromNow() }}
+            <span class="has-tooltip" v-tooltip="`Last Update: ${moment(item.date).format(TOOLTIP_DATE_FORMAT)}`">
+              {{ moment(item.date).fromNow() }}
             </span>
           </div>
           <div class="card-footer-item">
diff --git a/frontend/pages/history/[id]/index.vue b/frontend/pages/history/[id]/index.vue
index 661a348e..2b132009 100644
--- a/frontend/pages/history/[id]/index.vue
+++ b/frontend/pages/history/[id]/index.vue
@@ -138,7 +138,8 @@
                 <span class="icon"><i class="fas fa-calendar"></i></span>
                 <span>
                   <span class="is-hidden-mobile">Updated:&nbsp;</span>
-                  <span class="has-tooltip" v-tooltip="moment.unix(data.updated).format('YYYY-MM-DD h:mm:ss A')">
+                  <span class="has-tooltip"
+                        v-tooltip="`Backend updated this record at: ${moment.unix(data.updated).format(TOOLTIP_DATE_FORMAT)}`">
                     {{ moment.unix(data.updated).fromNow() }}
                   </span>
                 </span>
@@ -226,6 +227,32 @@
               </div>
             </div>
 
+            <div class="column is-6 has-text-left" v-if="data.created_at">
+              <span class="icon-text">
+                <span class="icon"><i class="fas fa-database"></i></span>
+                <span>
+                  <span class="is-hidden-mobile">Created:&nbsp;</span>
+                  <span class="has-tooltip"
+                        v-tooltip="`DB record created at: ${moment.unix(data.created_at).format(TOOLTIP_DATE_FORMAT)}`">
+                    {{ moment.unix(data.created_at).fromNow() }}
+                  </span>
+                </span>
+              </span>
+            </div>
+
+            <div class="column is-6 has-text-right" v-if="data.updated_at">
+              <span class="icon-text">
+                <span class="icon"><i class="fas fa-database"></i></span>
+                <span>
+                  <span class="is-hidden-mobile">Updated:&nbsp;</span>
+                  <span class="has-tooltip"
+                        v-tooltip="`DB record updated at: ${moment.unix(data.updated_at).format(TOOLTIP_DATE_FORMAT)}`">
+                    {{ moment.unix(data.updated_at).fromNow() }}
+                  </span>
+                </span>
+              </span>
+            </div>
+
           </div>
         </div>
       </div>
@@ -300,7 +327,7 @@
                 <span>
                   <span class="is-hidden-mobile">Updated:&nbsp;</span>
                   <span class="has-tooltip"
-                        v-tooltip="getMoment(ag(data.extra, `${key}.received_at`, data.updated)).format('YYYY-MM-DD h:mm:ss A')">
+                        v-tooltip="`Backend last activity: ${getMoment(ag(data.extra, `${key}.received_at`, data.updated)).format(TOOLTIP_DATE_FORMAT)}`">
                     {{ getMoment(ag(data.extra, `${key}.received_at`, data.updated)).fromNow() }}
                   </span>
                 </span>
@@ -435,7 +462,16 @@
 
 <script setup>
 import request from '~/utils/request.js'
-import {ag, formatDuration, makeGUIDLink, makeName, makeSearchLink, notification, ucFirst} from '~/utils/index.js'
+import {
+  ag,
+  formatDuration,
+  makeGUIDLink,
+  makeName,
+  makeSearchLink,
+  notification,
+  TOOLTIP_DATE_FORMAT,
+  ucFirst
+} from '~/utils/index.js'
 import moment from 'moment'
 import {useStorage} from "@vueuse/core";
 import Message from "~/components/Message.vue";
diff --git a/frontend/pages/history/index.vue b/frontend/pages/history/index.vue
index af376145..04e8a388 100644
--- a/frontend/pages/history/index.vue
+++ b/frontend/pages/history/index.vue
@@ -137,8 +137,8 @@
           <div class="card" :class="{ 'is-success': item.watched }">
             <header class="card-header">
               <p class="card-header-title is-text-overflow pr-1">
-                <span class="icon" v-if="!item.progress">
-                  <i class="fas" :class="{'fa-eye-slash': !item.watched, 'fa-eye': item.watched}"></i>
+                <span class="icon is-unselectable">
+                  <i class="fas" :class="{'fa-eye-slash': !item.watched, 'fa-eye': item.watched}"></i>&nbsp;
                 </span>
                 <NuxtLink :to="'/history/'+item.id" v-text="makeName(item)"/>
               </p>
@@ -167,39 +167,33 @@
                               v-text="item?.content_path"/>
                   </div>
                 </div>
-                <div class="column is-4-tablet is-6-mobile has-text-left-mobile">
-                  <div class="is-text-overflow">
-                    <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
-                    <span class="has-tooltip"
-                          v-tooltip="moment.unix(item.updated_at??item.updated).format('YYYY-MM-DD h:mm:ss A')">
-                      {{ moment.unix(item.updated_at ?? item.updated).fromNow() }}
-                    </span>
-                  </div>
-                </div>
-                <div class="column is-4-tablet is-6-mobile has-text-right-mobile">
-                  <div class="is-text-overflow">
-                    <span class="icon"><i class="fas fa-server"></i>&nbsp;</span>
-                    <NuxtLink :to="'/backend/'+item.via" v-text="item.via"/>
-                  </div>
-                </div>
-                <div class="column is-4-tablet is-12-mobile has-text-left-mobile">
-                  <div class="is-text-overflow">
-                    <span class="icon"><i class="fas fa-envelope"></i>&nbsp;</span>
-                    {{ item.event ?? '-' }}
-                  </div>
+                <div class="column is-12 has-text-left" v-if="item?.progress">
+                  <span class="icon"><i class="fas fa-bars-progress"></i></span>
+                  <span>{{ formatDuration(item.progress) }}</span>
                 </div>
               </div>
             </div>
-            <div class="card-footer" v-if="item.progress">
+            <div class="card-footer has-text-centered">
               <div class="card-footer-item">
-                <span class="has-text-success" v-if="item.watched">Played</span>
-                <span class="has-text-danger" v-else>Unplayed</span>
+                <div class="is-text-overflow">
+                  <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
+                  <span class="has-tooltip"
+                        v-tooltip="`Record updated at: ${moment.unix(item.updated_at).format(TOOLTIP_DATE_FORMAT)}`">
+                    {{ moment.unix(item.updated_at).fromNow() }}
+                  </span>
+                </div>
               </div>
               <div class="card-footer-item">
-                <span class="icon-text">
-                  <span class="icon"><i class="fas fa-bars-progress"></i></span>
-                  <span>{{ formatDuration(item.progress) }}</span>
-                </span>
+                <div class="is-text-overflow">
+                  <span class="icon"><i class="fas fa-server"></i>&nbsp;</span>
+                  <NuxtLink :to="'/backend/'+item.via" v-text="item.via"/>
+                </div>
+              </div>
+              <div class="card-footer-item">
+                <div class="is-text-overflow">
+                  <span class="icon"><i class="fas fa-envelope"></i>&nbsp;</span>
+                  {{ item.event ?? '-' }}
+                </div>
               </div>
             </div>
           </div>
@@ -225,7 +219,14 @@
 import request from '~/utils/request.js'
 import moment from 'moment'
 import Message from '~/components/Message.vue'
-import {formatDuration, makeName, makePagination, makeSearchLink, notification} from '~/utils/index.js'
+import {
+  formatDuration,
+  makeName,
+  makePagination,
+  makeSearchLink,
+  notification,
+  TOOLTIP_DATE_FORMAT
+} from '~/utils/index.js'
 
 const route = useRoute()
 const router = useRouter()
diff --git a/frontend/pages/ignore.vue b/frontend/pages/ignore.vue
index 9a419066..a0892e5f 100644
--- a/frontend/pages/ignore.vue
+++ b/frontend/pages/ignore.vue
@@ -218,7 +218,9 @@
                 <div class="column is-6 has-text-right">
                   <span class="icon-text">
                     <span class="icon"><i class="fas fa-calendar"></i></span>
-                    <span>{{ moment(item.created).fromNow() }}</span>
+                    <span class="has-tooltip"
+                          v-tooltip="`Created at: ${moment(item.created).format(TOOLTIP_DATE_FORMAT)}`">
+                      {{ moment(item.created).fromNow() }}</span>
                   </span>
                 </div>
 
@@ -278,7 +280,7 @@
 
 <script setup>
 import request from '~/utils/request.js'
-import {awaitElement, copyText, notification, stringToRegex} from '~/utils/index.js'
+import {awaitElement, copyText, notification, stringToRegex, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
 import {useStorage} from '@vueuse/core'
 import moment from 'moment'
 import 'assets/css/bulma-switch.css'
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index ba6ad975..117fe987 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -29,8 +29,8 @@
                 <div class="column is-4-tablet is-6-mobile has-text-left-mobile">
                   <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
                   <span class="has-tooltip"
-                        v-tooltip="moment.unix(history.updated_at ?? history.updated).format('YYYY-MM-DD h:mm:ss A')">
-                    {{ moment.unix(history.updated_at ?? history.updated).fromNow() }}
+                        v-tooltip="`Record updated at: ${moment.unix(history.updated_at).format(TOOLTIP_DATE_FORMAT)}`">
+                    {{ moment.unix(history.updated_at).fromNow() }}
                   </span>
                 </div>
                 <div class="column is-4-tablet is-6-mobile has-text-right-mobile">
@@ -115,7 +115,7 @@
 import request from '~/utils/request.js'
 import moment from 'moment'
 import Message from '~/components/Message.vue'
-import {formatDuration, makeName} from '../utils/index.js'
+import {formatDuration, makeName, TOOLTIP_DATE_FORMAT} from '../utils/index.js'
 
 useHead({title: 'Index'})
 
diff --git a/frontend/pages/logs/index.vue b/frontend/pages/logs/index.vue
index 3f643263..d1c039cf 100644
--- a/frontend/pages/logs/index.vue
+++ b/frontend/pages/logs/index.vue
@@ -44,17 +44,18 @@
         <div class="card-content">
           <div class="columns is-multiline is-mobile has-text-centered">
             <div class="column is-6-mobile is-pre">
-              <span v-tooltip="'Last Update'" class="has-tooltip">
+              <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
+              <span class="has-tooltip" v-tooltip="`Last Update: ${moment(item.modified).format(TOOLTIP_DATE_FORMAT)}`">
                 {{ moment(item.modified).fromNow() }}
               </span>
             </div>
             <div class="column is-6-mobile">
-              {{ humanFileSize(item.size) }}
+              <span class="icon"><i class="fas fa-hdd"></i>&nbsp;</span>
+              <span>{{ humanFileSize(item.size) }}</span>
             </div>
             <div class="column is-6-mobile">
-              <span v-tooltip="'Log Kind'" class="has-tooltip">
-                {{ item.type }}
-              </span>
+              <span class="icon"><i class="fas fa-tag"></i>&nbsp;</span>
+              <span class="is-capitalized">{{ item.type }}</span>
             </div>
           </div>
         </div>
@@ -68,7 +69,7 @@
 <script setup>
 import request from "~/utils/request.js";
 import moment from "moment";
-import {humanFileSize} from "~/utils/index.js";
+import {humanFileSize, TOOLTIP_DATE_FORMAT} from "~/utils/index.js";
 import Message from "~/components/Message.vue";
 
 useHead({title: 'Logs'})
diff --git a/frontend/pages/parity.vue b/frontend/pages/parity.vue
index e1a30fe1..dd6eb38a 100644
--- a/frontend/pages/parity.vue
+++ b/frontend/pages/parity.vue
@@ -128,8 +128,9 @@
               </div>
               <div class="card-footer-item">
                 <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
-                <span class="has-tooltip" v-tooltip="moment.unix(item.updated).format('YYYY-MM-DD h:mm:ss A')">
-                  {{ moment.unix(item.updated).fromNow() }}
+                <span class="has-tooltip"
+                      v-tooltip="`Record updated at: ${moment.unix(item.updated_at).format(TOOLTIP_DATE_FORMAT)}`">
+                  {{ moment.unix(item.updated_at).fromNow() }}
                 </span>
               </div>
             </div>
@@ -172,9 +173,9 @@
 </template>
 
 <script setup>
-import request from '~/utils/request.js'
-import Message from '~/components/Message.vue'
-import {makeName, makePagination, makeSearchLink, notification} from '~/utils/index.js'
+import request from '~/utils/request'
+import Message from '~/components/Message'
+import {makeName, makePagination, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
 import moment from 'moment'
 import {useStorage} from '@vueuse/core'
 
diff --git a/frontend/pages/queue.vue b/frontend/pages/queue.vue
index 2ff58d73..c8f0e82d 100644
--- a/frontend/pages/queue.vue
+++ b/frontend/pages/queue.vue
@@ -69,7 +69,7 @@
           <div class="card-footer-item">
             <div class="is-text-overflow">
               <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
-              <span class="has-tooltip" v-tooltip="moment.unix(item.updated_at).format('YYYY-MM-DD h:mm:ss A')">
+              <span class="has-tooltip" v-tooltip="moment.unix(item.updated_at).format(TOOLTIP_DATE_FORMAT)">
                 {{ moment.unix(item.updated_at).fromNow() }}
               </span>
             </div>
@@ -96,7 +96,7 @@
 import request from '~/utils/request.js'
 import moment from 'moment'
 import Message from '~/components/Message.vue'
-import {formatDuration, makeName, makeSearchLink, notification} from '~/utils/index.js'
+import {formatDuration, makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
 
 useHead({title: 'Queue'})
 
diff --git a/frontend/pages/tasks.vue b/frontend/pages/tasks.vue
index 55f77c1d..649b5015 100644
--- a/frontend/pages/tasks.vue
+++ b/frontend/pages/tasks.vue
@@ -65,7 +65,8 @@
             <div class="column is-6 has-text-left">
               <strong class="is-hidden-mobile">Prev Run:&nbsp;</strong>
               <template v-if="task.enabled">
-                <span class="has-tooltip" v-tooltip="`Prev Run: ${moment(task.prev_run).format(TOOLTIP_DATE_FORMAT)}`">
+                <span class="has-tooltip"
+                      v-tooltip="`Last run was at: ${moment(task.prev_run).format(TOOLTIP_DATE_FORMAT)}`">
                   {{ task.prev_run ? moment(task.prev_run).fromNow() : '???' }}
                 </span>
               </template>
@@ -76,7 +77,8 @@
             <div class="column is-6 has-text-right">
               <strong class="is-hidden-mobile">Next Run:&nbsp;</strong>
               <template v-if="task.enabled">
-                <span class="has-tooltip" v-tooltip="`Next Run: ${moment(task.next_run).format(TOOLTIP_DATE_FORMAT)}`">
+                <span class="has-tooltip"
+                      v-tooltip="`Next run will be at: ${moment(task.next_run).format(TOOLTIP_DATE_FORMAT)}`">
                   {{ task.next_run ? moment(task.next_run).fromNow() : 'Never' }}
                 </span>
               </template>
diff --git a/src/API/System/Backup.php b/src/API/System/Backup.php
index 9aefa0d9..6675b58a 100644
--- a/src/API/System/Backup.php
+++ b/src/API/System/Backup.php
@@ -32,16 +32,19 @@ public function __invoke(iRequest $request, array $args = []): iResponse
                 'filename' => basename($file),
                 'type' => $isAuto ? 'automatic' : 'manual',
                 'size' => filesize($file),
-                'created_at' => filectime($file),
-                'modified_at' => filemtime($file),
+                'date' => filemtime($file),
             ];
 
             $list[] = $builder;
         }
 
-        $sorter = array_column($list, 'created_at');
+        $sorter = array_column($list, 'date');
         array_multisort($sorter, SORT_DESC, $list);
 
+        foreach ($list as &$item) {
+            $item['date'] = makeDate(ag($item, 'date'));
+        }
+
         return api_response(HTTP_STATUS::HTTP_OK, $list);
     }
 
diff --git a/src/Libs/Entity/StateEntity.php b/src/Libs/Entity/StateEntity.php
index b63cd917..37ae4db9 100644
--- a/src/Libs/Entity/StateEntity.php
+++ b/src/Libs/Entity/StateEntity.php
@@ -143,6 +143,14 @@ public function __construct(array $data)
             $this->{$key} = $val;
         }
 
+        if (0 === $this->updated_at && $this->updated > 0) {
+            $this->updated_at = $this->updated;
+        }
+
+        if (0 === $this->created_at && $this->updated > 0) {
+            $this->created_at = $this->updated;
+        }
+
         $this->data = $this->getAll();
     }