This document explains the key performance indicators (KPIs) and visual metrics used in the Craft Portal dashboard. The dashboard is implemented using Generative Pages with React and integrates with Microsoft Dataverse for data retrieval. Minecraft API assets are used to enhance the visual design with authentic item icons.
Theme & Display Modes
The dashboard supports both Light Mode and Dark Mode.
Light Mode:
Dark Mode
KPI Definitions
1. Summary Cards
These cards provide a high-level overview of procurement activity:
- Total Projects: Total number of Projects in the system.
- Open Projects: Projects currently open for bidding.
- Total Bids: Total number of bids submitted across all projects.
- Wandering Traders: Total number of registered vendors.
2. Project Status Distribution
A donut chart showing the distribution of projects by status (Draft, Open, Closed, etc.). This helps users quickly understand the current lifecycle state of all projects.
3. Bid Status Distribution
This chart visualizes the ratio between submitted bids and selected (winning) bids, helping procurement teams evaluate bid conversion efficiency.
4. Win Rate by Trader
A horizontal bar chart displaying each trader’s win rate as a percentage of bids won versus bids submitted.
5. Projects per Month
This chart shows how many projects were created per month, allowing stakeholders to identify trends, seasonality, and workload distribution over time.
6. Top Wandering Traders Leaderboard
A ranked leaderboard displaying traders based on total wins. This gamified view encourages competition and makes vendor performance easy to compare.
7. My Projects Table
A detailed table listing all projects with sorting and search capabilities. Users can drill into and view individual projects directly from the dashboard.
Dashboard Overview Screenshot
Technical description for the Code Connoisseur category.
Generative Pages with React
This dashboard is built as a Generative Page component, which allows for dynamic, AI-assisted UI generation within the Microsoft Power Platform ecosystem. The component is written in TypeScript/React and utilizes:
- Fluent UI React Components (@fluentui/react-components) for base UI elements
- Custom Minecraft-styled components for visual theming
- DataGrid for tabular data display with sorting and filtering
Microsoft Dataverse Integration
The dashboard connects to Microsoft Dataverse using the dataApi prop provided by the Generative Pages runtime.
Minecraft Item Icons
All icons in the dashboard are sourced from the Minecraft API, a free public API that provides official Minecraft item and block images.
