# Payment Admin Panel

A modern, responsive React admin panel for payment system management built with React, TailwindCSS, and Vite.

## Features

- 🔐 **JWT-based Authentication** - Secure login/logout with token management
- 📊 **Dashboard** - Payment statistics with interactive charts using Recharts
- 💳 **Transaction Management** - View, filter, and export payment transactions
- ⚙️ **Settings** - Configure payment API keys, webhooks, and preferences
- 🌙 **Dark Mode** - Toggle between light and dark themes
- 📱 **Responsive Design** - Works seamlessly on desktop and mobile devices
- 🎨 **Modern UI** - Clean, minimal design with TailwindCSS

## Tech Stack

- **React 18** - Frontend framework
- **Vite** - Build tool and development server
- **TailwindCSS** - Utility-first CSS framework
- **React Router DOM** - Client-side routing
- **Axios** - HTTP client for API requests
- **Recharts** - Chart library for data visualization
- **Lucide React** - Icon library

## Getting Started

### Prerequisites

- Node.js (version 16 or higher)
- npm or yarn

### Installation

1. **Clone the repository**
   ```bash
   git clone <repository-url>
   cd payment-admin-panel
   ```

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

3. **Start the development server**
   ```bash
   npm run dev
   ```

4. **Open your browser**
   Navigate to `http://localhost:5173`

### Demo Credentials

For testing purposes, you can use these demo credentials:
- **Email**: admin@example.com
- **Password**: password

## Project Structure

```
src/
├── components/
│   ├── Navbar.jsx          # Top navigation with dark mode toggle
│   ├── Sidebar.jsx         # Collapsible sidebar navigation
│   └── DataTable.jsx       # Reusable table component
├── pages/
│   ├── Dashboard.jsx       # Main dashboard with stats and charts
│   ├── Transactions.jsx    # Payment transactions table
│   ├── Settings.jsx        # Configuration settings
│   └── Login.jsx           # Authentication page
├── context/
│   └── AuthContext.jsx     # Authentication state management
├── services/
│   └── api.js              # Axios configuration and API calls
├── App.jsx                 # Main app component with routing
├── main.jsx                # App entry point
└── index.css               # TailwindCSS imports and custom styles
```

## API Integration

The application is designed to work with a REST API. Currently, it uses mock data for demonstration purposes. To integrate with a real API:

1. Update the `baseURL` in `src/services/api.js`
2. Modify the API endpoints to match your backend
3. Update the data structures to match your API response format

### Expected API Endpoints

- `POST /auth/login` - User authentication
- `GET /payments/stats` - Payment statistics
- `GET /payments` - Transaction list
- `GET /payments/chart-data` - Chart data

## Features Overview

### Dashboard
- Payment statistics cards (Total, Success, Failed)
- Interactive line chart showing payment trends
- Bar chart displaying payment status distribution
- Quick stats summary

### Transactions
- Comprehensive transaction table with search functionality
- Status filtering (All, Success, Pending, Failed)
- CSV export capability
- Responsive design with pagination

### Settings
- Payment API configuration
- Webhook URL setup
- Currency selection
- Notification preferences
- Security settings
- Data management options

### Authentication
- JWT token-based authentication
- Automatic token refresh
- Protected routes
- Persistent login state

## Customization

### Themes
The application supports both light and dark modes. The theme preference is stored in localStorage and automatically applied.

### Colors
Primary colors can be customized in `tailwind.config.js`:
```javascript
colors: {
  primary: {
    50: '#eff6ff',
    100: '#dbeafe',
    // ... more color variants
  }
}
```

### API Configuration
Update the API base URL in `src/services/api.js`:
```javascript
const api = axios.create({
  baseURL: 'https://your-api-domain.com/api',
  // ... other config
});
```

## Build for Production

```bash
npm run build
```

The built files will be in the `dist` directory.

## Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

## License

This project is licensed under the MIT License.