andymick01/craft2prints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 'Personalised' badge to orders with custom designs

Browse Source
This commit is contained in:
Andymick
2026-07-18 10:12:51 +01:00
parent 095e8ad459
commit 64b57b8680
1 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/orders/page.tsx
+31 -22
View File
@@ -52,32 +52,41 @@ export default async function OrdersPage({ searchParams }: { searchParams: { arc
<p className="mt-10 text-sm text-muted">{showArchived ? 'Nothing archived yet.' : 'No orders yet.'}</p> <p className="mt-10 text-sm text-muted">{showArchived ? 'Nothing archived yet.' : 'No orders yet.'}</p>
) : ( ) : (
<div className="mt-8 divide-y divide-line border-t border-line"> <div className="mt-8 divide-y divide-line border-t border-line">
{orders.map((order) => ( {orders.map((order) => {
<div key={order.id} className="flex items-center gap-4 py-4"> const hasPersonalised = order.items.some((item) => {
<Link href={`/admin/orders/${order.id}`} className="flex flex-1 items-center gap-4 hover:opacity-80"> const design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
<div className="flex-1"> return design.front.length > 0 || design.back.length > 0;
<p className="font-medium">{order.email ?? 'No email yet'}</p> });
<p className="text-sm text-muted"> return (
{order.items.length} item{order.items.length === 1 ? '' : 's'} ·{' '} <div key={order.id} className="flex flex-wrap items-center gap-x-4 gap-y-2 py-4">
{new Date(order.createdAt).toLocaleString(undefined, { <Link href={`/admin/orders/${order.id}`} className="flex flex-1 items-center gap-4 hover:opacity-80 min-w-0">
dateStyle: 'medium', <div className="flex-1 min-w-0">
timeStyle: 'short', <p className="font-medium">{order.email ?? 'No email yet'}</p>
})} <p className="text-sm text-muted">
</p> {order.items.length} item{order.items.length === 1 ? '' : 's'} ·{' '}
</div> {new Date(order.createdAt).toLocaleString(undefined, {
dateStyle: 'medium',
timeStyle: 'short',
})}
</p>
</div>
</Link>
{hasPersonalised && (
<span className="tag-label rounded-full bg-splash-orange/10 px-3 py-1 text-splash-orange">Personalised</span>
)}
<span className="font-mono text-sm">{formatPrice(order.total)}</span> <span className="font-mono text-sm">{formatPrice(order.total)}</span>
<span className={`tag-label rounded-full px-3 py-1 ${STATUS_STYLES[order.status] ?? ''}`}> <span className={`tag-label rounded-full px-3 py-1 ${STATUS_STYLES[order.status] ?? ''}`}>
{order.status} {order.status}
</span> </span>
</Link> <form action={showArchived ? unarchiveOrder : archiveOrder}>
<form action={showArchived ? unarchiveOrder : archiveOrder}> <input type="hidden" name="id" value={order.id} />
<input type="hidden" name="id" value={order.id} /> <button type="submit" className="tag-label text-muted hover:text-clay">
<button type="submit" className="tag-label text-muted hover:text-clay"> {showArchived ? 'Unarchive' : 'Archive'}
{showArchived ? 'Unarchive' : 'Archive'} </button>
</button> </form>
</form> </div>
</div> );
))} })}
</div> </div>
)} )}
</div> </div>