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

   git clone <repository-url>
   cd payment-admin-panel
   

2. Install dependencies

   npm install
   

3. Start the development server

   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:

colors: {
  primary: {
    50: '#eff6ff',
    100: '#dbeafe',
    // ... more color variants
  }
}

API Configuration

Update the API base URL in src/services/api.js:

const api = axios.create({
  baseURL: 'https://your-api-domain.com/api',
  // ... other config
});

Build for Production

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.