language i18n added and tested for server and client side

ServicesFrontEnd/frontend/src/app/[locale]/(protected)/dashboard/page.tsx

@@ -1,3 +0,0 @@
-export default function DashboardPage() {
-  return <div></div>;
-}

ServicesFrontEnd/frontend/src/app/[locale]/(protected)/office/page.tsx

@@ -0,0 +1,3 @@
+export default function OfficePage() {
+  return <div></div>;
+}

ServicesFrontEnd/frontend/src/app/[locale]/(protected)/venue/page.tsx

@@ -0,0 +1,3 @@
+export default function VenuePage() {
+  return <div></div>;
+}

ServicesFrontEnd/frontend/src/components/LocaleSwitcherClient.tsx

@@ -6,6 +6,12 @@ import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import { useState } from 'react';
 
+// Map locales to flag emojis
+const flagEmojis: Record<Locale, string> = {
+    en: '🇬🇧',
+    tr: '🇹🇷'
+};
+
 type Props = {
     className?: string;
 };
@@ -37,12 +43,13 @@ export default function LocaleSwitcherClient({ className = '' }: Props) {
             <div>
                 <button
                     type="button"
-                    className="inline-flex justify-between items-center w-24 rounded-md border border-gray-300 px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    className="inline-flex justify-center items-center w-12 h-8 rounded-md border border-gray-300 px-2 py-1 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                     onClick={() => setIsOpen(!isOpen)}
                     aria-expanded={isOpen}
                     aria-haspopup="true"
+                    title={currentLocale.toUpperCase()}
                 >
-                    <span>{currentLocale.toUpperCase()}</span>
+                    <span className="text-lg">{flagEmojis[currentLocale as Locale]}</span>
                     <svg className="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path fillRule="evenodd" 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" clipRule="evenodd" />
                     </svg>
@@ -51,7 +58,7 @@ export default function LocaleSwitcherClient({ className = '' }: Props) {
 
             {isOpen && (
                 <div
-                    className="origin-top-right  mt-2 w-24 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"
+                    className="origin-top-right mt-2 w-12 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"
                     role="menu"
                     aria-orientation="vertical"
                     tabIndex={-1}
@@ -61,10 +68,11 @@ export default function LocaleSwitcherClient({ className = '' }: Props) {
                             <button
                                 key={lang}
                                 onClick={() => handleLocaleChange(lang)}
-                                className="block w-full text-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+                                className="w-full text-center px-2 py-1 text-lg hover:bg-gray-100 flex items-center justify-center"
                                 role="menuitem"
+                                title={lang.toUpperCase()}
                             >
-                                {lang.toUpperCase()}
+                                {flagEmojis[lang]}
                             </button>
                         ))}
                     </div>

ServicesFrontEnd/frontend/src/components/LocaleSwitcherServer.tsx

@@ -1,7 +1,12 @@
 import { Link } from '@/i18n/navigation';
 import { locales, Locale } from '@/i18n/locales';
 import { getTranslations } from 'next-intl/server';
-import { headers } from 'next/headers';
+
+// Map locales to flag emojis
+const flagEmojis: Record<Locale, string> = {
+    en: '🇬🇧',
+    tr: '🇹🇷'
+};
 
 type Props = {
     locale: string;
@@ -37,23 +42,24 @@ export default async function LocaleSwitcherServer({ locale, className = '', pat
     return (
         <div className={`relative inline-block ${className}`}>
             <div className="group">
-                <button type="button" className="inline-flex justify-between items-center w-24 rounded-md border border-gray-300 px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                <button type="button" className="inline-flex justify-center items-center w-12 h-8 rounded-md border border-gray-300 px-2 py-1 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" title={locale.toUpperCase()}>
-                    <span>{locale.toUpperCase()}</span>
+                    <span className="text-lg">{flagEmojis[locale as Locale]}</span>
                     <svg className="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path fillRule="evenodd" 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" clipRule="evenodd" />
                     </svg>
                 </button>
-                <div className="hidden group-hover:block  mt-2 w-24 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+                <div className="hidden group-hover:block mt-2 w-12 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
                     <div className="py-1" role="menu" aria-orientation="vertical">
                         {availableLocales.map((lang) => (
                             <Link
                                 key={lang}
                                 href={pathWithoutLocale}
                                 locale={lang}
-                                className="block px-4 py-2 text-sm text-center text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+                                className="flex items-center justify-center px-2 py-1 text-lg hover:bg-gray-100"
                                 role="menuitem"
+                                title={lang.toUpperCase()}
                             >
-                                {lang.toUpperCase()}
+                                {flagEmojis[lang]}
                             </Link>
                         ))}
                     </div>