updates

client/src/components/IssueCard.jsx

@@ -0,0 +1,56 @@
+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>
+  )
+}