arch.panel Explorer
Prototype Internal explorer, not a product surface.

Tour the whole hosting control plane

Arch Panel lets a reseller run a hosting business and lets their clients buy and manage services. This page is the map: where each app lives, the routes a vendor and a client walk, and what changed in v6 and v7.

Open an app Start as the vendor Start as a client
4Apps to open
7End-to-end journeys (UJ-1 to UJ-7)

App directory

Six apps

Each card opens the app at its sign-in or home page. Addresses come from the PUBLIC_*_URL environment and fall back to the local dev ports.

Vendor side What a hosting reseller uses to run the business

Landing

Arch Panel marketing site: features, how it works, the single Arch Plan price and the free-trial call to action.

:5176 Astro static
Open Landing

Account

Sign-up, onboarding, Companies, billing, team and Hub ownership. Sets each Hub's Modules (CRM, Support), domains and ownership.

:5173 React SPA
Open Account Register

Hub

The vendor workspace: Clients, Tickets (Support Module), the CRM group (Subscriptions, Invoices; CRM Module), Managed VPS, Sites and Apps, and one Settings menu.

:5174 React SPA
Open Hub APAC Hub
Client side What the reseller's customers use to buy and manage services

Client Portal

The one Client app: checkout and pay, Overview, Invoices, Services, Payment methods, Servers, Sites, Apps, Backups, Support and Account. Billing and Shop follow the CRM Module, Support follows the Support Module.

:5175 React SPA
Open Client Portal

Vendor journey

From first visit to running a hosting business

A reseller discovers Arch Panel, signs up, owns a Hub and then runs it day to day.

  1. Discover

    Landing

    Features, how it works and the single Arch Plan price. Every call to action reads Start free trial.

    • Price comes from the shared Arch Plan definition at build time
    • Hero, features, how it works, testimonials, comparison, pricing
    /

  2. Sign up and onboard

    Account

    Register on the Arch Plan, verify the e-mail, pick the plan and create the Company.

    • Register arrives with the plan preselected
    • Verify e-mail, then name the Company
    • Alt+Shift+D opens the Persona picker; Jordan Blake starts signed out, Leo and Ava are stuck mid-onboarding
    /register?plan=arch /verify-email /onboarding/company

  3. Own a Hub

    Account UJ-7 step 3

    Manage the Company, its Hubs, billing and team. Choose each Hub's Modules.

    • Overview, Hubs, Billing, Team, Support and Company settings
    • Hub › Modules turns CRM and Support on or off. CRM off removes the Hub CRM group and Portal Billing and Shop; Support off removes Tickets and Support
    • Roles: Owner, Admin, Manager, Finance
    /overview /hubs /hubs/:hubId/modules /billing /team

  4. Operate the Hub

    Hub UJ-1, UJ-3

    Clients, Tickets and Flagged items, plus the CRM group: Subscriptions and one Invoices page.

    • Invoices absorbed Orders: a Type column (First purchase, Manual renewal, Automatic renewal) and Type filters
    • Mark as paid, Cancel and Refund live on the invoice; the old Orders URLs redirect
    • Clients › Impersonate opens the Portal as that client
    /overview /clients /tickets /crm/subscriptions /crm/invoices

  5. Build capacity and catalogue

    Hub UJ-5

    Managed VPS, Sites and Apps: servers and the Packages you sell.

    • A VPS package fixes server type and hardware and lists the allowed operating systems and stack; the client picks at checkout
    • Hidden Packages are sold only through their checkout link
    • Provider connections: several per provider, each with its own label and key
    /vps/packages /vps/packages/new /sites/packages Settings › Integrations

  6. Shape the client experience

    Hub UJ-4, UJ-7

    One Settings menu with a left sub-navigation: Workspace, Client experience, Integrations and Developers.

    • Client Portal and Brand Kit, with previews
    • API keys, Webhooks and MCP are separate Admin-only pages; MCP has an endpoint, scoped tokens and the tools exposed
    • Team and developer pages are hidden from Managers and Support
    Settings › General /settings/client-portal /settings/crm /settings/brand-kit /settings/team /settings/api /settings/webhooks /settings/mcp

  7. Work as the team

    Hub UJ-6, UJ-7

    The Scenario Banner switches the Hub persona: Sarah (Admin), Mike (Manager) and Emma (Support).

    • Emma sees a trimmed Hub: no money, no Delete, no CRM group, no Settings
    • A switch changes the header identity and what the sidebar offers
    • The collapsed pill keeps Persona, Language and Theme two clicks away
    /login

Client journey

From shopping for hosting to managing it

