From 7b276c3f34c56c8b92d7bb47dac0b399f83a9dca Mon Sep 17 00:00:00 2001
From: Yan Luiz <yan@nomadbitcoin.xyz>
Date: Tue, 10 Sep 2024 18:44:25 -0300
Subject: [PATCH 1/4] fix-languages: Study Group creation and content
 availability

---
 pages/admin/createGroup.js            | 98 +++++++++++++++++++--------
 pages/study-groups/[slug].js          |  9 ++-
 public/locales/pt-BR/translation.json |  2 +-
 3 files changed, 77 insertions(+), 32 deletions(-)

diff --git a/pages/admin/createGroup.js b/pages/admin/createGroup.js
index 68033f40..73018ca1 100644
--- a/pages/admin/createGroup.js
+++ b/pages/admin/createGroup.js
@@ -2,23 +2,27 @@ import React, { useState } from 'react'
 import { withProtected } from '../../hooks/route'
 import { useRouter } from 'next/router'
 import { db, storage } from '../../firebase/initFirebase'
-import { collection, addDoc } from 'firebase/firestore'
+import { collection, addDoc, Timestamp } from 'firebase/firestore'
 import { useTranslation } from 'react-i18next'
 import Head from 'next/head'
 import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'
 
 function CreateStudyGroup({ user }) {
   const [formData, setFormData] = useState({
-    title: '',
-    description: '',
-    difficulty: 'Beginner',
-    language: 'pt',
-    scheduled_at: '',
+    language: '',
     leader_discord_id: '',
+    scheduled_at: '',
     image_url: '',
+    difficulty: 'beginner',
     active: true,
     index: 0,
   })
+
+  const [tempLanguageData, setTempLanguageData] = useState({
+    title: '',
+    description: '',
+  })
+
   const router = useRouter()
   const { t } = useTranslation()
 
@@ -35,6 +39,11 @@ function CreateStudyGroup({ user }) {
           }))
         })
       })
