fix: broad implementation of broadcaster

composer.json

@@ -23,28 +23,28 @@
         "php-tmdb/api": "^4.1",
         "predis/predis": "^2.4",
         "runtime/frankenphp-symfony": "^0.2.0",
-        "symfony/asset": "7.2.*",
-        "symfony/console": "7.2.*",
-        "symfony/doctrine-messenger": "7.2.*",
-        "symfony/dotenv": "7.2.*",
-        "symfony/filesystem": "7.2.*",
-        "symfony/finder": "7.2.*",
+        "symfony/asset": "7.3.*",
+        "symfony/console": "7.3.*",
+        "symfony/doctrine-messenger": "7.3.*",
+        "symfony/dotenv": "7.3.*",
+        "symfony/filesystem": "7.3.*",
+        "symfony/finder": "7.3.*",
         "symfony/flex": "^2",
-        "symfony/form": "7.2.*",
-        "symfony/framework-bundle": "7.2.*",
-        "symfony/ldap": "7.2.*",
+        "symfony/form": "7.3.*",
+        "symfony/framework-bundle": "7.3.*",
+        "symfony/ldap": "7.3.*",
         "symfony/mercure-bundle": "^0.3.9",
-        "symfony/messenger": "7.2.*",
-        "symfony/runtime": "7.2.*",
-        "symfony/scheduler": "7.2.*",
-        "symfony/security-bundle": "7.2.*",
+        "symfony/messenger": "7.3.*",
+        "symfony/runtime": "7.3.*",
+        "symfony/scheduler": "7.3.*",
+        "symfony/security-bundle": "7.3.*",
         "symfony/stimulus-bundle": "^2.24",
-        "symfony/twig-bundle": "7.2.*",
+        "symfony/twig-bundle": "7.3.*",
         "symfony/ux-icons": "^2.24",
         "symfony/ux-live-component": "^2.24",
         "symfony/ux-turbo": "^2.24",
         "symfony/ux-twig-component": "^2.24",
-        "symfony/yaml": "7.2.*",
+        "symfony/yaml": "7.3.*",
         "symfonycasts/tailwind-bundle": "^0.10.0",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^2.12|^3.0"
@@ -98,13 +98,13 @@
     "extra": {
         "symfony": {
             "allow-contrib": false,
-            "require": "7.2.*"
+            "require": "7.3.*"
         }
     },
     "require-dev": {
         "phpstan/phpstan": "^2.1",
         "symfony/maker-bundle": "^1.62",
-        "symfony/stopwatch": "7.2.*",
-        "symfony/web-profiler-bundle": "7.2.*"
+        "symfony/stopwatch": "7.3.*",
+        "symfony/web-profiler-bundle": "7.3.*"
     }
 }

config/packages/property_info.yaml

@@ -0,0 +1,3 @@
+framework:
+    property_info:
+        with_constructor_extractor: true

src/Controller/AlertController.php

@@ -2,34 +2,25 @@
 
 namespace App\Controller;
 
+use App\Util\Broadcaster;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\Mercure\HubInterface;
-use Symfony\Component\Mercure\Update;
 use Symfony\Component\Routing\Attribute\Route;
