diff --git a/implementation/bid-status-indicators.md b/implementation/bid-status-indicators.md new file mode 100644 index 0000000..23f9ea8 --- /dev/null +++ b/implementation/bid-status-indicators.md @@ -0,0 +1,119 @@ +# Implementation Plan: Bid-Status Visual Indicators + +**Task ID**: `bid-status-indicators` +**Status**: `in-progress` +**Owner**: hermes +**Created**: 2026-06-10 +**Skill Reference**: `freight-bidding-system` + +--- + +## Objective +Implement visual indicators (color-coded badges/labels) for bid statuses in the freight bidding UI. + +## Status Types +| Status | Description | UI Color | +|--------|-------------|----------| +| `pending` | Bid submitted, awaiting acceptance | `bg-amber-100 text-amber-800` | +| `accepted` | Shipper accepted bid | `bg-green-100 text-green-800` | +| `rejected` | Shipper rejected bid | `bg-red-100 text-red-800` | +| `counter_offer` | Bid counter-proposed | `bg-blue-100 text-blue-800` | + +--- + +## Implementation Steps + +### 1. Create Status Badge Component +**File**: `freight-app/components/bids/BidStatusBadge.tsx` + +```tsx +import { BidStatus } from '@/types/bid' + +const statusConfig = { + pending: 'bg-amber-100 text-amber-800', + accepted: 'bg-green-100 text-green-800', + rejected: 'bg-red-100 text-red-800', + counter_offer: 'bg-blue-100 text-blue-800', +} as const + +interface BidStatusBadgeProps { + status: BidStatus +} + +export default function BidStatusBadge({ status }: BidStatusBadgeProps) { + const classes = statusConfig[status] ?? 'bg-gray-100 text-gray-800' + return ( + + {status.replace('_', ' ')} + + ) +} +``` + +### 2. Integrate into Bid Feed +**File**: `freight-app/components/bids/BidFeed.tsx` + +```tsx +import BidStatusBadge from './BidStatusBadge' + +// Inside bid list mapping: +{bids.map(bid => ( +
{bid.carrier_name}
+