Drug Donation Dashboard – KendoReact + Nuclia RAG
This is my submission for the KendoReact Free Components Challenge.
🚀 What I Built
I built a tracks donated medicines, their categories, donors, quantities, expiry dates, and statuses (OK, Low, Expired).
It integrates Nuclia RAG Search so users can query the donation knowledge base in natural language and get results as a structured inventory grid.
🎥 Demo
👉 https://github.com/pankajcalm/drug-donation-dashboard.git
🧩 KendoReact Components Used
- AppBar – for the top navigation bar
- Drawer – for filters (category, donor, search)
- Grid – for the inventory table and search results
- Card – for stats and category distribution
- Chart – for showing drug quantities by category
- Dialog – for adding/editing items
- Inputs (TextBox, NumericTextBox, DropDownList, DatePicker) – for managing data
- Notification – for success/error alerts
🤖 [Optional: Code Smarter, Not Harder Prize] AI Coding Assistant Usage
I used the KendoReact AI Coding Assistant inside VS Code to:
- Scaffold the initial
GridandDrawerlayout - Auto-generate column definitions for the Inventory Grid
- Get quick examples of row styling (highlight expired/low stock)
- Save time on boilerplate for forms and dialogs
It helped me focus on logic and integration instead of writing repetitive UI setup code.
📚 [Optional: RAGs to Riches Prize] Nuclia Integration
I integrated Nuclia RAG to enable natural language queries.
- Example: searching “Insulin donations” returns structured results like:
Top comments (1)
Can you tell me how'd you log into Nuclia. Because it asks for business email