126 lines
5.0 KiB
TypeScript
126 lines
5.0 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import { prisma } from "@/lib/prisma";
|
|
|
|
const statusStyles: Record<string, string> = {
|
|
ACCEPTED:
|
|
"bg-sky-500/20 text-sky-700 border-sky-500/40 dark:bg-sky-500/15 dark:text-sky-300 dark:border-sky-500/30",
|
|
INPROGRESS:
|
|
"bg-amber-500/20 text-amber-700 border-amber-500/40 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-500/30",
|
|
COMPLETED:
|
|
"bg-emerald-500/20 text-emerald-700 border-emerald-500/40 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-500/30",
|
|
};
|
|
|
|
const statusLabels: Record<string, string> = {
|
|
ACCEPTED: "Accepted",
|
|
INPROGRESS: "In progress",
|
|
COMPLETED: "Completed",
|
|
};
|
|
|
|
export default async function CommissionStatusPage() {
|
|
const [queueItems, doneItems] = await Promise.all([
|
|
prisma.commissionRequest.findMany({
|
|
where: { status: { in: ["ACCEPTED", "INPROGRESS"] } },
|
|
include: { type: true, option: true, extras: true, customCard: true },
|
|
orderBy: { createdAt: "desc" },
|
|
}),
|
|
prisma.commissionRequest.findMany({
|
|
where: { status: "COMPLETED" },
|
|
include: { type: true, option: true, extras: true, customCard: true },
|
|
orderBy: { createdAt: "desc" },
|
|
}),
|
|
]);
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-6xl px-4 py-8 flex flex-col gap-8">
|
|
<div className="flex flex-col gap-2">
|
|
<h1 className="text-3xl font-bold">Commission Status</h1>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
<section className="rounded-2xl border border-border/60 bg-muted/20 p-4 sm:p-6">
|
|
<div className="mb-4">
|
|
<h2 className="text-xl font-semibold">Commissions Queue</h2>
|
|
<p className="text-sm text-muted-foreground">Accepted and in progress</p>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
{queueItems.length > 0 ? (
|
|
queueItems.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="rounded-xl border border-border/60 bg-background p-4 shadow-sm"
|
|
>
|
|
<div className="font-semibold text-lg">{item.customerName}</div>
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
<Badge variant="outline">
|
|
{item.customCard?.name ?? item.type?.name ?? "Custom"}
|
|
</Badge>
|
|
<Badge variant="outline">
|
|
{item.option?.name ?? "Base option"}
|
|
</Badge>
|
|
{item.extras.map((extra) => (
|
|
<Badge key={extra.id} variant="secondary">
|
|
{extra.name}
|
|
</Badge>
|
|
))}
|
|
{item.extras.length === 0 ? (
|
|
<Badge variant="secondary">No extras</Badge>
|
|
) : null}
|
|
<Badge className={statusStyles[item.status] ?? ""}>
|
|
{statusLabels[item.status] ?? item.status}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="rounded-xl border border-dashed border-border/60 bg-background p-4 text-sm text-muted-foreground">
|
|
No public items yet.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-border/60 bg-muted/20 p-4 sm:p-6">
|
|
<div className="mb-4">
|
|
<h2 className="text-xl font-semibold">Done</h2>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
{doneItems.length > 0 ? (
|
|
doneItems.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="rounded-xl border border-border/60 bg-background p-4 shadow-sm"
|
|
>
|
|
<div className="font-semibold text-lg">{item.customerName}</div>
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
<Badge variant="outline">
|
|
{item.customCard?.name ?? item.type?.name ?? "Custom"}
|
|
</Badge>
|
|
<Badge variant="outline">
|
|
{item.option?.name ?? "Base option"}
|
|
</Badge>
|
|
{item.extras.map((extra) => (
|
|
<Badge key={extra.id} variant="secondary">
|
|
{extra.name}
|
|
</Badge>
|
|
))}
|
|
{item.extras.length === 0 ? (
|
|
<Badge variant="secondary">No extras</Badge>
|
|
) : null}
|
|
<Badge className={statusStyles[item.status] ?? ""}>
|
|
{statusLabels[item.status] ?? item.status}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="rounded-xl border border-dashed border-border/60 bg-background p-4 text-sm text-muted-foreground">
|
|
No completed items yet.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|