Admin Dashboard & User UI
Relevant source files
The following files were used as context for generating this wiki page:
The Admin Dashboard and User UI serve as the visual interface for a Relationship-Based Access Control (ReBAC) system powered by OpenFGA and PostgreSQL. The primary purpose of this interface is to allow Super Admins to configure authorization models—including users, roles, and table-level permissions—while providing a dynamic experience for standard users whose access to sidebar links and action buttons is strictly dictated by live permission checks.
The UI is built using React, Vite, and TailwindCSS, interacting with a Node.js backend to perform CRUD operations on resources and update authorization tuples in OpenFGA.
Sources: PLAN.md:4-15, frontend/src/pages/HomePage.tsx:7-14
System Architecture & Data Flow
The frontend architecture utilizes React Context providers (AuthProvider, AppProvider) to manage global state such as the current user's session and the list of tables they are permitted to access. Routing is handled by react-router-dom, with specific guards (RequireAuth, SuperAdminRoute) protecting sensitive admin pages.
The diagram shows the hierarchical structure of the frontend components and how access is segmented between Admin and User pages.
Sources: frontend/src/App.tsx:27-75, frontend/src/components/Layout.tsx:20-84
Administrative Interface
The administrative interface is accessible only to users with the superadmin role. It provides four primary management modules.
User & Role Management
Admins can create new users and roles. The UsersPage allows for the assignment and removal of roles from specific user accounts. When a role is assigned or removed in the UI, the backend updates both the PostgreSQL database and the OpenFGA tuple store.
| Component | File | Functionality |
|---|---|---|
UsersPage | UsersPage.tsx | Create users, list users, assign/remove roles (excluding superadmin role). |
RolesPage | RolesPage.tsx | Create and delete roles with descriptions. |
TablesPage | TablesPage.tsx | Register new "Table" resources for the system to authorize. |
Sources: frontend/src/pages/UsersPage.tsx:47-113, frontend/src/pages/RolesPage.tsx:44-84, frontend/src/pages/TablesPage.tsx:43-71
Permission Matrix
The PermissionsPage provides a grid view of the relationship between roles and tables. It allows admins to toggle specific CRUD badges (create, read, update, delete) for each role-table pair. These toggles directly trigger updates to OpenFGA tuples through the /permissions/up endpoint.
Sources: frontend/src/pages/PermissionsPage.tsx:44-106, backend/src/modules/permissions/permissions.routes.ts:46-85
Dynamic User Experience
The UI for a standard user is non-static; it adapts in real-time based on the permissions defined in the Admin Dashboard.
Dynamic Sidebar & Authorization Guards
The Layout component calls refreshAllowedTables to fetch only the tables the current user has can_read access to. This ensures that the sidebar only displays links to authorized resources.
This sequence illustrates how the sidebar is populated based on OpenFGA relationship checks.
Sources: frontend/src/components/Layout.tsx:24-60, PLAN.md:129-136
Resource Action Authorization
Within a specific TablePage, the UI performs a check against the /me/table-permissions endpoint. The resulting booleans determine the visibility and enabled state of action buttons (Create, Update, Delete).
| Permission | UI Impact | Implementation |
|---|---|---|
canRead | Page Access | Redirects or shows "Forbidden" if false. |
canCreate | Create Button | Enables/Disables the "Create" button; applies specific styling. |
canUpdate | Update Button | Enables/Disables the "Update" button. |
canDelete | Delete Button | Enables/Disables the "Delete" button. |
Sources: frontend/src/pages/TablePage.tsx:75-125, frontend/src/api/endpoints.ts:133-134
Core Data Structures
The frontend utilizes specific TypeScript interfaces to handle the data returned from the administrative and visualization endpoints.
// Sources: [frontend/src/api/endpoints.ts:43-51]
export type PermissionMatrix = {
roles: string[];
tables: string[];
matrix: Record<
string,
Record<string, { create: boolean; read: boolean; update: boolean; delete: boolean }>
>;
};
// Sources: [frontend/src/api/endpoints.ts:57-63]
export type TablePermissionsResponse = {
table: string;
canCreate: boolean;
canRead: boolean;
canUpdate: boolean;
canDelete: boolean;
};
Summary
The Admin Dashboard & User UI provides a seamless management experience for ReBAC. By decoupling the authorization logic into OpenFGA and consuming it via visualization endpoints, the UI remains lean while ensuring that security policies are strictly enforced at the interface level. Super Admins maintain full control through the Permission Matrix, while users see a tailored interface that only presents actions and data they are authorized to access.
Sources: PLAN.md:151-175, frontend/src/pages/HomePage.tsx:16-30