feat(i18n): Implement multilingual support with Polish and English translations

- Added translation context and provider for managing language state.
- Integrated translation functionality into existing components (TaskStatusDropdown, Navigation).
- Created LanguageSwitcher component for language selection.
- Updated task statuses and navigation labels to use translations.
- Added Polish translations for various UI elements, including navigation, tasks, projects, and contracts.
- Refactored utility functions to return localized strings for deadlines and date formatting.

src/components/ui/LanguageSwitcher.js

@@ -0,0 +1,42 @@
+"use client";
+
+import { useTranslation } from '@/lib/i18n';
+
+const LanguageSwitcher = ({ className = '' }) => {
+  const { language, changeLanguage, availableLanguages, t } = useTranslation();
+
+  const languageNames = {
+    pl: 'Polski',
+    en: 'English'
+  };
+
+  return (
+    <div className={`relative ${className}`}>
+      <select
+        value={language}
+        onChange={(e) => changeLanguage(e.target.value)}
+        className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-1 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        title={t('common.selectLanguage')}
+      >
+        {availableLanguages.map((lang) => (
+          <option key={lang} value={lang}>
+            {languageNames[lang] || lang.toUpperCase()}
+          </option>
+        ))}
+      </select>
+      
+      {/* Custom dropdown arrow */}
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+        <svg
+          className="fill-current h-4 w-4"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+        >
+          <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+export default LanguageSwitcher;

src/components/ui/Navigation.js

@@ -3,10 +3,13 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useSession, signOut } from "next-auth/react";
+import { useTranslation } from "@/lib/i18n";
+import LanguageSwitcher from "./LanguageSwitcher";
 
 const Navigation = () => {
 	const pathname = usePathname();
 	const { data: session, status } = useSession();
+	const { t } = useTranslation();
 
 	const isActive = (path) => {
 		if (path === "/") return pathname === "/";
@@ -18,16 +21,16 @@ const Navigation = () => {
 	};
 
 	const navItems = [
-		{ href: "/", label: "Dashboard" },
-		{ href: "/projects", label: "Projects" },
-		{ href: "/tasks/templates", label: "Task Templates" },
-		{ href: "/project-tasks", label: "Project Tasks" },
-		{ href: "/contracts", label: "Contracts" },
+		{ href: "/", label: t('navigation.dashboard') },
+		{ href: "/projects", label: t('navigation.projects') },
+		{ href: "/tasks/templates", label: t('navigation.taskTemplates') },
+		{ href: "/project-tasks", label: t('navigation.projectTasks') },
+		{ href: "/contracts", label: t('navigation.contracts') },
 	];
 
 	// Add admin-only items
 	if (session?.user?.role === 'admin') {
-		navItems.push({ href: "/admin/users", label: "User Management" });
+		navItems.push({ href: "/admin/users", label: t('navigation.userManagement') });
 	}
 
 	const handleSignOut = async () => {
@@ -45,13 +48,13 @@ const Navigation = () => {
 				<div className="flex items-center justify-between h-16">
 					<div className="flex items-center">
 						<Link href="/" className="text-xl font-bold text-gray-900">
-							Project Panel
+							{t('navigation.projectPanel')}
 						</Link>
 					</div>
 
 					<div className="flex items-center space-x-4">
 						{status === "loading" ? (
-							<div className="text-gray-500">Loading...</div>
+							<div className="text-gray-500">{t('navigation.loading')}</div>
 						) : session ? (
 							<>
 								<div className="flex space-x-8">
@@ -71,10 +74,12 @@ const Navigation = () => {
 								</div>
 								
 								<div className="flex items-center space-x-4 ml-8 pl-8 border-l border-gray-200">
+									<LanguageSwitcher />
+									
 									<div className="flex items-center space-x-2">
 										<div className="text-sm">
 											<div className="font-medium text-gray-900">{session.user.name}</div>
-											<div className="text-gray-500 capitalize">{session.user.role?.replace('_', ' ')}</div>
+											<div className="text-gray-500 capitalize">{t(`userRoles.${session.user.role}`) || session.user.role?.replace('_', ' ')}</div>
 										</div>
 									</div>
 									
@@ -82,17 +87,20 @@ const Navigation = () => {
 										onClick={handleSignOut}
 										className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-md text-sm font-medium transition-colors"
 									>
-										Sign Out
+										{t('navigation.signOut')}
 									</button>
 								</div>
 							</>
 						) : (
-							<Link
-								href="/auth/signin"
-								className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
-							>
-								Sign In
-							</Link>
+							<>
+								<LanguageSwitcher />
+								<Link
+									href="/auth/signin"
+									className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
+								>
+									{t('navigation.signIn')}
+								</Link>
+							</>
 						)}
 					</div>
 				</div>