📦Supplier UX Guide - Quick Reference

What You're Looking At

Desktop View (≥768px)

┌─────────────────────────────────────────────────────────────────┐
│ T420 ROBO-HUB                                    MY LISTINGS     │
├──────────────────┬──────────────────────────────────────────────┤
│ Supplier Hub     │                                              │
│ San Francisco    │                                              │
├──────────────────┤              Chat Interface                  │
│ [RFQs] [Intel]   │          (Select an RFQ to chat)            │
│   ^       ^      │                                              │
│   │       │      │                                              │
│   │       └──────┼── Click "Intel" to see market insights      │
│   └──────────────┼── Click "RFQs" to see incoming opportunities│
│                  │                                              │
│  📬 Incoming RFQs│                                              │
│  ┌─────────────┐ │                                              │
│  │ PARKING     │ │                                              │
│  │ SF Fleet Co.│ │                                              │
│  │ 50 vehicles │ │                                              │
│  │ $42.5k/mo   │ │                                              │
│  └─────────────┘ │                                              │
│                  │                                              │
└──────────────────┴──────────────────────────────────────────────┘
     30% width              70% width

How It Works

1. Two Tabs in Left Sidebar

RFQs Tab (Default)

• Shows incoming opportunities from fleet operators

• Each card shows:

  • Category (🅿️ PARKING, ⚡ CHARGING, etc.)

  • Fleet operator name

  • Fleet size

  • Estimated value

  • AI match score

  • Urgency level

Intel Tab (Click to switch)

• Shows AI-powered market intelligence

• Insights include:

  • Real supplier data for your zone

  • Competitive pricing analysis

  • Demand forecasting

  • Competitor tracking

  • Market opportunities

2. Right Side - Chat Interface

• Initially shows: "No RFQ Selected"

• After clicking an RFQ card:

  • Opens conversation with fleet operator

  • Shows AI pricing recommendations

  • Quick actions: Accept RFQ, Counter Offer, Ask Question

User Flow Examples

Flow 1: Responding to New RFQ

1. Login as Supplier
   ↓
2. See "RFQs" tab (default view)
   ↓
3. See 2-3 RFQ cards with green "NEW" badges
   ↓
4. Click a card: "PARKING - SF Fleet Co. - $42.5k/mo"
   ↓
5. Right side opens chat with:
   - Fleet operator's message
   - AI recommendation: "$850/vehicle/month (8% below market)"
   - Quick action buttons
   ↓
6. Click "Accept RFQ at suggested price" or type custom response
   ↓
7. Send message

Flow 2: Checking Market Intelligence

1. From supplier dashboard
   ↓
2. Click "Intel" tab in left sidebar
   ↓
3. See insights organized by priority:
   - HIGH: "79 Active Suppliers in San Francisco"
   - MEDIUM: "Your prices are 8% below market"
   - LOW: "EV charging demand up 34%"
   ↓
4. Click "▶ Show Details" to expand insight
   ↓
5. See detailed breakdown with numbers

What the Console Shows

Open Developer Tools (F12) → Console tab to see:

[MarketIntelPanel] Loading insights for zone: San Francisco
[RealDataService] Loaded 79 suppliers for San Francisco
[RealDataService] Generated 1 real insights
[MarketIntelPanel] Received 1 real insights
[MarketIntelPanel] Generated 5 sample insights
[MarketIntelPanel] Total insights: 6

This tells you:

• ✅ Data loaded successfully (79 real suppliers)

• ✅ 1 insight generated from real data

• ✅ 5 sample insights added

• ✅ Total 6 insights displayed

Mobile View (<768px)

┌─────────────────────────┐
│ Supplier Hub            │
│ San Francisco           │
├─────────────────────────┤
│                         │
│   Current View          │
│   (RFQs/Chat/Intel)     │
│                         │
├─────────────────────────┤
│ 📬  💬  📊  📄          │
│ RFQs Chat Intel Contracts│
└─────────────────────────┘

Tap bottom icons to switch views.

Key Visual Indicators

RFQ Status Colors

• 🟢 Green = New opportunity (unresponded)

• 🔵 Blue = Active (responding/negotiating)

• ⚪ Gray = Closed (won/lost)

Intel Priority Colors

• 🔴 Red = High priority (action needed)

• 🟠 Amber = Medium priority (review soon)

• 🔵 Blue = Low priority / FYI

AI Match Scores

• 90-100 = Excellent match (green)

• 80-89 = Good match (amber)

• <80 = Fair match (red)

What Should You See Right Now?

If everything is working:

1. Desktop - RFQs Tab (default):

   • 2-3 RFQ cards under "NEW (2)" section

   • Each showing category, fleet size, value

   • Right side: "No RFQ Selected"

2. Desktop - Intel Tab (click to switch):

   • "HIGH PRIORITY (1)" section

   • "79 Active Suppliers in San Francisco"

   • "MEDIUM PRIORITY (3)" section

   • Pricing/demand insights

   • "FYI (2)" section

   • Competitor/market info

Troubleshooting

"Nothing in Intel"

• Make sure you clicked the "Intel" tab (not just looking at RFQs)

• The tab should have an underline when active

• Check browser console for errors

"No RFQs showing"

• Check console logs for data loading

• Verify you're logged in as SUPPLIER role

• RFQs generate based on scraped supplier data

"Can't click tabs"

• This was the bug we just fixed

• Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)

• Tabs should now switch between RFQs and Intel

Next Steps

Continue exploring, and let me know:

1. Can you now click between "RFQs" and "Intel" tabs?

2. Do you see insights when you click "Intel"?

3. What feels confusing about the UX?

I can adjust the layout, add more visual cues, or simplify the interface based on your feedback!