-use Twig\Environment;
 
 final class AlertController extends AbstractController
 {
     public function __construct(
-        #[Autowire(service: 'twig')] private readonly Environment $renderer,
-        private readonly HubInterface $hub,
+        private readonly Broadcaster $broadcaster,
     ) {}
 
     #[Route('/alert', name: 'app_alert')]
     public function index(): Response
     {
-        $update = new Update(
-            'alerts',
-            $this->renderer->render('Alert.stream.html.twig', [
-                'alert_id' => 1,
-                'title' => 'Added to queue',
-                'message' => 'This is a testy test!',
-            ])
+        $this->broadcaster->alert(
+            'Added to queue',
+            'This is a testy test!'
         );
 
-        $this->hub->publish($update);
         return $this->json([
             'Success' => 'Published'
         ]);

src/Controller/TorrentioController.php

@@ -6,12 +6,11 @@ use App\Torrentio\Action\Handler\GetMovieOptionsHandler;
 use App\Torrentio\Action\Handler\GetTvShowOptionsHandler;
 use App\Torrentio\Action\Input\GetMovieOptionsInput;
 use App\Torrentio\Action\Input\GetTvShowOptionsInput;
+use App\Util\Broadcaster;
 use Carbon\Carbon;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\Mercure\HubInterface;
-use Symfony\Component\Mercure\Update;
 use Symfony\Component\Routing\Attribute\Route;
 use Symfony\Contracts\Cache\CacheInterface;
 use Symfony\Contracts\Cache\ItemInterface;
@@ -21,8 +20,7 @@ final class TorrentioController extends AbstractController
     public function __construct(
         private readonly GetMovieOptionsHandler $getMovieOptionsHandler,
         private readonly GetTvShowOptionsHandler $getTvShowOptionsHandler,
-        private readonly HubInterface $hub,
-        private readonly \Twig\Environment $renderer,
+        private readonly Broadcaster $broadcaster,
     ) {}
 
     #[Route('/torrentio/movies/{tmdbId}/{imdbId}', name: 'app_torrentio_movies')]
@@ -75,14 +73,10 @@ final class TorrentioController extends AbstractController
         );
         $cache->delete($cacheId);
 
-        $this->hub->publish(new Update(
-            $request->getSession()->get('mercure_alert_topic'),
-            $this->renderer->render('Alert.stream.html.twig', [
-                'alert_id' => uniqid(),
-                'title' => 'Success',
-                'message' => 'Torrentio cache Cleared.',
-            ])
-        ));
+        $this->broadcaster->alert(
+            title: 'Success',
+            message: 'Torrentio cache Cleared.'
+        );
 
         return $cache->get($cacheId, function (ItemInterface $item) use ($input) {
             $item->expiresAt(Carbon::now()->addHour()->setMinute(0)->setSecond(0));

src/Download/Framework/Controller/ApiController.php

@@ -6,11 +6,9 @@ use App\Download\Action\Handler\DeleteDownloadHandler;
 use App\Download\Action\Input\DeleteDownloadInput;
 use App\Download\Action\Input\DownloadMediaInput;
 use App\Download\Framework\Repository\DownloadRepository;
+use App\Util\Broadcaster;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\Mercure\HubInterface;
-use Symfony\Component\Mercure\Update;
 use Symfony\Component\Messenger\MessageBusInterface;
 use Symfony\Component\Routing\Attribute\Route;
 
@@ -19,12 +17,11 @@ class ApiController extends AbstractController
     public function __construct(
         private DownloadRepository $downloadRepository,
         private MessageBusInterface $bus,
-        private readonly HubInterface $hub,
+        private readonly Broadcaster $broadcaster,
     ) {}
 
     #[Route('/api/download', name: 'api_download', methods: ['POST'])]
     public function download(
-        Request $request,
         DownloadMediaInput $input,
     ): Response {
         $download = $this->downloadRepository->insert(
@@ -47,33 +44,24 @@ class ApiController extends AbstractController
             return $this->json(['error' => $exception->getMessage()], Response::HTTP_INTERNAL_SERVER_ERROR);
         }
 
-        $this->hub->publish(new Update(
-            $request->getSession()->get('mercure_alert_topic'),
-            $this->renderView('broadcast/Alert.stream.html.twig', [
-                'alert_id' => uniqid(),
-                'title' => 'Success',
-                'message' => '"' . $input->title . '" added to Queue',
-            ])
-        ));
+        $this->broadcaster->alert(
+            title: 'Success',
+            message: "$input->title added to Queue."
+        );
 
         return $this->json(['status' => 200, 'message' => 'Added to Queue']);
     }
 
     #[Route('/api/download/{downloadId}', name: 'api_download_delete', methods: ['DELETE'])]
     public function deleteDownload(
-        Request $request,
         DeleteDownloadInput $input,
         DeleteDownloadHandler $handler,
     ): Response {
         $result = $handler->handle($input->toCommand());
-        $this->hub->publish(new Update(
-            $request->getSession()->get('mercure_alert_topic'),
-            $this->renderView('broadcast/Alert.stream.html.twig', [
-                'alert_id' => uniqid(),
-                'title' => 'Success',
-                'message' => '"' . $result->download->getTitle() . '" has been deleted.',
-            ])
-        ));
+        $this->broadcaster->alert(
+            title: 'Success',
+            message: "{$result->download->getTitle()} has been deleted.",
+        );
 
         return $this->json(['status' => 200, 'message' => 'Download Deleted']);
     }

src/Monitor/Framework/Controller/ApiController.php

@@ -7,19 +7,18 @@ use App\Monitor\Action\Handler\AddMonitorHandler;
 use App\Monitor\Action\Handler\DeleteMonitorHandler;
 use App\Monitor\Action\Input\AddMonitorInput;
 use App\Monitor\Action\Input\DeleteMonitorInput;
+use App\Util\Broadcaster;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Bundle\SecurityBundle\Security;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\Mercure\HubInterface;
 use Symfony\Component\Mercure\Update;
 use Symfony\Component\Routing\Attribute\Route;
-use Twig\Environment;
 
 class ApiController extends AbstractController
 {
     public function __construct(
-        #[Autowire(service: 'twig')]
-        private readonly Environment $renderer,
+        private readonly Broadcaster $broadcaster,
     ) {}
 
     #[Route('/api/monitor', name: 'api_monitor', methods: ['POST'])]
@@ -32,14 +31,10 @@ class ApiController extends AbstractController
         $command->userId = $this->getUser()->getId();
         $response = $handler->handle($command);
 
-        $hub->publish(new Update(
-            'alerts',
-            $this->renderer->render('broadcast/Alert.stream.html.twig', [
-                'alert_id' => uniqid(),
-                'title' => 'Success',
-                'message' => "New monitor added for {$input->title}",
-            ])
-        ));
+        $this->broadcaster->alert(
+            title: 'Success',
+            message: "New monitor added for {$input->title}",
+        );
 
         return $this->json([
             'status' => 200,

src/Twig/Components/MonitorList.php

@@ -3,6 +3,7 @@
 namespace App\Twig\Components;
 
 use App\Monitor\Framework\Repository\MonitorRepository;
+use Doctrine\ORM\Query\Expr\OrderBy;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\Attribute\LiveAction;
@@ -16,6 +17,9 @@ final class MonitorList extends AbstractController
 
     use PaginateTrait;
 
+    #[LiveProp(writable: true)]
+    public string $type;
+
     #[LiveProp(writable: true)]
     public bool $isWidget = true;
 
@@ -24,8 +28,36 @@ final class MonitorList extends AbstractController
     ) {}
 
     #[LiveAction]
-    public function getUserMonitors()
+    public function getMonitors()
     {
-        return $this->monitorRepository->getUserMonitorsPaginated($this->getUser(), $this->pageNumber, $this->perPage);
+        if ($this->type === "active") {
+            return $this->getActiveUserMonitors();
+        } elseif ($this->type === "complete") {
+            return $this->getCompleteUserMonitors();
+        }
+
+        return [];
+    }
+
+    #[LiveAction]
+    public function getActiveUserMonitors()
+    {
+        return $this->asPaginator($this->monitorRepository->createQueryBuilder('m')
+            ->andWhere('m.status IN (:statuses)')
+            ->setParameter('statuses', ['New', 'In Progress'])
+            ->orderBy('m.id', 'DESC')
+            ->getQuery()
+        );
+    }
+
+    #[LiveAction]
+    public function getCompleteUserMonitors()
+    {
+        return $this->asPaginator($this->monitorRepository->createQueryBuilder('m')
+            ->andWhere('m.status = :status')
+            ->setParameter('status', 'Complete')
+            ->orderBy('m.id', 'DESC')
+            ->getQuery()
+        );
     }
 }

src/Twig/Extensions/MonitorExtension.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Twig\Extensions;
+
+use App\Monitor\Framework\Entity\Monitor;
+use Twig\Attribute\AsTwigFilter;
+
+class MonitorExtension
+{
+    #[AsTwigFilter('monitor_type')]
+    public function type(string $type)
+    {
+        $types = [
+            'tvshows' => 'Show',
+            'tvseason' => 'Season',
+            'tvepisode' => 'Episode',
+        ];
+
+        return $types[$type] ?? '-';
+    }
+
+    #[AsTwigFilter('monitor_media_id')]
+    public function mediaId(Monitor $monitor)
+    {
+        if ($monitor->getMonitorType() === "tvseason") {
+            return "S". str_pad($monitor->getSeason(), 2, "0", STR_PAD_LEFT);
+        }
+
+        if ($monitor->getMonitorType() === "tvepisode") {
+            return "S". str_pad($monitor->getSeason(), 2, "0", STR_PAD_LEFT) .
+                "E". str_pad($monitor->getEpisode(), 2, "0", STR_PAD_LEFT);
+        }
+
+        return "-";
+    }
+}

src/User/Framework/Controller/Web/PreferencesController.php

@@ -9,23 +9,20 @@ use App\User\Action\Handler\SaveUserMediaPreferencesHandler;
 use App\User\Action\Input\SaveUserDownloadPreferencesInput;
 use App\User\Action\Input\SaveUserMediaPreferencesInput;
 use App\User\Framework\Repository\PreferencesRepository;
+use App\Util\Broadcaster;
 use App\Util\CountryLanguages;
 use App\Util\ProviderList;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\Mercure\HubInterface;
-use Symfony\Component\Mercure\Update;
 use Symfony\Component\Routing\Attribute\Route;
 
 class PreferencesController extends AbstractController
 {
     public function __construct(
         private readonly PreferencesRepository $preferencesRepository,
-        private readonly SaveUserMediaPreferencesHandler $saveUserMediaPreferencesHandler,
-        private readonly HubInterface $hub,
-        private readonly SaveUserDownloadPreferencesHandler $saveUserDownloadPreferencesHandler,
+        private readonly Broadcaster $broadcaster,
     ) {}
+
     #[Route('/user/preferences', 'app_user_preferences', methods: ['GET'])]
     public function mediaPreferences(): Response
     {
@@ -48,25 +45,21 @@ class PreferencesController extends AbstractController
 
     #[Route('/user/preferences/media', 'app_save_media_preferences', methods: ['POST'])]
     public function saveMediaPreferences(
-        Request $request,
         SaveUserMediaPreferencesInput $input,
+        SaveUserMediaPreferencesHandler $saveUserMediaPreferencesHandler,
     ): Response
     {
-        $this->saveUserMediaPreferencesHandler->handle($input->toCommand());
+        $saveUserMediaPreferencesHandler->handle($input->toCommand());
         $mediaPreferences = $this->getUser()->getMediaPreferences();
         $downloadPreferences = $this->getUser()->getDownloadPreferences();
 
         $languages = CountryLanguages::$languages;
         sort($languages);
 
-        $this->hub->publish(new Update(
-            $request->getSession()->get('mercure_alert_topic'),
-            $this->renderView('broadcast/Alert.stream.html.twig', [
-                'alert_id' => uniqid(),
-                'title' => 'Success',
-                'message' => 'Your media preferences have been saved.',
-            ])
-        ));
+        $this->broadcaster->alert(
+            title: 'Success',
+            message: 'Your media preferences have been saved.'
+        );
 
         return $this->render(
             'user/preferences.html.twig',
@@ -82,24 +75,20 @@ class PreferencesController extends AbstractController
 
     #[Route('/user/preferences/download', 'app_save_download_preferences', methods: ['POST'])]
     public function saveDownloadPreferences(
-        Request $request,
         SaveUserDownloadPreferencesInput $input,
+        SaveUserDownloadPreferencesHandler $saveUserDownloadPreferencesHandler,
     ): Response
     {
-        $downloadPreferences = $this->saveUserDownloadPreferencesHandler->handle($input->toCommand())->downloadPreferences;
+        $downloadPreferences = $saveUserDownloadPreferencesHandler->handle($input->toCommand())->downloadPreferences;
         $mediaPreferences = $this->getUser()->getMediaPreferences();
 
         $languages = CountryLanguages::$languages;
         sort($languages);
 
-        $this->hub->publish(new Update(
-            $request->getSession()->get('mercure_alert_topic'),
-            $this->renderView('broadcast/Alert.stream.html.twig', [
-                'alert_id' => uniqid(),
-                'title' => 'Success',
-                'message' => 'Your download preferences have been saved.',
-            ])
-        ));
+        $this->broadcaster->alert(
+            title: 'Success',
+            message: 'Your download preferences have been saved.'
+        );
 
         return $this->render(
             'user/preferences.html.twig',

src/Util/Broadcaster.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Util;
+
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\RequestStack;
+use Symfony\Component\Mercure\HubInterface;
+use Symfony\Component\Mercure\Update;
+use Twig\Environment;
+
+readonly class Broadcaster
+{
+    public function __construct(
+        #[Autowire(service: 'twig')]
+        private Environment $renderer,
+        private HubInterface $hub,
+        private RequestStack $requestStack,
+    ) {}
+
+    public function alert(string $title, string $message): void
+    {
+        $userAlertTopic = $this->requestStack->getCurrentRequest()->getSession()->get('mercure_alert_topic');
+        $update = new Update(
+            $userAlertTopic,
+            $this->renderer->render('broadcast/Alert.stream.html.twig', [
+                'alert_id' => uniqid(),
+                'title' => $title,
+                'message' => $message,
+            ])
+        );
+        $this->hub->publish($update);
+    }
+}

symfony.lock

@@ -2,6 +2,15 @@
     "1tomany/rich-bundle": {
         "version": "v1.8.3"
     },
+    "doctrine/deprecations": {
+        "version": "1.1",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "1.0",
+            "ref": "87424683adc81d7dc305eefec1fced883084aab9"
+        }
+    },
     "doctrine/doctrine-bundle": {
         "version": "2.14",
         "recipe": {
@@ -169,6 +178,18 @@
             "config/packages/messenger.yaml"
         ]
     },
+    "symfony/property-info": {
+        "version": "7.3",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "7.3",
+            "ref": "dae70df71978ae9226ae915ffd5fad817f5ca1f7"
+        },
+        "files": [
+            "config/packages/property_info.yaml"
+        ]
+    },
     "symfony/routing": {
         "version": "7.2",
         "recipe": {

tailwind.config.js

@@ -4,6 +4,14 @@ module.exports = {
     "./assets/**/*.js",
     "./templates/**/*.html.twig",
   ],
+  safelist: [
+      "bg-blue-300",
+      "bg-orange-300",
+      "bg-rose-300",
+      "bg-green-400",
+      "bg-purple-400",
+      "bg-orange-400",
+  ],
   theme: {
     extend: {},
   },

templates/broadcast/Monitor.stream.html.twig

@@ -82,4 +82,10 @@
 
 {% block remove %}
     <turbo-stream action="remove" target="monitor_{{ id }}"></turbo-stream>
+
+    <turbo-stream action="prepend" target="alert_list">
+        <template>
+            <twig:Alert title="Success" message="Your Monitor for '{{ entity.title }}' has been removed." alert_id="monitor_alert_{{ entity.id }}" data-controller="alert" />
+        </template>
+    </turbo-stream>
 {% endblock %}

templates/components/DownloadList.html.twig

@@ -70,7 +70,7 @@
             {% endfor %}
             {% if this.isWidget == true and this.downloads.items|length > this.perPage %}
                 <tr  id="download_view_all">
-                    <td class="py-2 whitespace-nowrap bg-orange-500 uppercase text-sm font-medium text-center text-white truncate" colspan="100%">
+                    <td class="py-2 whitespace-nowrap bg-orange-300 uppercase text-xs font-medium text-center text-black truncate" colspan="100%">
                         <a href="{{ path('app_downloads') }}">View All Downloads</a>
                     </td>
                 </tr>

templates/components/MonitorList.html.twig

@@ -3,9 +3,13 @@
         <thead>
         <tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">
             <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium uppercase  min-w-[45ch] max-w-[45ch] truncate">
+                class="px-6 py-3 text-start text-xs font-medium uppercase truncate">
                 Title
             </th>
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                ID
+            </th>
             <th scope="col"
                 class="px-6 py-3 text-start text-xs font-medium uppercase">
                 Search Count
@@ -18,6 +22,10 @@
                 class="px-6 py-3 text-start text-xs font-medium uppercase">
                 Last Search Date
             </th>
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                Type
+            </th>
             <th scope="col"
                 class="px-6 py-3 text-start text-xs font-medium uppercase">
                 Status
@@ -26,12 +34,15 @@
         </tr>
         </thead>
         <tbody id="monitors" class="divide-y divide-gray-50">
-        {% if this.userMonitors.items|length > 0 %}
-            {% for monitor in this.userMonitors.items %}
+        {% if this.monitors.items|length > 0 %}
+            {% for monitor in this.monitors.items %}
                 <tr  id="monitor_{{ monitor.id }}">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 min-w-[50ch] max-w-[50ch] truncate">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 truncate">
                         {{ monitor.title }}
                     </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {{ monitor|monitor_media_id }}
+                    </td>
                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
                         {{ monitor.searchCount }}
                     </td>
@@ -41,6 +52,15 @@
                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
                         {{ monitor.lastSearch|date('m/d/Y h:i a') }}
                     </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {% if monitor.monitorType == "tvshow" %}
+                            <twig:StatusBadge color="blue" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+                        {% elseif monitor.monitorType == "tvseason" %}
+                            <twig:StatusBadge color="orange" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+                        {% else %}
+                            <twig:StatusBadge color="rose" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+                        {% endif %}
+                    </td>
                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
                         {% if monitor.status == "New" %}
                             <twig:StatusBadge color="orange" status="{{ monitor.status }}" />
@@ -61,9 +81,9 @@
                     </td>
                 </tr>
             {% endfor %}
-            {% if this.isWidget and this.userMonitors.items|length > 5 %}
+            {% if this.isWidget and this.monitors.items|length > 5 %}
                 <tr  id="monitor_view_all">
-                    <td colspan="100%" class="py-2 whitespace-nowrap bg-orange-500 uppercase text-sm font-medium text-center text-white min-w-[50ch] max-w-[50ch] truncate">
+                    <td colspan="100%" class="py-2 whitespace-nowrap bg-orange-300 uppercase text-xs font-medium text-center text-black min-w-[50ch] max-w-[50ch] truncate">
                         <a href="{{ path('app_monitors') }}">View All Monitors</a>
                     </td>
                 </tr>
@@ -79,8 +99,8 @@
     </table>
 
     {% if this.isWidget == false %}
-        {% if this.userMonitors.items|length > 0 %}
-            {% set paginator = this.userMonitors %}
+        {% if this.monitors.items|length > 0 %}
+            {% set paginator = this.monitors %}
             {% include 'partial/paginator.html.twig' %}
         {% endif %}
     {% endif %}

templates/components/StatusBadge.html.twig

@@ -1,3 +1,8 @@
-<span {{ attributes }} class="py-[3px] px-[7px] bg-{{ color|default('green') }}-600 rounded-lg inline-block text-center text-xs text-white">
+<span {{ attributes }}
+        class="py-[3px] px-[7px]
+        bg-{{ color|default('green') }}-{{ number|default(400) }}
+        text-{{ text|default('black') }}
+        rounded-lg inline-block text-center text-xs"
+>
     {{ status }}
 </span>

templates/index/index.html.twig

@@ -16,7 +16,7 @@
         </div>
         <div class="flex flex-row gap-4">
             <twig:Card title="Monitors" class="w-full">
-                <twig:MonitorList />
+                <twig:MonitorList :type="'active'" :isWidget="true" />
             </twig:Card>
         </div>
         <div class="flex flex-col gap-4">

templates/monitor/index.html.twig

@@ -5,8 +5,14 @@
 
 {% block body %}
     <div class="p-4">
-        <twig:Card title="Monitors">
-            <twig:MonitorList :isWidget="false" :perPage="10"></twig:MonitorList>
+        <twig:Card title="Active Monitors">
+            <twig:MonitorList :type="'active'" :isWidget="false" :perPage="10"></twig:MonitorList>
+        </twig:Card>
+    </div>
+
+    <div class="p-4">
+        <twig:Card title="Complete Monitors">
+            <twig:MonitorList :type="'complete'" :isWidget="false" :perPage="10"></twig:MonitorList>
         </twig:Card>
     </div>
 {% endblock %}