feat: Add dashboard store-attention queue

src/components/admin/AttentionQueue/index.scss

@@ -0,0 +1,109 @@
+.attention-queue {
+  padding: 1.15rem 1.25rem;
+  border: 1px solid var(--theme-elevation-100);
+  border-radius: var(--style-radius-s, 3px);
+  background: var(--theme-elevation-0);
+
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 0.85rem;
+
+    h3 {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin: 0;
+      font-size: 0.95rem;
+      font-weight: 600;
+    }
+
+    > span {
+      color: var(--theme-elevation-450);
+      font-size: 0.78rem;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  &__icon {
+    flex: 0 0 auto;
+    color: var(--theme-elevation-500);
+  }
+
+  &__items {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.45rem;
+  }
+
+  &__item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 0.8rem;
+    min-width: 0;
+    padding: 0.75rem 0.85rem;
+    border-radius: var(--style-radius-s, 3px);
+    color: var(--theme-elevation-850);
+    background: var(--theme-elevation-50);
+    text-decoration: none;
+    transition: background-color 120ms ease;
+
+    &:hover {
+      background: var(--theme-elevation-100);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--theme-elevation-700);
+      outline-offset: 2px;
+    }
+
+    &--urgent .attention-queue__count {
+      color: var(--theme-error-500);
+    }
+  }
+
+  &__copy {
+    display: flex;
+    flex-direction: column;
+    gap: 0.16rem;
+    min-width: 0;
+
+    strong {
+      color: var(--theme-elevation-900);
+      font-size: 0.86rem;
+      font-weight: 600;
+    }
+
+    > span {
+      color: var(--theme-elevation-500);
+      font-size: 0.76rem;
+      line-height: 1.35;
+    }
+  }
+
+  &__count {
+    color: var(--theme-elevation-850);
+    font-size: 1rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__arrow {
+    color: var(--theme-elevation-450);
+    font-size: 1rem;
+  }
+
+  &__empty {
+    margin: 0;
+    color: var(--theme-elevation-500);
+  }
+
+  @media (max-width: 62rem) {
+    &__items {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}

src/components/admin/AttentionQueue/index.tsx

@@ -0,0 +1,119 @@
+import Link from 'next/link'
+import React from 'react'
+
+import type { AttentionCounts } from '../Dashboard/queries'
+import { IconAttention } from '../icons'
+
+import './index.scss'
+
+type Props = {
+  adminPath: string
+  counts: AttentionCounts
+}
+
+type Filter = { field: string; operator: string; value: string }
+
+const filteredHref = (adminPath: string, collection: string, filters: Filter[] = []) => {
+  const path = `${adminPath}/collections/${collection}`
+  if (!filters.length) return path
+  const query = new URLSearchParams()
+  filters.forEach((filter, index) => {
+    query.set(`where[and][${index}][${filter.field}][${filter.operator}]`, filter.value)
+  })
+  return `${path}?${query}`
+}
+
+export const AttentionQueue: React.FC<Props> = ({ adminPath, counts }) => {
+  const items = [
+    {
+      count: counts.processingOrders,
+      detail: 'Paid orders waiting to be handled',
+      href: filteredHref(adminPath, 'orders', [
+        { field: 'status', operator: 'equals', value: 'processing' },
+      ]),
+      label: 'Orders to process',
+    },
+    {
+      count: counts.failedPayments,
+      detail: 'Payment attempts failed in the last 24 hours',
+      href: filteredHref(adminPath, 'transactions', [
+        { field: 'status', operator: 'equals', value: 'failed' },
+      ]),
+      label: 'Failed payments',
+      tone: 'urgent',
+    },
+    {
+      count: counts.stalledPayments,
+      detail: 'Payments pending for more than 30 minutes',
+      href: filteredHref(adminPath, 'transactions', [
+        { field: 'status', operator: 'equals', value: 'pending' },
+      ]),
+      label: 'Stalled payments',
+    },
+    {
+      count: counts.incompleteCheckouts,
+      detail: 'Carts left untouched for at least 24 hours',
+      href: filteredHref(adminPath, 'carts', [
+        { field: 'purchasedAt', operator: 'exists', value: 'false' },
+      ]),
+      label: 'Incomplete checkouts',
+    },
+    {
+      count: counts.outOfStockProducts,
+      detail: 'Published products with no stock remaining',
+      href: filteredHref(adminPath, 'products', [
+        { field: 'enableVariants', operator: 'not_equals', value: 'true' },
+        { field: 'inventory', operator: 'less_than_equal', value: '0' },
+        { field: '_status', operator: 'equals', value: 'published' },
+      ]),
+      label: 'Products out of stock',
+    },
+    {
+      count: counts.outOfStockVariants,
+      detail: 'Published variants with no stock remaining',
+      href: filteredHref(adminPath, 'variants', [
+        { field: 'inventory', operator: 'less_than_equal', value: '0' },
+        { field: '_status', operator: 'equals', value: 'published' },
+      ]),
+      label: 'Variants out of stock',
+    },
+  ].filter((item) => item.count > 0)
+  const total = items.reduce((sum, item) => sum + item.count, 0)
+
+  return (
+    <section className="attention-queue">
+      <header className="attention-queue__head">
+        <h3>
+          <IconAttention className="attention-queue__icon" />
+          Needs attention
+        </h3>
+        {total > 0 && <span>{total} open</span>}
+      </header>
+
+      {items.length === 0 ? (
+        <p className="attention-queue__empty">
+          You’re caught up. There is nothing urgent to handle.
+        </p>
+      ) : (
+        <div className="attention-queue__items">
+          {items.map((item) => (
+            <Link
+              className={`attention-queue__item${item.tone ? ` attention-queue__item--${item.tone}` : ''}`}
+              href={item.href}
+              key={item.label}
+            >
+              <span className="attention-queue__copy">
+                <strong>{item.label}</strong>
+                <span>{item.detail}</span>
+              </span>
+              <span className="attention-queue__count">{item.count.toLocaleString('en-US')}</span>
+              <span aria-hidden="true" className="attention-queue__arrow">
+                ↗
+              </span>
+            </Link>
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

src/components/admin/Dashboard/index.tsx

@@ -3,6 +3,7 @@ import { getPayload } from 'payload'
 import React from 'react'
 
 import { AnalyticsControls } from '../AnalyticsControls'
+import { AttentionQueue } from '../AttentionQueue'
 import { IconAverage, IconOrders, IconProducts, IconRevenue, IconStock } from '../icons'
 import { KpiStrip, type Kpi } from '../KpiStrip'
 import { OrderHealth } from '../OrderHealth'
@@ -124,6 +125,7 @@ async function getOverview(filters: DashboardFilters) {
 
   return {
     currentDaily: current.dailyNetSales,
+    attention: orderData.attention,
     currentRevenue: current.netSales,
     currentOrders: current.netOrders,
     currentAov: current.averageOrderValue,
@@ -146,7 +148,6 @@ async function getOverview(filters: DashboardFilters) {
     statusCounts: orderData.statusCounts,
     popular,
     lowStock,
-    unfinishedPayments: orderData.unfinishedPayments,
     window,
   }
 }
@@ -231,6 +232,8 @@ export const Dashboard: React.FC<{
 
       <KpiStrip items={kpis} />
 
+      <AttentionQueue adminPath={adminPath} counts={s.attention} />
+
       <div className={`${baseClass}__split`}>
         <RevenueTrend
           breakdown={[
@@ -258,7 +261,7 @@ export const Dashboard: React.FC<{
       </div>
 
       <div className={`${baseClass}__columns`}>
-        <OrderHealth counts={s.statusCounts} unfinishedPayments={s.unfinishedPayments} />
+        <OrderHealth counts={s.statusCounts} />
 
         <div className={`${baseClass}__panel`}>
           <h3 className={`${baseClass}__panel-heading`}>