@@ -179,194 +247,125 @@ export default function PublicIssueSubmit() {
}
return (
-
+
+
{/* Header */}
-
Submit an Issue
-
- Report issues, request corrections, or make suggestions. We'll track your submission and keep you updated.
-
+
{t('pageTitle')}
+
{t('pageSubtitle')}
{/* Form */}
- {/* Footer Note */}
-
- You'll receive a tracking link to monitor the progress of your issue.
-
+
{t('footerNote')}
)
diff --git a/client/src/pages/PublicIssueTracker.jsx b/client/src/pages/PublicIssueTracker.jsx
index 94f3e22..158bd24 100644
--- a/client/src/pages/PublicIssueTracker.jsx
+++ b/client/src/pages/PublicIssueTracker.jsx
@@ -1,56 +1,126 @@
import { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
-import { AlertCircle, Clock, CheckCircle2, XCircle, MessageCircle, Upload, FileText, Send } from 'lucide-react'
+import { AlertCircle, Clock, CheckCircle2, XCircle, MessageCircle, Upload, FileText, Send, Globe } from 'lucide-react'
import { api } from '../utils/api'
import { useToast } from '../components/ToastContainer'
-const STATUS_CONFIG = {
- new: { label: 'New', bg: 'bg-purple-100', text: 'text-purple-700', dot: 'bg-purple-500', icon: AlertCircle },
- acknowledged: { label: 'Acknowledged', bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500', icon: CheckCircle2 },
- in_progress: { label: 'In Progress', bg: 'bg-amber-100', text: 'text-amber-700', dot: 'bg-amber-500', icon: Clock },
- resolved: { label: 'Resolved', bg: 'bg-emerald-100', text: 'text-emerald-700', dot: 'bg-emerald-500', icon: CheckCircle2 },
- declined: { label: 'Declined', bg: 'bg-gray-100', text: 'text-gray-700', dot: 'bg-gray-500', icon: XCircle },
+// ─── Bilingual translations ────────────────────────────────────
+const T = {
+ en: {
+ description: 'Description',
+ submitted: 'Submitted',
+ lastUpdated: 'Last Updated',
+ resolution: 'Resolution',
+ declined: 'Declined',
+ progressUpdates: 'Progress Updates',
+ noUpdates: 'No updates yet. We\'ll post updates here as we work on your issue.',
+ team: 'Team', you: 'You',
+ attachments: 'Attachments',
+ download: 'Download',
+ addComment: 'Add a Comment',
+ yourName: 'Your Name (Optional)',
+ yourNamePlaceholder: 'Your name',
+ message: 'Message',
+ messagePlaceholder: 'Add additional information or ask a question...',
+ sendComment: 'Send Comment',
+ sending: 'Sending...',
+ uploadFile: 'Upload File',
+ uploading: 'Uploading...',
+ bookmarkNote: 'Bookmark this page to check your issue status anytime.',
+ notFoundTitle: 'Issue Not Found',
+ notFoundMessage: 'The tracking link you used is invalid or the issue has been removed.',
+ submitNew: 'Submit a New Issue',
+ failedComment: 'Failed to add comment',
+ failedUpload: 'Failed to upload file',
+ priority: 'Priority',
+ // Status
+ new: 'New', acknowledged: 'Acknowledged', in_progress: 'In Progress', resolved: 'Resolved', declined_status: 'Declined',
+ // Priority
+ low: 'Low', medium: 'Medium', high: 'High', urgent: 'Urgent',
+ },
+ ar: {
+ description: 'الوصف',
+ submitted: 'تم التقديم',
+ lastUpdated: 'آخر تحديث',
+ resolution: 'الحل',
+ declined: 'مرفوض',
+ progressUpdates: 'تحديثات التقدم',
+ noUpdates: 'لا توجد تحديثات بعد. سننشر التحديثات هنا أثناء العمل على مشكلتك.',
+ team: 'الفريق', you: 'أنت',
+ attachments: 'المرفقات',
+ download: 'تحميل',
+ addComment: 'إضافة تعليق',
+ yourName: 'اسمك (اختياري)',
+ yourNamePlaceholder: 'اسمك',
+ message: 'الرسالة',
+ messagePlaceholder: 'أضف معلومات إضافية أو اطرح سؤالاً...',
+ sendComment: 'إرسال التعليق',
+ sending: 'جارٍ الإرسال...',
+ uploadFile: 'رفع ملف',
+ uploading: 'جارٍ الرفع...',
+ bookmarkNote: 'احفظ هذه الصفحة للاطلاع على حالة مشكلتك في أي وقت.',
+ notFoundTitle: 'المشكلة غير موجودة',
+ notFoundMessage: 'رابط التتبع الذي استخدمته غير صالح أو تمت إزالة المشكلة.',
+ submitNew: 'تقديم مشكلة جديدة',
+ failedComment: 'فشل في إضافة التعليق',
+ failedUpload: 'فشل في رفع الملف',
+ priority: 'الأولوية',
+ new: 'جديد', acknowledged: 'تم الاستلام', in_progress: 'قيد التنفيذ', resolved: 'تم الحل', declined_status: 'مرفوض',
+ low: 'منخفضة', medium: 'متوسطة', high: 'عالية', urgent: 'عاجلة',
+ },
}
-const PRIORITY_CONFIG = {
- low: { label: 'Low', color: 'text-gray-700' },
- medium: { label: 'Medium', color: 'text-blue-700' },
- high: { label: 'High', color: 'text-orange-700' },
- urgent: { label: 'Urgent', color: 'text-red-700' },
+function detectLang() {
+ const nav = navigator.language || navigator.userLanguage || ''
+ return nav.startsWith('ar') ? 'ar' : 'en'
+}
+
+function LangToggle({ lang, setLang }) {
+ return (
+
+ )
}
export default function PublicIssueTracker() {
const { token } = useParams()
const toast = useToast()
+ const [lang, setLang] = useState(detectLang)
+ const t = (key) => T[lang]?.[key] || T.en[key] || key
+ const dir = lang === 'ar' ? 'rtl' : 'ltr'
+
+ useEffect(() => {
+ document.documentElement.dir = dir
+ document.documentElement.lang = lang
+ return () => { document.documentElement.dir = 'ltr'; document.documentElement.lang = 'en' }
+ }, [lang, dir])
+
const [issue, setIssue] = useState(null)
const [updates, setUpdates] = useState([])
const [attachments, setAttachments] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
-
- // Comment form
const [commentName, setCommentName] = useState('')
const [commentMessage, setCommentMessage] = useState('')
const [submittingComment, setSubmittingComment] = useState(false)
-
- // File upload
const [uploadingFile, setUploadingFile] = useState(false)
- useEffect(() => {
- loadIssue()
- }, [token])
+ useEffect(() => { loadIssue() }, [token])
const loadIssue = async () => {
try {
- setLoading(true)
- setError(null)
+ setLoading(true); setError(null)
const data = await api.get(`/public/issues/${token}`)
setIssue(data.issue)
setUpdates(data.updates || [])
setAttachments(data.attachments || [])
} catch (err) {
- console.error('Failed to load issue:', err)
- setError(err.response?.status === 404 ? 'Issue not found' : 'Failed to load issue')
+ setError(err.response?.status === 404 ? 'notFound' : 'error')
} finally {
setLoading(false)
}
@@ -59,27 +129,18 @@ export default function PublicIssueTracker() {
const handleAddComment = async (e) => {
e.preventDefault()
if (!commentMessage.trim() || submittingComment) return
-
try {
setSubmittingComment(true)
- await api.post(`/public/issues/${token}/comment`, {
- name: commentName.trim() || 'Anonymous',
- message: commentMessage,
- })
+ await api.post(`/public/issues/${token}/comment`, { name: commentName.trim() || 'Anonymous', message: commentMessage })
setCommentMessage('')
await loadIssue()
- } catch (err) {
- console.error('Failed to add comment:', err)
- toast.error('Failed to add comment')
- } finally {
- setSubmittingComment(false)
- }
+ } catch { toast.error(t('failedComment')) }
+ finally { setSubmittingComment(false) }
}
const handleFileUpload = async (e) => {
const file = e.target.files?.[0]
if (!file) return
-
try {
setUploadingFile(true)
const formData = new FormData()
@@ -87,52 +148,52 @@ export default function PublicIssueTracker() {
formData.append('name', commentName.trim() || 'Anonymous')
await api.upload(`/public/issues/${token}/attachments`, formData)
await loadIssue()
- e.target.value = '' // Reset input
- } catch (err) {
- console.error('Failed to upload file:', err)
- toast.error('Failed to upload file')
- } finally {
- setUploadingFile(false)
- }
+ e.target.value = ''
+ } catch { toast.error(t('failedUpload')) }
+ finally { setUploadingFile(false) }
}
- const formatDate = (dateStr) => {
+ const dateFmt = (dateStr) => {
if (!dateStr) return ''
- const date = new Date(dateStr)
- return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
+ return new Date(dateStr).toLocaleDateString(lang === 'ar' ? 'ar-SA' : 'en-US', { month: 'long', day: 'numeric', year: 'numeric' })
}
- const formatDateTime = (dateStr) => {
+ const dateTimeFmt = (dateStr) => {
if (!dateStr) return ''
- const date = new Date(dateStr)
- return date.toLocaleString('en-US', {
- month: 'short',
- day: 'numeric',
- year: 'numeric',
- hour: '2-digit',
- minute: '2-digit',
- })
+ return new Date(dateStr).toLocaleString(lang === 'ar' ? 'ar-SA' : 'en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' })
}
- const formatFileSize = (bytes) => {
+ const fileSize = (bytes) => {
if (bytes < 1024) return bytes + ' B'
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
}
+ const STATUS_CONFIG = {
+ new: { label: t('new'), bg: 'bg-purple-100', text: 'text-purple-700', dot: 'bg-purple-500', icon: AlertCircle },
+ acknowledged: { label: t('acknowledged'), bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500', icon: CheckCircle2 },
+ in_progress: { label: t('in_progress'), bg: 'bg-amber-100', text: 'text-amber-700', dot: 'bg-amber-500', icon: Clock },
+ resolved: { label: t('resolved'), bg: 'bg-emerald-100', text: 'text-emerald-700', dot: 'bg-emerald-500', icon: CheckCircle2 },
+ declined: { label: t('declined_status'), bg: 'bg-gray-100', text: 'text-gray-700', dot: 'bg-gray-500', icon: XCircle },
+ }
+
+ const PRIORITY_CONFIG = {
+ low: { label: t('low'), color: 'text-gray-700' },
+ medium: { label: t('medium'), color: 'text-blue-700' },
+ high: { label: t('high'), color: 'text-orange-700' },
+ urgent: { label: t('urgent'), color: 'text-red-700' },
+ }
+
if (loading) {
return (
-
+
@@ -141,20 +202,16 @@ export default function PublicIssueTracker() {
if (error) {
return (
-
+
@@ -164,22 +221,22 @@ export default function PublicIssueTracker() {
if (!issue) return null
const statusConfig = STATUS_CONFIG[issue.status] || STATUS_CONFIG.new
- const StatusIcon = statusConfig.icon
const priorityConfig = PRIORITY_CONFIG[issue.priority] || PRIORITY_CONFIG.medium
return (
-
+
+
{/* Header */}
-
+
{statusConfig.label}
- {priorityConfig.label} Priority
+ {priorityConfig.label} {t('priority')}
•
{issue.type}
@@ -188,18 +245,18 @@ export default function PublicIssueTracker() {
-
Description
+
{t('description')}
{issue.description}
- Submitted:
- {formatDate(issue.created_at)}
+ {t('submitted')}:
+ {dateFmt(issue.created_at)}
- Last Updated:
- {formatDate(issue.updated_at)}
+ {t('lastUpdated')}:
+ {dateFmt(issue.updated_at)}
@@ -208,21 +265,19 @@ export default function PublicIssueTracker() {
{(issue.status === 'resolved' || issue.status === 'declined') && issue.resolution_summary && (
- {issue.status === 'resolved' ? (
-
- ) : (
-
- )}
+ {issue.status === 'resolved'
+ ?
+ :
}
- {issue.status === 'resolved' ? 'Resolution' : 'Declined'}
+ {issue.status === 'resolved' ? t('resolution') : t('declined')}
{issue.resolution_summary}
{issue.resolved_at && (
- {formatDate(issue.resolved_at)}
+ {dateFmt(issue.resolved_at)}
)}
@@ -234,26 +289,25 @@ export default function PublicIssueTracker() {
- Progress Updates
+ {t('progressUpdates')}
-
{updates.length === 0 ? (
-
No updates yet. We'll post updates here as we work on your issue.
+
{t('noUpdates')}
) : (
{updates.map((update, idx) => (
-
+
{update.author_name}
- {update.author_type === 'staff' ? 'Team' : 'You'}
+ {update.author_type === 'staff' ? t('team') : t('you')}
-
{formatDateTime(update.created_at)}
+
{dateTimeFmt(update.created_at)}
{update.message}
@@ -267,7 +321,7 @@ export default function PublicIssueTracker() {
- Attachments
+ {t('attachments')}
{attachments.map((att) => (
@@ -276,18 +330,12 @@ export default function PublicIssueTracker() {
{att.original_name}
-
- {formatFileSize(att.size)} • {att.uploaded_by}
-
+
{fileSize(att.size)} • {att.uploaded_by}
-
- Download
+
+ {t('download')}
))}
@@ -295,55 +343,39 @@ export default function PublicIssueTracker() {
)}
- {/* Add Comment Section */}
+ {/* Add Comment */}
{issue.status !== 'resolved' && issue.status !== 'declined' && (
- Add a Comment
+ {t('addComment')}
-