From 9b3f30a01fb78c7812544782ef13644cfdce7514 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Sat, 24 Oct 2026 21:45:46 +0200
Subject: [PATCH] feat(process): show the blue price check on both Process
 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The blue price-check badge now appears under the purple AI marker on
every line the AI filled (reviewed or not):

  - quote Process page, mobile card: its own row under the header, so
    the one-line summary is readable on a phone
  - quote Process page, desktop table: inside the Description cell
    rather than the cramped 32-px "#" column, which has no room for a
    summary
  - order Process page: its own full-width row under the markers, so
    the summary is readable on a phone

The summary truncates rather than wrapping — the popover always shows
it in full.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/(app)/orders/[id]/process/page.tsx  | 20 ++++++++++++++++++++
 src/app/(app)/quotes/[id]/process/page.tsx  | 20 ++++++++++++++++++++
 src/components/quotes/process-item-card.tsx | 19 +++++++++++++++++++
 3 files changed, 59 insertions(+)

diff --git a/src/app/(app)/orders/[id]/process/page.tsx b/src/app/(app)/orders/[id]/process/page.tsx
index 7441980..008dc45 100644
--- a/src/app/(app)/orders/[id]/process/page.tsx
+++ b/src/app/(app)/orders/[id]/process/page.tsx
@@ -60,6 +60,7 @@ import { MarginApprovalDialog } from "@/components/margin-approval-dialog";
 import { SplitRemainderDialog } from "@/components/ui/split-remainder-dialog";
 import { AiItemHistoryTrigger } from "@/components/ai-item-history-trigger";
 import { AiFillMarker } from "@/components/ai-fill-marker";
+import { PriceCheckMarker } from "@/components/price-check-marker";
 import { orderAiRowClass } from "@/lib/order-assistant-review";
 import {
   orderReviewerFromAuthRecord,
@@ -2707,6 +2708,25 @@ function ItemCard({
           </div>
         </div>
 
+        {/* Price check — the blue badge. It goes under the purple AI
+            marker in the left-hand marker column, on its own full-width
+            row so the one-line summary is readable on a phone (it
+            truncates rather than wrapping). Only on lines the AI
+            filled, reviewed or not. */}
+        {item.ai_fill?.status === "filled" ? (
+          <div className="mt-1.5 flex items-center gap-1.5">
+            <PriceCheckMarker
+              itemId={item.id}
+              collection="order_items"
+              cost_price={item.cost_price}
+              selling_price={item.selling_price ?? 0}
+              supplier={item.supplier}
+              intel={item.ai_item_insights}
+              className="min-w-0 flex-1"
+            />
+          </div>
+        ) : null}
+
         {/* Middle row: qty + supplier + status badge — inline on all screens */}
         <div className="flex items-center flex-wrap gap-1.5 sm:gap-2 mt-2.5">
           {/* Quantity display:
diff --git a/src/app/(app)/quotes/[id]/process/page.tsx b/src/app/(app)/quotes/[id]/process/page.tsx
index a0ea9c5..ff0dcc8 100644
--- a/src/app/(app)/quotes/[id]/process/page.tsx
+++ b/src/app/(app)/quotes/[id]/process/page.tsx
@@ -53,6 +53,7 @@ import { ProcessItemCard } from "@/components/quotes/process-item-card";
 import { QuoteNoteCard } from "@/components/quotes/process-quote-note-card";
 import { AiItemHistoryTrigger } from "@/components/ai-item-history-trigger";
 import { AiFillMarker } from "@/components/ai-fill-marker";
+import { PriceCheckMarker } from "@/components/price-check-marker";
 import { AiFillQuoteButton } from "@/components/ai-fill-quote-button";
 import { aiRowClass, canAiFillQuote, isAiFillPending } from "@/lib/quote-assistant-review";
 import { reviewerFromAuthRecord, withAiReview } from "@/lib/quote-assistant-save";
@@ -1605,6 +1606,25 @@ export default function QuoteProcessPage({ params }: { params: Promise<{ id: str
                                 {isExpanded ? <ChevronUp className="h-3 w-3 ml-0.5" /> : <ChevronDown className="h-3 w-3 ml-0.5" />}
                               </Button>
                             </div>
+                            {/* Price check — the blue badge. It lives in
+                                the Description cell (not the cramped 32-px
+                                `#` column) so the one-line summary has
+                                room; it sits under the purple AI
+                                marker in the `#` column. Only on lines
+                                the AI filled, reviewed or not. */}
+                            {item.ai_fill?.status === "filled" ? (
+                              <div className="mt-1 flex items-center gap-1.5">
+                                <PriceCheckMarker
+                                  itemId={item.id}
+                                  collection="quote_items"
+                                  cost_price={item.cost_price}
+                                  selling_price={item.selling_price}
+                                  supplier={item.supplier}
+                                  intel={item.ai_item_insights}
+                                  className="min-w-0"
+                                />
+                              </div>
+                            ) : null}
                           </TableCell>
                           <TableCell className="p-1">
                             <Input
diff --git a/src/components/quotes/process-item-card.tsx b/src/components/quotes/process-item-card.tsx
index 2e51325..b82c456 100644
--- a/src/components/quotes/process-item-card.tsx
+++ b/src/components/quotes/process-item-card.tsx
@@ -10,6 +10,7 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { ProcessItemAttachments } from "@/components/quotes/process-item-attachments";
 import { AiFillMarker } from "@/components/ai-fill-marker";
+import { PriceCheckMarker } from "@/components/price-check-marker";
 import { aiRowClass, isAiFillPending } from "@/lib/quote-assistant-review";
 import type { QuoteItem } from "@/lib/types";
 import { cn } from "@/lib/utils";
@@ -151,6 +152,24 @@ export function ProcessItemCard({
         <AiFillMarker item={item} />
       </header>
 
+      {/* Price check — the blue badge under the purple AI marker. It
+          only shows on lines the AI filled (reviewed or not). Full
+          card width, so the one-line summary is readable on a phone;
+          it truncates rather than wrapping. */}
+      {item.ai_fill?.status === "filled" ? (
+        <div className="flex items-center gap-1.5">
+          <PriceCheckMarker
+            itemId={item.id}
+            collection="quote_items"
+            cost_price={item.cost_price}
+            selling_price={item.selling_price}
+            supplier={item.supplier}
+            intel={item.ai_item_insights}
+            className="min-w-0 flex-1"
+          />
+        </div>
+      ) : null}
+
       {/* Row 2: status badges — own line so they never overflow into
           neighbouring cells. Each badge is gated on its own condition;
           the whole row only renders if at least one badge is relevant. */}