# React Conversion Setup Guide

## What Was Converted

All HTML pages have been converted to React components:

1. **Login** (`src/pages/Login.js`) - Authentication page
2. **Dashboard** (`src/pages/Dashboard.js`) - Main dashboard with country cards
3. **Activity Log** (`src/pages/ActivityLog.js`) - Activity tracking with filtering
4. **User Create** (`src/pages/UserCreate.js`) - User management with tabs
5. **User Profile** (`src/pages/UserProfile.js`) - User profile editing
6. **Add Site** (`src/pages/AddSite.js`) - Site management
7. **Add Workarea** (`src/pages/AddWorkarea.js`) - Workarea management
8. **Notification Settings** (`src/pages/NotificationSettings.js`) - Notification configuration

## Shared Components

- **Navbar** (`src/components/Navbar.js`) - Top navigation bar
- **Sidebar** (`src/components/Sidebar.js`) - Side navigation menu
- **Layout** (`src/components/Layout.js`) - Main layout wrapper
- **ProtectedRoute** (`src/components/ProtectedRoute.js`) - Route protection

## Key Changes from HTML to React

1. **State Management**: All form states and UI states use React hooks (`useState`, `useEffect`, `useMemo`)
2. **Routing**: React Router replaces HTML links
3. **Event Handlers**: Converted from inline `onclick` to React event handlers
4. **Component Structure**: Each page is now a functional React component
5. **CSS**: All CSS files preserved in `src/styles/` and imported via `src/index.css`

## Installation & Running

```bash
# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build
```

## Authentication

Currently uses localStorage for authentication. In production, replace with proper authentication:
- Update `src/components/ProtectedRoute.js`
- Update `src/pages/Login.js` to use real authentication API

## Notes

- All original CSS styling is preserved
- All functionality has been converted to React patterns
- Responsive design maintained
- All interactive features work as before