{"path":"apps/dashboard/src/pages/job-detail.tsx","size":18751,"locked":false,"binary":false,"truncated":false,"content":"import { useState } from \"react\";\nimport { useParams, Link } from \"wouter\";\nimport { ChevronLeft, ExternalLink, Plus, Trash2, CheckCircle2, XCircle, AlertTriangle, FileCode2, Globe } from \"lucide-react\";\nimport {\n useGetJob,\n useSubmitDeliverable,\n useUpdateJob,\n getGetJobQueryKey,\n} from \"@workspace/api-client-react\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { StatusBadge } from \"@/components/status-badge\";\nimport { formatLamports, truncatePubkey, formatDate } from \"@/lib/format\";\n\ntype DeliverableType = \"url\" | \"ipfs\" | \"text\" | \"json\";\n\nconst INPUT =\n \"w-full px-4 py-3 text-sm font-mono glass rounded-xl text-white/80 placeholder:text-white/20 outline-none focus:border-emerald-500/40 focus:shadow-[0_0_16px_rgba(20,241,149,0.06)] transition-all duration-200 min-h-[44px] bg-transparent\";\n\nconst DELIVERABLE_ICONS: Record = {\n url: Globe,\n ipfs: FileCode2,\n text: FileCode2,\n json: FileCode2,\n};\n\nfunction OutcomeBadge({ outcome }: { outcome: string | null }) {\n if (!outcome) return null;\n\n const config: Record = {\n RELEASE: {\n icon: CheckCircle2,\n color: \"text-emerald-400 border-emerald-500/25 bg-emerald-500/[0.06]\",\n glow: \"shadow-[0_0_40px_rgba(20,241,149,0.12)]\",\n desc: \"Payment released to freelancer\",\n },\n REFUND: {\n icon: XCircle,\n color: \"text-amber-400 border-amber-500/25 bg-amber-500/[0.06]\",\n glow: \"shadow-[0_0_40px_rgba(251,191,36,0.1)]\",\n desc: \"Funds returned to client\",\n },\n ESCALATE: {\n icon: AlertTriangle,\n color: \"text-purple-400 border-purple-500/25 bg-purple-500/[0.06]\",\n glow: \"shadow-[0_0_40px_rgba(153,69,255,0.1)]\",\n desc: \"Models diverged — human arbitration required\",\n },\n };\n\n const c = config[outcome];\n if (!c) return null;\n const Icon = c.icon;\n\n return (\n
\n \n
Oracle Verdict
\n
{outcome}
\n
{c.desc}
\n
\n );\n}\n\nfunction GlassSection({ title, children }: { title: string; children: React.ReactNode }) {\n return (\n
\n
\n {title}\n
\n {children}\n
\n );\n}\n\nfunction InfoRow({\n label,\n value,\n link,\n}: {\n label: string;\n value: React.ReactNode;\n link?: string;\n}) {\n return (\n
\n \n {label}\n \n \n {link ? (\n \n {value}\n \n \n ) : (\n value\n )}\n \n
\n );\n}\n\nexport default function JobDetail() {\n const { jobId } = useParams<{ jobId: string }>();\n const qc = useQueryClient();\n\n const { data: job, isLoading, error } = useGetJob(jobId ?? \"\", {\n query: { enabled: !!jobId, queryKey: [\"job\", jobId] },\n });\n\n const submitDeliverable = useSubmitDeliverable();\n const updateJob = useUpdateJob();\n\n const [deliverableType, setDeliverableType] = useState(\"url\");\n const [deliverable, setDeliverable] = useState(\"\");\n const [desc, setDesc] = useState(\"\");\n const [criteria, setCriteria] = useState([\"\"]);\n const [outcome, setOutcome] = useState(null);\n const [submitError, setSubmitError] = useState(null);\n const [submitted, setSubmitted] = useState(false);\n\n const addCriterion = () => setCriteria((c) => [...c, \"\"]);\n const removeCriterion = (i: number) =>\n setCriteria((c) => c.filter((_, idx) => idx !== i));\n const setCriterion = (i: number, val: string) =>\n setCriteria((c) => c.map((v, idx) => (idx === i ? val : v)));\n\n const invalidate = () =>\n qc.invalidateQueries({ queryKey: getGetJobQueryKey(jobId ?? \"\") });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setSubmitError(null);\n setOutcome(null);\n\n submitDeliverable.mutate(\n {\n jobId: jobId ?? \"\",\n data: {\n description: desc || job?.description || \"\",\n acceptanceCriteria: criteria.filter((c) => c.trim() !== \"\"),\n deliverable,\n deliverableType,\n },\n },\n {\n onSuccess: (result) => {\n setOutcome(result.outcome ?? null);\n setSubmitted(true);\n invalidate();\n },\n onError: (err) =>\n setSubmitError(err instanceof Error ? err.message : \"Submission failed.\"),\n }\n );\n };\n\n if (isLoading) {\n return (\n
\n {Array.from({ length: 5 }).map((_, i) => (\n
\n ))}\n
\n );\n }\n\n if (error || !job) {\n return (\n
\n
\n

Job not found.

\n \n Back to all jobs\n \n
\n
\n );\n }\n\n const parsedCriteria: string[] = (() => {\n if (!job.acceptanceCriteria) return [];\n try {\n return JSON.parse(job.acceptanceCriteria) as string[];\n } catch {\n return [];\n }\n })();\n\n return (\n
\n {/* Header */}\n
\n
\n
\n \n All Jobs\n \n
\n

{job.jobId}

\n \n
\n

\n Created {formatDate(job.createdAt)} · Updated {formatDate(job.updatedAt)}\n

\n
\n
\n\n
\n
\n\n {/* Action buttons */}\n {job.status === \"pending\" && (\n
\n \n updateJob.mutate(\n { jobId: jobId ?? \"\", data: { status: \"completed\" } },\n { onSuccess: invalidate }\n )\n }\n disabled={updateJob.isPending}\n className=\"flex-1 py-3 px-5 text-xs font-mono font-bold rounded-xl glass text-emerald-400 border-emerald-500/25 hover:bg-emerald-500/10 hover:border-emerald-500/40 hover:shadow-[0_0_20px_rgba(20,241,149,0.1)] active:scale-[0.97] disabled:opacity-50 transition-all duration-200 min-h-[48px]\"\n >\n Mark Complete\n \n \n updateJob.mutate(\n { jobId: jobId ?? \"\", data: { status: \"cancelled\" } },\n { onSuccess: invalidate }\n )\n }\n disabled={updateJob.isPending}\n className=\"flex-1 py-3 px-5 text-xs font-mono font-bold rounded-xl glass text-rose-400 border-rose-500/25 hover:bg-rose-500/10 hover:border-rose-500/40 active:scale-[0.97] disabled:opacity-50 transition-all duration-200 min-h-[48px]\"\n >\n Cancel Job\n \n
\n )}\n\n {/* Verdict */}\n {outcome && }\n\n {/* Escrow details */}\n \n
\n \n ◎ {formatLamports(job.amountLamports)} SOL} />\n \n {truncatePubkey(job.clientPubkey)}\n \n \n }\n />\n \n {truncatePubkey(job.freelancerPubkey)}\n \n \n }\n />\n \n {job.txSig && (\n \n )}\n
\n \n\n {/* Description */}\n {job.description && (\n \n

{job.description}

\n \n )}\n\n {/* Acceptance criteria */}\n {parsedCriteria.length > 0 && (\n \n
    \n {parsedCriteria.map((c, i) => (\n
  • \n ›\n {c}\n
    • \n ))}\n
\n \n )}\n\n {/* Submit deliverable */}\n {job.status === \"pending\" && !submitted && (\n \n
\n {/* Type selector */}\n
\n \n
\n {([\"url\", \"ipfs\", \"text\", \"json\"] as DeliverableType[]).map((t) => {\n const Icon = DELIVERABLE_ICONS[t];\n return (\n setDeliverableType(t)}\n className={`flex items-center gap-1.5 px-3.5 py-2 text-[10px] font-mono rounded-full border transition-all duration-200 ${\n deliverableType === t\n ? \"bg-emerald-500/15 text-emerald-400 border-emerald-500/30 shadow-[0_0_12px_rgba(20,241,149,0.1)]\"\n : \"glass text-white/30 border-white/[0.07] hover:text-white/60 hover:border-white/15\"\n }`}\n >\n \n {t}\n \n );\n })}\n
\n
\n\n
\n \n setDeliverable(e.target.value)}\n required\n />\n
\n\n
\n \n setDesc(e.target.value)}\n />\n
\n\n
\n \n
\n {criteria.map((c, i) => (\n
\n setCriterion(i, e.target.value)}\n />\n {criteria.length > 1 && (\n removeCriterion(i)}\n className=\"w-11 h-11 flex items-center justify-center glass rounded-xl text-rose-400/50 hover:text-rose-400 hover:border-rose-400/30 active:scale-95 transition-all duration-200 shrink-0\"\n >\n \n \n )}\n
\n ))}\n \n \n Add criterion\n \n
\n
\n\n {submitError && (\n
\n {submitError}\n
\n )}\n\n
\n

\n Sends this deliverable to the Gemini + Claude dual-model consensus engine.\n Both models must independently agree above threshold to release or refund escrow.\n

\n \n {submitDeliverable.isPending\n ? \"Verifying via Oracle…\"\n : \"Submit for AI Verification\"}\n \n
\n
\n \n )}\n\n {submitted && outcome && (\n {\n setSubmitted(false);\n setOutcome(null);\n setDeliverable(\"\");\n }}\n className=\"text-xs font-mono text-white/25 hover:text-white/60 transition-colors flex items-center gap-1.5\"\n >\n Submit another deliverable\n \n )}\n\n {job.status !== \"pending\" && (\n
\n This job is — no further deliverables can be submitted.\n
\n )}\n
\n
\n
\n );\n}\n"}