New alert system and panel de control page

frontend/src/utils/alertI18n.ts

@@ -0,0 +1,152 @@
+/**
+ * Alert i18n Translation Utility
+ *
+ * Handles translation of alert titles and messages using i18n keys from backend enrichment.
+ * Falls back to raw title/message if i18n data is not available.
+ */
+
+import { TFunction } from 'i18next';
+
+export interface AlertI18nData {
+  title_key?: string;
+  title_params?: Record<string, any>;
+  message_key?: string;
+  message_params?: Record<string, any>;
+}
+
+export interface AlertTranslationResult {
+  title: string;
+  message: string;
+  isTranslated: boolean;
+}
+
+/**
+ * Translates alert title and message using i18n data from metadata
+ *
+ * @param alert - Alert object with title, message, and metadata
+ * @param t - i18next translation function
+ * @returns Translated or fallback title and message
+ */
+export function translateAlert(
+  alert: {
+    title: string;
+    message: string;
+    metadata?: Record<string, any>;
+  },
+  t: TFunction
+): AlertTranslationResult {
+  // Extract i18n data from metadata
+  const i18nData = alert.metadata?.i18n as AlertI18nData | undefined;
+
+  // If no i18n data, return original title and message
+  if (!i18nData || (!i18nData.title_key && !i18nData.message_key)) {
+    return {
+      title: alert.title,
+      message: alert.message,
+      isTranslated: false,
+    };
+  }
+
+  // Translate title
+  let translatedTitle = alert.title;
+  if (i18nData.title_key) {
+    try {
+      const translated = t(i18nData.title_key, i18nData.title_params || {});
+      // Only use translation if it's not the key itself (i18next returns key if translation missing)
+      if (translated !== i18nData.title_key) {
+        translatedTitle = translated;
+      }
+    } catch (error) {
+      console.warn(`Failed to translate alert title with key: ${i18nData.title_key}`, error);
+    }
+  }
+
+  // Translate message
+  let translatedMessage = alert.message;
+  if (i18nData.message_key) {
+    try {
+      const translated = t(i18nData.message_key, i18nData.message_params || {});
+      // Only use translation if it's not the key itself
+      if (translated !== i18nData.message_key) {
+        translatedMessage = translated;
+      }
+    } catch (error) {
+      console.warn(`Failed to translate alert message with key: ${i18nData.message_key}`, error);
+    }
+  }
+
+  return {
+    title: translatedTitle,
+    message: translatedMessage,
+    isTranslated: true,
+  };
+}
+
+/**
+ * Translates alert title only
+ *
+ * @param alert - Alert object
+ * @param t - i18next translation function
+ * @returns Translated or fallback title
+ */
+export function translateAlertTitle(
+  alert: {
+    title: string;
+    metadata?: Record<string, any>;
+  },
+  t: TFunction
+): string {
+  const i18nData = alert.metadata?.i18n as AlertI18nData | undefined;
+
+  if (!i18nData?.title_key) {
+    return alert.title;
+  }
+
+  try {
+    const translated = t(i18nData.title_key, i18nData.title_params || {});
+    return translated !== i18nData.title_key ? translated : alert.title;
+  } catch (error) {
+    console.warn(`Failed to translate alert title with key: ${i18nData.title_key}`, error);
+    return alert.title;
+  }
+}
+
+/**
+ * Translates alert message only
+ *
+ * @param alert - Alert object
+ * @param t - i18next translation function
+ * @returns Translated or fallback message
+ */
+export function translateAlertMessage(
+  alert: {
+    message: string;
+    metadata?: Record<string, any>;
+  },
+  t: TFunction
+): string {
+  const i18nData = alert.metadata?.i18n as AlertI18nData | undefined;
+
+  if (!i18nData?.message_key) {
+    return alert.message;
+  }
+
+  try {
+    const translated = t(i18nData.message_key, i18nData.message_params || {});
+    return translated !== i18nData.message_key ? translated : alert.message;
+  } catch (error) {
+    console.warn(`Failed to translate alert message with key: ${i18nData.message_key}`, error);
+    return alert.message;
+  }
+}
+
+/**
+ * Checks if alert has i18n data available
+ *
+ * @param alert - Alert object
+ * @returns True if i18n data is present
+ */
+export function hasI18nData(alert: { metadata?: Record<string, any> }): boolean {
+  const i18nData = alert.metadata?.i18n as AlertI18nData | undefined;
+  return !!(i18nData && (i18nData.title_key || i18nData.message_key));
+}