feat(commissions): add editable assignment and artwork linkage
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user