20 terms to know for building an admin page

Admin pages follow a very fixed pattern: a column of menus on the left, a narrow bar across the top, and the working area in the middle. Once you know the terms below, you can break down pretty much any admin page and describe it clearly.

Start with the overall layout

• Sidebar Layout: the most common overall structure for admin panels. The Sidebar Menu on the left holds the feature modules, and the content area is on the right. Use it once you have more than seven modules or a two-level menu, since a top bar alone won't fit them.
• Navbar: in admin panels, it usually holds only global entry points like the system name, search, messages, and your avatar.
• Breadcrumb: a path line at the top of the content area, like "Orders / Order details," that makes it easy to get from a details page back to the list.
• Dashboard: common as the admin home page. It shows key metrics with Statistic components, and trends and proportions with a Chart. It's only for summaries, so don't pack lots of detailed records into it.

Then the common components

List pages almost always use the same combination:

• Data Table is the layout name for this kind of page, and the component that implements it is the Table. Records with lots of fields that need sorting and comparing go here.
• Above the table are the Filter Bar (combine conditions like status and date to query) and the Search Box (search by keyword), with the Toolbar next to them for New, Import, and Export.
• Below the table is Pagination. With hundreds of records, don't render them all at once.
• Checking several rows and then deleting or exporting them in one go is a Bulk Action. The status column uses a Tag to mark "Paid" or "Canceled."
• For actions that can't be undone, like deleting, show a Confirmation Dialog first.

Creating and editing: use a Modal for two to five fields, a Drawer that slides in from the side for a few more, and a separate Single Page Form page for even more. For view-only details, use a Description List, not rows of disabled inputs.

How to describe it to AI

Describe the overall layout first, then the sections from top to bottom, and the interaction details last:

Build an order management admin panel with a sidebar layout. Left menu: Dashboard, Orders, Products, Users, Settings. The Orders page, from top to bottom: breadcrumb, filter bar (order status, order date range, keyword search), toolbar (New order, Export), table (order number, customer, amount, status, order time, actions), pagination. Show the status column as tags, and right-align the amount column.

The table supports checking multiple rows for bulk export. Clicking "View" opens a drawer from the right that shows the order details in grouped description lists. Clicking "Delete" shows a confirmation dialog first.

Use these terms, and the AI is much less likely to turn your orders into a pile of cards or make the details page a disabled form.