RFID Access Control - Frontend

Modern, responsive web application for managing RFID access control systems. Built with Next.js 14, TypeScript, Tailwind CSS, and shadcn/ui.

Features

✨ Dashboard

• Real-time statistics and metrics
• Interactive charts with Recharts
• Recent events timeline
• Auto-refresh data every 30 seconds

🔐 Authentication

• Secure JWT-based authentication
• Role-based access control (Admin, Operator, Supervisor)
• Persistent login sessions

💳 Card Management

• Complete CRUD operations for access cards
• Enable/disable cards with audit trail
• View card status history
• Search and filter capabilities

📊 Events

• View all access events
• Advanced filtering (device, UID, type, date range)
• Server-side pagination
• Real-time updates

👥 User Management (Admin only)

• Manage system users
• Assign roles and permissions
• Secure password handling

📥 Data Export

• Export events to CSV or JSON
• Apply filters before export
• Download ready for analysis

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS + shadcn/ui
• State Management: Zustand (auth), React Query (@tanstack/query)
• Charts: Recharts
• HTTP Client: Axios
• Form Validation: React Hook Form + Zod
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Backend API running on http://localhost:5000

Installation

1. Install dependencies:

   npm install
   

2. Configure environment: Create or verify .env.local file:

   NEXT_PUBLIC_API_URL=http://localhost:5000/api
   

3. Run development server:

   npm run dev
   

4. Open browser: Navigate to http://localhost:3000

Build for Production

npm run build
npm start

Default Credentials

• Username: admin
• Password: admin-rfid-2026

Project Structure

frontend/
├── app/                       # Next.js App Router pages
│   ├── dashboard/            # Protected dashboard routes
│   │   ├── cards/           # Card management pages
│   │   ├── events/          # Events pages
│   │   ├── users/           # User management (admin only)
│   │   ├── export/          # Data export page
│   │   └── page.tsx         # Dashboard home (stats)
│   ├── login/               # Login page
│   ├── layout.tsx           # Root layout + providers
│   ├── page.tsx             # Home redirect
│   └── globals.css          # Global styles
├── components/              # React components
│   ├── ui/                 # shadcn/ui components
│   ├── layout/             # Layout components
│   ├── dashboard/          # Dashboard components
│   ├── cards/              # Card components
│   ├── events/             # Event components
│   └── users/              # User components
├── lib/                    # Utilities and libraries
│   ├── api/               # API service layer
│   ├── hooks/             # React Query hooks
│   ├── store/             # Zustand stores
│   ├── types/             # TypeScript types
│   └── utils/             # Utility functions
└── public/                # Static assets

Key Concepts

Authentication Flow

1. User logs in via /login
2. JWT token stored in localStorage
3. Token automatically sent with all API requests
4. AuthGuard protects dashboard routes
5. Automatic redirect on 401 errors

State Management

• Global State (Zustand): User authentication, token persistence
• Server State (React Query): API data caching, automatic refetching, optimistic updates

Role-Based Access

• Admin: Full access to all features
• Operator: Manage cards and view events
• Supervisor: View-only access to cards, events, and stats

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

Environment Variables

Variable	Description	Default
NEXT_PUBLIC_API_URL	Backend API base URL	http://localhost:5000/api

Troubleshooting

Cannot connect to API

• Verify backend is running on http://localhost:5000
• Check NEXT_PUBLIC_API_URL in .env.local
• Verify CORS is configured on backend

Login fails

• Verify credentials: admin / admin-rfid-2026
• Check network tab for API errors
• Ensure backend /api/auth/login endpoint is working

Components not styling correctly

• Clear .next cache: rm -rf .next && npm run dev
• Reinstall dependencies: npm install