+
@@ -47,8 +45,8 @@ export default function JobsPage() {
onClick={() => actions.setSortBy(option.id)}
className={`rounded-xl px-4 py-2 text-sm font-medium transition ${
sortBy === option.id
- ? "bg-slate-950 text-white"
- : "bg-white text-slate-600 hover:text-slate-950"
+ ? "bg-amber-500 text-white"
+ : "bg-zinc-800 text-zinc-400 hover:text-zinc-100"
}`}
>
{option.label}
@@ -66,7 +64,7 @@ export default function JobsPage() {
className={`rounded-full px-4 py-2 text-sm font-medium transition ${
activeTag === tag
? "bg-amber-500 text-white"
- : "border border-slate-200 bg-white text-slate-600 hover:border-amber-300 hover:text-slate-950"
+ : "border border-white/10 bg-zinc-900/50 text-zinc-400 hover:border-amber-500/30 hover:text-zinc-100"
}`}
>
{tag}
@@ -75,7 +73,7 @@ export default function JobsPage() {
+
Live API data was unavailable, so the board is showing resilient mock
listings instead. {error}
@@ -93,92 +91,15 @@ export default function JobsPage() {
) : (
{jobs.map((job) => (
-
-
-
-
- {job.status}
-
-
- {job.title}
-
-
-
-
-
-
- {job.description}
-
-
-
- {job.tags.map((tag) => (
-
- {tag}
-
- ))}
-
-
-
-
-
- Budget
-
-
- {formatUsdc(job.budget_usdc)}
-
-
-
-
- Deadline
-
-
-
-
-
-
- Milestones
-
-
- {job.milestones} tracked approvals
-
-
-
-
-
-
-
- Client
-
-
- {shortenAddress(job.client_address)}
-
-
-
-
-
-
- {job.clientReputation.totalJobs} completed jobs on-chain
-
-
-
-
+
+
))}
)}
{!loading && jobs.length === 0 ? (
-
+
No open jobs matched that filter.
) : null}
diff --git a/apps/web/components/jobs/__tests__/job-card.test.tsx b/apps/web/components/jobs/__tests__/job-card.test.tsx
new file mode 100644
index 00000000..c088fe45
--- /dev/null
+++ b/apps/web/components/jobs/__tests__/job-card.test.tsx
@@ -0,0 +1,215 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { JobCard, type JobCardData } from "../job-card";
+import { JobCardErrorBoundary } from "../job-card-error-boundary";
+
+const createJob = (overrides: Partial
= {}): JobCardData => ({
+ id: "job-123",
+ title: "Build a Soroban escrow milestone system",
+ description:
+ "We need a developer to build an escrow milestone system on Soroban.",
+ budget_usdc: 500000000,
+ milestones: 3,
+ client_address: "GCXDEV5E2J4JTS3Q3C5JZV4P5C7E",
+ tags: ["soroban", "frontend", "devops"],
+ deadlineAt: "2026-05-15T00:00:00Z",
+ clientReputation: {
+ scoreBps: 8500,
+ totalJobs: 24,
+ starRating: 4.5,
+ averageStars: 4.2,
+ },
+ status: "open",
+ created_at: "2026-04-01T00:00:00Z",
+ ...overrides,
+});
+
+function renderWithQuery(ui: React.ReactNode) {
+ const client = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
+ return render({ui} );
+}
+
+describe("JobCard", () => {
+ it("renders job title and description", () => {
+ const job = createJob();
+ renderWithQuery( = [
+ "open",
+ "in_progress",
+ "completed",
+ "disputed",
+ ];
+
+ for (const status of statuses) {
+ const { container } = renderWithQuery(
+ Child Content
+ ,
+ );
+
+ expect(screen.getByTestId("child")).toBeInTheDocument();
+ });
+
+ it("renders error message when child throws", () => {
+ const ErrorChild = () => {
+ throw new Error("Test error");
+ };
+
+ vi.spyOn(console, "error").mockImplementation(() => {});
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByText(/Job unavailable/i)).toBeInTheDocument();
+ expect(screen.getByText(/This listing failed to load/i)).toBeInTheDocument();
+ });
+
+ it("allows retry after error", () => {
+ vi.spyOn(console, "error").mockImplementation(() => {});
+
+ let renderCount = 0;
+ const ErrorChild = () => {
+ renderCount++;
+ if (renderCount === 1) {
+ throw new Error("Test error");
+ }
+ return Recovered
;
+ };
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByText(/Job unavailable/i)).toBeInTheDocument();
+
+ const retryButton = screen.getByRole("button", { name: /Retry/i });
+ fireEvent.click(retryButton);
+
+ expect(screen.getByText("Recovered")).toBeInTheDocument();
+ });
+
+ it("applies custom className to error state", () => {
+ vi.spyOn(console, "error").mockImplementation(() => {});
+
+ const ErrorChild = () => {
+ throw new Error("Test error");
+ };
+
+ render(
+
+ ,
+ );
+
+ const errorContainer = screen.getByRole("alert");
+ expect(errorContainer.className).toContain("custom-class");
+ });
+});
\ No newline at end of file
diff --git a/apps/web/components/jobs/job-card-error-boundary.tsx b/apps/web/components/jobs/job-card-error-boundary.tsx
new file mode 100644
index 00000000..bc64a480
--- /dev/null
+++ b/apps/web/components/jobs/job-card-error-boundary.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import React from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface JobCardErrorBoundaryProps {
+ children: React.ReactNode;
+ className?: string;
+}
+
+interface JobCardErrorBoundaryState {
+ hasError: boolean;
+ error?: Error;
+}
+
+export class JobCardErrorBoundary extends React.Component<
+ JobCardErrorBoundaryProps,
+ JobCardErrorBoundaryState
+> {
+ state: JobCardErrorBoundaryState = { hasError: false };
+
+ static getDerivedStateFromError(error: Error): JobCardErrorBoundaryState {
+ return { hasError: true, error };
+ }
+
+ handleRetry = () => {
+ this.setState({ hasError: false, error: undefined });
+ };
+
+ render() {
+ if (this.state.hasError) {
+ return (
+
+
+
+
+ Job unavailable
+
+
+
+ This listing failed to load. Please try again.
+
+
+
+
= {
+ open: {
+ label: "Open",
+ color: {
+ bg: "bg-emerald-500/10",
+ text: "text-emerald-500",
+ border: "border-emerald-500/30",
+ },
+ },
+ in_progress: {
+ label: "In Progress",
+ color: {
+ bg: "bg-amber-500/10",
+ text: "text-amber-500",
+ border: "border-amber-500/30",
+ },
+ },
+ completed: {
+ label: "Completed",
+ color: {
+ bg: "bg-blue-500/10",
+ text: "text-blue-500",
+ border: "border-blue-500/30",
+ },
+ },
+ disputed: {
+ label: "Disputed",
+ color: {
+ bg: "bg-red-500/10",
+ text: "text-red-500",
+ border: "border-red-500/30",
+ },
+ },
+};
+
+function StatusBadge({ status }: { status: string }) {
+ const config = STATUS_CONFIG[status] || STATUS_CONFIG.open;
+
+ return (
+
+ {config.label}
+
+ );
+}
+
+function StarRating({ rating }: { rating: number }) {
+ const fullStars = Math.floor(rating);
+ const hasHalfStar = rating % 1 >= 0.5;
+
+ return (
+
+ {Array.from({ length: 5 }, (_, i) => {
+ const isFilled = i < fullStars || (i === fullStars && hasHalfStar);
+ return (
+
+ );
+}
+
+export function JobCard({ job }: JobCardProps) {
+ const statusConfig = STATUS_CONFIG[job.status] || STATUS_CONFIG.open;
+
+ return (
+
+ View job details
+
+
+
+
+
+ {job.title}
+
+
+
+
+
+ {job.description}
+
+
+
+ {job.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+
+ Budget
+
+
+ {formatUsdc(job.budget_usdc)}
+
+
+
+
+ Deadline
+
+
+
+
+
+
+ Milestones
+
+
+
+
+
+ );
+}
+
+export function JobCardSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/hooks/__tests__/use-job.test.ts b/apps/web/hooks/__tests__/use-job.test.ts
new file mode 100644
index 00000000..edfd03ac
--- /dev/null
+++ b/apps/web/hooks/__tests__/use-job.test.ts
@@ -0,0 +1,260 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { useJob, useJobMilestones, useJobBids, useJobDeliverables } from "../use-job";
+import * as api from "@/lib/api";
+
+vi.mock("@/lib/api", async () => {
+ const actual = await vi.importActual("@/lib/api");
+ return {
+ ...actual,
+ api: {
+ ...actual.api,
+ jobs: {
+ get: vi.fn(),
+ list: vi.fn(),
+ create: vi.fn(),
+ markFunded: vi.fn(),
+ milestones: vi.fn(),
+ releaseMilestone: vi.fn(),
+ deliverables: {
+ list: vi.fn(),
+ submit: vi.fn(),
+ },
+ dispute: {
+ get: vi.fn(),
+ open: vi.fn(),
+ },
+ },
+ bids: {
+ list: vi.fn(),
+ create: vi.fn(),
+ accept: vi.fn(),
+ },
+ },
+ };
+});
+
+const createMockJob = () => ({
+ id: "job-123",
+ title: "Build a Soroban escrow system",
+ description: "We need a developer to build an escrow system on Soroban.",
+ budget_usdc: 500000000,
+ milestones: 3,
+ client_address: "GCXDEV5E2J4JTS3Q3C5JZV4P5C7E",
+ freelancer_address: undefined,
+ status: "open",
+ metadata_hash: undefined,
+ on_chain_job_id: undefined,
+ created_at: "2026-04-01T00:00:00Z",
+ updated_at: "2026-04-01T00:00:00Z",
+});
+
+const createMockMilestones = () => [
+ {
+ id: "milestone-1",
+ job_id: "job-123",
+ index: 1,
+ title: "Milestone 1",
+ amount_usdc: 166666666,
+ status: "pending",
+ },
+ {
+ id: "milestone-2",
+ job_id: "job-123",
+ index: 2,
+ title: "Milestone 2",
+ amount_usdc: 166666667,
+ status: "pending",
+ },
+ {
+ id: "milestone-3",
+ job_id: "job-123",
+ index: 3,
+ title: "Milestone 3",
+ amount_usdc: 166666667,
+ status: "pending",
+ },
+];
+
+const createMockBids = () => [
+ {
+ id: "bid-1",
+ job_id: "job-123",
+ freelancer_address: "GABC123",
+ proposal: "I can deliver this in two milestones.",
+ status: "pending",
+ created_at: "2026-04-01T00:00:00Z",
+ },
+];
+
+const createMockDeliverables = () => [
+ {
+ id: "deliverable-1",
+ job_id: "job-123",
+ milestone_index: 1,
+ submitted_by: "GABC123",
+ label: "Initial delivery",
+ kind: "link",
+ url: "https://github.com/example",
+ created_at: "2026-04-01T00:00:00Z",
+ },
+];
+
+function wrapper({ children }: { children: React.ReactNode }) {
+ const client = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
+ return (
+ {children}
+ );
+}
+
+describe("useJob", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("fetches job by id", async () => {
+ const mockJob = createMockJob();
+ vi.mocked(api.api.jobs.get).mockResolvedValueOnce(mockJob);
+
+ const { result } = renderHook(() => useJob("job-123"), { wrapper });
+
+ await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+ expect(result.current.data).toEqual(mockJob);
+ expect(api.api.jobs.get).toHaveBeenCalledWith("job-123");
+ });
+
+ it("returns error when job not found", async () => {
+ vi.mocked(api.api.jobs.get).mockRejectedValueOnce(new Error("Job not found"));
+
+ const { result } = renderHook(() => useJob("job-123"), { wrapper });
+
+ await waitFor(() => expect(result.current.isError).toBe(true));
+
+ expect(result.current.error).toBeInstanceOf(Error);
+ });
+
+ it("does not fetch when id is empty", async () => {
+ const { result } = renderHook(() => useJob(""), { wrapper });
+
+ expect(result.current.data).toBeUndefined();
+ expect(api.api.jobs.get).not.toHaveBeenCalled();
+ });
+});
+
+describe("useJobMilestones", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("fetches milestones for a job", async () => {
+ const mockMilestones = createMockMilestones();
+ vi.mocked(api.api.jobs.milestones).mockResolvedValueOnce(mockMilestones);
+
+ const { result } = renderHook(() => useJobMilestones("job-123"), { wrapper });
+
+ await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+ expect(result.current.data).toEqual(mockMilestones);
+ });
+
+ it("handles missing milestones gracefully", async () => {
+ vi.mocked(api.api.jobs.milestones).mockRejectedValueOnce(new Error("Not found"));
+
+ const { result } = renderHook(() => useJobMilestones("job-123"), { wrapper });
+
+ await waitFor(() => expect(result.current.isError).toBe(true));
+ });
+});
+
+describe("useJobBids", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("fetches bids for a job", async () => {
+ const mockBids = createMockBids();
+ vi.mocked(api.api.bids.list).mockResolvedValueOnce(mockBids);
+
+ const { result } = renderHook(() => useJobBids("job-123"), { wrapper });
+
+ await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+ expect(result.current.data).toEqual(mockBids);
+ });
+});
+
+describe("useJobDeliverables", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("fetches deliverables for a job", async () => {
+ const mockDeliverables = createMockDeliverables();
+ vi.mocked(api.api.jobs.deliverables.list).mockResolvedValueOnce(mockDeliverables);
+
+ const { result } = renderHook(() => useJobDeliverables("job-123"), { wrapper });
+
+ await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+ expect(result.current.data).toEqual(mockDeliverables);
+ });
+});
+
+describe("Zod validation - deliverable schema", () => {
+ const { z } = require("zod");
+
+ const deliverableSchema = z.object({
+ label: z.string().min(1, "Label is required"),
+ url: z.string().url("Must be a valid URL").optional().or(z.literal("")),
+ kind: z.enum(["link", "file"]),
+ file_hash: z.string().optional(),
+ });
+
+ it("rejects empty label", () => {
+ const parsed = deliverableSchema.safeParse({
+ label: "",
+ url: "https://example.com",
+ kind: "link",
+ });
+ expect(parsed.success).toBe(false);
+ });
+
+ it("accepts valid deliverable with link", () => {
+ const parsed = deliverableSchema.safeParse({
+ label: "Initial delivery",
+ url: "https://example.com",
+ kind: "link",
+ });
+ expect(parsed.success).toBe(true);
+ });
+
+ it("accepts valid deliverable with file", () => {
+ const parsed = deliverableSchema.safeParse({
+ label: "File delivery",
+ kind: "file",
+ file_hash: "abc123",
+ });
+ expect(parsed.success).toBe(true);
+ });
+
+ it("rejects invalid URL", () => {
+ const parsed = deliverableSchema.safeParse({
+ label: "Test",
+ url: "not-a-url",
+ kind: "link",
+ });
+ expect(parsed.success).toBe(false);
+ });
+
+ it("rejects invalid kind", () => {
+ const parsed = deliverableSchema.safeParse({
+ label: "Test",
+ kind: "invalid",
+ });
+ expect(parsed.success).toBe(false);
+ });
+});
\ No newline at end of file
diff --git a/apps/web/hooks/use-job.ts b/apps/web/hooks/use-job.ts
new file mode 100644
index 00000000..4f3c58af
--- /dev/null
+++ b/apps/web/hooks/use-job.ts
@@ -0,0 +1,112 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { api, type Job, type Milestone, type Bid, type Deliverable, type CreateJobBody, type MarkFundedBody, type CreateBidBody, type SubmitDeliverableBody } from "@/lib/api";
+
+const JOB_KEYS = {
+ all: ["jobs"] as const,
+ lists: () => [...JOB_KEYS.all, "list"] as const,
+ list: (filters?: Record) => [...JOB_KEYS.lists(), filters] as const,
+ details: () => [...JOB_KEYS.all, "detail"] as const,
+ detail: (id: string) => [...JOB_KEYS.details(), id] as const,
+ milestones: (jobId: string) => [...JOB_KEYS.detail(jobId), "milestones"] as const,
+ bids: (jobId: string) => [...JOB_KEYS.detail(jobId), "bids"] as const,
+ deliverables: (jobId: string) => [...JOB_KEYS.detail(jobId), "deliverables"] as const,
+};
+
+export function useJob(id: string) {
+ return useQuery({
+ queryKey: JOB_KEYS.detail(id),
+ queryFn: () => api.jobs.get(id),
+ enabled: Boolean(id),
+ staleTime: 30000,
+ });
+}
+
+export function useJobMilestones(jobId: string) {
+ return useQuery({
+ queryKey: JOB_KEYS.milestones(jobId),
+ queryFn: () => api.jobs.milestones(jobId),
+ enabled: Boolean(jobId),
+ staleTime: 20000,
+ });
+}
+
+export function useJobBids(jobId: string) {
+ return useQuery({
+ queryKey: JOB_KEYS.bids(jobId),
+ queryFn: () => api.bids.list(jobId),
+ enabled: Boolean(jobId),
+ staleTime: 15000,
+ });
+}
+
+export function useJobDeliverables(jobId: string) {
+ return useQuery({
+ queryKey: JOB_KEYS.deliverables(jobId),
+ queryFn: () => api.jobs.deliverables.list(jobId),
+ enabled: Boolean(jobId),
+ staleTime: 10000,
+ });
+}
+
+export function useCreateJob() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (body: CreateJobBody) => api.jobs.create(body),
+ onSuccess: () => {
+ void queryClient.invalidateQueries({ queryKey: JOB_KEYS.lists() });
+ },
+ });
+}
+
+export function useMarkJobFunded() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: ({ id, body }: { id: string; body: MarkFundedBody }) =>
+ api.jobs.markFunded(id, body),
+ onSuccess: (_data, { id }) => {
+ queryClient.invalidateQueries({ queryKey: JOB_KEYS.detail(id) });
+ queryClient.invalidateQueries({ queryKey: JOB_KEYS.lists() });
+ },
+ });
+}
+
+export function useCreateBid() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: ({ jobId, body }: { jobId: string; body: CreateBidBody }) =>
+ api.bids.create(jobId, body),
+ onSuccess: (_data, { jobId }) => {
+ queryClient.invalidateQueries({ queryKey: JOB_KEYS.bids(jobId) });
+ },
+ });
+}
+
+export function useSubmitDeliverable() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: ({ jobId, body }: { jobId: string; body: SubmitDeliverableBody }) =>
+ api.jobs.deliverables.submit(jobId, body),
+ onSuccess: (_data, { jobId }) => {
+ queryClient.invalidateQueries({ queryKey: JOB_KEYS.deliverables(jobId) });
+ },
+ });
+}
+
+export function useReleaseMilestone() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: ({ jobId, milestoneId }: { jobId: string; milestoneId: string }) =>
+ api.jobs.releaseMilestone(jobId, milestoneId),
+ onSuccess: (_data, { jobId }) => {
+ queryClient.invalidateQueries({ queryKey: JOB_KEYS.milestones(jobId) });
+ queryClient.invalidateQueries({ queryKey: JOB_KEYS.detail(jobId) });
+ },
+ });
+}
\ No newline at end of file