479 lines
20 KiB
JavaScript
479 lines
20 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import { useParams } from 'react-router-dom'
|
|
import { CheckCircle, XCircle, AlertCircle, FileText, Image as ImageIcon, Film, Sparkles, Globe } from 'lucide-react'
|
|
|
|
const STATUS_ICONS = {
|
|
copy: FileText,
|
|
design: ImageIcon,
|
|
video: Film,
|
|
other: Sparkles,
|
|
}
|
|
|
|
export default function PublicReview() {
|
|
const { token } = useParams()
|
|
const [artefact, setArtefact] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState('')
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [success, setSuccess] = useState('')
|
|
const [reviewerName, setReviewerName] = useState('')
|
|
const [feedback, setFeedback] = useState('')
|
|
const [selectedLanguage, setSelectedLanguage] = useState(0)
|
|
|
|
useEffect(() => {
|
|
loadArtefact()
|
|
}, [token])
|
|
|
|
const loadArtefact = async () => {
|
|
try {
|
|
const res = await fetch(`/api/public/review/${token}`)
|
|
if (!res.ok) {
|
|
const err = await res.json()
|
|
setError(err.error || 'Failed to load artefact')
|
|
setLoading(false)
|
|
return
|
|
}
|
|
const data = await res.json()
|
|
setArtefact(data)
|
|
} catch (err) {
|
|
setError('Failed to load artefact')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleAction = async (action) => {
|
|
if (!reviewerName.trim()) {
|
|
alert('Please enter your name')
|
|
return
|
|
}
|
|
|
|
if (action === 'approve' && !confirm('Approve this artefact?')) return
|
|
if (action === 'reject' && !confirm('Reject this artefact?')) return
|
|
if (action === 'revision' && !feedback.trim()) {
|
|
alert('Please provide feedback for revision request')
|
|
return
|
|
}
|
|
|
|
setSubmitting(true)
|
|
try {
|
|
const res = await fetch(`/api/public/review/${token}/${action}`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
approved_by_name: reviewerName,
|
|
feedback: feedback || undefined,
|
|
}),
|
|
})
|
|
|
|
if (!res.ok) {
|
|
const err = await res.json()
|
|
setError(err.error || 'Action failed')
|
|
setSubmitting(false)
|
|
return
|
|
}
|
|
|
|
const data = await res.json()
|
|
setSuccess(data.message || 'Action completed successfully')
|
|
setTimeout(() => {
|
|
loadArtefact()
|
|
}, 1500)
|
|
} catch (err) {
|
|
setError('Action failed')
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const extractDriveFileId = (url) => {
|
|
const patterns = [
|
|
/\/file\/d\/([^\/]+)/,
|
|
/id=([^&]+)/,
|
|
/\/d\/([^\/]+)/,
|
|
]
|
|
|
|
for (const pattern of patterns) {
|
|
const match = url.match(pattern)
|
|
if (match) return match[1]
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
const getDriveEmbedUrl = (url) => {
|
|
const fileId = extractDriveFileId(url)
|
|
return fileId ? `https://drive.google.com/file/d/${fileId}/preview` : url
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-surface-secondary flex items-center justify-center">
|
|
<div className="max-w-3xl w-full mx-auto px-4 space-y-6 animate-pulse">
|
|
<div className="bg-surface rounded-2xl overflow-hidden">
|
|
<div className="h-24 bg-surface-tertiary"></div>
|
|
<div className="p-8 space-y-4">
|
|
<div className="h-6 bg-surface-tertiary rounded w-2/3"></div>
|
|
<div className="h-4 bg-surface-tertiary rounded w-1/2"></div>
|
|
<div className="h-32 bg-surface-tertiary rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="min-h-screen bg-surface-secondary flex items-center justify-center p-4">
|
|
<div className="max-w-md w-full bg-surface rounded-2xl shadow-sm p-8 text-center">
|
|
<div className="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
|
|
<XCircle className="w-8 h-8 text-red-600" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-text-primary mb-2">Review Not Available</h2>
|
|
<p className="text-text-secondary">{error}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (success) {
|
|
return (
|
|
<div className="min-h-screen bg-surface-secondary flex items-center justify-center p-4">
|
|
<div className="max-w-md w-full bg-surface rounded-2xl shadow-sm p-8 text-center">
|
|
<div className="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
|
|
<CheckCircle className="w-8 h-8 text-emerald-600" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-text-primary mb-2">Thank You!</h2>
|
|
<p className="text-text-secondary">{success}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!artefact) return null
|
|
|
|
const TypeIcon = STATUS_ICONS[artefact.type] || Sparkles
|
|
const isImage = (url) => /\.(jpg|jpeg|png|gif|webp)$/i.test(url)
|
|
|
|
return (
|
|
<div className="min-h-screen bg-surface-secondary py-12 px-4">
|
|
<div className="max-w-3xl mx-auto">
|
|
{/* Header */}
|
|
<div className="bg-surface rounded-2xl shadow-sm overflow-hidden mb-6">
|
|
<div className="bg-brand-primary px-8 py-6">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
|
|
<Sparkles className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Content Review</h1>
|
|
<p className="text-white/80 text-sm">Samaya Digital Hub</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8">
|
|
{/* Artefact Info */}
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div className="w-12 h-12 rounded-xl bg-brand-primary/10 flex items-center justify-center shrink-0">
|
|
<TypeIcon className="w-6 h-6 text-brand-primary" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h2 className="text-2xl font-bold text-text-primary mb-1">{artefact.title}</h2>
|
|
{artefact.description && (
|
|
<p className="text-text-secondary mb-2">{artefact.description}</p>
|
|
)}
|
|
<div className="flex items-center gap-3 text-sm text-text-tertiary">
|
|
<span className="px-2 py-0.5 bg-surface-tertiary rounded-full capitalize">{artefact.type}</span>
|
|
{artefact.brand_name && <span>• {artefact.brand_name}</span>}
|
|
{artefact.version_number && <span>• Version {artefact.version_number}</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* COPY TYPE: Multilingual Content */}
|
|
{artefact.type === 'copy' && artefact.texts && artefact.texts.length > 0 && (
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Globe className="w-4 h-4 text-text-tertiary" />
|
|
<h3 className="text-sm font-semibold text-text-tertiary uppercase">Content Languages</h3>
|
|
</div>
|
|
|
|
{/* Language tabs */}
|
|
<div className="flex items-center gap-2 mb-4 flex-wrap">
|
|
{artefact.texts.map((text, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => setSelectedLanguage(idx)}
|
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
|
selectedLanguage === idx
|
|
? 'bg-brand-primary text-white shadow-sm'
|
|
: 'bg-surface-tertiary text-text-secondary hover:bg-surface-tertiary/70'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-mono">{text.language_code}</span>
|
|
<span className="text-sm">{text.language_label}</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Selected language content */}
|
|
<div className="bg-surface-secondary rounded-xl p-6 border border-border">
|
|
<div className="mb-2 text-xs font-semibold text-text-tertiary uppercase">
|
|
{artefact.texts[selectedLanguage].language_label} Content
|
|
</div>
|
|
<div className="text-text-primary whitespace-pre-wrap leading-relaxed">
|
|
{artefact.texts[selectedLanguage].content}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Legacy content field (for backward compatibility) */}
|
|
{artefact.content && (!artefact.texts || artefact.texts.length === 0) && (
|
|
<div className="mb-6">
|
|
<h3 className="text-sm font-semibold text-text-tertiary uppercase mb-2">Content</h3>
|
|
<div className="bg-surface-secondary rounded-xl p-4 border border-border">
|
|
<pre className="text-text-primary whitespace-pre-wrap font-sans text-sm leading-relaxed">
|
|
{artefact.content}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* DESIGN TYPE: Image Gallery */}
|
|
{artefact.type === 'design' && artefact.attachments && artefact.attachments.length > 0 && (
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<ImageIcon className="w-4 h-4 text-text-tertiary" />
|
|
<h3 className="text-sm font-semibold text-text-tertiary uppercase">Design Files</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{artefact.attachments.map((att, idx) => (
|
|
<a
|
|
key={idx}
|
|
href={att.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block rounded-xl overflow-hidden border-2 border-border hover:border-brand-primary transition-colors shadow-sm hover:shadow-sm"
|
|
>
|
|
<img
|
|
src={att.url}
|
|
alt={att.original_name || `Design ${idx + 1}`}
|
|
className="w-full h-64 object-cover"
|
|
/>
|
|
{att.original_name && (
|
|
<div className="bg-surface-secondary px-4 py-2 border-t border-border">
|
|
<p className="text-sm text-text-secondary truncate">{att.original_name}</p>
|
|
</div>
|
|
)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* VIDEO TYPE: Video Player or Drive Embed */}
|
|
{artefact.type === 'video' && artefact.attachments && artefact.attachments.length > 0 && (
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Film className="w-4 h-4 text-text-tertiary" />
|
|
<h3 className="text-sm font-semibold text-text-tertiary uppercase">Videos</h3>
|
|
</div>
|
|
<div className="space-y-4">
|
|
{artefact.attachments.map((att, idx) => (
|
|
<div key={idx} className="bg-surface-secondary rounded-xl overflow-hidden border border-border">
|
|
{att.drive_url ? (
|
|
<div>
|
|
<div className="px-4 py-2 bg-surface border-b border-border flex items-center gap-2">
|
|
<Globe className="w-4 h-4 text-text-tertiary" />
|
|
<span className="text-sm font-medium text-text-secondary">Google Drive Video</span>
|
|
</div>
|
|
<iframe
|
|
src={getDriveEmbedUrl(att.drive_url)}
|
|
className="w-full h-96"
|
|
allow="autoplay"
|
|
title={`Video ${idx + 1}`}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{att.original_name && (
|
|
<div className="px-4 py-2 bg-surface border-b border-border">
|
|
<span className="text-sm font-medium text-text-secondary">{att.original_name}</span>
|
|
</div>
|
|
)}
|
|
<video
|
|
src={att.url}
|
|
controls
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* OTHER TYPE: Generic Attachments */}
|
|
{artefact.type === 'other' && artefact.attachments && artefact.attachments.length > 0 && (
|
|
<div className="mb-6">
|
|
<h3 className="text-sm font-semibold text-text-tertiary uppercase mb-3">Attachments</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{artefact.attachments.map((att, idx) => (
|
|
<div key={idx}>
|
|
{isImage(att.url) ? (
|
|
<a
|
|
href={att.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block rounded-xl overflow-hidden border border-border hover:border-brand-primary transition-colors"
|
|
>
|
|
<img
|
|
src={att.url}
|
|
alt={att.original_name}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
<div className="bg-surface-secondary px-3 py-2 border-t border-border">
|
|
<p className="text-xs text-text-secondary truncate">{att.original_name}</p>
|
|
</div>
|
|
</a>
|
|
) : (
|
|
<a
|
|
href={att.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-3 p-4 bg-surface-secondary rounded-xl border border-border hover:border-brand-primary transition-colors"
|
|
>
|
|
<FileText className="w-8 h-8 text-text-tertiary shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-text-primary truncate">{att.original_name}</p>
|
|
{att.size && (
|
|
<p className="text-xs text-text-tertiary">
|
|
{(att.size / 1024).toFixed(1)} KB
|
|
</p>
|
|
)}
|
|
</div>
|
|
</a>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Comments */}
|
|
{artefact.comments && artefact.comments.length > 0 && (
|
|
<div className="mb-6">
|
|
<h3 className="text-sm font-semibold text-text-tertiary uppercase mb-3">Previous Comments</h3>
|
|
<div className="space-y-3">
|
|
{artefact.comments.map((comment, idx) => (
|
|
<div key={idx} className="bg-surface-secondary rounded-lg p-3 border border-border">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="text-sm font-medium text-text-primary">
|
|
{comment.user_name || comment.author_name || 'Anonymous'}
|
|
</span>
|
|
{comment.CreatedAt && (
|
|
<span className="text-xs text-text-tertiary">
|
|
• {new Date(comment.CreatedAt).toLocaleDateString()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-text-secondary whitespace-pre-wrap">{comment.content}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Review Form */}
|
|
{artefact.status === 'pending_review' && (
|
|
<div className="border-t border-border pt-6">
|
|
<h3 className="text-lg font-semibold text-text-primary mb-4">Your Review</h3>
|
|
|
|
<div className="space-y-4 mb-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-primary mb-1">Your Name *</label>
|
|
<input
|
|
type="text"
|
|
value={reviewerName}
|
|
onChange={e => setReviewerName(e.target.value)}
|
|
placeholder="Enter your name"
|
|
className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary bg-surface transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-primary mb-1">Feedback (optional)</label>
|
|
<textarea
|
|
value={feedback}
|
|
onChange={e => setFeedback(e.target.value)}
|
|
rows={4}
|
|
placeholder="Share your thoughts, suggestions, or required changes..."
|
|
className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary bg-surface transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<button
|
|
onClick={() => handleAction('approve')}
|
|
disabled={submitting}
|
|
className="flex items-center justify-center gap-2 px-4 py-3 bg-emerald-600 text-white rounded-xl font-medium hover:bg-emerald-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
|
|
>
|
|
<CheckCircle className="w-5 h-5" />
|
|
Approve
|
|
</button>
|
|
<button
|
|
onClick={() => handleAction('revision')}
|
|
disabled={submitting}
|
|
className="flex items-center justify-center gap-2 px-4 py-3 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
|
|
>
|
|
<AlertCircle className="w-5 h-5" />
|
|
Request Revision
|
|
</button>
|
|
<button
|
|
onClick={() => handleAction('reject')}
|
|
disabled={submitting}
|
|
className="flex items-center justify-center gap-2 px-4 py-3 bg-red-600 text-white rounded-xl font-medium hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
|
|
>
|
|
<XCircle className="w-5 h-5" />
|
|
Reject
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Already Reviewed */}
|
|
{artefact.status !== 'pending_review' && (
|
|
<div className="border-t border-border pt-6">
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4 text-center">
|
|
<p className="text-blue-900 font-medium">
|
|
This artefact has already been reviewed.
|
|
</p>
|
|
<p className="text-blue-700 text-sm mt-1">
|
|
Status: <span className="font-semibold capitalize">{artefact.status.replace('_', ' ')}</span>
|
|
</p>
|
|
{artefact.approved_by_name && (
|
|
<p className="text-blue-700 text-sm mt-1">
|
|
Reviewed by: <span className="font-semibold">{artefact.approved_by_name}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="text-center text-text-tertiary text-sm">
|
|
<p>Powered by Samaya Digital Hub</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|