Secure Admin - Role-Based Access Control (RBAC) Dashboard

Secure Admin is a Role-Based Access Control (RBAC) user interface designed to manage users, roles, and permissions dynamically. It showcases a secure, functional, and visually appealing dashboard with dark and light themes. The project includes user and role management, permission handling, and dynamic visualizations for system monitoring.

---

Objective

This project evaluates creativity, technical skills, and problem-solving abilities in building a fully functional RBAC dashboard. The focus is on creating a secure and efficient UI for managing users, roles, and permissions, integrated with mock API functionalities.

---

Core Features

1. User Management

• View and manage users in the system.
• Add, edit, or delete users seamlessly.
• Assign roles and manage user status (Active/Inactive).

2. Role Management

• Define, edit, and delete roles.
• Assign permissions (Read, Write, Delete, etc.) or custom attributes to roles.

3. Dynamic Permissions

• Assign or modify permissions dynamically for roles.
• Display and manage permissions with a clear, user-friendly UI.

4. Custom API Simulation

• Mock API calls for CRUD operations on users and roles.
• Simulate server responses to validate UI functionality.

5. Dashboard Analytics

• Dynamic graphs to visualize system trends, including users, roles, and permissions over time.
• Themed interface with both dark and light modes.

---

Technologies Used

This project leverages a modern tech stack for optimal performance and a seamless developer experience:

Frontend

• React: For building the interactive UI.
• Tailwind CSS: For styling and theming.
• Radix UI: For accessible and customizable UI components.
• Tremor: For dynamic data visualization.
• React Hook Form: For efficient form management.
• Zod: For schema-based form validation.
• Lucide Icons: For intuitive iconography.

State Management

• Zustand: Lightweight state management for managing global state.

Build Tools

• Vite: For fast builds and hot module replacement.
• TypeScript: For type safety and better developer experience.

Additional Tools

• Next Themes: For implementing dark and light modes.
• Mock APIs: For simulating server responses.

---

Project Setup

Prerequisites

Ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn package manager

Steps to Run Locally

1. Clone the repository:

   git clone https://github.com/anonymousknight07/Secure-Admin---Role-Based-Access-Control.git
   
   

2. Install dependencies:

npm install  

3. Start the development server:

npm run dev

4. Access the application at http://localhost:5173

Usage

Landing Page

• Provides an overview and entry point to the dashboard.

Dashboard

• Overview Tab: Displays total users, roles, permissions, and active sessions.
• Users Tab: Manage users and their associated roles.
• Roles Tab: Define and edit roles with permissions.
• Permissions Tab: Assign or update permissions for roles.

Screenshots:

Login page :

Dashboard :

User management :

Role management :

Permission management:

Folder Structure

src/
├── components/        # Reusable UI components
├── pages/             # Dashboard and landing page views
├── hooks/             # Custom React hooks
├── context/           # Global state and context providers
├── services/          # Mock API service and utilities
├── styles/            # Tailwind CSS configurations
└── App.tsx            # Application entry point

Acknowledgments

• Radix UI for accessible component primitives.
• Tremor for beautiful and responsive data visualizations.
• React Hook Form for simplifying form handling.
• Tailwind CSS for rapid and modern styling.

Contact

For questions or support, feel free to reach out at X.