# Numerology CMS Frontend

A modern, premium CMS dashboard built with React + Vite, featuring glassmorphism UI, dark mode support, and comprehensive user management.

## 🎨 Features

- **Modern UI Design**
  - Glassmorphism cards with soft shadows
  - Gradient buttons (Indigo → Purple)
  - Smooth hover animations
  - Responsive mobile-first layout
  - Dark mode with localStorage persistence

- **Authentication**
  - Email + Password login
  - User registration
  - Access & Refresh token management
  - Axios interceptor with auto-refresh
  - Protected routes

- **User Management**
  - Server-side pagination
  - Debounced search
  - Add/Edit/Delete users
  - Soft delete support
  - Role-based access (Superadmin only delete)
  - Status badges

- **Components**
  - Reusable Button, Card, Modal, Table
  - Pagination component
  - Form inputs with validation
  - Badge system
  - Loader spinner
  - Confirm dialog
  - Sidebar with collapse
  - Navbar with user info

- **Advanced Features**
  - Context API for state management
  - Axios with interceptors
  - Debounced search
  - Toast notifications
  - Tailwind CSS styling
  - React Router v6

## 📁 Project Structure

```
numerology-cms-frontend/
├── src/
│   ├── api/
│   │   ├── axiosConfig.js         # Axios instance with interceptors
│   │   └── endpoints.js            # API endpoints
│   ├── components/
│   │   ├── common/
│   │   │   ├── Button.jsx
│   │   │   ├── Card.jsx
│   │   │   ├── Modal.jsx
│   │   │   ├── Input.jsx
│   │   │   ├── Badge.jsx
│   │   │   ├── Loader.jsx
│   │   │   ├── Table.jsx
│   │   │   ├── Pagination.jsx
│   │   │   ├── ConfirmDialog.jsx
│   │   │   ├── Sidebar.jsx
│   │   │   ├── Navbar.jsx
│   │   │   └── ProtectedRoute.jsx
│   │   ├── AddUserModal.jsx
│   │   └── EditUserModal.jsx
│   ├── context/
│   │   ├── AuthContext.jsx         # Auth state management
│   │   └── ThemeContext.jsx        # Dark mode state
│   ├── pages/
│   │   ├── Login.jsx
│   │   ├── Register.jsx
│   │   ├── Dashboard.jsx
│   │   ├── Users.jsx
│   │   └── DashboardLayout.jsx
│   ├── utils/
│   │   ├── helpers.js             # Debounce, throttle
│   │   ├── hooks.js               # Custom hooks
│   │   └── toast.jsx              # Toast notifications
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── index.html
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
├── package.json
├── .env.example
└── .gitignore
```

## 🚀 Quick Start

### Prerequisites
- Node.js 16+ and npm/yarn
- Backend API running (or use mock API)

### Installation

1. **Clone or navigate to the project:**
```bash
cd numerology-cms-frontend
```

2. **Install dependencies:**
```bash
npm install
```

3. **Set up environment variables:**
```bash
cp .env.example .env.local
```

Edit `.env.local`:
```env
VITE_API_URL=http://localhost:3000/api
```

4. **Start development server:**
```bash
npm run dev
```

The app will open at `http://localhost:5173`

### Demo Credentials
- **Email:** admin@example.com
- **Password:** admin123

## 📦 Available Commands

```bash
# Development
npm run dev          # Start dev server

# Production
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint
```

## 🔐 Authentication Flow

1. User logs in with email + password
2. Backend returns `accessToken` and `refreshToken`
3. Tokens stored in localStorage and AuthContext
4. Axios interceptor attaches Bearer token to all requests
5. On 401 error, automatically calls refresh API
6. Failed requests retry with new token
7. On refresh failure, user redirected to login

## 🎯 API Endpoints

### Auth
- `POST /auth/login` - Login with email/password
- `POST /auth/register` - Register new user
- `POST /auth/refresh` - Refresh access token
- `POST /auth/logout` - Logout

### Users
- `GET /users?page=1&limit=10&search=term` - Get paginated users
- `GET /users/:id` - Get single user
- `POST /users` - Create user
- `PUT /users/:id` - Update user
- `DELETE /users/:id` - Hard delete user
- `PATCH /users/:id/soft-delete` - Soft delete user

