Skip to content

ADMIN_README.md

Latest commit

 

History

History
216 lines (174 loc) · 5.75 KB

ADMIN_README.md

File metadata and controls

216 lines (174 loc) · 5.75 KB

Admin Panel Documentation

Overview

The Admin Panel is a comprehensive administrative interface for managing users and system operations. It features modern UI/UX with animations, responsive design, and full integration with the backend API.

Features

🔐 Authentication

  • Secure admin login with JWT tokens
  • Protected routes with automatic redirection
  • Session management with local storage
  • Password validation and error handling

📊 Dashboard

  • Real-time statistics and metrics
  • Animated counters and progress indicators
  • Recent activity monitoring
  • Quick action shortcuts
  • System status overview

👥 User Management

  • Comprehensive user listing with filtering
  • Search functionality across all user fields
  • Status badges for verification and profile completion
  • Individual user actions (view, resend email, delete)
  • Bulk operations support

➕ User Creation

  • Single user creation with email verification
  • Bulk user upload from files or manual entry
  • Real-time validation and error feedback
  • Success/failure reporting for batch operations
  • Email template integration

⚙️ Settings

  • Admin profile management
  • Password change functionality
  • Notification preferences
  • System configuration options

Technical Features

🎨 UI/UX

  • Framer Motion animations - Smooth transitions and micro-interactions
  • Lucide React icons - Consistent iconography
  • Tailwind CSS - Responsive design with glassmorphism effects
  • Dark theme - Professional admin interface
  • Loading states - Skeleton loaders and spinners

🔧 Development

  • TypeScript - Full type safety
  • React Hook Form - Efficient form handling
  • Zod validation - Runtime type checking
  • Custom hooks - Reusable logic separation
  • Error boundaries - Graceful error handling

📱 Responsive Design

  • Mobile-first approach
  • Adaptive sidebar navigation
  • Touch-friendly interactions
  • Flexible grid layouts
  • Optimized for all screen sizes

File Structure

client/
├── app/admin/
│   ├── layout.tsx                 # Admin layout wrapper
│   ├── page.tsx                   # Root redirect
│   ├── login/page.tsx             # Login form
│   ├── dashboard/page.tsx         # Main dashboard
│   ├── users/page.tsx             # User management
│   ├── create-user/page.tsx       # User creation
│   └── settings/page.tsx          # Admin settings
├── components/admin/
│   ├── admin-layout.tsx           # Layout components
│   └── animations.tsx             # Reusable animations
├── hooks/admin/
│   ├── use-admin-auth.tsx         # Authentication context
│   └── use-admin-api.ts           # API integration hooks
├── types/admin/
│   └── index.ts                   # TypeScript definitions
└── api/admin/
    └── login/route.ts             # API route handlers

API Endpoints

Authentication

  • POST /api/admin/login - Admin login

User Management

  • GET /api/admin/users - Get all users
  • POST /api/admin/create-user - Create single user
  • POST /api/admin/create-bulk-users - Create multiple users
  • POST /api/admin/resend-verification/:userId - Resend verification
  • DELETE /api/admin/user/:userId - Delete user

Setup Instructions

1. Environment Variables

NEXT_API_PUBLIC_URL=http://localhost:5000/api
JWT_SECRET=your-jwt-secret

2. Admin Account Creation

Create an admin account in your database:

const admin = new Admin({
  email: 'admin@example.com',
  password: 'secure-password',
  name: 'Admin User',
  role: 'admin'
});
await admin.save();

3. Backend Dependencies

Ensure your server has these dependencies:

  • bcryptjs - Password hashing
  • jsonwebtoken - JWT token generation
  • joi - Request validation

Usage

Accessing the Admin Panel

  1. Navigate to /admin/login
  2. Enter admin credentials
  3. Access dashboard and features

Creating Users

  1. Go to "Create User" section
  2. Choose single or bulk creation
  3. Enter email addresses
  4. Users receive verification emails automatically

Managing Users

  1. View all users in "User Management"
  2. Use search and filters to find specific users
  3. Perform actions via dropdown menus
  4. Monitor user status with visual indicators

Security Features

  • JWT token-based authentication
  • Password hashing with bcrypt
  • Request validation with Joi schemas
  • Protected routes with middleware
  • CORS configuration
  • Input sanitization

Customization

Themes

The admin panel uses CSS custom properties for easy theming:

:root {
  --admin-primary: #8b5cf6;
  --admin-secondary: #06b6d4;
  --admin-accent: #10b981;
  --admin-bg: #0f172a;
}

Animations

Customize animations in components/admin/animations.tsx:

export const customAnimation = {
  initial: { opacity: 0, scale: 0.9 },
  animate: { opacity: 1, scale: 1 },
  transition: { duration: 0.3 }
};

Troubleshooting

Common Issues

  1. Login fails: Check JWT_SECRET and admin credentials
  2. API errors: Verify NEXT_API_PUBLIC_URL is correct
  3. Loading issues: Check network connectivity
  4. Style problems: Ensure Tailwind CSS is properly configured

Debug Mode

Set NODE_ENV=development for detailed error messages.

Contributing

  1. Follow TypeScript strict mode
  2. Use provided hooks for API calls
  3. Implement proper error handling
  4. Add loading states for all async operations
  5. Maintain responsive design principles

Performance

The admin panel is optimized for:

  • Lazy loading of components
  • Efficient re-renders with React hooks
  • Minimal bundle size
  • Fast API responses
  • Smooth animations

Browser Support

  • Chrome 90+
  • Firefox 90+
  • Safari 14+
  • Edge 90+

License

Part of the TNP Profile Management System.