From ba3900bc33de5cfa2c15601d862034299e295c75 Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Wed, 11 Mar 2026 17:27:57 +0300
Subject: [PATCH] =?UTF-8?q?refactor:=20simplify=20translations=20=E2=80=94?=
 =?UTF-8?q?=20shared=20utils,=20deduplicated=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extract shared constants to client/src/utils/translations.js
  (AVAILABLE_LANGUAGES, TRANSLATION_STATUS_COLORS, isTextSelected, groupTextsByLanguage)
- TranslationDetailPanel: deduplicate copy button JSX, hoist hasSelected
- PublicTranslationReview: memoize textsByLanguage, use shared isTextSelected
- Translations page: import from shared module
- Server: translation schema updates, post_id linking
- Add reassign-user utility script
- Add new translation i18n keys to en.json and ar.json

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/TranslationDetailPanel.jsx | 292 +++++++++++------
 client/src/i18n/ar.json                       |  50 ++-
 client/src/i18n/en.json                       |  52 ++-
 client/src/pages/PublicTranslationReview.jsx  | 308 ++++++++++++++++--
 client/src/pages/Translations.jsx             | 110 +++++--
 client/src/utils/translations.js              |  30 ++
 server/reassign-user.js                       |  37 +++
 server/server.js                              | 140 ++++++--
 8 files changed, 826 insertions(+), 193 deletions(-)
 create mode 100644 client/src/utils/translations.js
 create mode 100644 server/reassign-user.js

diff --git a/client/src/components/TranslationDetailPanel.jsx b/client/src/components/TranslationDetailPanel.jsx
index 39a9ea3..8740271 100644
--- a/client/src/components/TranslationDetailPanel.jsx
+++ b/client/src/components/TranslationDetailPanel.jsx
@@ -1,35 +1,22 @@
 import { useState, useEffect, useContext } from 'react'
-import { Plus, Copy, Check, ExternalLink, Trash2, Save, FileEdit, Languages, ShieldCheck, Globe } from 'lucide-react'
+import { Plus, Copy, Check, ExternalLink, Trash2, Save, FileEdit, Languages, ShieldCheck, Globe, Lock } from 'lucide-react'
 import { AppContext } from '../App'
 import { useLanguage } from '../i18n/LanguageContext'
 import { api } from '../utils/api'
+import { AVAILABLE_LANGUAGES, TRANSLATION_STATUS_COLORS, isTextSelected, groupTextsByLanguage } from '../utils/translations'
 import Modal from './Modal'
 import TabbedModal from './TabbedModal'
 import { useToast } from './ToastContainer'
 import ApproverMultiSelect from './ApproverMultiSelect'
 