## 🎨 Theme System

### Dark Mode
- Toggle button in sidebar
- Persisted to localStorage as `theme-mode`
- System preference fallback
- All components support both modes

### Color Palette

**Light Mode:**
- Background: White
- Accents: Indigo
- Text: Gray-900

**Dark Mode:**
- Background: Slate-950
- Accents: Purple
- Text: White/Gray-100

## 🧩 Component Usage

### Button
```jsx
<Button 
  variant="primary" // or secondary, danger, outline
  size="md"         // or sm, lg
  isLoading={false}
  onClick={handler}
>
  Click me
</Button>
```

### Modal
```jsx
<Modal
  isOpen={isOpen}
  onClose={onClose}
  title="Modal Title"
  size="md"         // or sm, lg, xl
>
  Content here
</Modal>
```

### Input
```jsx
<Input
  label="Email"
  type="email"
  placeholder="user@example.com"
  value={value}
  onChange={handler}
  error={errorMessage}
/>
```

### Card
```jsx
<Card glass={true} noPadding={false}>
  Content
</Card>
```

## 🔗 Custom Hooks

### useAuth()
```jsx
const { user, isAuthenticated, login, logout } = useAuth()
```

### useTheme()
```jsx
const { isDark, toggleTheme } = useTheme()
```

## 📱 Responsive Design

- Mobile: 320px+
- Tablet: 768px+
- Desktop: 1024px+
- Large: 1280px+

All components are fully responsive with mobile-first approach.

## 🎵 Smooth Animations

- Sidebar collapse animation
- Card hover effects
- Button scale on hover
- Gradient transitions
- Modal fade-in
- Loader spin animation
- Smooth color transitions

## 🔔 Toast Notifications

```jsx
import { showToast } from '../utils/toast'

showToast.success('Success message')
showToast.error('Error message')
showToast.loading('Loading...')
showToast.info('Info message')
showToast.promise(promise, {
  loading: 'Loading...',
  success: 'Success!',
  error: 'Error occurred'
})
```

## 🔍 Search & Pagination

- Debounced search (500ms delay)
- Server-side pagination
- Dynamic page calculation
- Ellipsis for large page counts
- Previous/Next buttons

## 🛡️ Role-Based Features

### Superadmin
- See and use delete button
- Full access to all features

### Admin
- Can edit users
- Cannot delete users

### User
- Limited access
- Read-only in most areas

## 📝 Environment Variables

```env
VITE_API_URL=http://localhost:3000/api
```

## 🚀 Deployment

### Build for Production
```bash
npm run build
```

Output directory: `dist/`

### Deploy to Vercel
```bash
npm i -g vercel
vercel
```

### Deploy to Netlify
```bash
npm run build
# Drag dist/ folder to Netlify
```

## 🐛 Troubleshooting

### API Connection Issues
- Check `VITE_API_URL` in `.env.local`
- Ensure backend is running
- Check CORS settings on backend

### Auth Token Issues
- Clear localStorage: `localStorage.clear()`
- Check refresh token endpoint
- Verify token expiry times

### Styling Issues
- Ensure Tailwind CSS is built: `npm install`
- Check dark mode class on html element
- Verify PostCSS configuration

## 📚 Dependencies

```json
{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.20.0",
  "axios": "^1.6.2",
  "react-icons": "^4.12.0",
  "sonner": "^1.2.3",
  "tailwindcss": "^3.3.0"
}
```

## 💡 Best Practices

1. **State Management:** Use Context API for global state
2. **Reusable Components:** Extend common components
3. **Error Handling:** Always use try-catch with API calls
4. **Loading States:** Show loaders during API calls
5. **Validation:** Validate forms before submission
6. **Accessibility:** Use semantic HTML and ARIA labels
7. **Performance:** Debounce search, lazy load pages

## 📄 License

MIT License - feel free to use this template!

## 🤝 Contributing

1. Create a feature branch
2. Make your changes
3. Test thoroughly
4. Submit a pull request

## 📞 Support

For issues and questions, create an issue in the repository.

---

**Built with ❤️ using React + Vite + Tailwind CSS**
