455 lines
15 KiB
TypeScript
455 lines
15 KiB
TypeScript
import {
|
|
commissionKanbanOrder,
|
|
createCommission,
|
|
createCustomer,
|
|
listCommissions,
|
|
listCustomers,
|
|
updateCommissionStatus,
|
|
} from "@cms/db"
|
|
import { Button } from "@cms/ui/button"
|
|
import { revalidatePath } from "next/cache"
|
|
import { redirect } from "next/navigation"
|
|
|
|
import { AdminShell } from "@/components/admin-shell"
|
|
import { requirePermissionForRoute } from "@/lib/route-guards"
|
|
|
|
export const dynamic = "force-dynamic"
|
|
|
|
type SearchParamsInput = Record<string, string | string[] | undefined>
|
|
|
|
function readFirstValue(value: string | string[] | undefined): string | null {
|
|
if (Array.isArray(value)) {
|
|
return value[0] ?? null
|
|
}
|
|
|
|
return value ?? null
|
|
}
|
|
|
|
function readInputString(formData: FormData, field: string): string {
|
|
const value = formData.get(field)
|
|
return typeof value === "string" ? value.trim() : ""
|
|
}
|
|
|
|
function readNullableString(formData: FormData, field: string): string | null {
|
|
const value = readInputString(formData, field)
|
|
return value.length > 0 ? value : null
|
|
}
|
|
|
|
function readNullableNumber(formData: FormData, field: string): number | null {
|
|
const value = readInputString(formData, field)
|
|
|
|
if (!value) {
|
|
return null
|
|
}
|
|
|
|
const parsed = Number.parseFloat(value)
|
|
|
|
if (!Number.isFinite(parsed)) {
|
|
return null
|
|
}
|
|
|
|
return parsed
|
|
}
|
|
|
|
function readNullableDate(formData: FormData, field: string): Date | null {
|
|
const value = readInputString(formData, field)
|
|
|
|
if (!value) {
|
|
return null
|
|
}
|
|
|
|
const parsed = new Date(value)
|
|
|
|
if (Number.isNaN(parsed.getTime())) {
|
|
return null
|
|
}
|
|
|
|
return parsed
|
|
}
|
|
|
|
function redirectWithState(params: { notice?: string; error?: string }) {
|
|
const query = new URLSearchParams()
|
|
|
|
if (params.notice) {
|
|
query.set("notice", params.notice)
|
|
}
|
|
|
|
if (params.error) {
|
|
query.set("error", params.error)
|
|
}
|
|
|
|
const value = query.toString()
|
|
redirect(value ? `/commissions?${value}` : "/commissions")
|
|
}
|
|
|
|
async function createCustomerAction(formData: FormData) {
|
|
"use server"
|
|
|
|
await requirePermissionForRoute({
|
|
nextPath: "/commissions",
|
|
permission: "commissions:write",
|
|
scope: "own",
|
|
})
|
|
|
|
try {
|
|
await createCustomer({
|
|
name: readInputString(formData, "name"),
|
|
email: readNullableString(formData, "email"),
|
|
phone: readNullableString(formData, "phone"),
|
|
instagram: readNullableString(formData, "instagram"),
|
|
notes: readNullableString(formData, "notes"),
|
|
isRecurring: readInputString(formData, "isRecurring") === "true",
|
|
})
|
|
} catch {
|
|
redirectWithState({ error: "Failed to create customer." })
|
|
}
|
|
|
|
revalidatePath("/commissions")
|
|
redirectWithState({ notice: "Customer created." })
|
|
}
|
|
|
|
async function createCommissionAction(formData: FormData) {
|
|
"use server"
|
|
|
|
await requirePermissionForRoute({
|
|
nextPath: "/commissions",
|
|
permission: "commissions:write",
|
|
scope: "own",
|
|
})
|
|
|
|
try {
|
|
await createCommission({
|
|
title: readInputString(formData, "title"),
|
|
description: readNullableString(formData, "description"),
|
|
status: readInputString(formData, "status"),
|
|
customerId: readNullableString(formData, "customerId"),
|
|
assignedUserId: readNullableString(formData, "assignedUserId"),
|
|
budgetMin: readNullableNumber(formData, "budgetMin"),
|
|
budgetMax: readNullableNumber(formData, "budgetMax"),
|
|
dueAt: readNullableDate(formData, "dueAt"),
|
|
})
|
|
} catch {
|
|
redirectWithState({ error: "Failed to create commission." })
|
|
}
|
|
|
|
revalidatePath("/commissions")
|
|
redirectWithState({ notice: "Commission created." })
|
|
}
|
|
|
|
async function updateCommissionStatusAction(formData: FormData) {
|
|
"use server"
|
|
|
|
await requirePermissionForRoute({
|
|
nextPath: "/commissions",
|
|
permission: "commissions:transition",
|
|
scope: "own",
|
|
})
|
|
|
|
try {
|
|
await updateCommissionStatus({
|
|
id: readInputString(formData, "id"),
|
|
status: readInputString(formData, "status"),
|
|
})
|
|
} catch {
|
|
redirectWithState({ error: "Failed to transition commission." })
|
|
}
|
|
|
|
revalidatePath("/commissions")
|
|
redirectWithState({ notice: "Commission status updated." })
|
|
}
|
|
|
|
function formatDate(value: Date | null) {
|
|
if (!value) {
|
|
return "-"
|
|
}
|
|
|
|
return value.toLocaleDateString("en-US")
|
|
}
|
|
|
|
export default async function CommissionsManagementPage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<SearchParamsInput>
|
|
}) {
|
|
const role = await requirePermissionForRoute({
|
|
nextPath: "/commissions",
|
|
permission: "commissions:read",
|
|
scope: "own",
|
|
})
|
|
|
|
const [resolvedSearchParams, customers, commissions] = await Promise.all([
|
|
searchParams,
|
|
listCustomers(200),
|
|
listCommissions(300),
|
|
])
|
|
|
|
const notice = readFirstValue(resolvedSearchParams.notice)
|
|
const error = readFirstValue(resolvedSearchParams.error)
|
|
|
|
return (
|
|
<AdminShell
|
|
role={role}
|
|
activePath="/commissions"
|
|
badge="Admin App"
|
|
title="Commissions"
|
|
description="Manage customers and commission requests with kanban-style status transitions."
|
|
>
|
|
{notice ? (
|
|
<section className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
|
|
{notice}
|
|
</section>
|
|
) : null}
|
|
|
|
{error ? (
|
|
<section className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800">
|
|
{error}
|
|
</section>
|
|
) : null}
|
|
|
|
<section className="grid gap-4 xl:grid-cols-2">
|
|
<article className="rounded-xl border border-neutral-200 p-6">
|
|
<h2 className="text-xl font-medium">Create Customer</h2>
|
|
<form action={createCustomerAction} className="mt-4 space-y-3">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Name</span>
|
|
<input
|
|
name="name"
|
|
required
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Email</span>
|
|
<input
|
|
name="email"
|
|
type="email"
|
|
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">Phone</span>
|
|
<input
|
|
name="phone"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Instagram</span>
|
|
<input
|
|
name="instagram"
|
|
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">Notes</span>
|
|
<textarea
|
|
name="notes"
|
|
rows={3}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<label className="inline-flex items-center gap-2 text-sm text-neutral-700">
|
|
<input name="isRecurring" type="checkbox" value="true" className="size-4" />
|
|
Recurring customer
|
|
</label>
|
|
<Button type="submit">Create customer</Button>
|
|
</form>
|
|
</article>
|
|
|
|
<article className="rounded-xl border border-neutral-200 p-6">
|
|
<h2 className="text-xl font-medium">Create Commission</h2>
|
|
<form action={createCommissionAction} className="mt-4 space-y-3">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Title</span>
|
|
<input
|
|
name="title"
|
|
required
|
|
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">Description</span>
|
|
<textarea
|
|
name="description"
|
|
rows={3}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Status</span>
|
|
<select
|
|
name="status"
|
|
defaultValue="new"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
>
|
|
{commissionKanbanOrder.map((status) => (
|
|
<option key={status} value={status}>
|
|
{status}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Customer</span>
|
|
<select
|
|
name="customerId"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
>
|
|
<option value="">(none)</option>
|
|
{customers.map((customer) => (
|
|
<option key={customer.id} value={customer.id}>
|
|
{customer.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</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
|
|
name="assignedUserId"
|
|
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">Budget min</span>
|
|
<input
|
|
name="budgetMin"
|
|
type="number"
|
|
min={0}
|
|
step="0.01"
|
|
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">Budget max</span>
|
|
<input
|
|
name="budgetMax"
|
|
type="number"
|
|
min={0}
|
|
step="0.01"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Due date</span>
|
|
<input
|
|
name="dueAt"
|
|
type="date"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<Button type="submit">Create commission</Button>
|
|
</form>
|
|
</article>
|
|
</section>
|
|
|
|
<section className="space-y-4">
|
|
<h2 className="text-xl font-medium">Kanban Board</h2>
|
|
<div className="grid gap-3 xl:grid-cols-6">
|
|
{commissionKanbanOrder.map((status) => {
|
|
const items = commissions.filter((commission) => commission.status === status)
|
|
|
|
return (
|
|
<article
|
|
key={status}
|
|
className="rounded-xl border border-neutral-200 bg-neutral-50 p-3"
|
|
>
|
|
<header className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-700">
|
|
{status}
|
|
</h3>
|
|
<span className="text-xs text-neutral-500">{items.length}</span>
|
|
</header>
|
|
|
|
<div className="space-y-2">
|
|
{items.length === 0 ? (
|
|
<p className="text-xs text-neutral-500">No commissions</p>
|
|
) : (
|
|
items.map((commission) => (
|
|
<form
|
|
key={commission.id}
|
|
action={updateCommissionStatusAction}
|
|
className="rounded border border-neutral-200 bg-white p-2"
|
|
>
|
|
<input type="hidden" name="id" value={commission.id} />
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium">{commission.title}</p>
|
|
<p className="text-xs text-neutral-600">
|
|
{commission.customer?.name ?? "No customer"}
|
|
</p>
|
|
<p className="text-xs text-neutral-500">
|
|
Due: {formatDate(commission.dueAt)}
|
|
</p>
|
|
</div>
|
|
<div className="mt-2 flex items-center gap-2">
|
|
<select
|
|
name="status"
|
|
defaultValue={commission.status}
|
|
className="w-full rounded border border-neutral-300 px-2 py-1 text-xs"
|
|
>
|
|
{commissionKanbanOrder.map((value) => (
|
|
<option key={value} value={value}>
|
|
{value}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<button
|
|
type="submit"
|
|
className="rounded border border-neutral-300 px-2 py-1 text-xs"
|
|
>
|
|
Move
|
|
</button>
|
|
</div>
|
|
</form>
|
|
))
|
|
)}
|
|
</div>
|
|
</article>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-xl border border-neutral-200 p-6">
|
|
<h2 className="text-xl font-medium">Customers</h2>
|
|
<div className="mt-4 overflow-x-auto">
|
|
<table className="min-w-full text-left text-sm">
|
|
<thead className="text-xs uppercase tracking-wide text-neutral-500">
|
|
<tr>
|
|
<th className="py-2 pr-4">Name</th>
|
|
<th className="py-2 pr-4">Email</th>
|
|
<th className="py-2 pr-4">Phone</th>
|
|
<th className="py-2 pr-4">Recurring</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{customers.length === 0 ? (
|
|
<tr>
|
|
<td className="py-3 text-neutral-500" colSpan={4}>
|
|
No customers yet.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
customers.map((customer) => (
|
|
<tr key={customer.id} className="border-t border-neutral-200">
|
|
<td className="py-3 pr-4">{customer.name}</td>
|
|
<td className="py-3 pr-4 text-neutral-600">{customer.email ?? "-"}</td>
|
|
<td className="py-3 pr-4 text-neutral-600">{customer.phone ?? "-"}</td>
|
|
<td className="py-3 pr-4">{customer.isRecurring ? "yes" : "no"}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</AdminShell>
|
|
)
|
|
}
|