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.amount} {bid.currency}

+

{bid.carrier_name}

+
+ +
+
+))} +``` + +### 3. Update Bid Type Definition +**File**: `freight-app/types/bid.ts` + +```ts +export type BidStatus = 'pending' | 'accepted' | 'rejected' | 'counter_offer' + +export interface Bid { + id: string + amount: number + currency: string + carrier_name: string + status: BidStatus + // ... other fields +} +``` + +### 4. Add Tailwind Colors (if missing) +**File**: `freight-app/tailwind.config.js` + +```js +module.exports = { + theme: { + extend: { + colors: { + // Amber, green, red, blue shades are included in Tailwind v3 + } + } + } +} +``` + +--- + +## Verification +- [ ] Component renders correctly for all 4 status types +- [ ] Colors match the Tailwind config +- [ ] Badge text transforms `counter_offer` to `counter offer` +- [ ] No TypeScript errors + +--- + +## Next Agent Handoff +If work is paused: +1. Review current state in `AGENT_NOTES.md` +2. Check if any status types were added/removed +3. Update `BidStatus` type if needed +4. Resume at the next unchecked item \ No newline at end of file