Fabrik als Provider Korrigiert

backend/app/frontend/index.html

@@ -115,6 +115,8 @@
                 <option value="ticketmaster">Ticketmaster</option>
                 <option value="bandsintown">Bandsintown</option>
                 <option value="eventim">Eventim</option>
+                <option value="barclays_arena">Barclays Arena</option>
+                <option value="fabrik">Fabrik</option>
               </select>
             </div>
           </div>
@@ -124,6 +126,19 @@
           </div>
         </section>
 
+        <section class="panel panel-wide">
+          <div class="panel-header">
+            <div>
+              <p class="section-kicker">Provider</p>
+              <h2>Status der Quellen</h2>
+            </div>
+          </div>
+
+          <div id="provider-status-list" class="provider-status-list empty-state">
+            Noch keine Provider-Statusdaten vorhanden.
+          </div>
+        </section>
+
         <section class="panel panel-wide">
           <div class="panel-header">
             <div>

backend/app/frontend/static/app.js

@@ -2,6 +2,7 @@ const state = {
   watchItems: [],
   events: [],
   notifications: [],
+  providerStatuses: [],
 };
 
 const watchItemsEl = document.querySelector("#watch-items");
@@ -13,6 +14,7 @@ const providerFilter = document.querySelector("#provider-filter");
 const syncButton = document.querySelector("#sync-button");
 const toastEl = document.querySelector("#toast");
 const providerSummaryEl = document.querySelector("#provider-summary");
+const providerStatusListEl = document.querySelector("#provider-status-list");
 
 function showToast(message) {
   toastEl.textContent = message;
@@ -28,7 +30,12 @@ function formatDate(value) {
     return "unbekannt";
   }
 
-  const date = new Date(value);
+  const normalizedValue =
+    typeof value === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?$/.test(value)
+      ? `${value}Z`
+      : value;
+
+  const date = new Date(normalizedValue);
   if (Number.isNaN(date.getTime())) {
     return value;
   }
@@ -89,6 +96,8 @@ function prettifyProviderName(value) {
     ticketmaster: "Ticketmaster",
     bandsintown: "Bandsintown",
     eventim: "Eventim",
+    barclays_arena: "Barclays Arena",
+    fabrik: "Fabrik",
   };
 
   return names[value] || value;
@@ -99,6 +108,8 @@ function getProviderClass(value) {
     ticketmaster: "provider-ticketmaster",
     bandsintown: "provider-bandsintown",
     eventim: "provider-eventim",
+    barclays_arena: "provider-barclays-arena",
+    fabrik: "provider-fabrik",
   };
 
   return classes[value] || "";
@@ -128,6 +139,40 @@ function renderProviderSummary() {
     .join("");
 }
 
+function renderProviderStatuses() {
+  if (!state.providerStatuses.length) {
+    providerStatusListEl.className = "provider-status-list empty-state";
+    providerStatusListEl.textContent = "Noch keine Provider-Statusdaten vorhanden.";
+    return;
+  }
+
+  providerStatusListEl.className = "provider-status-list";
+  providerStatusListEl.innerHTML = state.providerStatuses
+    .map(
+      (entry) => `
+        <article class="provider-status-card">
+          <div class="notification-header">
+            <div>
+              <h3>${escapeHtml(prettifyProviderName(entry.provider_name))}</h3>
+              <div class="pill-row">
+                <span class="pill ${
+                  entry.status === "ok"
+                    ? "success"
+                    : entry.status === "blocked"
+                      ? "warning"
+                      : "danger"
+                }">${escapeHtml(entry.status)}</span>
+              </div>
+            </div>
+            <span class="muted">${escapeHtml(formatDate(entry.last_checked_at))}</span>
+          </div>
+          <p>${escapeHtml(entry.message)}</p>
+        </article>
+      `
+    )
+    .join("");
+}
+
 function renderWatchItems() {
   if (!state.watchItems.length) {
     watchItemsEl.className = "watch-list empty-state";
@@ -283,19 +328,22 @@ function updateSyncStatus(message) {
 }
 
 async function loadData() {
-  const [watchItems, events, notifications] = await Promise.all([
+  const [watchItems, events, notifications, providerStatuses] = await Promise.all([
     apiFetch("/watch-items"),
     apiFetch("/events"),
     apiFetch("/notifications"),
+    apiFetch("/provider-statuses"),
   ]);
 
   state.watchItems = watchItems;
   state.events = events;
   state.notifications = notifications;
+  state.providerStatuses = providerStatuses;
 
   renderStats();
   renderWatchItems();
   renderEvents();
+  renderProviderStatuses();
   renderNotifications();
 }
 

backend/app/frontend/static/styles.css

@@ -255,7 +255,8 @@ button:hover,
 
 .watch-list,
 .event-list,
-.notification-list {
+.notification-list,
+.provider-status-list {
   display: grid;
   gap: 14px;
 }
@@ -270,7 +271,8 @@ button:hover,
 
 .watch-card,
 .event-card,
-.notification-card {
+.notification-card,
+.provider-status-card {
   padding: 18px;
   border-radius: var(--radius-md);
   background: var(--surface-strong);
@@ -357,13 +359,24 @@ button:hover,
   color: #4f3790;
 }
 
+.provider-barclays-arena {
+  background: rgba(26, 87, 163, 0.14);
+  color: #1a57a3;
+}
+
+.provider-fabrik {
+  background: rgba(154, 77, 24, 0.14);
+  color: #8e4516;
+}
+
 .muted {
   color: var(--muted);
 }
 
 .watch-card p,
 .event-card p,
-.notification-card p {
+.notification-card p,
+.provider-status-card p {
   margin-top: 12px;
   line-height: 1.55;
 }