feat: Integrate translation support in FieldWithHistory component and update i18n strings

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>