From 50760ab099ecdcbf796426cf1cc1cfb9a83bc4f3 Mon Sep 17 00:00:00 2001
From: RKWojs <rkwojs@gmail.com>
Date: Thu, 2 Oct 2025 09:57:51 +0200
Subject: [PATCH] feat: Integrate translation support in FieldWithHistory
 component and update i18n strings

---
 src/components/FieldWithHistory.js | 14 ++++++++------
 src/lib/i18n.js                    | 16 ++++++++++++++--
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/FieldWithHistory.js b/src/components/FieldWithHistory.js
index 1d056cc..20b77d9 100644
--- a/src/components/FieldWithHistory.js
+++ b/src/components/FieldWithHistory.js
@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import Tooltip from "@/components/ui/Tooltip";
 import { formatDate } from "@/lib/utils";
+import { useTranslation } from "@/lib/i18n";
 
 export default function FieldWithHistory({
 	tableName,
@@ -13,6 +14,7 @@ export default function FieldWithHistory({
 	label = null,
 	className = "",
 }) {
+	const { t } = useTranslation();
 	const [hasHistory, setHasHistory] = useState(false);
 	const [history, setHistory] = useState([]);
 	const [loading, setLoading] = useState(true);
@@ -52,28 +54,28 @@ export default function FieldWithHistory({
 				return value;
 			}
 		}
-		return value || "N/A";
+		return value || t("common.na");
 	};
 
 	// Create tooltip content
 	const tooltipContent = history.length > 0 && (
 		<div className="space-y-2">
-			<div className="font-medium text-white mb-2">Change History:</div>
+			<div className="font-medium text-white mb-2">{t("common.changeHistory")}:</div>
 			{history.map((change, index) => (
 				<div key={change.id} className="text-xs border-b border-gray-600 pb-1 last:border-b-0">
 					<div className="flex justify-between items-start gap-2">
 						<div className="flex-1">
 							<div className="text-white font-medium">
-								Changed to: {getDisplayValue(change.new_value)}
+								{t("common.changedTo")}: {getDisplayValue(change.new_value)}
 							</div>
 							{change.old_value && (
 								<div className="text-gray-400 text-xs">
-									From: {getDisplayValue(change.old_value)}
+									{t("common.from")}: {getDisplayValue(change.old_value)}
 								</div>
 							)}
 							{change.changed_by_name && (
 								<div className="text-gray-300">
-									by {change.changed_by_name}
+									{t("common.by")} {change.changed_by_name}
 								</div>
 							)}
 						</div>
@@ -83,7 +85,7 @@ export default function FieldWithHistory({
 					</div>
 					{change.change_reason && (
 						<div className="text-gray-400 text-xs mt-1">
-							Reason: {change.change_reason}
+							{t("common.reason")}: {change.change_reason}
 						</div>
 					)}
 				</div>
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 4f204d8..fd8e11f 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -74,7 +74,13 @@ const translations = {
       clearAll: "Wyczyść",
       clearAllFilters: "Wyczyść wszystkie filtry",
       sortBy: "Sortuj według",
-      days: "dni"
+      days: "dni",
+      changeHistory: "Historia zmian",
+      changedTo: "Zmieniono na",
+      from: "Z",
+      by: "przez",
+      reason: "Powód",
+      na: "N/D"
     },
 
     // Dashboard
@@ -636,7 +642,13 @@ const translations = {
       clearAll: "Clear",
       clearAllFilters: "Clear all filters",
       sortBy: "Sort by",
-      days: "days"
+      days: "days",
+      changeHistory: "Change History",
+      changedTo: "Changed to",
+      from: "From",
+      by: "by",
+      reason: "Reason",
+      na: "N/A"
     },
 
     dashboard: {