Using this data from my on call shift can you make a dashboard that shows the stats.
I want four rows:
Row 1: Shows three cards: Card 1 total tickets that went into the queue, Card 2 shows the number that are still in progress and the percent subtler below that, and card 3 shows the number that are dealt with and the percent subtler below that
Row 2: Shows the breakdown of the Dealt With tickets, with a card for each item in high level breakdown
Row 3: Take the dealt with breakdown further and shows the dealt with closed breakdown
Row 4: Take the dealt with breakdown further and shows the dealt with triagedToTeams breakdown
{ totalTickets: 41, stillInProgress: { number: 10, percentage: 24.390243902439025 }, dealtWith: { highLevelBreakdown: { shipped: { number: 4, percentageOfTotal: 9.75609756097561, percentageOfDealtWith: 12.903225806451612 }, closed: { number: 5, percentageOfTotal: 12.195121951219512, percentageOfDealtWith: 16.129032258064516 }, triagedToTeams: { number: 15, percentageOfTotal: 36.58536585365854, percentageOfDealtWith: 48.38709677419355 }, passedToCoreForTriage: { number: 7, percentageOfTotal: 17.073170731707318, percentageOfDealtWith: 22.58064516129032 } }, closed: { closedLoggedAsFeedback: { number: 2, percentageOfTotal: 40, percentageOfClosed: 40 }, closedDuplicate: { number: 1, percentageOfTotal: 20, percentageOfClosed: 20 }, closedInvalid: { number: 2, percentageOfTotal: 40, percentageOfClosed: 40 } }, triagedToTeams: { collaboration: { number: 5, percentageOfTotal: 33.33333333333333, percentageOfTriaged: 33.33333333333333 }, core: { number: 2, percentageOfTotal: 13.333333333333334, percentageOfTriaged: 13.333333333333334 }, integrations: { number: 2, percentageOfTotal: 13.333333333333334, percentageOfTriaged: 13.333333333333334 }, productivity: { number: 6, percentageOfTotal: 40, percentageOfTriaged: 40 } } } }
I'll create a dashboard using React and shadcn/ui components to display the on-call shift data you've provided. The dashboard will be divided into four rows as you've requested.
This dashboard component creates a visually appealing and informative display of your on-call shift data. Here's a breakdown of what each section does:
Each row uses the Card component from shadcn/ui for a consistent and clean look. The Progress component is used to create visual bar charts for easy comparison of percentages.
To use this dashboard, you would typically import it into your main application file or the specific page where you want to display it. For example:
import OnCallDashboard from './on-call-dashboard'
export default function Home() {
return (
<main>
<OnCallDashboard />
</main>
)
}This will render the on-call shift dashboard in your application. The dashboard is responsive and should look good on both desktop and mobile devices.