From 51e9d7e65639739f5781fafe6a0283d4599d8623 Mon Sep 17 00:00:00 2001 From: ghazall-ag Date: Thu, 23 Oct 2025 22:58:19 +0330 Subject: [PATCH] edit readme --- README.md | 157 +----------------------------------------------------- 1 file changed, 1 insertion(+), 156 deletions(-) diff --git a/README.md b/README.md index b5fc472..d517719 100644 --- a/README.md +++ b/README.md @@ -1,56 +1,4 @@ -# 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 - 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 @@ -58,8 +6,7 @@ For testing purposes, you can use these demo credentials: ## Project Structure -``` -src/ + ├── components/ │ ├── Navbar.jsx # Top navigation with dark mode toggle │ ├── Sidebar.jsx # Collapsible sidebar navigation @@ -78,105 +25,3 @@ src/ └── 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.