first commit

README.md

@@ -0,0 +1,182 @@
+# 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.