Feat: Add upload status badge styles and twig filter

assets/styles/_components.css

@@ -1,3 +1,4 @@
+@import "components/badge.css";
 @import "components/autocomplete.css";
 @import "components/button.css";
 @import "components/datatable.css";

assets/styles/components/badge.css

@@ -0,0 +1,23 @@
+.upload-status-badge {
+    @apply inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium;
+}
+
+.upload-status-badge--default {
+    @apply bg-gray-100 text-gray-600;
+}
+
+.upload-status-badge--new {
+    @apply bg-yellow-100 text-yellow-800;
+}
+
+.upload-status-badge--checked {
+    @apply bg-green-100 text-green-700;
+}
+
+.upload-status-badge--error {
+    @apply bg-red-100 text-red-700;
+}
+
+.upload-status-badge--paid {
+    @apply bg-blue-100 text-blue-700;
+}

src/Twig/AppExtension.php

@@ -20,6 +20,7 @@ class AppExtension extends AbstractExtension
             new TwigFilter('teamer_status_label', [AppRuntime::class, 'teamerStatusLabel']),
             new TwigFilter('bpn_country_label', [AppRuntime::class, 'bpnCountryLabel']),
             new TwigFilter('bpn_pickup_label', [AppRuntime::class, 'bpnPickupLabel']),
+            new TwigFilter('upload_status_badge', [AppRuntime::class, 'renderUploadStatusBadge'], ['is_safe' => ['html']]),
         ];
     }
 

src/Twig/AppRuntime.php

@@ -5,8 +5,10 @@ namespace App\Twig;
 use App\BusProNet\DataProvider\CountryDataProvider;
 use App\BusProNet\DataProvider\PickupDataProvider;
 use App\Entity\Teamer;
+use App\Entity\Upload;
 use Carbon\Carbon;
 use Symfony\Component\HttpFoundation\RequestStack;
+use Symfony\Contracts\Translation\TranslatorInterface;
 use Twig\Environment;
 use Twig\Extension\RuntimeExtensionInterface;
 use Twig\Extra\Intl\IntlExtension;
@@ -16,6 +18,7 @@ class AppRuntime implements RuntimeExtensionInterface
     public function __construct(
         private readonly RequestStack $requestStack,
         private readonly IntlExtension $intlExtension,
+        private readonly TranslatorInterface $translator,
         private readonly CountryDataProvider $countries,
         private readonly PickupDataProvider $pickups,
         private readonly string $environment
@@ -94,6 +97,21 @@ class AppRuntime implements RuntimeExtensionInterface
         ]);
     }
 
+    public function renderUploadStatusBadge(string $status): string
+    {
+        $label = $this->translator->trans('label.document.status.'.$status);
+        $class = 'upload-status-badge ';
+        $class .= match($status) {
+            Upload::STATUS_NEW => 'upload-status-badge--new',
+            Upload::STATUS_ERROR => 'upload-status-badge--error',
+            Upload::STATUS_PAID => 'upload-status-badge--paid',
+            Upload::STATUS_CHECKED => 'upload-status-badge--checked',
+            default => 'upload-status-badge--default',
+        };
+
+        return sprintf('<span class="%s">%s</span>', $class, $label);
+    }
+
     public function nl2List(string $content, string $class = 'list-disc pl-4'): string
     {
         $items = explode(PHP_EOL, $content);

tailwind.config.js

@@ -2,6 +2,7 @@
 module.exports = {
   content: [
       './templates/**/*.twig',
+      './src/Twig/*.php',
   ],
   safelist: ['rotate-90'],
   theme: {

templates/admin/document/index.html.twig

@@ -57,7 +57,7 @@
                                     {{ disposition.teamer }}
                                 </td>
                                 <td>
-                                    {{ ('label.document.status.' ~ upload.status)|trans }}
+                                    {{ upload.status|upload_status_badge }}
                                 </td>
                                 <td>
                                     <div class="flex items-center space-x-2">