translations admin page

pages/cart/translations/index.js

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const AdminTranslations = () => {
+    const [translations, setTranslations] = useState({});
+    const [locale, setLocale] = useState('en');
+
+    useEffect(() => {
+        axios.get(`/api/translations/${locale}`).then(res => setTranslations(res.data));
+    }, [locale]);
+
+    const handleSave = () => {
+        axios.post(`/api/translations/${locale}`, translations).then(res => {
+            if (res.data.status === 'Updated') {
+                alert('Translations updated!');
+            }
+        });
+    };
+
+    const handleChange = (key, value) => {
+        setTranslations(prev => ({ ...prev, [key]: value }));
+    };
+
+    return (
+        <>
+            <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
+                <div>
+                    <h1>Edit Translations</h1>
+                    <select onChange={e => setLocale(e.target.value)} value={locale}>
+                        <option value="bg">BG</option>
+                        <option value="en">English</option>
+                        <option value="ru">RU</option>
+                        {/* Add more options as needed */}
+                    </select>
+                    {Object.keys(translations).map(key => (
+                        <div key={key}>
+                            <label>{key}:</label>
+                            <input
+                                type="text"
+                                value={translations[key]}
+                                onChange={e => handleChange(key, e.target.value)}
+                            />
+                        </div>
+                    ))}
+                    <button onClick={handleSave}>Save Changes</button>
+                </div>
+            </ProtectedRoute>
+        </>
+    );
+};
+
+export default AdminTranslations;