menu translations and ability to add new translations using the base translation

components/sidebar.tsx

@@ -6,10 +6,13 @@ import sidemenu, { footerMenu } from './sidemenuData.js'; // Move sidemenu data
 import axiosInstance from "src/axiosSecure";
 import common from "src/helpers/common";
 import LanguageSwitcher from "./languageSwitcher";
+import { useTranslations } from 'next-intl';
 //get package version from package.json
 const packageVersion = require('../package.json').version;
 
 function SidebarMenuItem({ item, session, isSubmenu }) {
+  // const tMenu = useTranslations('menu');
+  const t = useTranslations('common');
   const router = useRouter();
   const isActive = router.pathname.includes(item.url);
 
@@ -92,6 +95,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
   const { data: session, status } = useSession();
   const sidebarWidth = 226; // Simplify by using a constant
   const sidebarRef = useRef(null);
+  const t = useTranslations('menu');
   //const [locations, setLocations] = useState([]);
 
 
@@ -137,6 +141,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
         <div className="flex flex-col justify-between pb-4">
           <nav>
             {sidemenu.map((item, index) => (
+              item.text = t(item.id) || item.text, // Use the translation if available
               <SidebarMenuItem key={index} item={item} session={session} />
             ))}
             <hr className="my-3 border-gray-200 dark:border-gray-600" />
@@ -164,14 +169,16 @@ function UserSection({ session }) {
 }
 
 function SignInButton() {
+  const t = useTranslations('common');
   return (
     <div className="items-center py-2 font-bold" onClick={() => signIn()}>
-      <button>Впишете се</button>
+      <button>{t('login')}</button>
     </div>
   );
 }
 
 function UserDetails({ session }) {
+  const t = useTranslations('common');
   return (
     <>
       <hr className="m-0" />
@@ -182,7 +189,7 @@ function UserDetails({ session }) {
         <div className="ml-3 overflow-hidden">
           <p className="mx-1 mt-1 text-sm font-medium text-gray-800 dark:text-gray-200">{session.user.name}</p>
           <p className="mx-1 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400">{session.user.role}</p>
-          <a href="/api/auth/signout" className={styles.button} onClick={(e) => { e.preventDefault(); signOut(); }}>Изход</a>
+          <a href="/api/auth/signout" className={styles.button} onClick={(e) => { e.preventDefault(); signOut(); }}>{t('logout')}</a>
         </div>
       </div>
     </>

components/sidemenuData.js

@@ -1,6 +1,7 @@
 
 import { UserRole } from "@prisma/client";
 
+
 const sidemenu = [
     {
         id: "dashboard",
@@ -118,6 +119,12 @@ const sidemenu = [
                 url: "/cart/reports/coverMe",
                 roles: [UserRole.ADMIN, UserRole.POWERUSER],
             },
+            {
+                id: "translations",
+                text: "Преводи",
+                url: "/cart/translations",
+                roles: [UserRole.ADMIN, UserRole.POWERUSER],
+            },
 
         ]
     },

content/i18n/bg.json

@@ -5,6 +5,30 @@
         "changeTo": "Смени на",
         "BG": "Български",
         "EN": "Английски",
-        "RU": "Руски"
+        "RU": "Руски",
+        "login": "Вход",
+        "logout": "Изход"
+    },
+    "menu": {
+        "dashboard": "Възможности",
+        "shedule": "График",
+        "myshedule": "Моя График",
+        "locations": "Местоположения",
+        "cart-report": "Отчет",
+        "cart-experience": "Случки",
+        "guidelines": "Напътствия",
+        "permits": "Разрешителни",
+        "contactAll": "Участници",
+        "feedback": "Отзиви",
+        "contactUs": "За връзка",
+        "admin": "Админ",
+        "cart-places": "Места",
+        "cart-publishers": "Вестители",
+        "cart-events": "План",
+        "cart-calendar": "Календар",
+        "cart-reports": "Отчети",
+        "statistics": "Статистика",
+        "coverMeLogs": "Замествания",
+        "translations": "Преводи"
     }
 }

content/i18n/bg.modified.json

@@ -0,0 +1,34 @@
+{
+  "common": {
+    "greeting": "Здравей",
+    "farewell": "Довиждане",
+    "changeTo": "",
+    "BG": "Български",
+    "EN": "Английски",
+    "RU": "Руски",
+    "login": "Вход",
+    "logout": "Изход"
+  },
+  "menu": {
+    "dashboard": "Възможности",
+    "shedule": "График",
+    "myshedule": "Моя График",
+    "locations": "Местоположения",
+    "cart-report": "Отчет",
+    "cart-experience": "Случки",
+    "guidelines": "Напътствия",
+    "permits": "Разрешителни",
+    "contactAll": "Участници",
+    "feedback": "Отзиви",
+    "contactUs": "За връзка",
+    "admin": "Админ",
+    "cart-places": "Места",
+    "cart-publishers": "Вестители",
+    "cart-events": "План",
+    "cart-calendar": "Календар",
+    "cart-reports": "Отчети",
+    "statistics": "Статистика",
+    "coverMeLogs": "Замествания",
+    "translations": "Преводи"
+  }
+}

content/i18n/en.json

@@ -5,6 +5,8 @@
         "changeTo": "Change to",
         "BG": "Bulgarian",
         "EN": "English",
-        "RU": "Russian"
+        "RU": "Russian",
+        "login": "login",
+        "logout": "logout"
     }
 }

