feat(frontend): add multi-step job posting wizard with API integration

frontend/src/app/dashboard/jobs/new/page.tsx

@@ -0,0 +1,401 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { ArrowLeft, ArrowRight, Check, Loader2, Building2, DollarSign, FileText, Eye } from "lucide-react"
+import { jobsApi, adminCompaniesApi, type CreateJobPayload, type AdminCompany } from "@/lib/api"
+import { toast } from "sonner"
+import { cn } from "@/lib/utils"
+
+const STEPS = [
+    { id: 1, title: "Job Details", icon: FileText },
+    { id: 2, title: "Salary & Type", icon: DollarSign },
+    { id: 3, title: "Company", icon: Building2 },
+    { id: 4, title: "Review", icon: Eye },
+]
+
+export default function NewJobPage() {
+    const router = useRouter()
+    const [currentStep, setCurrentStep] = useState(1)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [companies, setCompanies] = useState<AdminCompany[]>([])
+    const [loadingCompanies, setLoadingCompanies] = useState(true)
+
+    const [formData, setFormData] = useState({
+        title: "",
+        description: "",
+        companyId: "",
+        location: "",
+        employmentType: "",
+        salaryMin: "",
+        salaryMax: "",
+        salaryType: "",
+        workingHours: "",
+    })
+
+    useEffect(() => {
+        const loadCompanies = async () => {
+            try {
+                setLoadingCompanies(true)
+                const data = await adminCompaniesApi.list(undefined, 1, 100)
+                setCompanies(data.data ?? [])
+            } catch (error) {
+                console.error("Failed to load companies:", error)
+                toast.error("Failed to load companies")
+            } finally {
+                setLoadingCompanies(false)
+            }
+        }
+        loadCompanies()
+    }, [])
+
+    const updateField = (field: string, value: string) => {
+        setFormData(prev => ({ ...prev, [field]: value }))
+    }
+
+    const canProceed = () => {
+        switch (currentStep) {
+            case 1:
+                return formData.title.length >= 5 && formData.description.length >= 20
+            case 2:
+                return true // Salary is optional
+            case 3:
+                return formData.companyId !== ""
+            default:
+                return true
+        }
+    }
+
+    const handleSubmit = async () => {
+        if (!formData.companyId || !formData.title || !formData.description) {
+            toast.error("Please fill in all required fields")
+            return
+        }
+
+        setIsSubmitting(true)
+        try {
+            const payload: CreateJobPayload = {
+                companyId: formData.companyId,
+                title: formData.title,
+                description: formData.description,
+                location: formData.location || undefined,
+                employmentType: formData.employmentType as CreateJobPayload['employmentType'] || undefined,
+                salaryMin: formData.salaryMin ? parseFloat(formData.salaryMin) : undefined,
+                salaryMax: formData.salaryMax ? parseFloat(formData.salaryMax) : undefined,
+                salaryType: formData.salaryType as CreateJobPayload['salaryType'] || undefined,
+                workingHours: formData.workingHours || undefined,
+                status: "published",
+            }
+
+            console.log("[DEBUG] Submitting job:", payload)
+            await jobsApi.create(payload)
+            toast.success("Job posted successfully!")
+            router.push("/dashboard/jobs")
+        } catch (error) {
+            console.error("Failed to create job:", error)
+            toast.error("Failed to post job. Please try again.")
+        } finally {
+            setIsSubmitting(false)
+        }
+    }
+
+    const nextStep = () => {
+        if (currentStep < 4 && canProceed()) {
+            setCurrentStep(prev => prev + 1)
+        }
+    }
+
+    const prevStep = () => {
+        if (currentStep > 1) {
+            setCurrentStep(prev => prev - 1)
+        }
+    }
+
+    return (
+        <div className="max-w-3xl mx-auto space-y-8">
+            {/* Header */}
+            <div className="flex items-center gap-4">
+                <Button variant="ghost" size="icon" onClick={() => router.back()}>
+                    <ArrowLeft className="h-5 w-5" />
+                </Button>
+                <div>
+                    <h1 className="text-3xl font-bold">Post a new job</h1>
+                    <p className="text-muted-foreground">Fill in the details for your job listing</p>
+                </div>
+            </div>
+
+            {/* Progress Steps */}
+            <div className="flex items-center justify-between">
+                {STEPS.map((step, index) => {
+                    const Icon = step.icon
+                    const isActive = currentStep === step.id
+                    const isCompleted = currentStep > step.id
+
+                    return (
+                        <div key={step.id} className="flex items-center">
+                            <div className="flex flex-col items-center">
+                                <div
+                                    className={cn(
+                                        "w-10 h-10 rounded-full flex items-center justify-center border-2 transition-colors",
+                                        isCompleted
+                                            ? "bg-primary border-primary text-primary-foreground"
+                                            : isActive
+                                                ? "border-primary text-primary"
+                                                : "border-muted-foreground/30 text-muted-foreground"
+                                    )}
+                                >
+                                    {isCompleted ? <Check className="h-5 w-5" /> : <Icon className="h-5 w-5" />}
+                                </div>
+                                <span
+                                    className={cn(
+                                        "mt-2 text-xs font-medium",
+                                        isActive ? "text-primary" : "text-muted-foreground"
+                                    )}
+                                >
+                                    {step.title}
+                                </span>
+                            </div>
+                            {index < STEPS.length - 1 && (
+                                <div
+                                    className={cn(
+                                        "h-0.5 w-16 mx-2 transition-colors",
+                                        currentStep > step.id ? "bg-primary" : "bg-muted-foreground/30"
+                                    )}
+                                />
+                            )}
+                        </div>
+                    )
+                })}
+            </div>
+
+            {/* Step Content */}
+            <Card>
+                <CardHeader>
+                    <CardTitle>{STEPS[currentStep - 1].title}</CardTitle>
+                    <CardDescription>
+                        {currentStep === 1 && "Enter the basic information about this job"}
+                        {currentStep === 2 && "Set the compensation details"}
+                        {currentStep === 3 && "Select the company posting this job"}
+                        {currentStep === 4 && "Review your job listing before publishing"}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                    {/* Step 1: Job Details */}
+                    {currentStep === 1 && (
+                        <>
+                            <div className="space-y-2">
+                                <Label htmlFor="title">Job Title *</Label>
+                                <Input
+                                    id="title"
+                                    placeholder="e.g. Senior Software Engineer"
+                                    value={formData.title}
+                                    onChange={(e) => updateField("title", e.target.value)}
+                                />
+                                {formData.title.length > 0 && formData.title.length < 5 && (
+                                    <p className="text-xs text-destructive">Title must be at least 5 characters</p>
+                                )}
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="description">Job Description *</Label>
+                                <Textarea
+                                    id="description"
+                                    placeholder="Describe the role, responsibilities, and requirements..."
+                                    rows={8}
+                                    value={formData.description}
+                                    onChange={(e) => updateField("description", e.target.value)}
+                                />
+                                {formData.description.length > 0 && formData.description.length < 20 && (
+                                    <p className="text-xs text-destructive">Description must be at least 20 characters</p>
+                                )}
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="location">Location</Label>
+                                <Input
+                                    id="location"
+                                    placeholder="e.g. São Paulo, SP or Remote"
+                                    value={formData.location}
+                                    onChange={(e) => updateField("location", e.target.value)}
+                                />
+                            </div>
+                        </>
+                    )}
+
+                    {/* Step 2: Salary & Type */}
+                    {currentStep === 2 && (
+                        <>
+                            <div className="grid grid-cols-2 gap-4">
+                                <div className="space-y-2">
+                                    <Label htmlFor="salaryMin">Minimum Salary</Label>
+                                    <Input
+                                        id="salaryMin"
+                                        type="number"
+                                        placeholder="e.g. 5000"
+                                        value={formData.salaryMin}
+                                        onChange={(e) => updateField("salaryMin", e.target.value)}
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="salaryMax">Maximum Salary</Label>
+                                    <Input
+                                        id="salaryMax"
+                                        type="number"
+                                        placeholder="e.g. 10000"
+                                        value={formData.salaryMax}
+                                        onChange={(e) => updateField("salaryMax", e.target.value)}
+                                    />
+                                </div>
+                            </div>
+                            <div className="grid grid-cols-2 gap-4">
+                                <div className="space-y-2">
+                                    <Label>Salary Type</Label>
+                                    <Select value={formData.salaryType} onValueChange={(v) => updateField("salaryType", v)}>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select period" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="hourly">Per hour</SelectItem>
+                                            <SelectItem value="monthly">Per month</SelectItem>
+                                            <SelectItem value="yearly">Per year</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div className="space-y-2">
+                                    <Label>Employment Type</Label>
+                                    <Select value={formData.employmentType} onValueChange={(v) => updateField("employmentType", v)}>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select type" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="full-time">Full-time</SelectItem>
+                                            <SelectItem value="part-time">Part-time</SelectItem>
+                                            <SelectItem value="contract">Contract</SelectItem>
+                                            <SelectItem value="dispatch">Dispatch</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="workingHours">Working Hours</Label>
+                                <Input
+                                    id="workingHours"
+                                    placeholder="e.g. 9:00 - 18:00, Mon-Fri"
+                                    value={formData.workingHours}
+                                    onChange={(e) => updateField("workingHours", e.target.value)}
+                                />
+                            </div>
+                        </>
+                    )}
+
+                    {/* Step 3: Company */}
+                    {currentStep === 3 && (
+                        <div className="space-y-2">
+                            <Label>Company *</Label>
+                            {loadingCompanies ? (
+                                <div className="flex items-center gap-2 text-muted-foreground">
+                                    <Loader2 className="h-4 w-4 animate-spin" />
+                                    Loading companies...
+                                </div>
+                            ) : (
+                                <Select value={formData.companyId} onValueChange={(v) => updateField("companyId", v)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Select a company" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {companies.length === 0 ? (
+                                            <SelectItem value="__none" disabled>No companies available</SelectItem>
+                                        ) : (
+                                            companies.map((company) => (
+                                                <SelectItem key={company.id} value={company.id}>
+                                                    {company.name}
+                                                </SelectItem>
+                                            ))
+                                        )}
+                                    </SelectContent>
+                                </Select>
+                            )}
+                        </div>
+                    )}
+
+                    {/* Step 4: Review */}
+                    {currentStep === 4 && (
+                        <div className="space-y-4">
+                            <div className="grid grid-cols-2 gap-4">
+                                <div>
+                                    <p className="text-sm text-muted-foreground">Job Title</p>
+                                    <p className="font-medium">{formData.title || "-"}</p>
+                                </div>
+                                <div>
+                                    <p className="text-sm text-muted-foreground">Company</p>
+                                    <p className="font-medium">
+                                        {companies.find(c => c.id === formData.companyId)?.name || "-"}
+                                    </p>
+                                </div>
+                                <div>
+                                    <p className="text-sm text-muted-foreground">Location</p>
+                                    <p className="font-medium">{formData.location || "-"}</p>
+                                </div>
+                                <div>
+                                    <p className="text-sm text-muted-foreground">Employment Type</p>
+                                    <p className="font-medium">{formData.employmentType || "-"}</p>
+                                </div>
+                                <div>
+                                    <p className="text-sm text-muted-foreground">Salary</p>
+                                    <p className="font-medium">
+                                        {formData.salaryMin || formData.salaryMax
+                                            ? `R$ ${formData.salaryMin || "?"} - R$ ${formData.salaryMax || "?"} ${formData.salaryType ? `(${formData.salaryType})` : ""}`
+                                            : "-"}
+                                    </p>
+                                </div>
+                                <div>
+                                    <p className="text-sm text-muted-foreground">Working Hours</p>
+                                    <p className="font-medium">{formData.workingHours || "-"}</p>
+                                </div>
+                            </div>
+                            <div>
+                                <p className="text-sm text-muted-foreground mb-1">Description</p>
+                                <div className="p-3 bg-muted rounded-md text-sm whitespace-pre-wrap max-h-40 overflow-y-auto">
+                                    {formData.description || "-"}
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+
+            {/* Navigation Buttons */}
+            <div className="flex justify-between">
+                <Button variant="outline" onClick={prevStep} disabled={currentStep === 1}>
+                    <ArrowLeft className="h-4 w-4 mr-2" />
+                    Back
+                </Button>
+
+                {currentStep < 4 ? (
+                    <Button onClick={nextStep} disabled={!canProceed()}>
+                        Next
+                        <ArrowRight className="h-4 w-4 ml-2" />
+                    </Button>
+                ) : (
+                    <Button onClick={handleSubmit} disabled={isSubmitting}>
+                        {isSubmitting ? (
+                            <>
+                                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                                Publishing...
+                            </>
+                        ) : (
+                            <>
+                                <Check className="h-4 w-4 mr-2" />
+                                Publish Job
+                            </>
+                        )}
+                    </Button>
+                )}
+            </div>
+        </div>
+    )
+}

frontend/src/app/dashboard/jobs/page.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useEffect, useMemo, useState } from "react"
+import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -201,207 +202,86 @@ export default function AdminJobsPage() {
           <h1 className="text-3xl font-bold text-foreground">Job management</h1>
           <p className="text-muted-foreground mt-1">Manage all jobs posted on the platform</p>
         </div>
-        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-          <DialogTrigger asChild>
-            <Button className="gap-2">
-              <Plus className="h-4 w-4" />
-              New job
-            </Button>
-          </DialogTrigger>
-          <DialogContent className="max-w-2xl">
-            <DialogHeader>
-              <DialogTitle>Create new job</DialogTitle>
-              <DialogDescription>Fill in the details for the new job opening</DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-              <div className="grid gap-2">
-                <Label htmlFor="title">Job title</Label>
-                <Input
-                  id="title"
-                  placeholder="e.g. Full Stack Developer"
-                  value={createForm.title}
-                  onChange={(e) => setCreateForm({ ...createForm, title: e.target.value })}
-                />
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="company">Company</Label>
-                <Select
-                  value={createForm.company}
-                  onValueChange={(value) => {
-                    console.log("[DEBUG] Selected company:", value)
-                    setCreateForm({ ...createForm, company: value })
-                  }}
-                >
-                  <SelectTrigger id="company">
-                    <SelectValue placeholder="Select a company" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {companyOptions.length === 0 ? (
-                      <SelectItem value="__none" disabled>No companies available</SelectItem>
-                    ) : (
-                      companyOptions.map((company) => (
-                        <SelectItem key={company.id} value={company.id}>
-                          {company.name}
-                        </SelectItem>
-                      ))
-                    )}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="location">Location</Label>
-                  <Input
-                    id="location"
-                    placeholder="São Paulo, SP"
-                    value={createForm.location}
-                    onChange={(e) => setCreateForm({ ...createForm, location: e.target.value })}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="type">Type</Label>
-                  <Select
-                    value={createForm.type}
-                    onValueChange={(value) => setCreateForm({ ...createForm, type: value })}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="full-time">Full time</SelectItem>
-                      <SelectItem value="part-time">Part time</SelectItem>
-                      <SelectItem value="contract">Contract</SelectItem>
-                      <SelectItem value="remote">Remote</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="salary">Salary</Label>
-                  <Input
-                    id="salary"
-                    placeholder="R$ 8,000 - R$ 12,000"
-                    value={createForm.salary}
-                    onChange={(e) => setCreateForm({ ...createForm, salary: e.target.value })}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="level">Level</Label>
-                  <Select
-                    value={createForm.level}
-                    onValueChange={(value) => setCreateForm({ ...createForm, level: value })}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="junior">Junior</SelectItem>
-                      <SelectItem value="mid">Mid-level</SelectItem>
-                      <SelectItem value="senior">Senior</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="description">Description</Label>
-                <Textarea
-                  id="description"
-                  placeholder="Describe the responsibilities and requirements..."
-                  rows={4}
-                  value={createForm.description}
-                  onChange={(e) => setCreateForm({ ...createForm, description: e.target.value })}
-                />
-              </div>
-            </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
-                Cancel
-              </Button>
-              <Button onClick={() => {
-                console.log("[DEBUG] Create form data:", createForm)
-                console.log("[DEBUG] Selected company ID:", createForm.company)
-                console.log("[DEBUG] All companies:", companies)
-                // TODO: Call API to create job
-                setIsCreateDialogOpen(false)
-              }}>Publish job</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+        <Link href="/dashboard/jobs/new">
+          <Button className="gap-2">
+            <Plus className="h-4 w-4" />
+            New job
+          </Button>
+        </Link>
+      </div>
 
-        {/* View Job Dialog */}
-        <Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
-          <DialogContent className="max-w-2xl">
-            <DialogHeader>
-              <DialogTitle>Job Details</DialogTitle>
-            </DialogHeader>
-            {selectedJob && (
-              <div className="grid gap-4 py-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <Label className="text-muted-foreground">Title</Label>
-                    <p className="font-medium">{selectedJob.title}</p>
-                  </div>
-                  <div>
-                    <Label className="text-muted-foreground">Company</Label>
-                    <p className="font-medium">{selectedJob.company}</p>
-                  </div>
-                  <div>
-                    <Label className="text-muted-foreground">Location</Label>
-                    <p className="font-medium">{selectedJob.location}</p>
-                  </div>
-                  <div>
-                    <Label className="text-muted-foreground">Type</Label>
-                    <p><Badge variant="outline">{selectedJob.type}</Badge></p>
-                  </div>
-                  <div>
-                    <Label className="text-muted-foreground">Status</Label>
-                    <p><Badge>{selectedJob.status}</Badge></p>
-                  </div>
-                  <div>
-                    <Label className="text-muted-foreground">Applications</Label>
-                    <p className="font-medium">{selectedJob.applicationsCount}</p>
-                  </div>
+      {/* View Job Dialog */}
+      <Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Job Details</DialogTitle>
+          </DialogHeader>
+          {selectedJob && (
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label className="text-muted-foreground">Title</Label>
+                  <p className="font-medium">{selectedJob.title}</p>
                 </div>
                 <div>
-                  <Label className="text-muted-foreground">Description</Label>
-                  <div className="mt-1 p-3 bg-muted rounded-md text-sm whitespace-pre-wrap max-h-60 overflow-y-auto">
-                    {selectedJob.description}
-                  </div>
+                  <Label className="text-muted-foreground">Company</Label>
+                  <p className="font-medium">{selectedJob.company}</p>
+                </div>
+                <div>
+                  <Label className="text-muted-foreground">Location</Label>
+                  <p className="font-medium">{selectedJob.location}</p>
+                </div>
+                <div>
+                  <Label className="text-muted-foreground">Type</Label>
+                  <p><Badge variant="outline">{selectedJob.type}</Badge></p>
+                </div>
+                <div>
+                  <Label className="text-muted-foreground">Status</Label>
+                  <p><Badge>{selectedJob.status}</Badge></p>
+                </div>
+                <div>
+                  <Label className="text-muted-foreground">Applications</Label>
+                  <p className="font-medium">{selectedJob.applicationsCount}</p>
                 </div>
               </div>
-            )}
-            <DialogFooter>
-              <Button onClick={() => setIsViewDialogOpen(false)}>Close</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Edit Job Dialog */}
-        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-          <DialogContent className="max-w-2xl">
-            <DialogHeader>
-              <DialogTitle>Edit Job</DialogTitle>
-              <DialogDescription>Update job details</DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-              <div className="grid gap-2">
-                <Label htmlFor="edit-title">Job title</Label>
-                <Input
-                  id="edit-title"
-                  value={editForm.title || ""}
-                  onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
-                />
+              <div>
+                <Label className="text-muted-foreground">Description</Label>
+                <div className="mt-1 p-3 bg-muted rounded-md text-sm whitespace-pre-wrap max-h-60 overflow-y-auto">
+                  {selectedJob.description}
+                </div>
               </div>
-              {/* Add more fields as needed for full editing capability */}
             </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>Cancel</Button>
-              <Button onClick={handleSaveEdit}>Save Changes</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
+          )}
+          <DialogFooter>
+            <Button onClick={() => setIsViewDialogOpen(false)}>Close</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Job Dialog */}
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Edit Job</DialogTitle>
+            <DialogDescription>Update job details</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="edit-title">Job title</Label>
+              <Input
+                id="edit-title"
+                value={editForm.title || ""}
+                onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
+              />
+            </div>
+            {/* Add more fields as needed for full editing capability */}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>Cancel</Button>
+            <Button onClick={handleSaveEdit}>Save Changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* Stats */}
       <div className="grid gap-4 md:grid-cols-4">

frontend/src/lib/api.ts

@@ -284,6 +284,19 @@ export const adminCompaniesApi = {
 };
 
 // --- Jobs API (Public/Candidate) ---
+export interface CreateJobPayload {
+    companyId: string;
+    title: string;
+    description: string;
+    salaryMin?: number;
+    salaryMax?: number;
+    salaryType?: 'hourly' | 'monthly' | 'yearly';
+    employmentType?: 'full-time' | 'part-time' | 'dispatch' | 'contract';
+    workingHours?: string;
+    location?: string;
+    status: 'draft' | 'published' | 'open';
+}
+
 export const jobsApi = {
     list: (params: {
         page?: number;
@@ -307,6 +320,13 @@ export const jobsApi = {
         }>(`/api/v1/jobs?${query.toString()}`);
     },
     getById: (id: string) => apiRequest<ApiJob>(`/api/v1/jobs/${id}`),
+    create: (data: CreateJobPayload) => {
+        logCrudAction("create", "jobs", data);
+        return apiRequest<ApiJob>("/api/v1/jobs", {
+            method: "POST",
+            body: JSON.stringify(data),
+        });
+    },
 };
 
 export const applicationsApi = {