Task Description: Super Admin Dashboard with User Access Control
Overview
The goal of this task is to develop a Super Admin Dashboard with User Access Control
using React for the frontend and Django for the backend. The system should allow a super
admin to create user accounts, assign page access permissions, and track modification
history. Regular users will have controlled access to specific pages based on their assigned
permissions.
Key Functionalities:
1. Authentication System
○ JWT-based authentication with access and refresh token mechanism.
○ Persistent user session as long as the user is active (expires after 1 hour of
inactivity).
○ Login and password recovery flow.
2. User Management
○ Super admin can create users with an email and an auto-generated strong
password.
○ Users can update their profile details (except email).
○ Users can reset their passwords via OTP verification.
○ Users can view their assigned permissions but cannot change them.
3. Access Control & Permissions
○ Super admin can assign and manage user permissions for ten predefined
pages.
○ Each user can have View, Edit, Create, and Delete access for specific
pages.
○ Admin dashboard displays a user-role table, listing users with their assigned
page permissions.
○ Right-side panel for managing user permissions dynamically.
4. Content Management
○ Each page has:
■ Comment section: Users can add comments.
■ Editable comments: Users with edit access can modify comments.
■ Deletion control: Users with delete access can remove comments.
○ Comments are visible to all users with view access.
○ Modification history of comments, visible to the super admin.
5. Modification History (Bonus Task)
○ A tooltip card displays the modification history of each comment, showing:
■ The user who created/modified the comment.
■ Timestamp of each modification.
Detailed Functionalities
1. Authentication System
● Login
○ Separate login pages for super admin and regular users.
○ Redirect based on role:
■ Super admin → Admin dashboard
■ Regular users → Their assigned pages
● Password Recovery
○ User enters email → Receives OTP → Verifies OTP → Creates a new
password.
● Session Management
○ User remains logged in while active.
○ Session expires after 1 hour of inactivity.
2. Super Admin Dashboard
● User Management
○ Create new users with email & auto-generated strong password.
○ Assign and update user permissions.
○ Display users in a table format with pages as columns and access levels as
values.
○ Right-side panel for:
■ Adding new users.
■ Editing user permissions.
Note: This is the page that should be designed with a professional look.
3. Access Control
● User Permissions
○ Super admin can assign View, Edit, Create, Delete access per page.
○ Users can access only pages assigned to them.
● User Role Table (Core Feature)
○ Rows: Users
○ Columns: Page Names
○ Cells: Permission Levels
○ Action Column: Edit user roles via right-side panel.
4. Dynamic Pages (10 Pages)
Each page includes:
● Page Name
● Comment section
○ Users with edit access can modify comments.
○ Users with delete access can remove comments.
○ All users with view access can see the comments.
Pages:
1. Products List
2. Marketing List
3. Order List
4. Media Plans
5. Offer Pricing SKUs
6. Clients
7. Suppliers
8. Customer Support
9. Sales Reports
10.Finance & Accounting
Note: These pages are similar pages each of which shall contain a list of existing comments
with edit and delete action for each. And with the option to add a new comment. We will be
testing mainly the accessibility rules for different users rather than the design and complexity
on these pages so keep it simple.
5. Super Admin Features
● Access All Pages
● Full Control Over Comments
● View Modification History
○ Tooltip showing:
■ Original comment
■ Modifications with timestamps
■ Users who modified it
Frontend (React)
● Follows consistent UI/UX pattern.
● Use bootstrap for styling (alternatives are also acceptable)
● Reusable Components for:
○ Comment management
○ User-role table
○ Right-side user panel
● Responsive and dynamic design.
Backend (Django)
● Django REST Framework (DRF)
● JWT Authentication (Access & Refresh Token)
● User & Role Management API
● Permission-Based Access Control
● Comment Tracking & History
● Activity Logging
Database: you can use any structured database. (for simplicity SQLite will do)
Deliverables
1. Complete Codebase
○ Organized in a parent directory with:
■ /frontend: React code
■ /backend: Django code
1. Requirements file ([Link]) for dependencies.
○ [Link] with:
■ Setup instructions.
■ Features breakdown.
■ Challenges faced and solutions.
2. Video Submission
○ Walkthrough of the project:
■ Screen Recording of Setup, implementation, and functionalities.
○ Challenges faced & solutions.
○ External resources used (if any).
○ How the project meets the grading criteria.
3. GitHub Submission
Private Repository.
○ Add collaborator: simonkb.
Grading Criteria
● Frontend (60%)
○ UI/UX Quality
○ Reusable Components
○ Admin Dashboard Implementation
○ Dynamic Permission Handling
● Backend (40%)
○ JWT Authentication
○ User & Role Management
○ Data Persistence
○ Comment History Tracking
This task requires a well-structured, maintainable, and high-quality implementation.
The admin dashboard and user-role table are the most crucial parts, and the design
should prioritize usability and efficiency.