Update Owliver language and suggestions

src/components/ds/StatusBadge.tsx

@@ -2,6 +2,7 @@ import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
+import { useTranslation } from 'react-i18next';
 
 /**
  * The domain's states, mapped to a tone and a human label in one place.
@@ -80,9 +81,22 @@ const DOT_COLOR = {
  */
 /** @param {any} props */
 export function StatusBadge({ status, label, tone, dot = false, size = 'default', className, ...props }: DsProps) {
+  const { t, i18n } = useTranslation();
   const entry = STATUS_MAP[status] || {};
   const resolvedTone = tone || entry.tone || 'neutral';
-  const resolvedLabel = label || entry.label || humanize(status);
+
+  /* STATUS_MAP stays the single list of statuses and their tones; the catalogue
+     holds the words. Translated by STATUS rather than by the English label, so
+     "Hired" the application state and "Hired" the badge on a worker can diverge
+     later without one of them silently changing the other.
+     An explicit `label` prop still wins — a caller passing its own wording has
+     already decided, and `i18n.exists` keeps an unknown status on the
+     humanised fallback instead of inventing a key for it. */
+  const key = `status.${status}`;
+  const resolvedLabel = label
+    || (status && i18n.exists(key) ? t(key) : null)
+    || entry.label
+    || humanize(status);
 
   return (
     <Badge variant={resolvedTone} size={size} className={cn('gap-1.5', className)} {...props}>