Custom pages

An import log. A reconciliation report. A screen that reads three collections and writes none. Those are pages.

One file

Put it in src/questpie/admin/pages/. The directory does not exist in a fresh app, so create it.

import { AdminViewHeader, AdminViewLayout, page } from "@questpie/admin/client";

function ReportsPage() {
	return (
		<AdminViewLayout header={<AdminViewHeader title="Reports" />}>
			<p className="text-muted-foreground text-sm">Nothing here yet.</p>
		</AdminViewLayout>
	);
}

export default page("reports", {
	component: ReportsPage,
	path: "/reports",
	label: "Reports",
});

Run questpie generate. The page is live at /admin/reports.

The component takes no props. Everything it needs comes from the admin hooks: useCollectionList, useCollectionItem, useCurrentUser, useBrand. They are the same hooks the built-in screens use.

The options

Getting it into the sidebar

The server owns the sidebar, and its default lists collections and globals. A page is not in it. Add an item in config/admin.ts.

import { adminConfig } from "#questpie/factories";

export default adminConfig({
	sidebar: {
		sections: [{ id: "tools", title: "Tools" }],
		items: [
			{
				sectionId: "tools",
				type: "link",
				label: "Reports",
				href: "/admin/reports",
				icon: { type: "icon", props: { name: "ph:chart-bar" } },
			},
		],
	},
});

A link item takes the URL you give it, so write the full path including /admin. There is also a page item keyed by pageId, the camelCased file name. Prefer link. The page item builds its href from path alone. It never adds the admin base path, so the link misses the route it names.

Lazy loading

component also accepts a loader, so a heavy page can stay out of the first bundle. Write it as an async function. The router only calls a loader whose constructor is AsyncFunction, and renders anything else as a component.

export default page("reports", {
	component: async () => ({
		default: (await import("./reports-screen.js")).ReportsScreen,
	}),
	path: "/reports",
});

Next

Dashboard widgets is the smaller version: your React on a tile, arranged by the server.