Roles and Permissions

The Roles and Permissions system is a crucial part of the application's security model. It is used to manage access to different parts of the application and to ensure that users only have access to the parts of the application that they are authorized to use.

It comes with 5 default roles:

• superAdmin: Can read and write to all the data.
• admin: Can read and write to all the data except for the data of the superAdmin role and its own permissions.
• user: Can only read its own data.
• editor: Can read and write to blog posts, pages, categories, and stories.
• accountant: Can read transactions and reports.

Features

🔐 Role-Based Access Control: Ensures that only authorized users, such as admins, can access specific sections of the admin panel. This is managed through Supabase and Next.js's server-side capabilities.

⚡ Server-Side Rendering: Powered by Next.js's built-in server-side rendering (SSR) features, utilizes server-side rendering to fetch data and render pages dynamically, ensuring that the most up-to-date information is displayed.

🔒 Authentication Protection: Handled through Supabase for authentication and Next.js's middleware for route protection, the admin panel is protected by authentication, ensuring that only logged-in users with the appropriate roles can access it.

Pages

CreateRolePage

This page provides a form to create a new role. It renders a RoleForm wrapped in a Page component.

EditRolePage

This page provides a form to edit an existing role. Fetches the role data using the getRole action and renders the RoleForm with the edit prop.

EditRolePage Props

Name	Type	Description
params	object	Contains the id of the role to be edited.

RolesPage

This page lists all roles managed within the system. Fetches all roles using the getAllRoles action and renders the Roles component with the list of roles.

RolePermissionsPage

This page manages the permissions assigned to a specific role. Fetches the role permissions using the getRolePermissions action and the role details using the getRole action then renders the Permissions component with the edit prop.

RolePermissionsPage Props

Name	Type	Description
params	object	Contains the id of the role for which permissions are being managed.

Role Components

< Roles />

Displays a list of roles and provides actions for managing permissions, editing, and deleting roles.

Roles Props

Name	Type	Description
roles	array	An array of role data to be displayed in the table.

< RolesHeader />

Displays the header for the Roles page, including a button to add a new role if there are existing roles.

RolesHeader Props

Name	Type	Description
list	boolean	A boolean indicating whether to display the "Add Role" button.

< RoleForm />

Handles the creation and editing of roles.

RoleForm Props

Name	Type	Description
edit	boolean	A boolean indicating if the form is in edit mode.
role	object	The role data being edited (if in edit mode).