# 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 (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${classes}`}>
      {status.replace('_', ' ')}
    </span>
  )
}
```

### 2. Integrate into Bid Feed
**File**: `freight-app/components/bids/BidFeed.tsx`

```tsx
import BidStatusBadge from './BidStatusBadge'

// Inside bid list mapping:
{bids.map(bid => (
  <div key={bid.id} className="border rounded-lg p-4">
    <div className="flex justify-between items-start">
      <div>
        <h4 className="font-semibold">{bid.amount} {bid.currency}</h4>
        <p className="text-sm text-gray-600">{bid.carrier_name}</p>
      </div>
      <BidStatusBadge status={bid.status} />
    </div>
  </div>
))}
```

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