Building a Custom Dashboard

Building a Custom Dashboard

The Backoffice SDK repository includes a dashboard guideline pack in ai-guideline/. It is derived from the source of the official Selldone Backoffice and describes what a complete dashboard contains, how it is routed and permission-gated, and which full API endpoints each module calls. Use it to build your own merchant dashboard in any framework (React, Vue, Angular, Svelte, native mobile or server-rendered HTML), whether the work is done by your team or by a coding agent.

What the pack contains

Layer	File or folder	Purpose
Entry point	00-ai-agent-entrypoint.md	Reading order, implementation sequence, endpoint rules and completion criteria.
Architecture	01-dashboard-architecture.md	Shells, shop context, permissions, state, overlays and error handling.
Build workflow	02-ai-build-guide.md	Practical implementation order.
Routes	03-routing-proposal.md	Framework-independent route hierarchy.
API contract	04-api-and-data-contracts.md	Auth, pagination, response and error patterns.
UI patterns	05-ui-patterns.md	Lists, folders, dialogs, bulk actions and uploads.
Feature checklist	06-feature-inventory.md	Every Backoffice module and submodule.
Implementation matrix	07-module-implementation-matrix.md	Priority, route family, permission region and core endpoints per module.
Visual design	08-product-design-guidelines.md	Calm, minimal, accessible UI rules.
Module docs	dashboard/	Behavior notes for products, orders, finance, marketplace and more.
Generated catalogs	_generated/	Routes, source modules, API usage and the full endpoint catalog (api-url-builders.md).

API rules

• Call full HTTP endpoints that start with https://api.selldone.com.
• Never invent endpoints. Resolve each feature through this chain: 06-feature-inventory.md → 07-module-implementation-matrix.md → _generated/api-usage-by-area.md → _generated/api-url-builders.md. If an endpoint is not in the catalog, record a documentation gap instead of guessing.
• The JavaScript wrappers (window.$backoffice) are optional. Any HTTP client works as long as you use the right URL, method, auth header, parameters and response handling.

Base request shape:

GET https://api.selldone.com/{path}
Authorization: Bearer {access_token}
Accept: application/json
X-Localization: {locale}

Common contracts

Pagination. Most lists accept offset (usually (page - 1) * limit), limit, sort, sortBy, sortDesc and search, and return total.

Errors. A failed operation returns error: true with a displayable error_msg. Some endpoints also return a success flag. Handle HTTP 401, 403, 404, 422 and 5xx separately, and 429 as described in Rate Limits.

Shop context. Every shop page depends on one call that must finish before child pages load:

GET https://api.selldone.com/shops/me/{shop_id}
Authorization: Bearer {access_token}
Accept: application/json

Its response provides shop, data, shop_apps, orderQue and avocadoQue. Cache it by shop_id and refresh it after business-model or settings changes.

Recommended build order

1. Authentication, token storage, locale headers and a shared HTTP client with cancellation and error states.
2. The user area: shop list (GET https://api.selldone.com/shops/me), wallet and accounts.
3. The shop shell, loaded through the shop context call above.
4. A module registry built from 07-module-implementation-matrix.md, with navigation filtered by permissions, business model and installed apps.
5. Products Manager first (its folder, list, filter and bulk-action model is reused by many modules), then orders, finance, logistics, CRM, marketing, pages, access and settings.
6. Every remaining module in 06-feature-inventory.md.

A minimum launch slice covers the shop list, shop dashboard shell, Products Manager, product detail and inventory, order processing for physical, virtual, file and service orders, finance reports and gateways, and basic settings.

Reusing Selldone UI

If your dashboard is built with Vue 3, you do not have to start from scratch: the backoffice widgets in Components (@selldone/components-vue) already call window.$backoffice and can be combined with your own layout.

Next steps

• ai-guideline/README.md
• JavaScript SDK
• Access Token
• Rate Limits
• FAQ