https://github.com/anonymousknight07/secure-admin---role-based-access-control
Secure Admin is a Role-Based Access Control (RBAC) user interface designed to manage users, roles, and permissions dynamically.
https://github.com/anonymousknight07/secure-admin---role-based-access-control
admin-dashboard corporate-functions database database-management react tailwindcss user-interface user-management vite
Last synced: 3 months ago
JSON representation
Secure Admin is a Role-Based Access Control (RBAC) user interface designed to manage users, roles, and permissions dynamically.
- Host: GitHub
- URL: https://github.com/anonymousknight07/secure-admin---role-based-access-control
- Owner: anonymousknight07
- Created: 2024-11-27T11:18:10.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2024-11-27T16:50:00.000Z (7 months ago)
- Last Synced: 2025-02-10T04:28:56.523Z (5 months ago)
- Topics: admin-dashboard, corporate-functions, database, database-management, react, tailwindcss, user-interface, user-management, vite
- Language: TypeScript
- Homepage: https://secureadmin.vercel.app/
- Size: 119 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/anonymousknight07/Secure-Admin---Role-Based-Access-Control.git
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
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
```bash
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](https://x.com/akshath_pandey).
