Demo

Role and permissions

Frontend RBAC ties menu visibility and Protected UI to the same API metadata used for fetching.

withApiMetadataFetchFn

Declare url + method next to fetchFn so permission checks never drift from the real endpoint.

TSXapi
1import { withApiMetadataFetchFn } from "@quan-erp/shared-types"; 2 3export const getBranchApi = withApiMetadataFetchFn({ 4 api: { method: "GET", url: "/branch" }, 5 fetchFn: async () => { /* return payload */ }, 6});

Protected pages

Wrap pages with <Protected requiredApis={getBranchApi} ...> so unauthorized users see a restricted fallback instead of a broken screen.