A modern, comprehensive security management platform built with Next.js 14, TypeScript, Tailwind CSS, and Supabase. Features role-based access control, user management, division organization, and a clean, intuitive interface.
- User Management: Create, edit, delete users with comprehensive role assignments
- Division Management: Organize users into divisions with manager hierarchy
- Role-Based Access Control: 5-tier role system (Administrator → Divisional Manager → Analyst → Investigator → System Support)
- Access Restrictions: Division-based data filtering for managers
- Real-time User Counts: Dynamic calculation of users per division
- Avatar Upload: Secure image upload with cropping and storage in Supabase
- Personal Information: Complete profile editing with social media links
- Authentication Integration: Seamless auth flow with Supabase Auth
- Dark Mode Support: Complete theming system
- Responsive Design: Mobile-first approach with adaptive layouts
- Global Loading System: Smooth authentication and role-based loading
- Real-time Notifications: Success, error, and info notifications
- Advanced Search: Full-text search across all table fields
- Frontend: Next.js 14 (App Router), TypeScript, Tailwind CSS
- Backend: Supabase (PostgreSQL, Auth, Storage)
- State Management: React Context + Custom Hooks
- UI Components: Custom component library with Framer Motion
- Authentication: Supabase Auth with JWT tokens
src/
├── app/ # Next.js App Router pages
├── components/ # Reusable UI components
│ ├── auth/ # Authentication components
│ ├── common/ # Shared components
│ ├── forms/ # Form components
│ ├── ui/ # Base UI components
│ └── user-profile/ # Profile management
├── features/ # Feature-based modules
│ └── security/ # Security management feature
├── hooks/ # Custom React hooks
├── lib/ # Utilities and services
├── context/ # React Context providers
└── types/ # TypeScript type definitions
For detailed information about specific features:
- Profile System Documentation - Complete guide to user profile management
- Security System Documentation - Comprehensive security and RBAC guide
- Node.js 18+
- npm or yarn
- Supabase account
Create a .env.local file:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key# Clone the repository
git clone [repository-url]
cd evolution
# Install dependencies
npm install
# Run development server
npm run devThe project requires specific Supabase tables and policies. See the documentation files for detailed schema information.
- Administrator - Full system access
- Divisional Manager - Division-specific management
- Analyst - Data analysis capabilities
- Investigator - Investigation tools access
- System Support - Technical support functions
- Administrators: Full CRUD access to all users and divisions
- Divisional Managers: Limited to their assigned division's users
- Other Roles: Read-only access with specific feature permissions
✅ Complete User Management System
- Advanced table with search, filtering, sorting
- Modal-based CRUD operations
- Real-time status updates
- Bulk operations support
✅ Division Management
- Dynamic user count calculation
- Manager assignment system
- Search across all fields
- Hierarchical organization
✅ Profile System
- Avatar upload with cropping
- Social media integration
- Real-time profile updates
- Secure file storage
✅ Authentication & Security
- Role-based route protection
- Secure API endpoints
- Session management
- Division-based data filtering
✅ Enhanced UX
- Global loading system
- Dark mode theming
- Responsive design
- Real-time notifications
The application is production-ready with:
- Clean codebase (removed console logs, unused files)
- Comprehensive documentation
- Stable form editing (no field reversion issues)
- Fast search and filtering
- Correct user count calculations
- Secure authentication flow
- Follow the existing code structure
- Use TypeScript for all new code
- Maintain the feature-based architecture
- Add tests for new functionality
- Update documentation for new features
This project is part of Evolution 1.0 security management system.
Evolution 1.0 - Built with ❤️ for modern security management