A client finds a plan in the vendor's Store, then buys and runs it in the one Client Portal.

  1. Browse the Store

    Client Portal

    The Portal's public Store page lists the Hub's enabled Catalog groups. Choose plan opens checkout for that product.

    • Open to visitors with no session
    • Groups appear in the order the vendor set; sold-out Packages cannot be bought
    /store

  2. Configure and sign in

    Client Portal UJ-1

    Checkout shows only the options the package allows, then the account step.

    • A select per option when several are allowed, plain text when only one is
    • Lina is pre-filled in the account step; guests can register
    • Language (EN, DE, ID) and currency follow the Hub
    /checkout/:productId /login /register

  3. Pay

    Client Portal UJ-1, UJ-2, UJ-3

    Four payment methods in test mode: card, PayPal, bank transfer and Xendit Virtual Account.

    • Card page is pre-filled with the 4242 test card
    • Bank transfer: the client uploads proof, Support hands it to a Manager, the Manager verifies
    • Xendit renewals stay manual: the client pays each renewal invoice
    /pay/card/:orderId/pay/bank/:orderId/pay/xendit/:orderId/pay/paypal/:orderId/thank-you/:orderId

  4. Manage billing

    Client Portal UJ-7

    The client's billing home in the Portal: Overview, Services, Invoices, Payment methods, Support and Account. With the CRM Module off, Billing and Shop are hidden.

    • Scenario Banner Client picker lists each client with a service count such as 1 VPS · 1 Site · 1 App
    • The collapsed pill carries the same Client, Language and Theme pickers
    • Header menu: one-click Client Portal sign-in and Sign out
    /overview /services /invoices /payment-methods /support /account

  5. Run it in the Client Portal

    Client Portal UJ-1

    Servers, Sites, Apps and Backups, with Support and Account. A new purchase appears here and becomes Active.

    • Overview comes first; count badges on Servers, Sites and Apps
    • The banner lists clients grouped VPS, Sites, Apps and No products
    • Support tickets are shared with the vendor's Hub
    /overview /servers /sites /apps /backups /support /account

  6. See it from the vendor

    Hub UJ-1, UJ-7

    The same purchase appears in Hub Invoices, and Impersonate opens the client's view with a logged-action bar.

    • Open in Hub as … carries the change across apps in the URL fragment
    • Impersonation bar: Actions are logged · Exit returns to Hub Clients
    /clients /crm/invoices

What's new

v6 and v7 at a glance

v6 replaced the old mock backends with a shared dataset in the browser. v7 then polished the demo flow.

v9

Modules and one Client Portal

CRM and Support became per-Hub Modules, and the CRM app merged into Portal.

  • Modules per HubAccount, Hub, Modules switches CRM and Support. CRM off hides the Hub CRM group and Portal Billing and Shop; Support off hides Tickets and Support.
  • One Client PortalCheckout, pay pages, invoices, services and payment methods now live in Portal. The CRM app, its port 5178 and its Worker are gone: eight apps.
  • Store checks out in PortalChoose plan opens Portal /checkout/:productId, with ?hub= kept for other Hubs.
v7

Demo polish

Seven focused revisions to v6.

  • Client picker shows what each client ownsService counts such as 1 VPS · 1 Site · 1 App in the Portal banner, also in the collapsed pill.
  • One Settings menu in HubA single footer entry with a left sub-navigation: Workspace, Client experience, Integrations, Developers.
  • API keys, Webhooks and MCPThree separate Admin-only pages. MCP adds an endpoint, scoped tokens and a list of exposed tools.
  • One Invoices pageOrders are gone. Invoices gained a Type column (First purchase, Manual renewal, Automatic renewal) and the order actions.
  • VPS packages offer choicesA package fixes server type and hardware and lists the allowed operating systems and stack; the client picks at checkout.
  • Several connections per providerTwo DigitalOcean accounts, say, each with a label, key, status and a Test connection action.
  • Brand lockup restoredThe arch.panel mark with an Account or Hub label in the sidebar header and on both sign-in pages.
v6

Hub, Portal and CRM without a database

The vendor and client apps rebuilt around one shared Hub Dataset.

  • Browser storage is the databaseEach app keeps the cached seed plus an overlay of every change in its own browser storage. No server state.
  • Read-only seed APIHub API serves the seed for any Hub; writes answer 405. The CRM and Portal mock APIs are retired.
  • Changes cross apps in the linkEvery link between apps carries the changes the target is missing in the #hs fragment. Reset travels the same way.
  • Four seeded HubsNimbus Cloud EU, APAC and US, plus the empty Atlas Hosting. Roles are Admin, Manager and Support.
  • CRM checkout with four payment methodsCard, PayPal, bank transfer with proof, and Xendit Virtual Account, in English, German and Bahasa Indonesia.
  • Client Portal and ImpersonationServers, Sites, Apps, Backups and Support, plus an Impersonation bar when a Hub member signs in as a client.
  • Scenario Banner everywherePersona, Client, Language and Theme switchers live only in the bottom banner, which collapses to a pill.

Architecture

How the pieces connect

Two journeys on one real API: Laravel backends with a database, and single-page and static front ends that call only their own host.

Vendor side
LandingMarketing site, Arch Plan price
:5176
AccountUsers, Companies, billing, Hub ownership
:5173
HubVendor workspace
:5174
Client side
StorePublic page of the Portal, built from the Hub catalogue
/store
Client PortalCheckout, invoices, Servers, Sites, Apps, Backups
:5175
Platform and Hub APIs Account talks to the platform API; Hub, Portal and Store talk to the Hub API on their own host. Data lives in the database, not in the browser.
Laravel

Same-host API calls

Each app calls only /api/* on its own host. Cross-app links come from the API context, never from build-time URLs in the product apps.

Sign-in handoff

Moving from Account to a Hub uses /sso/callback?ticket=: a one-time ticket redeemed once and stripped from the URL.

Separate realms

Vendors, Hub members and Clients sign in through separate sessions, and a session for one Hub is rejected at every other Hub.

AstroReact 19TanStack RouterTanStack QueryTailwind CSS 4LaravelPostgreSQLViteTypeScriptshadcn/ui