fahed/marketing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify translations — shared utils, deduplicated code

Browse Source 
- 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>
This commit is contained in:
fahed
2026-03-11 17:27:57 +03:00
parent 7ace32a070
commit ba3900bc33
8 changed files with 826 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/TranslationDetailPanel.jsx
+187 -105
View File
@@ -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>
client/src/i18n/ar.json
+47 -3
View File
@@ -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": "فشل إنشاء المنشور"
}
client/src/i18n/en.json
+48 -4
View File
@@ -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"
}
client/src/pages/PublicTranslationReview.jsx
+279 -29
View File
@@ -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>
client/src/pages/Translations.jsx
+79 -31
View File
@@ -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')}
client/src/utils/translations.js
+30
View File
@@ -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
}