shadcn.io is not affiliated with official shadcn/ui
Response Rate Panel Reviews Block for React
An SLA slider for review replies: set a reply-within target from 4 to 48 hours and see which of six team members meet it, with the team rate worked out from their reply times.
Installation
Overview
A response-rate panel for React with Base UI, for Weirworth, a fictional broadband provider. A centred header says a member meets the target with 80% of replies inside it, to every review whatever its rating. Under its rule, a band holds a Slider, "Reply within N hours", from 4 to 48, with the figure large beside it and tick labels under it, and at the end of the band the team rate, rolling in SlidingNumber, with how many members meet it. Under a second rule, a real table lists six team members on shared hairlines: replies, the median hours each took, the share of replies inside the target and a result in words with a tick or a dash, Meets or Misses. Everything is counted from the typed reply times, and a polite line gives the result once the slider settles. It's built from Slider, Sliding Number, Avatar and table markup. On a phone the Replies column drops.
FAQ
How do I put in my own team?
Edit TEAM: each member has the hours each of their replies took. Replies are the length of that list, the median is the middle value (the mean of the middle two when there is an even number), and a member's share is the replies at or under the target over all of theirs. Change GOAL (80) to change what "meets" means and MIN, MAX and START to change the slider.
How is the team rate worked out?
By pooling every reply of every member and counting how many are inside the target, not by averaging the six percentages, so a member who answers many reviews weighs more. The line beside it says how many members meet the target. The pooled figure is whole numbers by rounding, so it can differ by a point from an average of the rounded shares.
How do I use the slider from the keyboard?
Focus the thumb and use the arrow keys for one hour, the page keys for a bigger step, Home and End for the ends. The table and the team rate update as you move; the polite line is spoken when you stop, so it isn't read out at every step.
Does the panel rank people or hide anything?
It doesn't sort or rank: the rows keep their order whatever the target. Meets and Misses are words with a tick and a dash, not colours, and every reply counts, whatever the rating of the review it answered. The figures are typed example data.
Related
- Pro
Merchant Dashboard Reviews
Merchant toolsWhat is waiting for a reply at a ceramics studio: three worked-out cells (awaiting, replied this month, average rating) beside the queue of reviews that need an answer, each with an inline reply field and Send.
- Pro
Notification Feed Reviews
ModerationA merchant review inbox for a greenhouse-kit maker: Tabs for All, Needs action and Replies with counts, a Mark all as read button and full-width ruled rows under day dividers with inline Approve, Reply and Mark read.
- Pro
Response Templates Reviews
Merchant toolsReply templates for a bike-repair shop: vertical Tabs for four categories with counts, the templates in each, a Select for the review being answered, an editable Textarea, a preview with marked variables and a Copy button.
- Pro
Recommendation Rate Reviews
Survey scoresThe share of owners who would recommend a mattress, by how long they have owned it: three tabs, a rolling percentage over a two-part bar with a tick for everyone, and the gap in words.
- Pro
Satisfaction Meter Reviews
Survey scoresA support-survey score whose definition you can change: a segmented control picks which scores count as satisfied, and a rolling percentage, a five-part bar with a bracket and five counted cells follow.
- Pro
Moderation Queue Reviews
ModerationA keyboard triage queue for a marketplace: eight held reviews with a progress line, and the review in focus with Approve, Reject and Escalate, each on a key, a polite status line and Undo.