feat(commissions): add editable assignment and artwork linkage

This commit is contained in:
2026-02-12 22:59:53 +01:00
parent 7a82934fe7
commit 741883465c
7 changed files with 235 additions and 9 deletions

View File

@@ -2,8 +2,11 @@ import {
commissionKanbanOrder,
createCommission,
createCustomer,
db,
listArtworks,
listCommissions,
listCustomers,
updateCommission,
updateCommissionStatus,
} from "@cms/db"
import { Button } from "@cms/ui/button"
@@ -67,6 +70,19 @@ function readNullableDate(formData: FormData, field: string): Date | null {
return parsed
}
function readUuidList(formData: FormData, field: string): string[] {
const raw = readInputString(formData, field)
if (!raw) {
return []
}
return raw
.split(",")
.map((entry) => entry.trim())
.filter((entry) => entry.length > 0)
}
function redirectWithState(params: { notice?: string; error?: string }) {
const query = new URLSearchParams()
@@ -124,6 +140,7 @@ async function createCommissionAction(formData: FormData) {
status: readInputString(formData, "status"),
customerId: readNullableString(formData, "customerId"),
assignedUserId: readNullableString(formData, "assignedUserId"),
linkedArtworkIds: readUuidList(formData, "linkedArtworkIds"),
budgetMin: readNullableNumber(formData, "budgetMin"),
budgetMax: readNullableNumber(formData, "budgetMax"),
dueAt: readNullableDate(formData, "dueAt"),
@@ -136,6 +153,35 @@ async function createCommissionAction(formData: FormData) {
redirectWithState({ notice: "Commission created." })
}
async function updateCommissionAction(formData: FormData) {
"use server"
await requirePermissionForRoute({
nextPath: "/commissions",
permission: "commissions:write",
scope: "own",
})
try {
await updateCommission({
id: readInputString(formData, "id"),
title: readInputString(formData, "title"),
description: readNullableString(formData, "description"),
customerId: readNullableString(formData, "customerId"),
assignedUserId: readNullableString(formData, "assignedUserId"),
linkedArtworkIds: readUuidList(formData, "linkedArtworkIds"),
budgetMin: readNullableNumber(formData, "budgetMin"),
budgetMax: readNullableNumber(formData, "budgetMax"),
dueAt: readNullableDate(formData, "dueAt"),
})
} catch {
redirectWithState({ error: "Failed to update commission details." })
}
revalidatePath("/commissions")
redirectWithState({ notice: "Commission updated." })
}
async function updateCommissionStatusAction(formData: FormData) {
"use server"
@@ -166,6 +212,14 @@ function formatDate(value: Date | null) {
return value.toLocaleDateString("en-US")
}
function formatDateInput(value: Date | null) {
if (!value) {
return ""
}
return value.toISOString().slice(0, 10)
}
export default async function CommissionsManagementPage({
searchParams,
}: {
@@ -177,10 +231,22 @@ export default async function CommissionsManagementPage({
scope: "own",
})
const [resolvedSearchParams, customers, commissions] = await Promise.all([
const [resolvedSearchParams, customers, commissions, assignees, artworks] = await Promise.all([
searchParams,
listCustomers(200),
listCommissions(300),
db.user.findMany({
where: {
isBanned: false,
},
orderBy: [{ createdAt: "asc" }],
select: {
id: true,
name: true,
username: true,
},
}),
listArtworks(300),
])
const notice = readFirstValue(resolvedSearchParams.notice)
@@ -309,11 +375,18 @@ export default async function CommissionsManagementPage({
</div>
<div className="grid gap-3 md:grid-cols-3">
<label className="space-y-1">
<span className="text-xs text-neutral-600">Assigned user id</span>
<input
<span className="text-xs text-neutral-600">Assigned user</span>
<select
name="assignedUserId"
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
/>
>
<option value="">(none)</option>
{assignees.map((assignee) => (
<option key={assignee.id} value={assignee.id}>
{assignee.name} @{assignee.username ?? "no-user"}
</option>
))}
</select>
</label>
<label className="space-y-1">
<span className="text-xs text-neutral-600">Budget min</span>
@@ -344,6 +417,14 @@ export default async function CommissionsManagementPage({
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
/>
</label>
<label className="space-y-1">
<span className="text-xs text-neutral-600">Linked artwork IDs (comma separated)</span>
<textarea
name="linkedArtworkIds"
rows={2}
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
/>
</label>
<Button type="submit">Create commission</Button>
</form>
</article>
@@ -383,6 +464,9 @@ export default async function CommissionsManagementPage({
<p className="text-xs text-neutral-600">
{commission.customer?.name ?? "No customer"}
</p>
<p className="text-xs text-neutral-500">
Assignee: {commission.assignedUser?.name ?? "none"}
</p>
<p className="text-xs text-neutral-500">
Due: {formatDate(commission.dueAt)}
</p>
@@ -406,6 +490,99 @@ export default async function CommissionsManagementPage({
Move
</button>
</div>
<details className="mt-2 rounded border border-neutral-200 p-2 text-xs">
<summary className="cursor-pointer text-neutral-700">
Edit details
</summary>
<form action={updateCommissionAction} className="mt-2 space-y-2">
<input type="hidden" name="id" value={commission.id} />
<input
name="title"
defaultValue={commission.title}
className="w-full rounded border border-neutral-300 px-2 py-1"
/>
<textarea
name="description"
rows={2}
defaultValue={commission.description ?? ""}
className="w-full rounded border border-neutral-300 px-2 py-1"
/>
<select
name="customerId"
defaultValue={commission.customerId ?? ""}
className="w-full rounded border border-neutral-300 px-2 py-1"
>
<option value="">(no customer)</option>
{customers.map((customer) => (
<option
key={`${commission.id}-customer-${customer.id}`}
value={customer.id}
>
{customer.name}
</option>
))}
</select>
<select
name="assignedUserId"
defaultValue={commission.assignedUserId ?? ""}
className="w-full rounded border border-neutral-300 px-2 py-1"
>
<option value="">(no assignee)</option>
{assignees.map((assignee) => (
<option
key={`${commission.id}-assignee-${assignee.id}`}
value={assignee.id}
>
{assignee.name}
</option>
))}
</select>
<div className="grid grid-cols-2 gap-2">
<input
name="budgetMin"
type="number"
min={0}
step="0.01"
defaultValue={commission.budgetMin ?? ""}
placeholder="Budget min"
className="rounded border border-neutral-300 px-2 py-1"
/>
<input
name="budgetMax"
type="number"
min={0}
step="0.01"
defaultValue={commission.budgetMax ?? ""}
placeholder="Budget max"
className="rounded border border-neutral-300 px-2 py-1"
/>
</div>
<input
name="dueAt"
type="date"
defaultValue={formatDateInput(commission.dueAt)}
className="w-full rounded border border-neutral-300 px-2 py-1"
/>
<textarea
name="linkedArtworkIds"
rows={2}
defaultValue={commission.linkedArtworkIds.join(",")}
placeholder="Artwork IDs"
className="w-full rounded border border-neutral-300 px-2 py-1"
/>
<button
type="submit"
className="rounded border border-neutral-300 px-2 py-1 text-xs"
>
Save details
</button>
</form>
</details>
{commission.linkedArtworkIds.length > 0 ? (
<p className="mt-2 text-[11px] text-neutral-500">
Linked artworks: {commission.linkedArtworkIds.length}
</p>
) : null}
</form>
))
)}
@@ -449,6 +626,24 @@ export default async function CommissionsManagementPage({
</table>
</div>
</section>
<section className="rounded-xl border border-neutral-200 p-6">
<h2 className="text-xl font-medium">Artwork Reference</h2>
<p className="mt-1 text-sm text-neutral-600">
Use these IDs when linking artworks to commissions.
</p>
<div className="mt-3 max-h-64 overflow-auto rounded border border-neutral-200 p-3 text-xs">
{artworks.length === 0 ? (
<p className="text-neutral-500">No artworks available.</p>
) : (
artworks.map((artwork) => (
<p key={artwork.id} className="font-mono text-neutral-700">
{artwork.id} - {artwork.title}
</p>
))
)}
</div>
</section>
</AdminShell>
)
}