localization for ntfy and mail

frontend/src/routes/ContractDetail.tsx

@@ -17,12 +17,13 @@ import { fetchContract, fetchPaperlessDocument } from "../api/contracts";
 import { fetchServerConfig, ServerConfig } from "../api/config";
 import PageHeader from "../components/PageHeader";
 import { formatCurrency, formatDate } from "../utils/date";
+import { translateCategoryName } from "../utils/categories";
 
 export default function ContractDetail() {
   const { contractId } = useParams<{ contractId: string }>();
   const navigate = useNavigate();
   const id = Number(contractId);
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const { data: contract, isLoading } = useQuery({
     queryKey: ["contracts", id],
@@ -56,6 +57,9 @@ export default function ContractDetail() {
         ? t("contractForm.fields.autoRenew")
         : "–";
   const notesValue = contract?.notes ?? t("contractDetail.noNotes");
+  const categoryValue = contract?.category
+    ? translateCategoryName(contract.category, i18n.language) || contract.category
+    : "–";
 
   if (!Number.isFinite(id)) {
     return <Typography>{t("contractForm.loadError")}</Typography>;
@@ -89,7 +93,7 @@ export default function ContractDetail() {
               <Detail label={t("contractDetail.notice")} value={terminationValue} />
               <Detail label={t("contractDetail.renewal")} value={renewalValue} />
               <Detail label={t("contractDetail.price")} value={formatCurrency(contract.price, contract.currency ?? "EUR")} />
-              <Detail label={t("contractDetail.category")} value={contract.category ?? "–"} />
+              <Detail label={t("contractDetail.category")} value={categoryValue} />
               <Detail label={t("contractDetail.notes")} value={notesValue} />
             </Stack>