Mani shashank :Add Winning Bid vs Average Bid chart to LB Dashboard

[shashankm9]

Description

(PRIORITY HIGH) Jae/Rajrajeshwari – Create a bar chart titled ‘Winning bid vs Average bid’
Let the chart be titled Winning bid vs average bid
Let the X axis - Listing number/identifier
Let the Y axis - Bid Amount in USD
Include a legend to showcase the different bars
Include a menu to showcase the time duration to see the bids [calender format]
Include a filter to showcase number of bids ordered by the winning bid [ 5,10,20 etc]
Make design responsive
The graph has 2 main filters. Dates: which allows the user to pick to and from dates Category: Does the user want to see results grouped by village or property. By Village and By Property are the two selectable options. The two mutli-select options are for the user to select specific villages or properties. One of these filters will not work based on what the user has chosen in his category filter.
All graphs on this dashboard would be the same size

Related PRS (if any):

…

Main changes explained:

• Implemented horizontal bar chart component with Chart.js
• Added filters for date range, category (village/property), and bid limit
• Included multi-select dropdowns for villages and properties
• Added data labels on bars showing bid amounts
• Responsive design with compact filter section
• Using mock data consistent with other LB Dashboard graphs"

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to /bldashboard→ Winning Bid vs Average Bid (http://localhost:5173/lbdashboard)
6. verify Winning Bid vs Average Bid graph is working as expected.

Screenshots or videos of changes:

Recording.2025-12-26.221901.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	6bab59f
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/694f5eb75585b3000818f0d4
😎 Deploy Preview	https://deploy-preview-4634--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.