Design System
Example UI
Operational components for building consistent administration workflows.
Actions
Buttons
Feedback
Badges & Alerts
Forms
Inputs & Selection
Navigation
Tabs
Service order summary, assigned team, and current business status.
Recent timeline events, comments, and approval history.
Attachments, estimates, invoices, and signed documents.
Overlays
Dropdown & Modal
Confirmation
Approve dispatch
This schedules the selected team and sends a status update to the customer.
Server Requests
Block UI, Toast & Confirm
Use the global helpers below before sending requests to the server. The loading state is icon-only, so it does not conflict with localization.
const unblock = window.rcdAdmin.blockUi();
try {
const response = await fetch("/admin/example", { method: "POST" });
window.rcdAdmin.toast({ type: "success", message: "Saved" });
} finally {
unblock();
}Page Header
Title, Subtitle & Breadcrumb
The admin header reads page metadata from ViewData. Use it from Razor markup or set the same keys inside a PageModel.
ViewData["Title"] = "Customers";
ViewData["AdminSubtitle"] = "Manage customer profiles.";
ViewData["AdminBreadcrumbs"] = new[]
{
new AdminBreadcrumbItem("Admin", Url.Page("/Index", new { area = "Admin" })),
new AdminBreadcrumbItem("Customers")
};Data
Table
Wrap tables with admin-table-scroll when column count may overflow.
| Ticket | Customer | Status | Owner | Priority | Updated |
|---|---|---|---|---|---|
| RCD-2401 | Northline Plaza | Active | Mina K. | High | 8m ago |
| RCD-2398 | Apex Residency | Waiting | Daniel R. | Normal | 24m ago |
| RCD-2392 | Atlas Foods | Blocked | Omid S. | Urgent | 1h ago |
| RCD-2386 | Metro Tower | Draft | Sarah J. | Low | Yesterday |
Progress
Workload
Empty State
No matching records
Clear filters or create a new service record.
Loading State
Skeleton
Activity
Timeline
-
Request created
Customer submitted a new service order.
-
Technician assigned
Dispatch accepted the recommended schedule.
-
Awaiting approval
Estimate is ready for manager confirmation.