feat(i18n): Add Polish translations for task management components and update search placeholder

src/components/ProjectTasksList.js

@@ -15,8 +15,10 @@ import {
 	formatDistanceToNow,
 } from "date-fns";
 import { formatDate } from "@/lib/utils";
+import { useTranslation } from "@/lib/i18n";
 
 export default function ProjectTasksList() {
+	const { t } = useTranslation();
 	const [allTasks, setAllTasks] = useState([]);
 	const [loading, setLoading] = useState(true);
 	const [searchTerm, setSearchTerm] = useState("");
@@ -210,7 +212,7 @@ export default function ProjectTasksList() {
 
 	// Group tasks by task name when groupBy is set to "task_name"
 	const groupTasksByName = (tasks) => {
-		if (groupBy !== "task_name") return { "All Tasks": tasks };
+		if (groupBy !== "task_name") return { [t("tasks.allTasks")]: tasks };
 
 		const groups = {};
 		tasks.forEach((task) => {
@@ -238,10 +240,10 @@ export default function ProjectTasksList() {
 				const tasks = await res2.json();
 				setAllTasks(tasks);
 			} else {
-				alert("Failed to update task status");
+				alert(t("errors.generic"));
 			}
 		} catch (error) {
-			alert("Error updating task status");
+			alert(t("errors.generic"));
 		}
 	};
 
@@ -281,7 +283,7 @@ export default function ProjectTasksList() {
 				<div className="flex items-center gap-2">
 					<span className="font-medium text-gray-900">{task.task_name}</span>
 					<Badge variant={getPriorityVariant(task.priority)} size="sm">
-						{task.priority}
+						{t(`tasks.${task.priority}`)}
 					</Badge>
 				</div>
 			</td>
@@ -307,7 +309,7 @@ export default function ProjectTasksList() {
 						</div>
 					</div>
 				) : (
-					<span className="text-gray-400 italic">Unassigned</span>
+					<span className="text-gray-400 italic">{t("projects.unassigned")}</span>
 				)}
 			</td>
 			{showTimeLeft && (
@@ -322,9 +324,9 @@ export default function ProjectTasksList() {
 							>
 								{!isNaN(task.statusInfo.daysRemaining)
 									? task.statusInfo.daysRemaining > 0
-										? `${task.statusInfo.daysRemaining}d left`
-										: `${Math.abs(task.statusInfo.daysRemaining)}d overdue`
-									: "Calculating..."}
+										? `${task.statusInfo.daysRemaining}${t("tasks.daysLeft")}`
+										: `${Math.abs(task.statusInfo.daysRemaining)}${t("tasks.daysOverdue")}`
+									: t("common.loading")}
 							</Badge>
 						)}
 						{task.statusInfo &&
@@ -332,8 +334,8 @@ export default function ProjectTasksList() {
 							task.status === "in_progress" && (
 								<Badge variant="danger" size="sm">
 									{!isNaN(task.statusInfo.daysRemaining)
-										? `${Math.abs(task.statusInfo.daysRemaining)}d overdue`
-										: "Overdue"}
+										? `${Math.abs(task.statusInfo.daysRemaining)}${t("tasks.daysOverdue")}`
+										: t("tasks.overdue")}
 								</Badge>
 							)}
 					</div>
@@ -343,7 +345,7 @@ export default function ProjectTasksList() {
 				{task.status === "completed" && task.date_completed ? (
 					<div>
 						<div>
-							Completed:{" "}
+							{t("taskStatus.completed")}:{" "}
 							{(() => {
 								try {
 									const completedDate = new Date(task.date_completed);
@@ -359,7 +361,7 @@ export default function ProjectTasksList() {
 				) : task.status === "in_progress" && task.date_started ? (
 					<div>
 						<div>
-							Started:{" "}
+							{t("tasks.dateStarted")}:{" "}
 							{(() => {
 								try {
 									const startedDate = new Date(task.date_started);
@@ -385,7 +387,7 @@ export default function ProjectTasksList() {
 			</td>
 			{showMaxWait && (
 				<td className="px-4 py-3 text-sm text-gray-500">
-					{task.max_wait_days} days
+					{task.max_wait_days} {t("tasks.days")}
 				</td>
 			)}
 			<td className="px-4 py-3">
@@ -399,7 +401,7 @@ export default function ProjectTasksList() {
 						variant="secondary"
 						size="sm"
 						onClick={() => handleShowComments(task)}
-						title="View comments"
+						title={t("tasks.comments")}
 					>
 						💬
 					</Button>
@@ -418,48 +420,48 @@ export default function ProjectTasksList() {
 					<thead className="bg-gray-50">
 						<tr>
 							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
-								Task Name
+								{t("tasks.taskName")}
 							</th>{" "}
 							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
-								Project
+								{t("tasks.project")}
 							</th>
 							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
-								City
+								{t("projects.city")}
 							</th>
 							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
-								Address
+								{t("projects.address")}
 							</th>
 							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
-								Assigned To
+								{t("tasks.assignedTo")}
 							</th>
 							{showTimeLeft && (
 								<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
-									Time Left
+									{t("tasks.daysLeft")}
 								</th>
 							)}
 							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
-								Date Info
+								{t("tasks.dateCreated")}
 							</th>
 							{showMaxWait && (
 								<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
-									Max Wait
+									{t("tasks.maxWait")}
 								</th>
 							)}{" "}
 							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
-								Actions
+								{t("tasks.actions")}
 							</th>
 						</tr>
 					</thead>
 					<tbody>
 						{Object.entries(groupedTasks).map(([groupName, groupTasks]) => (
 							<Fragment key={`group-fragment-${groupName}`}>
-								{showGrouped && groupName !== "All Tasks" && (
+								{showGrouped && groupName !== t("tasks.allTasks") && (
 									<tr key={`group-${groupName}`}>
 										<td
 											colSpan={colSpan}
 											className="px-4 py-2 bg-gray-100 font-medium text-gray-800 text-sm"
 										>
-											{groupName} ({groupTasks.length} tasks)
+											{groupName} ({groupTasks.length} {t("tasks.tasks")})
 										</td>
 									</tr>
 								)}
@@ -477,7 +479,7 @@ export default function ProjectTasksList() {
 				</table>
 				{filteredTasks.length === 0 && (
 					<div className="text-center py-8 text-gray-500">
-						<p>No tasks found</p>
+						<p>{t("tasks.noTasks")}</p>
 					</div>
 				)}
 			</div>
@@ -503,7 +505,7 @@ export default function ProjectTasksList() {
 						<div className="text-2xl font-bold text-blue-600">
 							{taskGroups.pending.length}
 						</div>
-						<div className="text-sm text-gray-600">Pending</div>
+						<div className="text-sm text-gray-600">{t("taskStatus.pending")}</div>
 					</CardContent>
 				</Card>
 				<Card>
@@ -511,7 +513,7 @@ export default function ProjectTasksList() {
 						<div className="text-2xl font-bold text-purple-600">
 							{taskGroups.in_progress.length}
 						</div>
-						<div className="text-sm text-gray-600">In Progress</div>
+						<div className="text-sm text-gray-600">{t("taskStatus.in_progress")}</div>
 					</CardContent>
 				</Card>
 				<Card>
@@ -519,7 +521,7 @@ export default function ProjectTasksList() {
 						<div className="text-2xl font-bold text-green-600">
 							{taskGroups.completed.length}
 						</div>
-						<div className="text-sm text-gray-600">Completed</div>
+						<div className="text-sm text-gray-600">{t("taskStatus.completed")}</div>
 					</CardContent>
 				</Card>
 			</div>{" "}
@@ -527,26 +529,26 @@ export default function ProjectTasksList() {
 			<SearchBar
 				searchTerm={searchTerm}
 				onSearchChange={(e) => setSearchTerm(e.target.value)}
-				placeholder="Search tasks, projects, city, or address..."
+				placeholder={t("tasks.searchPlaceholder")}
 				resultsCount={
 					filterTasks(taskGroups.pending).length +
 					filterTasks(taskGroups.in_progress).length +
 					filterTasks(taskGroups.completed).length
 				}
-				resultsText="tasks"
+				resultsText={t("tasks.tasks")}
 				filters={
 					<div className="flex items-center gap-4">
 						<div className="flex items-center gap-2">
 							<label className="text-sm font-medium text-gray-700">
-								Group by:
+								{t("tasks.sortBy")}:
 							</label>
 							<Select
 								value={groupBy}
 								onChange={(e) => setGroupBy(e.target.value)}
 								className="min-w-[120px]"
 							>
-								<option value="none">None</option>
-								<option value="task_name">Task Name</option>
+								<option value="none">{t("common.none")}</option>
+								<option value="task_name">{t("tasks.taskName")}</option>
 							</Select>
 						</div>
 					</div>
@@ -558,13 +560,13 @@ export default function ProjectTasksList() {
 				<div>
 					<div className="mb-4">
 						<h2 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
-							Pending Tasks
+							{t("taskStatus.pending")} {t("tasks.tasks")}
 							<Badge variant="primary" size="md">
 								{taskGroups.pending.length}
 							</Badge>
 						</h2>
 						<p className="text-sm text-gray-600 mt-1">
-							Tasks waiting to be started
+							{t("tasks.noTasksMessage")}
 						</p>
 					</div>
 					<TaskTable
@@ -579,13 +581,13 @@ export default function ProjectTasksList() {
 				<div>
 					<div className="mb-4">
 						<h2 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
-							In Progress Tasks
+							{t("taskStatus.in_progress")} {t("tasks.tasks")}
 							<Badge variant="secondary" size="md">
 								{taskGroups.in_progress.length}
 							</Badge>
 						</h2>
 						<p className="text-sm text-gray-600 mt-1">
-							Tasks currently being worked on - showing time left for completion
+							Zadania aktualnie w trakcie realizacji - pokazujący pozostały czas do ukończenia
 						</p>
 					</div>
 					<TaskTable
@@ -600,13 +602,13 @@ export default function ProjectTasksList() {
 				<div>
 					<div className="mb-4">
 						<h2 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
-							Completed Tasks
+							{t("taskStatus.completed")} {t("tasks.tasks")}
 							<Badge variant="success" size="md">
 								{taskGroups.completed.length}
 							</Badge>
 						</h2>
 						<p className="text-sm text-gray-600 mt-1">
-							Recently completed and cancelled tasks
+							Ostatnio ukończone i anulowane zadania
 						</p>
 					</div>
 					<TaskTable
@@ -616,9 +618,7 @@ export default function ProjectTasksList() {
 						showMaxWait={false}
 					/>
 				</div>
-			</div>
-
-			{/* Comments Modal */}
+			</div>			{/* Comments Modal */}
 			<TaskCommentsModal
 				task={selectedTask}
 				isOpen={showCommentsModal}

src/components/TaskCommentsModal.js

@@ -5,8 +5,10 @@ import Button from "./ui/Button";
 import Badge from "./ui/Badge";
 import { formatDate } from "@/lib/utils";
 import { formatDistanceToNow, parseISO } from "date-fns";
+import { useTranslation } from "@/lib/i18n";
 
 export default function TaskCommentsModal({ task, isOpen, onClose }) {
+	const { t } = useTranslation();
 	const [notes, setNotes] = useState([]);
 	const [loading, setLoading] = useState(true);
 	const [newNote, setNewNote] = useState("");
@@ -148,14 +150,14 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 									{task?.task_name}
 								</h3>
 								<Badge variant={getPriorityVariant(task?.priority)} size="sm">
-									{task?.priority}
+									{t(`tasks.${task?.priority}`)}
 								</Badge>
 								<Badge variant={getStatusVariant(task?.status)} size="sm">
-									{task?.status?.replace('_', ' ')}
+									{t(`taskStatus.${task?.status}`)}
 								</Badge>
 							</div>
 							<p className="text-sm text-gray-600 mb-3">
-								Project: <span className="font-medium">{task?.project_name}</span>
+								{t("tasks.project")}: <span className="font-medium">{task?.project_name}</span>
 							</p>
 						</div>
 						<button
@@ -172,7 +174,7 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 						{/* Location Information */}
 						{(task?.city || task?.address) && (
 							<div className="space-y-1">
-								<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide">Location</h4>
+								<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide">{t("projects.locationDetails")}</h4>
 								{task?.city && (
 									<p className="text-sm text-gray-900">{task.city}</p>
 								)}
@@ -184,26 +186,26 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 
 						{/* Assignment Information */}
 						<div className="space-y-1">
-							<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide">Assignment</h4>
+							<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide">{t("tasks.assignedTo")}</h4>
 							{task?.assigned_to_name ? (
 								<div>
 									<p className="text-sm text-gray-900">{task.assigned_to_name}</p>
 									<p className="text-xs text-gray-600">{task.assigned_to_email}</p>
 								</div>
 							) : (
-								<p className="text-sm text-gray-500 italic">Unassigned</p>
+								<p className="text-sm text-gray-500 italic">{t("projects.unassigned")}</p>
 							)}
 						</div>
 
 						{/* Task Timing */}
 						<div className="space-y-1">
-							<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide">Timing</h4>
+							<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide">{t("tasks.dateCreated")}</h4>
 							{task?.max_wait_days && (
-								<p className="text-xs text-gray-600">Max wait: {task.max_wait_days} days</p>
+								<p className="text-xs text-gray-600">{t("tasks.maxWait")}: {task.max_wait_days} {t("tasks.days")}</p>
 							)}
 							{(() => {
 								if (task?.status === "completed" && task?.date_completed) {
-									const dateInfo = formatTaskDate(task.date_completed, "Completed");
+									const dateInfo = formatTaskDate(task.date_completed, t("taskStatus.completed"));
 									return (
 										<div>
 											<p className="text-sm text-green-700 font-medium">{dateInfo.relative}</p>
@@ -211,18 +213,18 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 										</div>
 									);
 								} else if (task?.status === "in_progress" && task?.date_started) {
-									const dateInfo = formatTaskDate(task.date_started, "Started");
+									const dateInfo = formatTaskDate(task.date_started, t("tasks.dateStarted"));
 									return (
 										<div>
-											<p className="text-sm text-blue-700 font-medium">Started {dateInfo.relative}</p>
+											<p className="text-sm text-blue-700 font-medium">{t("tasks.dateStarted")} {dateInfo.relative}</p>
 											<p className="text-xs text-gray-600">{dateInfo.absolute}</p>
 										</div>
 									);
 								} else if (task?.date_added) {
-									const dateInfo = formatTaskDate(task.date_added, "Created");
+									const dateInfo = formatTaskDate(task.date_added, t("tasks.dateCreated"));
 									return (
 										<div>
-											<p className="text-sm text-gray-700 font-medium">Created {dateInfo.relative}</p>
+											<p className="text-sm text-gray-700 font-medium">{t("tasks.dateCreated")} {dateInfo.relative}</p>
 											<p className="text-xs text-gray-600">{dateInfo.absolute}</p>
 										</div>
 									);
@@ -234,7 +236,7 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 						{/* Task Description */}
 						{task?.description && (
 							<div className="space-y-1 md:col-span-2 lg:col-span-3">
-								<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide">Description</h4>
+								<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide">{t("tasks.description")}</h4>
 								<p className="text-sm text-gray-900 leading-relaxed">{task.description}</p>
 							</div>
 						)}
@@ -255,7 +257,7 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 						<div className="space-y-4">
 							<div className="flex items-center gap-2 mb-4">
 								<h5 className="text-lg font-medium text-gray-900">
-									Comments & Activity
+									{t("tasks.comments")}
 								</h5>
 								<Badge variant="secondary" size="sm">
 									{notes.length}
@@ -267,8 +269,8 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 									<div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
 										<span className="text-2xl">💬</span>
 									</div>
-									<p className="text-lg font-medium mb-1">No comments yet</p>
-									<p className="text-sm">Be the first to add a comment!</p>
+									<p className="text-lg font-medium mb-1">{t("tasks.noComments")}</p>
+									<p className="text-sm">Bądź pierwszy, który doda komentarz!</p>
 								</div>
 							) : (
 								<div className="space-y-4">
@@ -286,12 +288,12 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 													{note.is_system ? (
 														<span className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-full font-medium flex items-center gap-1">
 															<span>🤖</span>
-															System
+															{t("admin.system")}
 														</span>
 													) : (
 														<span className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-full font-medium flex items-center gap-1">
 															<span>👤</span>
-															{note.created_by_name || 'User'}
+															{note.created_by_name || t("userRoles.user")}
 														</span>
 													)}
 													<span className="text-xs text-gray-500 font-medium">
@@ -308,7 +310,7 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 												<button
 													onClick={() => handleDeleteNote(note.note_id)}
 													className="ml-3 p-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
-													title="Delete comment"
+													title={t("common.delete")}
 												>
 													<span className="text-sm">🗑️</span>
 												</button>
@@ -327,13 +329,13 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 						<div className="flex items-center gap-2">
 							<span className="text-lg">💬</span>
 							<label className="text-sm font-medium text-gray-700">
-								Add a comment
+								{t("tasks.addComment")}
 							</label>
 						</div>
 						<textarea
 							value={newNote}
 							onChange={(e) => setNewNote(e.target.value)}
-							placeholder="Type your comment here... (Ctrl+Enter to submit)"
+							placeholder={t("common.addNotePlaceholder")}
 							className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none shadow-sm"
 							rows={3}
 							onKeyDown={handleKeyDown}
@@ -341,7 +343,7 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 						<div className="flex items-center justify-between">
 							<p className="text-xs text-gray-500 flex items-center gap-1">
 								<span>⌨️</span>
-								Press Ctrl+Enter to submit or Escape to close
+								Naciśnij Ctrl+Enter aby wysłać lub Escape aby zamknąć
 							</p>
 							<div className="flex gap-3">
 								<Button
@@ -349,7 +351,7 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 									size="sm"
 									onClick={onClose}
 								>
-									Close
+									{t("common.close")}
 								</Button>
 								<Button
 									variant="primary"
@@ -357,7 +359,7 @@ export default function TaskCommentsModal({ task, isOpen, onClose }) {
 									onClick={handleAddNote}
 									disabled={loadingAdd || !newNote.trim()}
 								>
-									{loadingAdd ? "Adding..." : "💾 Add Comment"}
+									{loadingAdd ? t("common.saving") : `💾 ${t("tasks.addComment")}`}
 								</Button>
 							</div>
 						</div>