David/WFDASH-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(process): show the blue price check on both Process pages

Browse source 
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>
This commit is contained in:
Dave 2026-10-24 21:45:46 +02:00
parent 3248e3aa03
commit 9b3f30a01f
3 changed files with 59 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/app/(app)/orders/[id]/process/page.tsx
View file

@ -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:

20
src/app/(app)/quotes/[id]/process/page.tsx
View file

@ -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

19
src/components/quotes/process-item-card.tsx
View file

@ -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. */}