A modern web application for managing accounts payable, built with React and Vite. Features a responsive UI with real-time updates, interactive charts, and comprehensive financial reporting.

• Overview of accounts payable status
• Key financial metrics at a glance
• Recent activity tracking
• Quick action buttons for common tasks

• Add and manage vendor profiles
• Track vendor payment history
• Vendor contact information storage
• Vendor-specific payment terms

• Create and manage invoices
• Track outstanding balances
• Monitor overdue payments
• Invoice status tracking
• Payment scheduling

• Process payments with multiple payment methods
• Real-time payment status updates
• Interactive payment history table
• Bulk payment processing
• Payment filtering and search
• Modal-based payment creation
• Status-based payment management

• Interactive charts and visualizations
• Monthly payment trends analysis
• Top vendor payment analysis
• Payment method distribution
• Downloadable financial reports
• Custom date range selection
• Real-time data updates

• React 18.2.0
• React Router DOM 6.15.0
• Recharts 2.10.3 (for data visualization)
• date-fns 4.1.0 (for date handling)
• Tailwind CSS 3.3.6 (for styling)
• Vite 4.4.5 (for build tooling)

• Express.js 4.18.2
• CORS middleware
• RESTful API architecture

• Node.js (Latest LTS version recommended)
• npm or yarn package manager

1. Clone the repository:

git clone [repository-url]

2. Install dependencies:

npm install

3. Start the API server (runs on port 3003):

npm run server

4. In a new terminal, start the development server (runs on port 3002):

npm run dev

The application will be available at http://localhost:3002

The backend server provides the following endpoints:

• GET /api/payments - Retrieve all payments
• POST /api/payments - Create a new payment
• PATCH /api/payments/:id - Update payment status
• GET /api/vendors - Retrieve all vendors
• GET /api/invoices - Retrieve all invoices

To create a production build:

npm run build

To preview the production build:

npm run preview

accounts-payable/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── Dashboard.jsx   # Main dashboard component
│   │   ├── Payments.jsx    # Payment management
│   │   ├── Reports.jsx     # Financial reporting
│   │   ├── Vendors.jsx     # Vendor management
│   │   └── Invoices.jsx    # Invoice processing
│   ├── App.jsx             # Main application component
│   ├── main.jsx           # Application entry point
│   └── App.css            # Global styles
├── server.js              # API server
├── public/               # Static assets
├── index.html           # HTML entry point
└── package.json         # Project dependencies and scripts

The main application component that handles:

• Routing configuration
• Layout structure
• Navigation menus
• Quick action widgets
• Activity tracking

Comprehensive payment management featuring:

• Payment creation modal
• Payment status updates
• Interactive data table
• Search and filtering
• Error handling
• Loading states

Advanced financial reporting with:

• Interactive charts (Line, Bar, Pie)
• Data analysis tools
• Report downloads
• Date range selection
• Real-time updates

1. Start the API server first: npm run server
2. Start the development server: npm run dev
3. Both servers must be running for full functionality

1. Frontend changes hot-reload automatically
2. API changes require server restart
3. Use the browser console to monitor API interactions
4. Check the Network tab for request/response data

• If the API server fails to start, check if port 3003 is in use
• If the dev server fails to start, check if port 3002 is in use
• Ensure all API endpoints return proper JSON responses
• Verify CORS settings if experiencing API connection issues

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.