+    } else if (name === 'title' || name === 'description') {
+      setTempLanguageData((prevData) => ({
+        ...prevData,
+        [name]: value,
+      }))
     } else {
       setFormData((prevData) => ({
         ...prevData,
@@ -44,18 +53,42 @@ function CreateStudyGroup({ user }) {
   }
 
   const handleSubmit = async (e) => {
-    e.preventDefault()
-    const slug = formData.title.toLowerCase().replace(/ /g, '-')
+    e.preventDefault() // Garante que isso seja chamado primeiro
+
+    if (!formData.language) {
+      alert(t('pleaseSelectLanguage'))
+      return
+    }
+
+    if (!formData.image_url) {
+      alert(t('pleaseWaitForImageUpload'))
+      return
+    }
+
+    const slug = tempLanguageData.title.toLowerCase().replace(/ /g, '-')
+
     try {
-      const docRef = await addDoc(collection(db, 'study_groups'), {
+      const finalFormData = {
         ...formData,
-        scheduled_at: new Date(formData.scheduled_at),
+        scheduled_at: Timestamp.fromDate(new Date(formData.scheduled_at)),
         slug: slug,
-      })
+        index: parseInt(formData.index, 10),
+        title: tempLanguageData.title,
+        description: tempLanguageData.description,
+        metadata: {
+          [formData.language]: {
+            title: tempLanguageData.title,
+            description: tempLanguageData.description,
+          },
+        },
+      }
+      const docRef = await addDoc(collection(db, 'study_groups'), finalFormData)
       console.log('Study group added with ID: ', docRef.id)
+      alert(t('studyGroupCreatedSuccessfully')) // Adiciona feedback de sucesso
       router.push(`/study-groups/${slug}`)
     } catch (error) {
       console.error('Error adding study group: ', error)
+      alert(t('errorCreatingStudyGroup')) // Adiciona feedback de erro
     }
   }
 
@@ -67,6 +100,24 @@ function CreateStudyGroup({ user }) {
       <div className="container mx-auto mt-8 px-4">
         <h1 className="mb-4 text-2xl font-bold">{t('createStudyGroup')}</h1>
         <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="language" className="block">
+              {t('language')}
+            </label>
+            <select
+              id="language"
+              name="language"
+              value={formData.language}
+              onChange={handleChange}
+              required
+              className="w-full rounded border p-2"
+            >
+              <option value="">{t('selectLanguage')}</option>
+              <option value="en">English</option>
+              <option value="pt-BR">Português</option>
+              <option value="es">Español</option>
+            </select>
+          </div>
           <div>
             <label htmlFor="title" className="block">
               {t('title')}
@@ -75,7 +126,7 @@ function CreateStudyGroup({ user }) {
               type="text"
               id="title"
               name="title"
-              value={formData.title}
+              value={tempLanguageData.title}
               onChange={handleChange}
               required
               className="w-full rounded border p-2"
@@ -88,7 +139,7 @@ function CreateStudyGroup({ user }) {
             <textarea
               id="description"
               name="description"
-              value={formData.description}
+              value={tempLanguageData.description}
               onChange={handleChange}
               required
               className="w-full rounded border p-2"
@@ -105,25 +156,11 @@ function CreateStudyGroup({ user }) {
               onChange={handleChange}
               className="w-full rounded border p-2"
             >
-              <option value="Beginner">{t('beginner')}</option>
-              <option value="Intermediate">{t('intermediate')}</option>
-              <option value="Advanced">{t('advanced')}</option>
+              <option value="beginner">{t('beginner')}</option>
+              <option value="intermediate">{t('intermediate')}</option>
+              <option value="advanced">{t('advanced')}</option>
             </select>
           </div>
-          <div>
-            <label htmlFor="language" className="block">
-              {t('language')}
-            </label>
-            <input
-              type="text"
-              id="language"
-              name="language"
-              value={formData.language}
-              onChange={handleChange}
-              required
-              className="w-full rounded border p-2"
-            />
-          </div>
           <div>
             <label htmlFor="scheduled_at" className="block">
               {t('scheduledAt')}
@@ -181,6 +218,7 @@ function CreateStudyGroup({ user }) {
           <button
             type="submit"
             className="text-white rounded bg-blue-500 px-4 py-2 hover:bg-blue-600"
+            disabled={formData.language === ''} // Desabilita o botão se nenhuma linguagem for selecionada
           >
             {t('createStudyGroup')}
           </button>
diff --git a/pages/study-groups/[slug].js b/pages/study-groups/[slug].js
index 05186657..a6366b0e 100644
--- a/pages/study-groups/[slug].js
+++ b/pages/study-groups/[slug].js
@@ -11,7 +11,7 @@ import Link from 'next/link'
 import Head from 'next/head'
 import Image from 'next/image'
 import Loading from '../../components/Loading'
-import { dateFormat } from '../../lib/dateFormat'
+import { toast } from 'react-toastify'
 import { useTranslation } from 'react-i18next'
 import RenderField from '../../components/RenderField'
 
@@ -22,6 +22,13 @@ function StudyGroup({ studyGroup }) {
   const [loading, setLoading] = useState(true)
   const [userRegisteredInGroup, setUserRegisteredInGroup] = useState(false)
   const { t, i18n } = useTranslation()
+  const language = i18n.resolvedLanguage
+
+  useEffect(() => {
+    if (studyGroup?.metadata && !studyGroup.metadata.hasOwnProperty(language)) {
+      toast.error(t('messages.language_not_available'))
+    }
+  }, [language])
 
   useEffect(() => {
     const fetchUser = async () => {
diff --git a/public/locales/pt-BR/translation.json b/public/locales/pt-BR/translation.json
index db04c582..dc546bc7 100644
--- a/public/locales/pt-BR/translation.json
+++ b/public/locales/pt-BR/translation.json
@@ -1,5 +1,5 @@
 {
-  "title": "Lista de Builds",
+  "title": "Title",
   "createFirstProject": "Crie seu Primeiro Projeto WEB3",
   "indicateAndWin": "Indique e Ganhe",
   "profilePicture": "Foto de perfil",

From 82615414a79168a25fe9f75cf808ab6b8d9cef8b Mon Sep 17 00:00:00 2001
From: Yan Luiz <yan@nomadbitcoin.xyz>
Date: Tue, 10 Sep 2024 20:21:30 -0300
Subject: [PATCH 2/4] chore: storage added to emulator to dev env

---
 firebase.json                |  6 ++++++
 next.config.js               |  7 ++++++-
 pages/study-groups/[slug].js | 13 +++++++------
 storage.rules                |  8 ++++++++
 4 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 storage.rules

diff --git a/firebase.json b/firebase.json
index 358bd433..d3d42763 100644
--- a/firebase.json
+++ b/firebase.json
@@ -17,10 +17,16 @@
     },
     "auth": {
       "enabled": true
+    },
+    "storage": {
+      "port": 9199
     }
   },
   "firestore": {
     "rules": "firestore.rules",
     "indexes": "firestore.indexes.json"
+  },
+  "storage": {
+    "rules": "storage.rules"
   }
 }
diff --git a/next.config.js b/next.config.js
index c0a49133..40444d6f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,6 +5,11 @@ module.exports = {
     localeDetection: true, // Turn off automatic locale detection
   },
   images: {
-    domains: ['assets.zipschool.com', 'cdn.buildspace.so', 'firebasestorage.googleapis.com'],
+    domains: [
+      'assets.zipschool.com',
+      'cdn.buildspace.so',
+      'firebasestorage.googleapis.com',
+      'localhost',
+    ],
   },
 }
diff --git a/pages/study-groups/[slug].js b/pages/study-groups/[slug].js
index a6366b0e..5cb890dc 100644
--- a/pages/study-groups/[slug].js
+++ b/pages/study-groups/[slug].js
@@ -95,12 +95,13 @@ function StudyGroup({ studyGroup }) {
             </p>
           </div>
           <div className="mx-auto h-full lg:mx-0">
-            <Image
-              src={studyGroup?.image_url}
-              width="300px"
-              height="300px"
-              style={{ borderRadius: '10px' }}
-            ></Image>
+            {studyGroup?.image_url && (
+              <img
+                src={studyGroup.image_url}
+                alt={`Image of ${getFieldContent(studyGroup, 'title', i18n)}`}
+                style={{ width: '300px', height: '300px', borderRadius: '10px' }}
+              />
+            )}
           </div>
         </div>
 
diff --git a/storage.rules b/storage.rules
new file mode 100644
index 00000000..289ffa89
--- /dev/null
+++ b/storage.rules
@@ -0,0 +1,8 @@
+rules_version = '2';
+service firebase.storage {
+  match /b/{bucket}/o {
+    match /{allPaths=**} {
+      allow read, write: if request.auth != null && request.auth.token.email == 'yan@teste.com';
+    }
+  }
+}
\ No newline at end of file

From 37401a808676acb7c0a37c2226058099985c9342 Mon Sep 17 00:00:00 2001
From: Yan Luiz <yan@nomadbitcoin.xyz>
Date: Tue, 10 Sep 2024 20:33:00 -0300
Subject: [PATCH 3/4] feat: page to edit study groups

---
 pages/admin/editGroup.js | 190 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 pages/admin/editGroup.js

diff --git a/pages/admin/editGroup.js b/pages/admin/editGroup.js
new file mode 100644
index 00000000..ab822ffa
--- /dev/null
+++ b/pages/admin/editGroup.js
@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react'
+import { withProtected } from '../../hooks/route'
+import { useRouter } from 'next/router'
+import { db, storage } from '../../firebase/initFirebase'
+import { collection, getDocs, doc, updateDoc, Timestamp } from 'firebase/firestore'
+import { useTranslation } from 'react-i18next'
+import Head from 'next/head'
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'
+
+function EditStudyGroup({ user }) {
+  const [groups, setGroups] = useState([])
+  const [selectedGroup, setSelectedGroup] = useState(null)
+  const [formData, setFormData] = useState({})
+
+  const router = useRouter()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    fetchGroups()
+  }, [])
+
+  const fetchGroups = async () => {
+    const querySnapshot = await getDocs(collection(db, 'study_groups'))
+    const groupsData = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
+    setGroups(groupsData)
+  }
+
+  const handleGroupSelect = (e) => {
+    const selectedGroupId = e.target.value
+    const group = groups.find((g) => g.id === selectedGroupId)
+    setSelectedGroup(group)
+    if (group) {
+      const newFormData = {}
+      Object.entries(group).forEach(([key, value]) => {
+        if (value instanceof Timestamp) {
+          newFormData[key] = value.toDate().toISOString().slice(0, 16)
+        } else {
+          newFormData[key] = value
+        }
+      })
+      setFormData(newFormData)
+    }
+  }
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }))
+  }
+
+  const handleImageUpload = async (e) => {
+    const file = e.target.files[0]
+    if (file) {
+      const storageRef = ref(storage, `study_groups/${file.name}`)
+      try {
+        await uploadBytes(storageRef, file)
+        const url = await getDownloadURL(storageRef)
+        setFormData((prevData) => ({
+          ...prevData,
+          image_url: url,
+        }))
+        alert(t('imageUploadedSuccessfully'))
+      } catch (error) {
+        console.error('Error uploading image: ', error)
+        alert(t('errorUploadingImage'))
+      }
+    }
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+
+    try {
+      const updatedData = { ...formData }
+      if (updatedData.scheduled_at) {
+        updatedData.scheduled_at = Timestamp.fromDate(new Date(updatedData.scheduled_at))
+      }
+
+      await updateDoc(doc(db, 'study_groups', selectedGroup.id), updatedData)
+      console.log('Study group updated successfully')
+      alert(t('studyGroupUpdatedSuccessfully'))
+      router.push(`/study-groups/${updatedData.slug || updatedData.id}`)
+    } catch (error) {
+      console.error('Error updating study group: ', error)
+      alert(t('errorUpdatingStudyGroup'))
+    }
+  }
+
+  const renderFormField = (key, value) => {
+    if (key === 'id') return null // Não renderizar o campo 'id'
+    if (key === 'analytics') return null // Não renderizar o campo 'id'
+
+    let inputType = 'text'
+    if (typeof value === 'number') inputType = 'number'
+    if (value instanceof Date) inputType = 'datetime-local'
+
+    if (key === 'image_url') {
+      return (
+        <div key={key} className="mb-4">
+          <label htmlFor={key} className="mb-2 block">
+            {t(key)}
+          </label>
+          <input
+            type="text"
+            id={key}
+            name={key}
+            value={formData[key] || ''}
+            onChange={handleChange}
+            className="mb-2 w-full rounded border p-2"
+            readOnly
+          />
+          <input
+            type="file"
+            id="image_upload"
+            accept="image/*"
+            onChange={handleImageUpload}
+            className="hidden"
+          />
+          <label
+            htmlFor="image_upload"
+            className="text-white cursor-pointer rounded bg-blue-500 px-4 py-2 hover:bg-blue-600"
+          >
+            {t('editImage')}
+          </label>
+        </div>
+      )
+    }
+
+    return (
+      <div key={key} className="mb-4">
+        <label htmlFor={key} className="mb-2 block">
+          {t(key)}
+        </label>
+        <input
+          type={inputType}
+          id={key}
+          name={key}
+          value={formData[key] || ''}
+          onChange={handleChange}
+          className="w-full rounded border p-2"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{t('editStudyGroup')} - WEB3DEV</title>
+      </Head>
+      <div className="container mx-auto mt-8 px-4">
+        <h1 className="mb-4 text-2xl font-bold">{t('editStudyGroup')}</h1>
+
+        <div className="mb-4">
+          <label htmlFor="groupSelect" className="block">
+            {t('selectGroup')}
+          </label>
+          <select
+            id="groupSelect"
+            onChange={handleGroupSelect}
+            className="w-full rounded border p-2"
+          >
+            <option value="">{t('selectGroup')}</option>
+            {groups.map((group) => (
+              <option key={group.id} value={group.id}>
+                {group.title}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {selectedGroup && (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {Object.entries(formData).map(([key, value]) => renderFormField(key, value))}
+            <button
+              type="submit"
+              className="text-white rounded bg-blue-500 px-4 py-2 hover:bg-blue-600"
+            >
+              {t('updateStudyGroup')}
+            </button>
+          </form>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default withProtected(EditStudyGroup)

From 2d59b62a32dc07f85297250aaf4c089f6c19deed Mon Sep 17 00:00:00 2001
From: Yan Luiz <yan@nomadbitcoin.xyz>
Date: Tue, 10 Sep 2024 21:08:43 -0300
Subject: [PATCH 4/4] fix: edit study groups keep the same types and doesn't
 show deactivated study groups at the list

---
 components/Card/StudyGroup/index.js |   5 +-
 pages/admin/editGroup.js            | 202 ++++++++++++++++++++++++----
 2 files changed, 176 insertions(+), 31 deletions(-)

diff --git a/components/Card/StudyGroup/index.js b/components/Card/StudyGroup/index.js
index 705c5283..fa98eb1b 100644
--- a/components/Card/StudyGroup/index.js
+++ b/components/Card/StudyGroup/index.js
@@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next'
 import RenderField from '../../RenderField'
 
 export function StudyGroupCard({ studyGroup }) {
+  if (!studyGroup.active) return null
+
   const [showMore, setShowMore] = useState(false)
   const { t } = useTranslation()
 
@@ -88,6 +90,3 @@ export function StudyGroupCard({ studyGroup }) {
     </Card>
   )
 }
-
-
-              
\ No newline at end of file
diff --git a/pages/admin/editGroup.js b/pages/admin/editGroup.js
index ab822ffa..e7f9aefd 100644
--- a/pages/admin/editGroup.js
+++ b/pages/admin/editGroup.js
@@ -7,6 +7,21 @@ import { useTranslation } from 'react-i18next'
 import Head from 'next/head'
 import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'
 
+// Add this helper function at the top of your component
+const convertTimestampToDateTimeLocal = (timestamp) => {
+  if (!timestamp) return ''
+  const date =
+    timestamp instanceof Timestamp ? timestamp.toDate() : new Date(timestamp.seconds * 1000)
+
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+
+  return `${year}-${month}-${day}T${hours}:${minutes}`
+}
+
 function EditStudyGroup({ user }) {
   const [groups, setGroups] = useState([])
   const [selectedGroup, setSelectedGroup] = useState(null)
@@ -22,7 +37,16 @@ function EditStudyGroup({ user }) {
   const fetchGroups = async () => {
     const querySnapshot = await getDocs(collection(db, 'study_groups'))
     const groupsData = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
-    setGroups(groupsData)
+
+    // Sort groups: active groups by index, then inactive groups
+    const sortedGroups = groupsData.sort((a, b) => {
+      if (a.active && !b.active) return -1
+      if (!a.active && b.active) return 1
+      if (a.active === b.active) return (a.index || 0) - (b.index || 0)
+      return 0
+    })
+
+    setGroups(sortedGroups)
   }
 
   const handleGroupSelect = (e) => {
@@ -42,12 +66,39 @@ function EditStudyGroup({ user }) {
     }
   }
 
+  // Modify handleChange to correctly handle the scheduled_at field
   const handleChange = (e) => {
     const { name, value } = e.target
-    setFormData((prevData) => ({
-      ...prevData,
-      [name]: value,
-    }))
+    setFormData((prevData) => {
+      let newData = { ...prevData }
+
+      if (name === 'scheduled_at') {
+        newData[name] = value ? Timestamp.fromDate(new Date(value)) : null
+      } else if (name.startsWith('metadata.')) {
+        const [, lang, field] = name.split('.')
+        newData.metadata = {
+          ...newData.metadata,
+          [lang]: {
+            ...newData.metadata[lang],
+            [field]: value,
+          },
+        }
+        // Also update the main field if it's title or description
+        if (field === 'title' || field === 'description') {
+          newData[field] = value
+        }
+      } else {
+        newData[name] = value
+        // Also update the metadata if it's title or description
+        if (name === 'title' || name === 'description') {
+          Object.keys(newData.metadata).forEach((lang) => {
+            newData.metadata[lang][name] = value
+          })
+        }
+      }
+
+      return newData
+    })
   }
 
   const handleImageUpload = async (e) => {
@@ -73,15 +124,38 @@ function EditStudyGroup({ user }) {
     e.preventDefault()
 
     try {
-      const updatedData = { ...formData }
-      if (updatedData.scheduled_at) {
+      // Start with the original data of the selected group
+      const updatedData = { ...selectedGroup }
+
+      // Iterate over the fields in formData
+      Object.keys(formData).forEach((key) => {
+        // If the value in formData is different from the original value, update it
+        if (JSON.stringify(formData[key]) !== JSON.stringify(selectedGroup[key])) {
+          updatedData[key] = formData[key]
+        }
+      })
+
+      // Handle scheduled_at as Timestamp
+      if (updatedData.scheduled_at && !(updatedData.scheduled_at instanceof Timestamp)) {
         updatedData.scheduled_at = Timestamp.fromDate(new Date(updatedData.scheduled_at))
       }
 
+      // Ensure that title and description are updated in metadata
+      if (updatedData.metadata) {
+        Object.keys(updatedData.metadata).forEach((lang) => {
+          updatedData.metadata[lang].title = updatedData.title
+          updatedData.metadata[lang].description = updatedData.description
+        })
+      }
+
+      // Remove fields that should not be updated
+      delete updatedData.id
+      delete updatedData.analytics
+
       await updateDoc(doc(db, 'study_groups', selectedGroup.id), updatedData)
       console.log('Study group updated successfully')
       alert(t('studyGroupUpdatedSuccessfully'))
-      router.push(`/study-groups/${updatedData.slug || updatedData.id}`)
+      router.push(`/study-groups/${updatedData.slug || selectedGroup.id}`)
     } catch (error) {
       console.error('Error updating study group: ', error)
       alert(t('errorUpdatingStudyGroup'))
@@ -89,52 +163,122 @@ function EditStudyGroup({ user }) {
   }
 
   const renderFormField = (key, value) => {
-    if (key === 'id') return null // Não renderizar o campo 'id'
-    if (key === 'analytics') return null // Não renderizar o campo 'id'
+    if (key === 'id' || key === 'analytics') return null
 
-    let inputType = 'text'
-    if (typeof value === 'number') inputType = 'number'
-    if (value instanceof Date) inputType = 'datetime-local'
+    if (key === 'active') {
+      return (
+        <div key={key} className="mb-4">
+          <label htmlFor={key} className="mb-2 block">
+            {t(key)}
+          </label>
+          <select
+            id={key}
+            name={key}
+            value={formData[key].toString()}
+            onChange={(e) =>
+              handleChange({ target: { name: key, value: e.target.value === 'true' } })
+            }
+            className="w-full rounded border p-2"
+          >
+            <option value="true">{t('true')}</option>
+            <option value="false">{t('false')}</option>
+          </select>
+        </div>
+      )
+    }
 
-    if (key === 'image_url') {
+    if (key === 'index') {
       return (
         <div key={key} className="mb-4">
           <label htmlFor={key} className="mb-2 block">
             {t(key)}
           </label>
           <input
-            type="text"
+            type="number"
             id={key}
             name={key}
-            value={formData[key] || ''}
+            value={formData[key] || 0}
             onChange={handleChange}
-            className="mb-2 w-full rounded border p-2"
-            readOnly
+            className="w-full rounded border p-2"
           />
+        </div>
+      )
+    }
+
+    if (key === 'scheduled_at') {
+      return (
+        <div key={key} className="mb-4">
+          <label htmlFor={key} className="mb-2 block">
+            {t(key)}
+          </label>
+          <input
+            type="datetime-local"
+            id={key}
+            name={key}
+            value={convertTimestampToDateTimeLocal(formData[key])}
+            onChange={handleChange}
+            className="w-full rounded border p-2"
+          />
+        </div>
+      )
+    }
+
+    if (key === 'metadata') {
+      return (
+        <div key={key} className="mb-4">
+          <label className="mb-2 block">{t(key)}</label>
+          {Object.keys(value).map((lang) => (
+            <div key={lang} className="mb-2">
+              <h4>{lang}</h4>
+              <input
+                type="text"
+                name={`metadata.${lang}.title`}
+                value={formData.metadata[lang]?.title || ''}
+                onChange={handleChange}
+                placeholder="Title"
+                className="mb-1 w-full rounded border p-2"
+              />
+              <textarea
+                name={`metadata.${lang}.description`}
+                value={formData.metadata[lang]?.description || ''}
+                onChange={handleChange}
+                placeholder="Description"
+                className="w-full rounded border p-2"
+              />
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    if (key === 'image_url') {
+      return (
+        <div key={key} className="mb-4">
+          <label htmlFor={key} className="mb-2 block">
+            {t(key)}
+          </label>
           <input
             type="file"
-            id="image_upload"
-            accept="image/*"
+            id={key}
+            name={key}
             onChange={handleImageUpload}
-            className="hidden"
+            className="w-full rounded border p-2"
           />
-          <label
-            htmlFor="image_upload"
-            className="text-white cursor-pointer rounded bg-blue-500 px-4 py-2 hover:bg-blue-600"
-          >
-            {t('editImage')}
-          </label>
+          {formData[key] && (
+            <img src={formData[key]} alt="Group image" className="mt-2 h-32 w-auto" />
+          )}
         </div>
       )
     }
 
+    // For other fields
     return (
       <div key={key} className="mb-4">
         <label htmlFor={key} className="mb-2 block">
           {t(key)}
         </label>
         <input
-          type={inputType}
+          type="text"
           id={key}
           name={key}
           value={formData[key] || ''}
@@ -165,6 +309,8 @@ function EditStudyGroup({ user }) {
             <option value="">{t('selectGroup')}</option>
             {groups.map((group) => (
               <option key={group.id} value={group.id}>
+                {group.index !== undefined ? `[${group.index}] ` : ''}
+                {!group.active && `${t('[deactivated]')} - `}
                 {group.title}
               </option>
             ))}