feat: Implement internationalization for task management components

- Added translation support for task-related strings in ProjectTaskForm and ProjectTasksSection components. - Integrated translation for navigation items in the Navigation component. - Created ProjectCalendarWidget component with Polish translations for project statuses and deadlines. - Developed Tooltip component for enhanced user experience with tooltips. - Established a field change history logging system in the database with associated queries. - Enhanced task update logging to include translated status and priority changes. - Introduced server-side translations for system messages to improve localization.
2025-09-11 15:49:07 +02:00
parent 50adc50a24
commit 0dd988730f
24 changed files with 1945 additions and 114 deletions
--- a/src/components/FieldWithHistory.js
+++ b/src/components/FieldWithHistory.js
@@ -0,0 +1,126 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Tooltip from "@/components/ui/Tooltip";
+import { formatDate } from "@/lib/utils";
+
+export default function FieldWithHistory({
+	tableName,
+	recordId,
+	fieldName,
+	currentValue,
+	displayValue = null,
+	label = null,
+	className = "",
+}) {
+	const [hasHistory, setHasHistory] = useState(false);
+	const [history, setHistory] = useState([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		const fetchHistory = async () => {
+			try {
+				const response = await fetch(
+					`/api/field-history?table_name=${tableName}&record_id=${recordId}&field_name=${fieldName}`
+				);
+				if (response.ok) {
+					const historyData = await response.json();
+					setHistory(historyData);
+					setHasHistory(historyData.length > 0);
+				}
+			} catch (error) {
+				console.error("Failed to fetch field history:", error);
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		if (tableName && recordId && fieldName) {
+			fetchHistory();
+		} else {
+			setLoading(false);
+		}
+	}, [tableName, recordId, fieldName]);
+
+	// Format value for display
+	const getDisplayValue = (value) => {
+		if (displayValue !== null) return displayValue;
+		if (value && fieldName.includes("date")) {
+			try {
+				return formatDate(value);
+			} catch {
+				return value;
+			}
+		}
+		return value || "N/A";
+	};
+
+	// Create tooltip content
+	const tooltipContent = history.length > 0 && (
+		<div className="space-y-2">
+			<div className="font-medium text-white mb-2">Change History:</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)}
+							</div>
+							{change.old_value && (
+								<div className="text-gray-400 text-xs">
+									From: {getDisplayValue(change.old_value)}
+								</div>
+							)}
+							{change.changed_by_name && (
+								<div className="text-gray-300">
+									by {change.changed_by_name}
+								</div>
+							)}
+						</div>
+						<div className="text-gray-400 text-right text-xs">
+							{formatDate(change.changed_at)}
+						</div>
+					</div>
+					{change.change_reason && (
+						<div className="text-gray-400 text-xs mt-1">
+							Reason: {change.change_reason}
+						</div>
+					)}
+				</div>
+			))}
+		</div>
+	);
+
+	if (loading) {
+		return (
+			<div className={className}>
+				{label && <span className="text-sm font-medium text-gray-500 block mb-1">{label}</span>}
+				<p className="text-gray-900 font-medium">{getDisplayValue(currentValue)}</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className={className}>
+			{label && <span className="text-sm font-medium text-gray-500 block mb-1">{label}</span>}
+			<div className="flex items-center gap-2">
+				<p className="text-gray-900 font-medium">{getDisplayValue(currentValue)}</p>
+				{hasHistory && (
+					<Tooltip content={tooltipContent}>
+						<svg
+							className="w-4 h-4 text-blue-500 hover:text-blue-700 cursor-help"
+							fill="currentColor"
+							viewBox="0 0 20 20"
+						>
+							<path
+								fillRule="evenodd"
+								d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+								clipRule="evenodd"
+							/>
+						</svg>
+					</Tooltip>
+				)}
+			</div>
+		</div>
+	);
+}