Admin Jobs

JobList

File: apps/admin/src/app/components/JobList.tsx

Displays all jobs grouped by status (“Published” and “Draft” sections).

Shared UI Used

Component	Import Source
Card, CardContent	@prosper/shared/components/ui/card
Badge	@prosper/shared/components/ui/badge

Layout

• Section headers: “Published” and “Draft” with job counts
• Each job is a Card with:
  • Status Badge (success variant for published, secondary for draft)
  • Title (h4)
  • Employment type and location (muted text)
  • Applicant count
• Click navigates to JobDetailPage

---

JobDetailPage

File: apps/admin/src/app/components/JobDetailPage.tsx

Full detail view for a single job posting.

Shared UI Used

Component	Import Source
Button	@prosper/shared/components/ui/button
Badge	@prosper/shared/components/ui/badge
Tabs, TabsList, TabsTrigger, TabsContent	@prosper/shared/components/ui/tabs
Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator	@prosper/shared/components/ui/breadcrumb
CandidatesTable	Local
ProsperChatPanel	Local

Layout

• Breadcrumb navigation at top
• Job metadata (location, type, salary, posted date)
• Tabbed content:
  • Job Details tab — description (HTML), responsibilities, requirements
  • Candidates tab — CandidatesTable
• Action buttons: Edit, Publish/Unpublish, Delete
• ProsperChatPanel sidebar (collapsible)

---

JobForm

File: apps/admin/src/app/components/JobForm.tsx

Create/edit form for job postings with Zod validation.

Shared UI Used

Component	Import Source
Button	@prosper/shared/components/ui/button
Input	@prosper/shared/components/ui/input
Label	@prosper/shared/components/ui/label
Textarea	@prosper/shared/components/ui/textarea
Badge	@prosper/shared/components/ui/badge
Separator	@prosper/shared/components/ui/separator
Select, SelectTrigger, SelectContent, SelectItem, SelectValue	@prosper/shared/components/ui/select
ProsperChatPanel	Local

Form Fields

Field	Component	Validation
Title	Input	Required, min 3 chars
Description	Textarea	Required, min 10 chars
Location	Input	Required
Employment Type	Select	Required
Salary Range	Input	Optional
Responsibilities	Input + Badge list	Array, enter to add
Requirements	Input + Badge list	Array, enter to add

Tag-Like Input Pattern

Responsibilities and Requirements use a shared pattern:

1. User types in an Input field
2. Pressing Enter adds the value as a Badge (secondary variant)
3. Each Badge has an X button to remove the item

<Badge variant="secondary" className="gap-1 py-1 px-2.5 text-sm">
  {item}
  <button onClick={() => removeItem(index)}>
    <X className="w-3 h-3" />
  </button>
</Badge>

Actions

• Save as Draft — variant="tertiary"
• Publish Job — default primary
• Both submit to Supabase via createJob() or updateJob()