91 lines
3.5 KiB
TypeScript
91 lines
3.5 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState } from "react"
|
||
|
|
import { useRouter } from "next/navigation"
|
||
|
|
import { toast } from "sonner"
|
||
|
|
|
||
|
|
const STATUSES = [
|
||
|
|
{ value: "open", label: "Open", color: "border-amber-500/30 text-amber-400 hover:bg-amber-500/10" },
|
||
|
|
{ value: "in_progress", label: "In Progress", color: "border-blue-500/30 text-blue-400 hover:bg-blue-500/10" },
|
||
|
|
{ value: "resolved", label: "Resolved", color: "border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10" },
|
||
|
|
{ value: "closed", label: "Closed", color: "border-white/10 text-white/40 hover:bg-white/5" },
|
||
|
|
]
|
||
|
|
|
||
|
|
export function MaintenanceStatusUpdater({ request }: { request: any }) {
|
||
|
|
const router = useRouter()
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
const [resolutionNotes, setResolutionNotes] = useState(request.resolution_notes ?? "")
|
||
|
|
const [actualCost, setActualCost] = useState(request.actual_cost ?? "")
|
||
|
|
|
||
|
|
async function updateStatus(status: string) {
|
||
|
|
setLoading(true)
|
||
|
|
await fetch(`/api/maintenance/${request.id}`, {
|
||
|
|
method: "PATCH",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({
|
||
|
|
status,
|
||
|
|
resolution_notes: resolutionNotes || undefined,
|
||
|
|
actual_cost: actualCost ? Number(actualCost) : undefined,
|
||
|
|
}),
|
||
|
|
})
|
||
|
|
setLoading(false)
|
||
|
|
toast.success("Status updated")
|
||
|
|
router.refresh()
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="rounded-xl border border-white/[0.06] bg-[#16161f] p-5 space-y-4">
|
||
|
|
<h3 className="text-xs font-medium uppercase tracking-wider text-white/30">Update Status</h3>
|
||
|
|
|
||
|
|
<div className="flex gap-2 flex-wrap">
|
||
|
|
{STATUSES.map((s) => (
|
||
|
|
<button
|
||
|
|
key={s.value}
|
||
|
|
onClick={() => updateStatus(s.value)}
|
||
|
|
disabled={loading || request.status === s.value}
|
||
|
|
className={`rounded-lg border px-3 py-1.5 text-xs font-medium transition disabled:opacity-40 ${
|
||
|
|
request.status === s.value
|
||
|
|
? "opacity-40 cursor-default"
|
||
|
|
: s.color
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{s.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="mb-1.5 block text-xs font-medium text-white/50">Resolution Notes</label>
|
||
|
|
<textarea
|
||
|
|
rows={3}
|
||
|
|
value={resolutionNotes}
|
||
|
|
onChange={(e) => setResolutionNotes(e.target.value)}
|
||
|
|
placeholder="Describe what was done to resolve the issue..."
|
||
|
|
className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none ring-indigo-500 transition focus:border-indigo-500/50 focus:ring-1 resize-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="mb-1.5 block text-xs font-medium text-white/50">Actual Cost ($)</label>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
step="0.01"
|
||
|
|
min="0"
|
||
|
|
value={actualCost}
|
||
|
|
onChange={(e) => setActualCost(e.target.value)}
|
||
|
|
placeholder="0.00"
|
||
|
|
className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none ring-indigo-500 transition focus:border-indigo-500/50 focus:ring-1"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={() => updateStatus(request.status)}
|
||
|
|
disabled={loading}
|
||
|
|
className="w-full rounded-lg bg-indigo-600 py-2 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50 transition"
|
||
|
|
>
|
||
|
|
{loading ? "Saving..." : "Save Notes"}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|