-const STATUS_COLORS = {
-  draft: 'bg-surface-tertiary text-text-secondary',
-  pending_review: 'bg-amber-100 text-amber-700',
-  approved: 'bg-emerald-100 text-emerald-700',
-  rejected: 'bg-red-100 text-red-700',
-  revision_requested: 'bg-orange-100 text-orange-700',
-}
-
-const AVAILABLE_LANGUAGES = [
-  { code: 'AR', label: 'العربية' },
-  { code: 'EN', label: 'English' },
-  { code: 'FR', label: 'Français' },
-  { code: 'ID', label: 'Bahasa Indonesia' },
-]
-
-export default function TranslationDetailPanel({ translation, onClose, onUpdate, onDelete, assignableUsers = [] }) {
+export default function TranslationDetailPanel({ translation, onClose, onUpdate, onDelete, assignableUsers = [], posts: externalPosts }) {
   const { t } = useLanguage()
   const { brands } = useContext(AppContext)
   const toast = useToast()
 
+  const isApproved = translation.status === 'approved'
+
   const [editTitle, setEditTitle] = useState(translation.title || '')
-  const [editDescription, setEditDescription] = useState(translation.description || '')
   const [editSourceContent, setEditSourceContent] = useState(translation.source_content || '')
   const [editSourceLanguage, setEditSourceLanguage] = useState(translation.source_language || 'EN')
   const [editApproverIds, setEditApproverIds] = useState(
@@ -44,6 +31,13 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
   const [submitting, setSubmitting] = useState(false)
   const [copied, setCopied] = useState(false)
   const [freshReviewUrl, setFreshReviewUrl] = useState('')
+  const [copiedTextId, setCopiedTextId] = useState(null)
+
+  // Post selector
+  const [posts, setPosts] = useState(externalPosts || [])
+  const [showCreatePost, setShowCreatePost] = useState(false)
+  const [newPostTitle, setNewPostTitle] = useState('')
+  const [creatingPost, setCreatingPost] = useState(false)
 
   // Language add modal
   const [showAddLang, setShowAddLang] = useState(false)
@@ -62,9 +56,12 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
     loadTexts()
   }, [translation.Id])
 
+  useEffect(() => {
+    if (externalPosts) setPosts(externalPosts)
+  }, [externalPosts])
+
   useEffect(() => {
     setEditTitle(translation.title || '')
-    setEditDescription(translation.description || '')
     setEditSourceContent(translation.source_content || '')
     setEditSourceLanguage(translation.source_language || 'EN')
     setEditApproverIds(
@@ -92,7 +89,6 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
     try {
       await api.patch(`/translations/${translation.Id}`, {
         title: editTitle,
-        description: editDescription,
         source_content: editSourceContent,
         source_language: editSourceLanguage,
         approver_ids: editApproverIds.length > 0 ? editApproverIds.join(',') : null,
@@ -142,11 +138,7 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
 
   const handleUpdateText = async (textId) => {
     try {
-      const text = texts.find(t => t.Id === textId)
-      if (!text) return
-      await api.post(`/translations/${translation.Id}/texts`, {
-        language_code: text.language_code,
-        language_label: text.language_label,
+      await api.patch(`/translations/${translation.Id}/texts/${textId}`, {
         content: editingContent,
       })
       toast.success(t('translations.updated'))
@@ -197,9 +189,35 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
     }
   }
 
-  // Available languages for adding (exclude source + already added)
-  const usedCodes = new Set([translation.source_language, ...texts.map(t => t.language_code)])
-  const availableForAdd = AVAILABLE_LANGUAGES.filter(l => !usedCodes.has(l.code))
+  const handleCreatePost = async () => {
+    if (!newPostTitle.trim()) return
+    setCreatingPost(true)
+    try {
+      const created = await api.post('/posts', { title: newPostTitle, status: 'draft' })
+      const postId = created.Id || created.id || created._id
+      setPosts(prev => [created, ...prev])
+      await handleFieldUpdate('post_id', postId)
+      setShowCreatePost(false)
+      setNewPostTitle('')
+    } catch (err) {
+      toast.error(t('translations.postCreateFailed'))
+    } finally {
+      setCreatingPost(false)
+    }
+  }
+
+  const copyTextContent = (content, id) => {
+    navigator.clipboard.writeText(content)
+    setCopiedTextId(id)
+    toast.success(t('translations.copiedToClipboard'))
+    setTimeout(() => setCopiedTextId(null), 2000)
+  }
+
+  // Available languages (exclude source language only — multiple options per language allowed)
+  const targetLanguages = AVAILABLE_LANGUAGES.filter(l => l.code !== translation.source_language)
+
+  // Group texts by language
+  const textsByLanguage = groupTextsByLanguage(texts)
 
   const tabs = [
     { key: 'details', label: t('translations.details'), icon: FileEdit },
@@ -222,12 +240,13 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
                 type="text"
                 value={editTitle}
                 onChange={e => setEditTitle(e.target.value)}
-                className="text-lg font-bold text-text-primary bg-transparent border-none outline-none focus:ring-0 w-full"
+                readOnly={isApproved}
+                className={`text-lg font-bold text-text-primary bg-transparent border-none outline-none focus:ring-0 w-full ${isApproved ? 'cursor-default' : ''}`}
                 placeholder={t('translations.titlePlaceholder')}
               />
             </div>
             <div className="flex items-center gap-2 flex-wrap">
-              <span className={`text-xs px-2 py-0.5 rounded-full ${STATUS_COLORS[translation.status] || 'bg-surface-tertiary text-text-secondary'}`}>
+              <span className={`text-xs px-2 py-0.5 rounded-full ${TRANSLATION_STATUS_COLORS[translation.status] || 'bg-surface-tertiary text-text-secondary'}`}>
                 {translation.status?.replace('_', ' ')}
               </span>
               <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600 font-medium">
@@ -244,7 +263,12 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
         tabs={tabs}
         activeTab={activeTab}
         onTabChange={setActiveTab}
-        footer={
+        footer={isApproved ? (
+          <div className="flex items-center gap-2 w-full justify-center">
+            <Lock className="w-4 h-4 text-text-tertiary" />
+            <span className="text-sm text-text-tertiary">{t('translations.approvedReadOnly')}</span>
+          </div>
+        ) : (
           <div className="flex items-center gap-2 w-full justify-between">
             <div className="flex items-center gap-2">
               <button
@@ -265,7 +289,7 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
               {savingDraft ? t('translations.savingDraft') : t('translations.saveDraft')}
             </button>
           </div>
-        }
+        )}
       >
         {/* Details Tab */}
         {activeTab === 'details' && (
@@ -275,7 +299,8 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
               <select
                 value={editSourceLanguage}
                 onChange={e => setEditSourceLanguage(e.target.value)}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+                disabled={isApproved}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 disabled:opacity-60 disabled:cursor-default"
               >
                 {AVAILABLE_LANGUAGES.map(l => <option key={l.code} value={l.code}>{l.label} ({l.code})</option>)}
               </select>
@@ -286,33 +311,71 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
               <textarea
                 value={editSourceContent}
                 onChange={e => setEditSourceContent(e.target.value)}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 min-h-[150px] resize-y"
+                readOnly={isApproved}
+                className={`w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 min-h-[150px] resize-y ${isApproved ? 'opacity-60 cursor-default' : ''}`}
                 placeholder={t('translations.sourceContentPlaceholder')}
               />
             </div>
 
-            <div>
-              <h4 className="text-xs font-semibold text-text-tertiary uppercase mb-2">{t('translations.descriptionLabel')}</h4>
-              <textarea
-                value={editDescription}
-                onChange={e => setEditDescription(e.target.value)}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 min-h-[80px] resize-y"
-                placeholder={t('translations.descriptionPlaceholder')}
-              />
-            </div>
-
             <div className="grid grid-cols-2 gap-4">
               <div>
                 <h4 className="text-xs font-semibold text-text-tertiary uppercase mb-1.5">{t('translations.brand')}</h4>
                 <select
                   value={translation.brand_id || ''}
                   onChange={e => handleFieldUpdate('brand_id', e.target.value)}
-                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+                  disabled={isApproved}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 disabled:opacity-60 disabled:cursor-default"
                 >
                   <option value="">—</option>
                   {brands.map(b => <option key={b._id} value={b._id}>{b.name}</option>)}
                 </select>
               </div>
+              <div>
+                <h4 className="text-xs font-semibold text-text-tertiary uppercase mb-1.5">{t('translations.linkedPost')}</h4>
+                {isApproved ? (
+                  <p className="px-3 py-2 text-sm text-text-secondary">{translation.post_name || '—'}</p>
+                ) : showCreatePost ? (
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="text"
+                      value={newPostTitle}
+                      onChange={e => setNewPostTitle(e.target.value)}
+                      onKeyDown={e => e.key === 'Enter' && handleCreatePost()}
+                      className="flex-1 px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+                      placeholder={t('translations.newPostTitle')}
+                      autoFocus
+                    />
+                    <button
+                      onClick={handleCreatePost}
+                      disabled={creatingPost || !newPostTitle.trim()}
+                      className="px-2 py-2 bg-brand-primary text-white text-xs rounded-lg hover:bg-brand-primary-light disabled:opacity-50"
+                    >
+                      {creatingPost ? '...' : t('common.create')}
+                    </button>
+                    <button onClick={() => setShowCreatePost(false)} className="text-xs text-text-secondary hover:text-text-primary">
+                      {t('common.cancel')}
+                    </button>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-1">
+                    <select
+                      value={translation.post_id || ''}
+                      onChange={e => handleFieldUpdate('post_id', e.target.value)}
+                      className="flex-1 px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+                    >
+                      <option value="">—</option>
+                      {posts.map(p => <option key={p.Id || p.id || p._id} value={p.Id || p.id || p._id}>{p.title}</option>)}
+                    </select>
+                    <button
+                      onClick={() => setShowCreatePost(true)}
+                      className="p-2 text-brand-primary hover:text-brand-primary/80"
+                      title={t('translations.createPost')}
+                    >
+                      <Plus className="w-4 h-4" />
+                    </button>
+                  </div>
+                )}
+              </div>
             </div>
 
             <div>
@@ -340,76 +403,92 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
               <p className="text-sm text-blue-800 whitespace-pre-wrap">{translation.source_content}</p>
             </div>
 
-            {/* Add translation button */}
+            {/* Add translation option button */}
             <div className="flex items-center justify-between">
               <h4 className="text-xs font-semibold text-text-tertiary uppercase">{t('translations.translationTexts')}</h4>
-              {availableForAdd.length > 0 && (
+              {!isApproved && (
                 <button
                   onClick={() => setShowAddLang(true)}
                   className="flex items-center gap-1 px-3 py-1.5 text-xs font-medium bg-brand-primary text-white rounded-lg hover:bg-brand-primary-light transition-colors"
                 >
                   <Plus className="w-3 h-3" />
-                  {t('translations.addTranslation')}
+                  {t('translations.addOption')}
                 </button>
               )}
             </div>
 
-            {/* Translation texts list */}
-            {texts.length > 0 ? (
-              <div className="space-y-3">
-                {texts.map(text => (
-                  <div key={text.Id} className="bg-surface-secondary rounded-lg p-4 border border-border">
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="text-sm font-medium text-text-primary">
-                        {text.language_label || text.language_code}
-                        <span className="text-xs text-text-tertiary ml-1">({text.language_code})</span>
-                      </span>
-                      <div className="flex items-center gap-1">
-                        {editingTextId === text.Id ? (
-                          <>
-                            <button
-                              onClick={() => handleUpdateText(text.Id)}
-                              className="text-emerald-600 hover:text-emerald-700 p-1"
-                            >
-                              <Check className="w-4 h-4" />
-                            </button>
-                            <button
-                              onClick={() => setEditingTextId(null)}
-                              className="text-text-tertiary hover:text-text-secondary p-1"
-                            >
-                              ✕
-                            </button>
-                          </>
-                        ) : (
-                          <>
-                            <button
-                              onClick={() => { setEditingTextId(text.Id); setEditingContent(text.content || '') }}
-                              className="text-text-tertiary hover:text-text-secondary p-1"
-                            >
-                              <FileEdit className="w-4 h-4" />
-                            </button>
-                            <button
-                              onClick={() => setConfirmDeleteTextId(text.Id)}
-                              className="text-red-500 hover:text-red-600 p-1"
-                            >
-                              <Trash2 className="w-4 h-4" />
-                            </button>
-                          </>
-                        )}
+            {/* Grouped by language */}
+            {targetLanguages.some(l => textsByLanguage[l.code]?.length > 0) ? (
+              <div className="space-y-5">
+                {targetLanguages.map(lang => {
+                  const options = textsByLanguage[lang.code] || []
+                  if (options.length === 0) return null
+                  return (
+                    <div key={lang.code}>
+                      <div className="flex items-center gap-2 mb-2">
+                        <span className="text-sm font-semibold text-text-primary">{lang.label}</span>
+                        <span className="text-xs text-text-tertiary">({lang.code})</span>
+                        <span className="text-xs px-1.5 py-0.5 rounded-full bg-surface-tertiary text-text-tertiary">
+                          {options.length} {options.length === 1 ? t('translations.option') : t('translations.options')}
+                        </span>
+                      </div>
+                      <div className="space-y-2">
+                        {(() => { const hasSelected = options.some(isTextSelected); return options.map((text, idx) => {
+                          const selected = isTextSelected(text)
+                          const isDimmed = isApproved && hasSelected && !selected
+                          return (
+                            <div key={text.Id} className={`rounded-lg p-3 border ${selected ? 'bg-emerald-50 border-emerald-300' : isDimmed ? 'bg-surface-secondary border-border opacity-50' : 'bg-surface-secondary border-border'}`}>
+                              <div className="flex items-center justify-between mb-1.5">
+                                <span className="text-xs font-medium text-text-tertiary">
+                                  {t('translations.optionLabel')} {text.option_number || idx + 1}
+                                  {selected && <span className="ml-2 text-emerald-600 font-semibold">{t('translations.selected')}</span>}
+                                </span>
+                                <div className="flex items-center gap-1">
+                                  {editingTextId !== text.Id && (
+                                    <button
+                                      onClick={() => copyTextContent(text.content, text.Id)}
+                                      className="text-text-tertiary hover:text-text-primary p-1"
+                                      title={t('translations.copyContent')}
+                                    >
+                                      {copiedTextId === text.Id ? <Check className="w-3.5 h-3.5 text-emerald-600" /> : <Copy className="w-3.5 h-3.5" />}
+                                    </button>
+                                  )}
+                                  {isApproved ? null : editingTextId === text.Id ? (
+                                    <>
+                                      <button onClick={() => handleUpdateText(text.Id)} className="text-emerald-600 hover:text-emerald-700 p-1">
+                                        <Check className="w-3.5 h-3.5" />
+                                      </button>
+                                      <button onClick={() => setEditingTextId(null)} className="text-text-tertiary hover:text-text-secondary p-1 text-xs">✕</button>
+                                    </>
+                                  ) : (
+                                    <>
+                                      <button onClick={() => { setEditingTextId(text.Id); setEditingContent(text.content || '') }} className="text-text-tertiary hover:text-text-secondary p-1">
+                                        <FileEdit className="w-3.5 h-3.5" />
+                                      </button>
+                                      <button onClick={() => setConfirmDeleteTextId(text.Id)} className="text-red-500 hover:text-red-600 p-1">
+                                        <Trash2 className="w-3.5 h-3.5" />
+                                      </button>
+                                    </>
+                                  )}
+                                </div>
+                              </div>
+                              {editingTextId === text.Id ? (
+                                <textarea
+                                  value={editingContent}
+                                  onChange={e => setEditingContent(e.target.value)}
+                                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 min-h-[80px] resize-y"
+                                  autoFocus
+                                />
+                              ) : (
+                                <p className="text-sm text-text-secondary whitespace-pre-wrap">{text.content}</p>
+                              )}
+                            </div>
+                          )
+                        }) })()}
                       </div>
                     </div>
-                    {editingTextId === text.Id ? (
-                      <textarea
-                        value={editingContent}
-                        onChange={e => setEditingContent(e.target.value)}
-                        className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 min-h-[100px] resize-y"
-                        autoFocus
-                      />
-                    ) : (
-                      <p className="text-sm text-text-secondary whitespace-pre-wrap">{text.content}</p>
-                    )}
-                  </div>
-                ))}
+                  )
+                })}
               </div>
             ) : (
               <div className="text-center py-8 bg-surface-secondary rounded-lg border-2 border-dashed border-border">
@@ -491,7 +570,7 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
       </TabbedModal>
 
       {/* Add Translation Modal */}
-      <Modal isOpen={showAddLang} onClose={() => setShowAddLang(false)} title={t('translations.addTranslation')} size="md">
+      <Modal isOpen={showAddLang} onClose={() => setShowAddLang(false)} title={t('translations.addOption')} size="md">
         <div className="space-y-4">
           <div>
             <label className="block text-sm font-medium text-text-primary mb-1">{t('translations.languageLabel')} *</label>
@@ -501,7 +580,10 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
               className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
             >
               <option value="">{t('translations.selectLanguage')}</option>
-              {availableForAdd.map(l => <option key={l.code} value={l.code}>{l.label} ({l.code})</option>)}
+              {targetLanguages.map(l => {
+                const count = textsByLanguage[l.code]?.length || 0
+                return <option key={l.code} value={l.code}>{l.label} ({l.code}){count > 0 ? ` — ${count} ${t('translations.existing')}` : ''}</option>
+              })}
             </select>
           </div>
           <div>
@@ -522,7 +604,7 @@ export default function TranslationDetailPanel({ translation, onClose, onUpdate,
               disabled={savingLang || !langForm.language_code || !langForm.content}
               className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 shadow-sm"
             >
-              {savingLang ? t('common.loading') : t('translations.addTranslation')}
+              {savingLang ? t('common.loading') : t('translations.addOption')}
             </button>
           </div>
         </div>
diff --git a/client/src/i18n/ar.json b/client/src/i18n/ar.json
index 2006542..16ac9f8 100644
--- a/client/src/i18n/ar.json
+++ b/client/src/i18n/ar.json
@@ -922,6 +922,30 @@
   "review.confirmRejectPostDesc": "هل أنت متأكد من رفض هذا المنشور؟ يرجى تقديم ملاحظات توضح السبب.",
   "review.feedbackRequired": "الملاحظات (مطلوبة)",
   "review.feedbackRequiredError": "يرجى تقديم ملاحظات عند الرفض",
+  "review.loadFailed": "فشل تحميل المراجعة",
+  "review.errorTitle": "خطأ",
+  "review.thankYou": "شكراً لمراجعتك!",
+  "review.approveSuccess": "تمت الموافقة على الترجمة بنجاح!",
+  "review.rejectSuccess": "تم رفض الترجمة.",
+  "review.revisionSuccess": "تم طلب التعديل بنجاح.",
+  "review.nameRequired": "يرجى إدخال اسمك",
+  "review.yourReview": "مراجعتك",
+  "review.selectYourName": "اختر اسمك",
+  "review.selectApprover": "اختر المراجع...",
+  "review.yourName": "اسمك",
+  "review.enterYourName": "أدخل اسمك...",
+  "review.feedback": "الملاحظات",
+  "review.feedbackPlaceholder": "شارك أفكارك أو ملاحظاتك...",
+  "review.approve": "موافقة",
+  "review.approved": "تمت الموافقة",
+  "review.rejected": "مرفوض",
+  "review.requestRevision": "طلب تعديل",
+  "review.reject": "رفض",
+  "review.statusLabel": "الحالة",
+  "review.reviewedBy": "تمت المراجعة بواسطة",
+  "review.confirmReject": "تأكيد الرفض",
+  "review.rejectConfirmDesc": "هل أنت متأكد من رفض هذه الترجمة؟ تأكد من تقديم الملاحظات.",
+  "review.feedbackRequiredForReject": "يرجى تقديم ملاحظات قبل الرفض.",
   "posts.versions": "الإصدارات",
   "posts.newVersion": "إصدار جديد",
   "posts.createNewVersion": "إنشاء إصدار جديد",
@@ -961,7 +985,6 @@
   "translations.status": "الحالة",
   "translations.languagesLabel": "اللغات",
   "translations.languagesCount": "لغات",
-  "translations.updated": "تم التحديث",
   "translations.grid": "شبكة",
   "translations.list": "قائمة",
   "translations.allBrands": "جميع العلامات",
@@ -991,7 +1014,7 @@
   "translations.draftSaved": "تم حفظ المسودة!",
   "translations.failedSaveDraft": "فشل حفظ المسودة",
   "translations.saveDraft": "حفظ المسودة",
-  "translations.saveDraftTooltip": "حفظ التغييرات على العنوان والوصف والمحتوى الأصلي",
+  "translations.saveDraftTooltip": "حفظ التغييرات على العنوان والمحتوى الأصلي",
   "translations.savingDraft": "جارٍ الحفظ...",
   "translations.updated": "تم التحديث!",
   "translations.failedUpdate": "فشل التحديث",
@@ -1021,5 +1044,26 @@
   "translations.approvedByLabel": "وافق عليه",
   "translations.pendingReviewInfo": "هذه الترجمة بانتظار المراجعة حاليًا.",
   "translations.noReviewInfo": "لا توجد معلومات مراجعة متاحة.",
-  "translations.failedDelete": "فشل الحذف"
+  "translations.failedDelete": "فشل الحذف",
+  "translations.addOption": "إضافة خيار",
+  "translations.option": "خيار",
+  "translations.options": "خيارات",
+  "translations.optionLabel": "الخيار",
+  "translations.selected": "محدد",
+  "translations.selectThis": "اختيار",
+  "translations.optionSelected": "تم اختيار الخيار!",
+  "translations.suggestAlternative": "اقتراح بديل",
+  "translations.suggestForLang": "اقترح ترجمة لـ",
+  "translations.enterSuggestion": "أدخل الترجمة المقترحة...",
+  "translations.submitSuggestion": "إرسال الاقتراح",
+  "translations.suggestionAdded": "تمت إضافة الاقتراح!",
+  "translations.existing": "موجود",
+  "translations.copyContent": "نسخ إلى الحافظة",
+  "translations.copiedToClipboard": "تم النسخ!",
+  "translations.approvedReadOnly": "هذه الترجمة معتمدة ولا يمكن تعديلها.",
+  "translations.linkedPost": "المنشور المرتبط",
+  "translations.createPost": "منشور جديد",
+  "translations.newPostTitle": "عنوان المنشور...",
+  "translations.postCreated": "تم إنشاء المنشور!",
+  "translations.postCreateFailed": "فشل إنشاء المنشور"
 }
\ No newline at end of file
diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
index ff12f43..e590fe3 100644
--- a/client/src/i18n/en.json
+++ b/client/src/i18n/en.json
@@ -922,6 +922,30 @@
   "review.confirmRejectPostDesc": "Are you sure you want to reject this post? Please provide feedback explaining why.",
   "review.feedbackRequired": "Feedback (required)",
   "review.feedbackRequiredError": "Please provide feedback when rejecting",
+  "review.loadFailed": "Failed to load review",
+  "review.errorTitle": "Error",
+  "review.thankYou": "Thank you for your review!",
+  "review.approveSuccess": "Translation approved successfully!",
+  "review.rejectSuccess": "Translation has been rejected.",
+  "review.revisionSuccess": "Revision requested successfully.",
+  "review.nameRequired": "Please provide your name",
+  "review.yourReview": "Your Review",
+  "review.selectYourName": "Select your name",
+  "review.selectApprover": "Select approver...",
+  "review.yourName": "Your Name",
+  "review.enterYourName": "Enter your name...",
+  "review.feedback": "Feedback",
+  "review.feedbackPlaceholder": "Share your thoughts or feedback...",
+  "review.approve": "Approve",
+  "review.approved": "Approved",
+  "review.rejected": "Rejected",
+  "review.requestRevision": "Request Revision",
+  "review.reject": "Reject",
+  "review.statusLabel": "Status",
+  "review.reviewedBy": "Reviewed by",
+  "review.confirmReject": "Confirm Rejection",
+  "review.rejectConfirmDesc": "Are you sure you want to reject this translation? Please make sure you have provided feedback.",
+  "review.feedbackRequiredForReject": "Please provide feedback before rejecting.",
   "posts.versions": "Versions",
   "posts.newVersion": "New Version",
   "posts.createNewVersion": "Create New Version",
@@ -961,7 +985,6 @@
   "translations.status": "Status",
   "translations.languagesLabel": "Languages",
   "translations.languagesCount": "languages",
-  "translations.updated": "Updated",
   "translations.grid": "Grid",
   "translations.list": "List",
   "translations.allBrands": "All Brands",
@@ -991,9 +1014,9 @@
   "translations.draftSaved": "Draft saved!",
   "translations.failedSaveDraft": "Failed to save draft",
   "translations.saveDraft": "Save Draft",
-  "translations.saveDraftTooltip": "Save changes to title, description, and source content",
+  "translations.saveDraftTooltip": "Save changes to title and source content",
   "translations.savingDraft": "Saving...",
-  "translations.updated": "Updated!",
+  "translations.updated": "Updated",
   "translations.failedUpdate": "Failed to update",
   "translations.addTranslation": "Add Translation",
   "translations.translationAdded": "Translation added!",
@@ -1021,5 +1044,26 @@
   "translations.approvedByLabel": "Approved by",
   "translations.pendingReviewInfo": "This translation is currently pending review.",
   "translations.noReviewInfo": "No review information available.",
-  "translations.failedDelete": "Failed to delete"
+  "translations.failedDelete": "Failed to delete",
+  "translations.addOption": "Add Option",
+  "translations.option": "option",
+  "translations.options": "options",
+  "translations.optionLabel": "Option",
+  "translations.selected": "Selected",
+  "translations.selectThis": "Select",
+  "translations.optionSelected": "Option selected!",
+  "translations.suggestAlternative": "Suggest alternative",
+  "translations.suggestForLang": "Suggest a translation for",
+  "translations.enterSuggestion": "Enter your suggested translation...",
+  "translations.submitSuggestion": "Submit Suggestion",
+  "translations.suggestionAdded": "Suggestion added!",
+  "translations.existing": "existing",
+  "translations.copyContent": "Copy to clipboard",
+  "translations.copiedToClipboard": "Copied to clipboard!",
+  "translations.approvedReadOnly": "This translation is approved and cannot be modified.",
+  "translations.linkedPost": "Linked Post",
+  "translations.createPost": "New Post",
+  "translations.newPostTitle": "Post title...",
+  "translations.postCreated": "Post created!",
+  "translations.postCreateFailed": "Failed to create post"
 }
\ No newline at end of file
diff --git a/client/src/pages/PublicTranslationReview.jsx b/client/src/pages/PublicTranslationReview.jsx
index 64f6856..c7b937c 100644
--- a/client/src/pages/PublicTranslationReview.jsx
+++ b/client/src/pages/PublicTranslationReview.jsx
@@ -1,7 +1,8 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { useParams } from 'react-router-dom'
-import { CheckCircle, XCircle, AlertCircle, Languages, Globe, User } from 'lucide-react'
+import { CheckCircle, XCircle, AlertCircle, Languages, Globe, User, Check, PenLine, Copy, Lock } from 'lucide-react'
 import { useLanguage } from '../i18n/LanguageContext'
+import { AVAILABLE_LANGUAGES, isTextSelected, groupTextsByLanguage } from '../utils/translations'
 import { useToast } from '../components/ToastContainer'
 import Modal from '../components/Modal'
 
@@ -17,6 +18,10 @@ export default function PublicTranslationReview() {
   const [reviewerName, setReviewerName] = useState('')
   const [feedback, setFeedback] = useState('')
   const [pendingAction, setPendingAction] = useState(null)
+  const [suggestingLang, setSuggestingLang] = useState(null)
+  const [suggestionContent, setSuggestionContent] = useState('')
+  const [selectingId, setSelectingId] = useState(null)
+  const [copiedId, setCopiedId] = useState(null)
 
   useEffect(() => {
     loadTranslation()
@@ -44,12 +49,12 @@ export default function PublicTranslationReview() {
   }
 
   const handleAction = async (action) => {
-    if (action === 'approve' && !reviewerName.trim()) {
+    if ((action === 'approve' || action === 'reject') && !reviewerName.trim()) {
       toast.error(t('review.nameRequired'))
       return
     }
-    if (action === 'reject' && !feedback.trim()) {
-      toast.error(t('review.feedbackRequired'))
+    if ((action === 'reject' || action === 'revision') && !feedback.trim()) {
+      toast.error(t('review.feedbackRequiredError'))
       return
     }
 
@@ -78,6 +83,86 @@ export default function PublicTranslationReview() {
     }
   }
 
+  const handleSelect = async (textId) => {
+    setSelectingId(textId)
+    try {
+      const res = await fetch(`/api/public/review-translation/${token}/select`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text_id: textId }),
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        throw new Error(err.error || 'Selection failed')
+      }
+      setTranslation(prev => ({
+        ...prev,
+        texts: prev.texts.map(txt => ({
+          ...txt,
+          is_selected: txt.language_code === prev.texts.find(t => (t.Id || t.id) === textId)?.language_code
+            ? (txt.Id || txt.id) === textId
+            : txt.is_selected,
+        })),
+      }))
+      toast.success(t('translations.optionSelected'))
+    } catch (err) {
+      toast.error(err.message)
+    } finally {
+      setSelectingId(null)
+    }
+  }
+
+  const handleSuggest = async (langCode) => {
+    if (!suggestionContent.trim()) return
+    setSubmitting(true)
+    try {
+      const langDef = AVAILABLE_LANGUAGES.find(l => l.code === langCode)
+      const res = await fetch(`/api/public/review-translation/${token}/suggest`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          language_code: langCode,
+          language_label: langDef?.label || langCode,
+          content: suggestionContent,
+          suggested_by: reviewerName || 'Reviewer',
+        }),
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        throw new Error(err.error || 'Suggestion failed')
+      }
+      const newText = await res.json()
+      setTranslation(prev => ({
+        ...prev,
+        texts: [...(prev.texts || []), newText],
+      }))
+      setSuggestingLang(null)
+      setSuggestionContent('')
+      toast.success(t('translations.suggestionAdded'))
+    } catch (err) {
+      toast.error(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const copyContent = (text, id) => {
+    navigator.clipboard.writeText(text)
+    setCopiedId(id)
+    toast.success(t('translations.copiedToClipboard'))
+    setTimeout(() => setCopiedId(null), 2000)
+  }
+
+  // Group texts by language (memoized)
+  const textsByLanguage = useMemo(
+    () => translation?.texts ? groupTextsByLanguage(translation.texts) : {},
+    [translation?.texts]
+  )
+
+  const isPendingReview = translation?.status === 'pending_review'
+  const isApproved = translation?.status === 'approved'
+  const isRejected = translation?.status === 'rejected'
+
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-surface-secondary">
@@ -122,10 +207,20 @@ export default function PublicTranslationReview() {
               <Languages className="w-6 h-6 text-brand-primary" />
             </div>
             <div className="flex-1 min-w-0">
-              <h2 className="text-2xl font-bold text-text-primary mb-1">{translation.title}</h2>
-              {translation.description && (
-                <p className="text-text-secondary mb-2">{translation.description}</p>
-              )}
+              <div className="flex items-center gap-2 mb-1">
+                <h2 className="text-2xl font-bold text-text-primary">{translation.title}</h2>
+                {isApproved && (
+                  <span className="text-xs px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 font-medium flex items-center gap-1">
+                    <Lock className="w-3 h-3" />
+                    {t('review.approved')}
+                  </span>
+                )}
+                {isRejected && (
+                  <span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700 font-medium">
+                    {t('review.rejected')}
+                  </span>
+                )}
+              </div>
               <div className="flex items-center gap-2 text-sm text-text-tertiary flex-wrap">
                 {translation.brand_name && <span>{translation.brand_name}</span>}
                 {translation.creator_name && <span className="font-medium text-text-secondary">{t('review.createdBy')} <strong>{translation.creator_name}</strong></span>}
@@ -150,30 +245,139 @@ export default function PublicTranslationReview() {
           </div>
         </div>
 
-        {/* Translations */}
-        {translation.texts && translation.texts.length > 0 && (
+        {/* Translation Options by Language */}
+        {Object.keys(textsByLanguage).length > 0 && (
           <div className="bg-surface rounded-xl border border-border p-6 mb-6">
             <h3 className="text-lg font-semibold text-text-primary mb-4">
-              {t('translations.translationTexts')} ({translation.texts.length})
+              {t('translations.translationTexts')}
             </h3>
-            <div className="space-y-4">
-              {translation.texts.map((text, idx) => (
-                <div key={text.Id || idx} className="bg-surface-secondary rounded-lg p-4 border border-border">
-                  <div className="flex items-center gap-2 mb-2">
-                    <span className="text-sm font-semibold text-text-primary">
-                      {text.language_label || text.language_code}
-                    </span>
-                    <span className="text-xs text-text-tertiary">({text.language_code})</span>
+            <div className="space-y-6">
+              {Object.entries(textsByLanguage).map(([langCode, options]) => {
+                const langLabel = options[0]?.language_label || langCode
+                const hasSelected = options.some(isTextSelected)
+                return (
+                  <div key={langCode}>
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-semibold text-text-primary">{langLabel}</span>
+                        <span className="text-xs text-text-tertiary">({langCode})</span>
+                        <span className="text-xs text-text-tertiary">
+                          — {options.length} {options.length === 1 ? t('translations.option') : t('translations.options')}
+                        </span>
+                      </div>
+                      {isPendingReview && (
+                        <button
+                          onClick={() => {
+                            setSuggestingLang(langCode)
+                            setSuggestionContent('')
+                          }}
+                          className="flex items-center gap-1 text-xs text-brand-primary hover:text-brand-primary/80 font-medium"
+                        >
+                          <PenLine className="w-3.5 h-3.5" />
+                          {t('translations.suggestAlternative')}
+                        </button>
+                      )}
+                    </div>
+                    <div className="space-y-2">
+                      {options.map((text) => {
+                        const textId = text.Id || text.id
+                        const isSelected = isTextSelected(text)
+                        // When approved, show only the selected option prominently; others are dimmed
+                        const isDimmed = isApproved && hasSelected && !isSelected
+                        return (
+                          <div
+                            key={textId}
+                            className={`rounded-lg p-4 border transition-all ${
+                              isSelected
+                                ? 'bg-emerald-50 border-emerald-300 ring-1 ring-emerald-200'
+                                : isDimmed
+                                  ? 'bg-surface-secondary border-border opacity-50'
+                                  : 'bg-surface-secondary border-border hover:border-brand-primary/30'
+                            }`}
+                          >
+                            <div className="flex items-start gap-3">
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 mb-1">
+                                  <span className="text-xs font-medium text-text-tertiary">
+                                    {t('translations.optionLabel')} {text.option_number || 1}
+                                  </span>
+                                  {isSelected && (
+                                    <span className="text-xs px-1.5 py-0.5 rounded bg-emerald-100 text-emerald-700 font-medium flex items-center gap-1">
+                                      <Check className="w-3 h-3" />
+                                      {t('translations.selected')}
+                                    </span>
+                                  )}
+                                </div>
+                                <p className="text-sm text-text-secondary whitespace-pre-wrap leading-relaxed">{text.content}</p>
+                              </div>
+                              <div className="flex items-center gap-1 shrink-0">
+                                {/* Copy button — always available, especially useful for approved */}
+                                {(isApproved || isSelected) && (
+                                  <button
+                                    onClick={() => copyContent(text.content, textId)}
+                                    className="p-1.5 rounded-lg text-text-tertiary hover:text-text-primary hover:bg-surface-tertiary transition-colors"
+                                    title={t('translations.copyContent')}
+                                  >
+                                    {copiedId === textId ? <Check className="w-4 h-4 text-emerald-600" /> : <Copy className="w-4 h-4" />}
+                                  </button>
+                                )}
+                                {/* Select button — only when pending review */}
+                                {isPendingReview && (
+                                  <button
+                                    onClick={() => handleSelect(textId)}
+                                    disabled={selectingId === textId || isSelected}
+                                    className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
+                                      isSelected
+                                        ? 'bg-emerald-100 text-emerald-700 cursor-default'
+                                        : 'bg-brand-primary/10 text-brand-primary hover:bg-brand-primary/20'
+                                    }`}
+                                  >
+                                    {selectingId === textId ? '...' : isSelected ? t('translations.selected') : t('translations.selectThis')}
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </div>
+
+                    {/* Inline suggestion form for this language */}
+                    {suggestingLang === langCode && (
+                      <div className="mt-3 bg-amber-50 border border-amber-200 rounded-lg p-4">
+                        <p className="text-sm font-medium text-amber-800 mb-2">{t('translations.suggestForLang')} {langLabel}</p>
+                        <textarea
+                          value={suggestionContent}
+                          onChange={e => setSuggestionContent(e.target.value)}
+                          placeholder={t('translations.enterSuggestion')}
+                          className="w-full px-3 py-2 text-sm border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-400/30 min-h-[80px] resize-y bg-white"
+                        />
+                        <div className="flex items-center gap-2 mt-2">
+                          <button
+                            onClick={() => handleSuggest(langCode)}
+                            disabled={submitting || !suggestionContent.trim()}
+                            className="px-3 py-1.5 bg-amber-600 text-white text-xs font-medium rounded-lg hover:bg-amber-700 disabled:opacity-50 transition-colors"
+                          >
+                            {submitting ? '...' : t('translations.submitSuggestion')}
+                          </button>
+                          <button
+                            onClick={() => setSuggestingLang(null)}
+                            className="px-3 py-1.5 text-xs text-text-secondary hover:text-text-primary transition-colors"
+                          >
+                            {t('common.cancel')}
+                          </button>
+                        </div>
+                      </div>
+                    )}
                   </div>
-                  <p className="text-sm text-text-secondary whitespace-pre-wrap leading-relaxed">{text.content}</p>
-                </div>
-              ))}
+                )
+              })}
             </div>
           </div>
         )}
 
-        {/* Review Actions */}
-        {translation.status === 'pending_review' && (
+        {/* Review Actions — only pending_review */}
+        {isPendingReview && (
           <div className="bg-surface rounded-xl border border-border p-6">
             <h3 className="text-lg font-semibold text-text-primary mb-4">{t('review.yourReview')}</h3>
 
@@ -253,17 +457,63 @@ export default function PublicTranslationReview() {
           </div>
         )}
 
-        {/* Already reviewed */}
-        {translation.status !== 'pending_review' && (
+        {/* Approved state — read-only with copy buttons */}
+        {isApproved && (
+          <div className="bg-surface rounded-xl border border-border p-6">
+            <div className="flex items-center gap-3 mb-3">
+              <CheckCircle className="w-6 h-6 text-emerald-500" />
+              <div>
+                <p className="text-text-primary font-semibold">{t('review.approved')}</p>
+                {translation.approved_by_name && (
+                  <p className="text-sm text-text-secondary">
+                    {t('review.reviewedBy')} <strong>{translation.approved_by_name}</strong>
+                  </p>
+                )}
+              </div>
+            </div>
+            {translation.feedback && (
+              <div className="bg-surface-secondary rounded-lg p-3 mt-3">
+                <p className="text-xs font-medium text-text-tertiary mb-1">{t('review.feedback')}</p>
+                <p className="text-sm text-text-secondary whitespace-pre-wrap">{translation.feedback}</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Rejected state */}
+        {isRejected && (
+          <div className="bg-surface rounded-xl border border-border p-6">
+            <div className="flex items-center gap-3 mb-3">
+              <XCircle className="w-6 h-6 text-red-500" />
+              <div>
+                <p className="text-text-primary font-semibold">{t('review.rejected')}</p>
+                {translation.approved_by_name && (
+                  <p className="text-sm text-text-secondary">
+                    {t('review.reviewedBy')} <strong>{translation.approved_by_name}</strong>
+                  </p>
+                )}
+              </div>
+            </div>
+            {translation.feedback && (
+              <div className="bg-red-50 border border-red-200 rounded-lg p-3 mt-3">
+                <p className="text-xs font-medium text-red-700 mb-1">{t('review.feedback')}</p>
+                <p className="text-sm text-red-800 whitespace-pre-wrap">{translation.feedback}</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Other statuses (revision_requested, draft) */}
+        {!isPendingReview && !isApproved && !isRejected && (
           <div className="bg-surface rounded-xl border border-border p-6">
             <div className="text-center py-4">
-              <CheckCircle className="w-10 h-10 text-emerald-500 mx-auto mb-2" />
+              <AlertCircle className="w-10 h-10 text-amber-500 mx-auto mb-2" />
               <p className="text-text-primary font-medium">
                 {t('review.statusLabel')}: <span className="font-semibold capitalize">{translation.status.replace('_', ' ')}</span>
               </p>
               {translation.approved_by_name && (
                 <p className="text-sm text-text-secondary mt-1">
-                  {t('review.reviewedBy')}: <span className="font-semibold">{translation.approved_by_name}</span>
+                  {t('review.reviewedBy')} <strong>{translation.approved_by_name}</strong>
                 </p>
               )}
             </div>
diff --git a/client/src/pages/Translations.jsx b/client/src/pages/Translations.jsx
index 49c254a..ee30ab4 100644
--- a/client/src/pages/Translations.jsx
+++ b/client/src/pages/Translations.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useContext, useMemo } from 'react'
-import { Plus, Search, LayoutGrid, List, ChevronUp, ChevronDown, Languages, Globe } from 'lucide-react'
+import { Plus, Search, LayoutGrid, List, ChevronUp, ChevronDown, Languages, Globe, FileEdit } from 'lucide-react'
 import { AppContext } from '../App'
 import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../i18n/LanguageContext'
@@ -10,21 +10,8 @@ import { useToast } from '../components/ToastContainer'
 import { SkeletonCard, SkeletonTable } from '../components/SkeletonLoader'
 import TranslationDetailPanel from '../components/TranslationDetailPanel'
 import ApproverMultiSelect from '../components/ApproverMultiSelect'
+import { AVAILABLE_LANGUAGES, TRANSLATION_STATUS_COLORS } from '../utils/translations'
 
-const STATUS_COLORS = {
-  draft: 'bg-surface-tertiary text-text-secondary',
-  pending_review: 'bg-amber-100 text-amber-700',
-  approved: 'bg-emerald-100 text-emerald-700',
-  rejected: 'bg-red-100 text-red-700',
-  revision_requested: 'bg-orange-100 text-orange-700',
-}
-
-const AVAILABLE_LANGUAGES = [
-  { code: 'AR', label: 'العربية' },
-  { code: 'EN', label: 'English' },
-  { code: 'FR', label: 'Français' },
-  { code: 'ID', label: 'Bahasa Indonesia' },
-]
 
 const SORT_OPTIONS = [
   { value: 'updated_at', dir: 'desc', labelKey: 'translations.sortRecentlyUpdated' },
@@ -45,8 +32,12 @@ export default function Translations() {
   const [searchTerm, setSearchTerm] = useState('')
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [selectedTranslation, setSelectedTranslation] = useState(null)
-  const [newTranslation, setNewTranslation] = useState({ title: '', description: '', source_language: 'EN', source_content: '', brand_id: '', approver_ids: [] })
+  const [newTranslation, setNewTranslation] = useState({ title: '', source_language: 'EN', source_content: '', brand_id: '', post_id: '', approver_ids: [] })
   const [saving, setSaving] = useState(false)
+  const [posts, setPosts] = useState([])
+  const [showCreatePost, setShowCreatePost] = useState(false)
+  const [newPostTitle, setNewPostTitle] = useState('')
+  const [creatingPost, setCreatingPost] = useState(false)
 
   // Bulk select
   const [selectedIds, setSelectedIds] = useState(new Set())
@@ -63,6 +54,7 @@ export default function Translations() {
   useEffect(() => {
     loadTranslations()
     api.get('/users/assignable').then(res => setAssignableUsers(Array.isArray(res) ? res : [])).catch(() => {})
+    api.get('/posts').then(res => setPosts(Array.isArray(res) ? res : [])).catch(() => {})
   }, [])
 
   const loadTranslations = async () => {
@@ -91,10 +83,11 @@ export default function Translations() {
       const created = await api.post('/translations', {
         ...newTranslation,
         approver_ids: newTranslation.approver_ids.length > 0 ? newTranslation.approver_ids.join(',') : null,
+        post_id: newTranslation.post_id || null,
       })
       toast.success(t('translations.created'))
       setShowCreateModal(false)
-      setNewTranslation({ title: '', description: '', source_language: 'EN', source_content: '', brand_id: '', approver_ids: [] })
+      setNewTranslation({ title: '', source_language: 'EN', source_content: '', brand_id: '', post_id: '', approver_ids: [] })
       loadTranslations()
       setSelectedTranslation(created)
     } catch (err) {
@@ -116,6 +109,24 @@ export default function Translations() {
     }
   }
 
+  const handleCreatePost = async () => {
+    if (!newPostTitle.trim()) return
+    setCreatingPost(true)
+    try {
+      const created = await api.post('/posts', { title: newPostTitle, status: 'draft' })
+      const postId = created.Id || created.id || created._id
+      setPosts(prev => [created, ...prev])
+      setNewTranslation(f => ({ ...f, post_id: String(postId) }))
+      setShowCreatePost(false)
+      setNewPostTitle('')
+      toast.success(t('translations.postCreated'))
+    } catch (err) {
+      toast.error(t('translations.postCreateFailed'))
+    } finally {
+      setCreatingPost(false)
+    }
+  }
+
   const handleBulkDelete = async () => {
     try {
       await api.post('/translations/bulk-delete', { ids: [...selectedIds] })
@@ -314,7 +325,7 @@ export default function Translations() {
                   <div className="flex-1 min-w-0">
                     <h3 className="font-semibold text-text-primary line-clamp-1">{tr.title}</h3>
                     <div className="flex items-center gap-2 mt-1">
-                      <span className={`text-xs px-2 py-0.5 rounded-full ${STATUS_COLORS[tr.status] || 'bg-surface-tertiary text-text-secondary'}`}>
+                      <span className={`text-xs px-2 py-0.5 rounded-full ${TRANSLATION_STATUS_COLORS[tr.status] || 'bg-surface-tertiary text-text-secondary'}`}>
                         {tr.status?.replace('_', ' ')}
                       </span>
                       <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600 font-medium">
@@ -323,11 +334,9 @@ export default function Translations() {
                     </div>
                   </div>
                 </div>
-                {tr.description && (
-                  <p className="text-sm text-text-secondary line-clamp-2 mb-3">{tr.description}</p>
-                )}
                 <div className="flex items-center gap-2 text-xs text-text-tertiary flex-wrap">
                   {tr.brand_name && <span>{tr.brand_name}</span>}
+                  {tr.post_name && <span className="flex items-center gap-1"><FileEdit className="w-3 h-3" />{tr.post_name}</span>}
                   {tr.creator_name && <span>by {tr.creator_name}</span>}
                   <span>{tr.translation_count || 0} {t('translations.languagesCount')}</span>
                 </div>
@@ -384,7 +393,7 @@ export default function Translations() {
                       </span>
                     </td>
                     <td className="px-4 py-3">
-                      <span className={`text-xs px-2 py-0.5 rounded-full ${STATUS_COLORS[tr.status] || 'bg-surface-tertiary text-text-secondary'}`}>
+                      <span className={`text-xs px-2 py-0.5 rounded-full ${TRANSLATION_STATUS_COLORS[tr.status] || 'bg-surface-tertiary text-text-secondary'}`}>
                         {tr.status?.replace('_', ' ')}
                       </span>
                     </td>
@@ -408,6 +417,7 @@ export default function Translations() {
           onUpdate={loadTranslations}
           onDelete={handleDelete}
           assignableUsers={assignableUsers}
+          posts={posts}
         />
       )}
 
@@ -454,6 +464,53 @@ export default function Translations() {
               {brands.map(b => <option key={b._id} value={b._id}>{b.name}</option>)}
             </select>
           </div>
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">{t('translations.linkedPost')}</label>
+            {showCreatePost ? (
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  value={newPostTitle}
+                  onChange={e => setNewPostTitle(e.target.value)}
+                  onKeyDown={e => e.key === 'Enter' && handleCreatePost()}
+                  className="flex-1 px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+                  placeholder={t('translations.newPostTitle')}
+                  autoFocus
+                />
+                <button
+                  onClick={handleCreatePost}
+                  disabled={creatingPost || !newPostTitle.trim()}
+                  className="px-3 py-2 bg-brand-primary text-white text-sm rounded-lg hover:bg-brand-primary-light disabled:opacity-50"
+                >
+                  {creatingPost ? '...' : t('common.create')}
+                </button>
+                <button
+                  onClick={() => setShowCreatePost(false)}
+                  className="px-2 py-2 text-sm text-text-secondary hover:text-text-primary"
+                >
+                  {t('common.cancel')}
+                </button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <select
+                  value={newTranslation.post_id}
+                  onChange={e => setNewTranslation(f => ({ ...f, post_id: e.target.value }))}
+                  className="flex-1 px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+                >
+                  <option value="">—</option>
+                  {posts.map(p => <option key={p.Id || p.id || p._id} value={p.Id || p.id || p._id}>{p.title}</option>)}
+                </select>
+                <button
+                  onClick={() => setShowCreatePost(true)}
+                  className="flex items-center gap-1 px-3 py-2 text-sm text-brand-primary hover:text-brand-primary/80 font-medium whitespace-nowrap"
+                >
+                  <Plus className="w-3.5 h-3.5" />
+                  {t('translations.createPost')}
+                </button>
+              </div>
+            )}
+          </div>
           <div>
             <label className="block text-sm font-medium text-text-primary mb-1">{t('translations.approvers')}</label>
             <ApproverMultiSelect
@@ -462,15 +519,6 @@ export default function Translations() {
               users={assignableUsers}
             />
           </div>
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">{t('translations.description')}</label>
-            <textarea
-              value={newTranslation.description}
-              onChange={e => setNewTranslation(f => ({ ...f, description: e.target.value }))}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 min-h-[60px] resize-y"
-              placeholder={t('translations.descriptionPlaceholder')}
-            />
-          </div>
           <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
             <button onClick={() => setShowCreateModal(false)} className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg">
               {t('common.cancel')}
diff --git a/client/src/utils/translations.js b/client/src/utils/translations.js
new file mode 100644
index 0000000..36ca885
--- /dev/null
+++ b/client/src/utils/translations.js
@@ -0,0 +1,30 @@
+export const AVAILABLE_LANGUAGES = [
+  { code: 'AR', label: 'العربية' },
+  { code: 'EN', label: 'English' },
+  { code: 'FR', label: 'Français' },
+  { code: 'ID', label: 'Bahasa Indonesia' },
+]
+
+export const TRANSLATION_STATUS_COLORS = {
+  draft: 'bg-surface-tertiary text-text-secondary',
+  pending_review: 'bg-amber-100 text-amber-700',
+  approved: 'bg-emerald-100 text-emerald-700',
+  rejected: 'bg-red-100 text-red-700',
+  revision_requested: 'bg-orange-100 text-orange-700',
+}
+
+export function isTextSelected(text) {
+  return text.is_selected === true || text.is_selected === 1
+}
+
+export function groupTextsByLanguage(texts) {
+  const grouped = {}
+  for (const text of texts) {
+    if (!grouped[text.language_code]) grouped[text.language_code] = []
+    grouped[text.language_code].push(text)
+  }
+  for (const code in grouped) {
+    grouped[code].sort((a, b) => (a.option_number || 1) - (b.option_number || 1))
+  }
+  return grouped
+}
diff --git a/server/reassign-user.js b/server/reassign-user.js
new file mode 100644
index 0000000..449e4fa
--- /dev/null
+++ b/server/reassign-user.js
@@ -0,0 +1,37 @@
+const n = require('./nocodb');
+const OLD_ID = 6;
+const NEW_ID = 1;
+
+const TABLES_AND_FIELDS = [
+  { table: 'Posts', fields: ['assigned_to_id', 'created_by_user_id'] },
+  { table: 'Tasks', fields: ['assigned_to_id', 'created_by_user_id'] },
+  { table: 'Projects', fields: ['owner_id', 'created_by_user_id'] },
+  { table: 'Campaigns', fields: ['created_by_user_id'] },
+  { table: 'Assets', fields: ['uploader_id'] },
+  { table: 'Comments', fields: ['user_id'] },
+  { table: 'CampaignAssignments', fields: ['member_id', 'assigner_id'] },
+  { table: 'Artefacts', fields: ['created_by_user_id'] },
+  { table: 'ArtefactVersions', fields: ['created_by_user_id'] },
+  { table: 'Issues', fields: ['assigned_to_id'] },
+  { table: 'TeamMembers', fields: ['user_id'] },
+  { table: 'BudgetEntries', fields: [] },
+];
+
+(async () => {
+  for (const { table, fields } of TABLES_AND_FIELDS) {
+    for (const field of fields) {
+      try {
+        const records = await n.list(table, { where: `(${field},eq,${OLD_ID})`, limit: 200 });
+        if (records.length === 0) continue;
+        console.log(`${table}.${field}: ${records.length} records to update`);
+        for (const r of records) {
+          await n.update(table, r.Id, { [field]: NEW_ID });
+        }
+        console.log(`  -> done`);
+      } catch (err) {
+        console.log(`${table}.${field}: skipped (${err.message})`);
+      }
+    }
+  }
+  console.log('Reassignment complete.');
+})();
diff --git a/server/server.js b/server/server.js
index cb7ae9a..3d22464 100644
--- a/server/server.js
+++ b/server/server.js
@@ -158,7 +158,7 @@ const FK_COLUMNS = {
   PostVersionTexts: ['version_id'],
   Issues: ['brand_id', 'assigned_to_id', 'team_id'],
   Users: ['role_id'],
-  Translations: ['brand_id', 'created_by_user_id'],
+  Translations: ['brand_id', 'post_id', 'created_by_user_id'],
   TranslationTexts: ['translation_id'],
 };
 
@@ -425,11 +425,11 @@ const REQUIRED_TABLES = {
   ],
   Translations: [
     { title: 'title', uidt: 'SingleLineText' },
-    { title: 'description', uidt: 'LongText' },
     { title: 'source_language', uidt: 'SingleLineText' },
     { title: 'source_content', uidt: 'LongText' },
     { title: 'status', uidt: 'SingleSelect', dtxp: "'draft','pending_review','approved','rejected','revision_requested'" },
     { title: 'brand_id', uidt: 'Number' },
+    { title: 'post_id', uidt: 'Number' },
     { title: 'approver_ids', uidt: 'SingleLineText' },
     { title: 'approval_token', uidt: 'SingleLineText' },
     { title: 'token_expires_at', uidt: 'DateTime' },
@@ -443,6 +443,8 @@ const REQUIRED_TABLES = {
     { title: 'language_code', uidt: 'SingleLineText' },
     { title: 'language_label', uidt: 'SingleLineText' },
     { title: 'content', uidt: 'LongText' },
+    { title: 'option_number', uidt: 'Number' },
+    { title: 'is_selected', uidt: 'Checkbox' },
   ],
 };
 
@@ -4342,9 +4344,10 @@ app.get('/api/translations', requireAuth, async (req, res) => {
     }
 
     // Enrich with names
-    const brandIds = new Set(), userIds = new Set();
+    const brandIds = new Set(), userIds = new Set(), postIds = new Set();
     for (const t of translations) {
       if (t.brand_id) brandIds.add(t.brand_id);
+      if (t.post_id) postIds.add(t.post_id);
       if (t.created_by_user_id) userIds.add(t.created_by_user_id);
       if (t.approver_ids) {
         for (const id of t.approver_ids.split(',').map(s => s.trim()).filter(Boolean)) {
@@ -4355,6 +4358,7 @@ app.get('/api/translations', requireAuth, async (req, res) => {
     const names = await batchResolveNames({
       brand: { table: 'Brands', ids: [...brandIds] },
       user: { table: 'Users', ids: [...userIds] },
+      post: { table: 'Posts', ids: [...postIds] },
     });
 
     // Count translation texts per record
@@ -4371,6 +4375,7 @@ app.get('/api/translations', requireAuth, async (req, res) => {
       return {
         ...t,
         brand_name: names[`brand:${t.brand_id}`] || null,
+        post_name: names[`post:${t.post_id}`] || null,
         creator_name: names[`user:${t.created_by_user_id}`] || null,
         approvers: approverIdList.map(id => ({ id: Number(id), name: names[`user:${Number(id)}`] || null })),
         translation_count: textCounts[t.Id] || 0,
@@ -4384,7 +4389,7 @@ app.get('/api/translations', requireAuth, async (req, res) => {
 
 // Create translation
 app.post('/api/translations', requireAuth, async (req, res) => {
-  const { title, description, source_language, source_content, brand_id, approver_ids } = req.body;
+  const { title, source_language, source_content, brand_id, post_id, approver_ids } = req.body;
   if (!title) return res.status(400).json({ error: 'Title is required' });
   if (!source_language) return res.status(400).json({ error: 'Source language is required' });
   if (!source_content) return res.status(400).json({ error: 'Source content is required' });
@@ -4392,11 +4397,11 @@ app.post('/api/translations', requireAuth, async (req, res) => {
   try {
     const created = await nocodb.create('Translations', {
       title,
-      description: description || null,
       source_language,
       source_content,
       status: 'draft',
       brand_id: brand_id ? Number(brand_id) : null,
+      post_id: post_id ? Number(post_id) : null,
       approver_ids: approver_ids || null,
       created_by_user_id: req.session.userId,
     });
@@ -4410,6 +4415,7 @@ app.post('/api/translations', requireAuth, async (req, res) => {
     res.status(201).json({
       ...record,
       brand_name: await getRecordName('Brands', record.brand_id),
+      post_name: await getRecordName('Posts', record.post_id),
       creator_name: await getRecordName('Users', record.created_by_user_id),
       approvers,
       translation_count: 0,
@@ -4448,10 +4454,11 @@ app.patch('/api/translations/:id', requireAuth, async (req, res) => {
     }
 
     const data = {};
-    for (const f of ['title', 'description', 'source_language', 'source_content', 'status', 'feedback']) {
+    for (const f of ['title', 'source_language', 'source_content', 'status', 'feedback']) {
       if (req.body[f] !== undefined) data[f] = req.body[f];
     }
     if (req.body.brand_id !== undefined) data.brand_id = req.body.brand_id ? Number(req.body.brand_id) : null;
+    if (req.body.post_id !== undefined) data.post_id = req.body.post_id ? Number(req.body.post_id) : null;
     if (req.body.approver_ids !== undefined) data.approver_ids = req.body.approver_ids || null;
 
     if (Object.keys(data).length === 0) return res.status(400).json({ error: 'No fields to update' });
@@ -4467,6 +4474,7 @@ app.patch('/api/translations/:id', requireAuth, async (req, res) => {
     res.json({
       ...record,
       brand_name: await getRecordName('Brands', record.brand_id),
+      post_name: await getRecordName('Posts', record.post_id),
       creator_name: await getRecordName('Users', record.created_by_user_id),
       approvers,
     });
@@ -4521,32 +4529,43 @@ app.post('/api/translations/:id/texts', requireAuth, async (req, res) => {
     const translation = await nocodb.get('Translations', req.params.id);
     if (!translation) return res.status(404).json({ error: 'Translation not found' });
 
-    // Check if text for this language already exists (upsert)
+    // Count existing options for this language to assign option_number
     const existing = await nocodb.list('TranslationTexts', {
       where: `(translation_id,eq,${sanitizeWhereValue(req.params.id)})~and(language_code,eq,${sanitizeWhereValue(language_code)})`,
-      limit: 1,
+      limit: QUERY_LIMITS.large,
     });
+    const optionNumber = existing.length + 1;
 
-    let result;
-    if (existing.length > 0) {
-      await nocodb.update('TranslationTexts', existing[0].Id, { content, language_label: language_label || language_code });
-      result = await nocodb.get('TranslationTexts', existing[0].Id);
-    } else {
-      result = await nocodb.create('TranslationTexts', {
-        translation_id: Number(req.params.id),
-        language_code,
-        language_label: language_label || language_code,
-        content,
-      });
-    }
+    const result = await nocodb.create('TranslationTexts', {
+      translation_id: Number(req.params.id),
+      language_code,
+      language_label: language_label || language_code,
+      content,
+      option_number: optionNumber,
+      is_selected: false,
+    });
 
     res.json(result);
   } catch (err) {
-    console.error('Add/update translation text error:', err);
+    console.error('Add translation text error:', err);
     res.status(500).json({ error: 'Failed to save translation text' });
   }
 });
 
+// Update translation text content
+app.patch('/api/translations/:id/texts/:textId', requireAuth, async (req, res) => {
+  const { content } = req.body;
+  if (!content) return res.status(400).json({ error: 'Content is required' });
+  try {
+    await nocodb.update('TranslationTexts', req.params.textId, { content });
+    const result = await nocodb.get('TranslationTexts', req.params.textId);
+    res.json(result);
+  } catch (err) {
+    console.error('Update translation text error:', err);
+    res.status(500).json({ error: 'Failed to update translation text' });
+  }
+});
+
 // Delete translation text
 app.delete('/api/translations/:id/texts/:textId', requireAuth, async (req, res) => {
   try {
@@ -4558,6 +4577,85 @@ app.delete('/api/translations/:id/texts/:textId', requireAuth, async (req, res)
   }
 });
 
+// Select a translation option (used by approver via public review)
+app.post('/api/public/review-translation/:token/select', async (req, res) => {
+  const { text_id } = req.body;
+  if (!text_id) return res.status(400).json({ error: 'text_id is required' });
+
+  try {
+    const translations = await nocodb.list('Translations', {
+      where: `(approval_token,eq,${sanitizeWhereValue(req.params.token)})`,
+      limit: 1,
+    });
+    if (translations.length === 0) return res.status(404).json({ error: 'Review link not found' });
+    const translation = translations[0];
+
+    if (translation.token_expires_at && new Date(translation.token_expires_at) < new Date()) {
+      return res.status(410).json({ error: 'Review link has expired' });
+    }
+
+    // Get the text being selected to find its language
+    const textToSelect = await nocodb.get('TranslationTexts', text_id);
+    if (!textToSelect || textToSelect.translation_id !== translation.Id) {
+      return res.status(400).json({ error: 'Invalid text selection' });
+    }
+
+    // Deselect all options for this language, then select the chosen one
+    const sameLanguage = await nocodb.list('TranslationTexts', {
+      where: `(translation_id,eq,${translation.Id})~and(language_code,eq,${sanitizeWhereValue(textToSelect.language_code)})`,
+      limit: QUERY_LIMITS.large,
+    });
+    for (const t of sameLanguage) {
+      await nocodb.update('TranslationTexts', t.Id, { is_selected: t.Id === Number(text_id) });
+    }
+
+    res.json({ success: true });
+  } catch (err) {
+    console.error('Select translation error:', err);
+    res.status(500).json({ error: 'Failed to select translation' });
+  }
+});
+
+// Public: Approver suggests a new/modified translation option
+app.post('/api/public/review-translation/:token/suggest', async (req, res) => {
+  const { language_code, language_label, content, suggested_by } = req.body;
+  if (!language_code || !content) return res.status(400).json({ error: 'Language code and content are required' });
+
+  try {
+    const translations = await nocodb.list('Translations', {
+      where: `(approval_token,eq,${sanitizeWhereValue(req.params.token)})`,
+      limit: 1,
+    });
+    if (translations.length === 0) return res.status(404).json({ error: 'Review link not found' });
+    const translation = translations[0];
+
+    if (translation.token_expires_at && new Date(translation.token_expires_at) < new Date()) {
+      return res.status(410).json({ error: 'Review link has expired' });
+    }
+
+    // Count existing options for this language
+    const existing = await nocodb.list('TranslationTexts', {
+      where: `(translation_id,eq,${translation.Id})~and(language_code,eq,${sanitizeWhereValue(language_code)})`,
+      limit: QUERY_LIMITS.large,
+    });
+    const optionNumber = existing.length + 1;
+
+    const result = await nocodb.create('TranslationTexts', {
+      translation_id: translation.Id,
+      language_code,
+      language_label: language_label || language_code,
+      content: suggested_by ? `[Suggested by ${suggested_by}] ${content}` : content,
+      option_number: optionNumber,
+      is_selected: false,
+    });
+
+    res.json(result);
+  } catch (err) {
+    console.error('Suggest translation error:', err);
+    res.status(500).json({ error: 'Failed to add suggestion' });
+  }
+});
+
 // Submit translation for review
 app.post('/api/translations/:id/submit-review', requireAuth, async (req, res) => {
   try {