57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
const PRIORITY_CONFIG = {
|
|
low: { label: 'Low', dot: 'bg-text-tertiary' },
|
|
medium: { label: 'Medium', dot: 'bg-blue-500' },
|
|
high: { label: 'High', dot: 'bg-orange-500' },
|
|
urgent: { label: 'Urgent', dot: 'bg-red-500' },
|
|
}
|
|
|
|
const TYPE_LABELS = {
|
|
request: 'Request',
|
|
correction: 'Correction',
|
|
complaint: 'Complaint',
|
|
suggestion: 'Suggestion',
|
|
other: 'Other',
|
|
}
|
|
|
|
export default function IssueCard({ issue, onClick }) {
|
|
const priority = PRIORITY_CONFIG[issue.priority] || PRIORITY_CONFIG.medium
|
|
|
|
const formatDate = (dateStr) => {
|
|
if (!dateStr) return ''
|
|
return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
|
|
}
|
|
|
|
return (
|
|
<div
|
|
onClick={() => onClick?.(issue)}
|
|
className="bg-surface border border-border rounded-lg p-3 cursor-pointer hover:border-brand-primary/30 hover:shadow-sm transition-all"
|
|
>
|
|
{/* Priority dot + Title */}
|
|
<div className="flex items-start gap-2 mb-2">
|
|
<span className={`w-2 h-2 rounded-full mt-1.5 shrink-0 ${priority.dot}`} />
|
|
<h4 className="text-sm font-medium text-text-primary line-clamp-2">{issue.title}</h4>
|
|
</div>
|
|
|
|
{/* Metadata */}
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{issue.category && (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-secondary font-medium">
|
|
{issue.category}
|
|
</span>
|
|
)}
|
|
{issue.brand_name && (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded bg-brand-primary/10 text-brand-primary font-medium">
|
|
{issue.brand_name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-between mt-2 text-[10px] text-text-tertiary">
|
|
<span className="truncate max-w-[60%]">{issue.submitter_name}</span>
|
|
<span>{formatDate(issue.created_at || issue.CreatedAt)}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|