Frontend Views & Permissions Specification

Status: Draft ‑ v0.1
Audience: Product + Engineering
Purpose: Provide a single reference describing what pages exist, what each page can do, which GraphQL operations they call, and who is allowed to perform them.

1. User & Role Model

Role Description / Typical Persona Auth Required Notes
System Owner Plings ultimate super-admin yes Full bypass of all checks across entire platform.
Plings Admin Plings business operations administrator yes Manages classes, billing, transactions, wallets, users, organizations globally.
Plings Developer Plings technical developer yes Access to debugging tools, backend switching, API testing, system diagnostics.
Org Admin Person managing an organisation’s inventory yes Can CRUD any object owned by the org.
Org Member Regular signed-in user of an organisation yes Can view org data; CRUD only objects they own.
Manufacturer Issuer Creates identifiers at production line yes Limited to creating PlingsIdentifiers & template classes.
Public Guest Anyone scanning a public identifier no Read-only access to public fields + RLS-enabled lookups.

(Roles embedded as claims in the Supabase JWT; forwarded to GraphQL context.)

2. Application Pages & Primary Components

# View / Route Mobile First Component(s) Key Features GraphQL Ops
1 Login / Sign-Up (/login) LoginForm.tsx Email ⟷ magic-link, OAuth providers supabase.auth.*
2 Dashboard – My Objects (/) ObjectGrid.tsx SearchBar.tsx Paginated list, text/vector search myObjects, searchObjects (Q), objectUpdated (S)
3 Spatial Explorer (/spatial) SpatialTree.tsx Drag-and-drop containment, real-time sync spatialChildren (Q), moveObject (M), objectMoved (S)
4 Object Detail (/o/:id) ObjectTabs.tsx Hub for instance info object (Q) + tab-specific
5 Create Object / Identifier (/create) CreateWizard.tsx Stepper workflow createObjectClass / createObjectInstance (M)
6 Scan Mode (/scan) QrScanner.tsx Camera reader resolveIdentifier (Q)
7 Class Browser (/classes) ClassTree.tsx Browse hierarchy classHierarchy (Q)
8 Admin Panel (/admin) OrgSettings.tsx UserTable.tsx Invite users, set roles organisation, inviteUser (M)
9 Plings Admin Console (/plings-admin) AdminDashboard.tsx Global class management, billing, user administration multiple, restricted
10 Developer Console (/dev) DevConsole.tsx Backend switching, API testing, debugging tools multiple, developer-only
11 Super-Admin Console (/super) SuperHome.tsx Ultimate system control multiple, system owner only

Legend: Q = Query, M = Mutation, S = Subscription.

2a. Mobile Home Screen & Navigation Map

See navigation tree:

Home (Scan • Objects • Actions)
 ├─ Scan camera ...
 ├─ Objects ...
 ├─ Actions ...
 └─ Dashboard (optional)

2b. Identifier Scan Flow

resolveIdentifier(code) -> {
  type: "KNOWN_OBJECT" | "UNKNOWN_SPECIFIC" | "UNKNOWN_GENERAL" | "ERROR",
  objectId?,
  classId?,
  canEdit?
}

Describe unknown/known flows, edit variations, background actions, errors.

3. Functional Relations – UX Flow

  1. Open Functional tab
  2. List grouped by category
  3. Add relation via modal & optimistic update
  4. Remove with delete icon

Edge-cases handled client-side.

4. Permission Matrix (Condensed)

Action \ Role Public Org Member Org Admin Manufacturer Plings Admin Plings Developer System Owner
Core Object Operations              
View object (basic) ✅ if public ✅ ✅ ✅ ✅ ✅ ✅
View object (all tabs) ❌ ✅ own ✅ ✅ templates ✅ ✅ ✅
Add functional relation ❌ ✅ own ✅ ❌ ✅ ✅ ✅
Remove functional relation ❌ ✅ own ✅ ❌ ✅ ✅ ✅
Move object spatially ❌ ✅ own ✅ ❌ ✅ ✅ ✅
Create object instance ❌ ✅ ✅ ✅ restricted ✅ ✅ ✅
Mint identifier ❌ ✅ ✅ ✅ ✅ ✅ ✅
Transfer ownership ❌ ✅ own ✅ ❌ ✅ ✅ ✅
Organization Management              
Invite user to org ❌ ❌ ✅ ❌ ✅ global ❌ ✅
Manage org billing ❌ ❌ ✅ ❌ ✅ global ❌ ✅
Global Administration              
Manage object classes ❌ ❌ ❌ ❌ ✅ ❌ ✅
Resolve billing disputes ❌ ❌ ❌ ❌ ✅ ❌ ✅
Manage HD wallets ❌ ❌ ❌ ❌ ✅ ❌ ✅
Cross-org user management ❌ ❌ ❌ ❌ ✅ ❌ ✅
Access global audit logs ❌ ❌ ❌ ❌ ✅ ❌ ✅
Development Tools              
Backend switching ❌ ❌ ❌ ❌ ❌ ✅ ✅
API testing tools ❌ ❌ ❌ ❌ ❌ ✅ ✅
Debug panels ❌ ❌ ❌ ❌ ❌ ✅ ✅
Database inspection ❌ ❌ ❌ ❌ ❌ ✅ ✅
System diagnostics ❌ ❌ ❌ ❌ ❌ ✅ ✅

5. Open Items / TODO

  • Wireframe screenshots for each page (link Figma)
  • Finalise predicate dropdown grouping
  • Accessibility review
  • Performance audit on functionalRelations