{"path":"apps/dashboard/src/components/job-card.tsx","size":2621,"locked":false,"binary":false,"truncated":false,"content":"import { Link } from \"wouter\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport { StatusBadge } from \"@/components/status-badge\";\nimport { formatLamports, truncatePubkey, formatDate } from \"@/lib/format\";\n\ninterface Job {\n  id: number;\n  jobId: string;\n  clientPubkey: string;\n  freelancerPubkey: string;\n  amountLamports: string;\n  status: string;\n  description?: string | null;\n  createdAt: string;\n}\n\nexport function JobCard({ job }: { job: Job }) {\n  return (\n    <Link href={`/jobs/${job.jobId}`}>\n      <div className=\"group relative glass rounded-2xl p-5 glass-hover transition-all duration-300 cursor-pointer hover:shadow-[0_8px_32px_rgba(20,241,149,0.08)] hover:-translate-y-0.5 overflow-hidden\">\n        {/* Subtle gradient accent line */}\n        <div className=\"absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300\" />\n\n        <div className=\"flex items-start justify-between gap-3 mb-3\">\n          <span className=\"text-sm font-mono font-bold text-emerald-400 leading-tight tracking-tight\">\n            {job.jobId}\n          </span>\n          <StatusBadge status={job.status} />\n        </div>\n\n        {job.description && (\n          <p className=\"text-xs text-muted-foreground mb-4 line-clamp-2 leading-relaxed\">\n            {job.description}\n          </p>\n        )}\n\n        <div className=\"grid grid-cols-2 gap-y-2 text-xs font-mono\">\n          <span className=\"text-muted-foreground/60\">Client</span>\n          <span className=\"text-right text-foreground/80\" title={job.clientPubkey}>\n            {truncatePubkey(job.clientPubkey)}\n          </span>\n          <span className=\"text-muted-foreground/60\">Freelancer</span>\n          <span className=\"text-right text-foreground/80\" title={job.freelancerPubkey}>\n            {truncatePubkey(job.freelancerPubkey)}\n          </span>\n          <span className=\"text-muted-foreground/60\">Amount</span>\n          <span className=\"text-right font-semibold text-emerald-400\">\n            ◎ {formatLamports(job.amountLamports)}\n          </span>\n        </div>\n\n        <div className=\"mt-4 pt-3 border-t border-white/[0.06] flex items-center justify-between\">\n          <span className=\"text-[10px] text-muted-foreground/50 font-mono\">{formatDate(job.createdAt)}</span>\n          <span className=\"flex items-center gap-1 text-[11px] text-emerald-400/70 group-hover:text-emerald-400 font-mono transition-colors duration-200\">\n            View <ArrowUpRight className=\"w-3 h-3\" />\n          </span>\n        </div>\n      </div>\n    </Link>\n  );\n}\n"}