Add 'Personalised' badge to orders with custom designs

src/app/admin/orders/page.tsx

@@ -52,10 +52,15 @@ export default async function OrdersPage({ searchParams }: { searchParams: { arc
         <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">
-          {orders.map((order) => (
-            <div key={order.id} className="flex items-center gap-4 py-4">
-              <Link href={`/admin/orders/${order.id}`} className="flex flex-1 items-center gap-4 hover:opacity-80">
-                <div className="flex-1">
+          {orders.map((order) => {
+            const hasPersonalised = order.items.some((item) => {
+              const design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
+              return design.front.length > 0 || design.back.length > 0;
+            });
+            return (
+              <div key={order.id} className="flex flex-wrap items-center gap-x-4 gap-y-2 py-4">
+                <Link href={`/admin/orders/${order.id}`} className="flex flex-1 items-center gap-4 hover:opacity-80 min-w-0">
+                  <div className="flex-1 min-w-0">
                     <p className="font-medium">{order.email ?? 'No email yet'}</p>
                     <p className="text-sm text-muted">
                       {order.items.length} item{order.items.length === 1 ? '' : 's'} ·{' '}
@@ -65,11 +70,14 @@ export default async function OrdersPage({ searchParams }: { searchParams: { arc
                       })}
                     </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={`tag-label rounded-full px-3 py-1 ${STATUS_STYLES[order.status] ?? ''}`}>
                   {order.status}
                 </span>
-              </Link>
                 <form action={showArchived ? unarchiveOrder : archiveOrder}>
                   <input type="hidden" name="id" value={order.id} />
                   <button type="submit" className="tag-label text-muted hover:text-clay">
@@ -77,7 +85,8 @@ export default async function OrdersPage({ searchParams }: { searchParams: { arc
                   </button>
                 </form>
               </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>