Add filter to show only personalised orders

src/app/admin/orders/page.tsx

@@ -13,10 +13,11 @@ const STATUS_STYLES: Record<string, string> = {
   FAILED: 'bg-splash-pink/10 text-splash-pink',
 };
 
-export default async function OrdersPage({ searchParams }: { searchParams: { archived?: string } }) {
+export default async function OrdersPage({ searchParams }: { searchParams: { archived?: string; personalised?: string } }) {
   await autoArchiveOldOrders();
 
   const showArchived = searchParams.archived === '1';
+  const showOnlyPersonalised = searchParams.personalised === '1';
 
   let orders = [];
   try {
@@ -28,10 +29,28 @@ export default async function OrdersPage({ searchParams }: { searchParams: { arc
       include: { items: true },
     });
     orders.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+
+    // Filter to personalised orders if requested
+    if (showOnlyPersonalised) {
+      orders = orders.filter((order) =>
+        order.items.some((item) => {
+          const design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
+          return design.front.length > 0 || design.back.length > 0;
+        })
+      );
+    }
   } catch (err) {
     console.error('Error fetching orders:', err);
   }
 
+  const filterHref = (personalised: boolean) => {
+    const params = new URLSearchParams();
+    if (showArchived) params.set('archived', '1');
+    if (personalised) params.set('personalised', '1');
+    const qs = params.toString();
+    return `/admin/orders${qs ? `?${qs}` : ''}`;
+  };
+
   return (
     <div className="mx-auto max-w-4xl px-6 py-12">
       <AdminNav />
@@ -48,8 +67,30 @@ export default async function OrdersPage({ searchParams }: { searchParams: { arc
         </p>
       )}
 
+      {!showArchived && (
+        <div className="mt-6 flex flex-wrap items-center gap-2">
+          <span className="text-sm text-muted">Filter:</span>
+          <div className="inline-flex border border-line">
+            <Link
+              href={filterHref(false)}
+              className={`px-4 py-1.5 text-sm ${!showOnlyPersonalised ? 'bg-ink text-paper' : 'hover:text-clay'}`}
+            >
+              All
+            </Link>
+            <Link
+              href={filterHref(true)}
+              className={`px-4 py-1.5 text-sm ${showOnlyPersonalised ? 'bg-ink text-paper' : 'hover:text-clay'}`}
+            >
+              Personalised only
+            </Link>
+          </div>
+        </div>
+      )}
+
       {orders.length === 0 ? (
-        <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.' : showOnlyPersonalised ? 'No personalised orders yet.' : 'No orders yet.'}
+        </p>
       ) : (
         <div className="mt-8 divide-y divide-line border-t border-line">
           {orders.map((order) => {