content/i18n/en.modified.json

@@ -0,0 +1,15 @@
+{
+  "common": {
+    "greeting": "Hello",
+    "farewell": "Goodbye",
+    "changeTo": "Change to",
+    "BG": "Bulgarian",
+    "EN": "English",
+    "RU": "Russian",
+    "login": "login",
+    "logout": "logout"
+  },
+  "menu": {
+    "dashboard": "Dashboard"
+  }
+}

pages/cart/translations/index.tsx

@@ -35,34 +35,56 @@ const AdminTranslations = () => {
 
     return (
         <Layout>
-
             <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
-                <div>
-                    <h1>Edit Translations</h1>
-                    <select onChange={e => setLocale(e.target.value)} value={locale}>
-                        {locales.map(l => (
-                            <option key={l} value={l}>{l.toUpperCase()}</option>
-                        ))}
-                    </select>
-                    <table>
-                        <tbody>
-                            {Object.entries(translations).map(([key, value]) => (
-                                <tr key={key}>
-                                    <td>{key}</td>
-                                    <td>{baseTranslations[key]}</td>
-                                    <td>
-                                        <input
-                                            type="text"
-                                            value={value}
-                                            onChange={e => handleChange(key, e.target.value)}
-                                            style={{ width: '100%' }}
-                                        />
-                                    </td>
-                                </tr>
+                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <h1 className="text-xl font-semibold leading-tight text-gray-800">Edit Translations</h1>
+                    <div className="my-4">
+                        <label htmlFor="locale-select" className="block text-sm font-medium text-gray-700">Select Language</label>
+                        <select
+                            id="locale-select"
+                            onChange={e => setLocale(e.target.value)}
+                            value={locale}
+                            className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                        >
+                            {locales.map(l => (
+                                <option key={l} value={l}>{l.toUpperCase()}</option>
                             ))}
-                        </tbody>
-                    </table>
-                    <button onClick={handleSave}>Save Changes</button>
+                        </select>
+                    </div>
+                    <div className="overflow-x-auto relative shadow-md sm:rounded-lg">
+                        <table className="w-full text-sm text-left text-gray-500">
+                            <thead className="text-xs text-gray-700 uppercase bg-gray-50">
+                                <tr>
+                                    <th scope="col" className="py-3 px-6">Key</th>
+                                    <th scope="col" className="py-3 px-6">Base Translation</th>
+                                    <th scope="col" className="py-3 px-6">Translation</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {Object.entries(baseTranslations).map(([key, baseValue]) => (
+                                    <tr key={key} className="bg-white border-b hover:bg-gray-50">
+                                        <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">{key}</td>
+                                        <td className="py-4 px-6">{baseValue}</td>
+                                        <td className="py-4 px-6">
+                                            <input
+                                                type="text"
+                                                value={translations[key] || ''}
+                                                placeholder='Въведи превод...'
+                                                onChange={e => handleChange(key, e.target.value)}
+                                                className="block w-full text-base px-2 py-1 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded"
+                                            />
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    <button
+                        onClick={handleSave}
+                        className="mt-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    >
+                        Save Changes
+                    </button>
                 </div>
             </ProtectedRoute>
         </Layout>