Transaction Monitoring System

A comprehensive real-time transaction monitoring system built with FastAPI backend and modern web frontend. This system provides transaction tracking, filtering, real-time updates, and comprehensive monitoring capabilities.

🚀 Features

• Real-time Transaction Monitoring: Live transaction updates via WebSocket
• Advanced Filtering: Filter transactions by server, status, type, customer, amount, and date ranges
• Search Capabilities: Full-text search across transaction data
• Data Visualization: Interactive charts and statistics
• Responsive Design: Modern UI that works on all devices
• RESTful API: Comprehensive API with OpenAPI documentation
• Database Integration: SQLite database with efficient querying
• Security: Input validation and secure data handling

📋 Prerequisites

• Python 3.8 or higher
• Node.js 14+ (for frontend development)
• Modern web browser

🛠️ Installation

Backend Setup

1. Clone the repository:

git clone https://github.com/your-username/TransactionMonitoring.git
cd TransactionMonitoring

2. Set up virtual environment:

cd backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies:

pip install -r requirements.txt

4. Start the backend server:

uvicorn main:app --reload --host 0.0.0.0 --port 8000

Frontend Setup

1. Open index.html in your browser or serve it with a web server:

# Using Python's built-in server
cd ..
python -m http.server 3000

2. Visit http://localhost:3000 in your browser

📖 Usage

Basic Operations

1. View Transactions: The main dashboard shows all transactions with real-time updates
2. Filter Transactions: Use the filter panel to narrow down results
3. Search: Use the search bar for quick lookups
4. Real-time Updates: New transactions appear automatically without page refresh

Adding Transactions

Use the provided dummy data generator in uses.md or make API calls:

// Example transaction
const transaction = {
  "TRANSACTION_SERVER": "SERVER_A",
  "CUSTOMER_ID": "CUST-12345",
  "DATE_TIME": "2024-03-15 14:30:00",
  "TRANSACTION_ID": "TXN-001",
  "TRANSACTION_AMOUNT": 1250.75,
  "TRANSACTION_TYPE": "DEBIT",
  "TRANSACTION_STATUS": "Success",
  "APPROVED_BY": "ADMIN_1",
  "SOURCE": "portal"
};

// Send to backend
fetch("http://127.0.0.1:8000/transactions", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(transaction)
});

🔧 Configuration

Environment Variables

Create a .env file in the backend directory:

# Database
DATABASE_URL=sqlite:///./transactions.db

# Server
HOST=0.0.0.0
PORT=8000
DEBUG=true

# Security
SECRET_KEY=your-secret-key-here

Database Setup

The system uses SQLite by default. The database is automatically created on first run. For production, consider PostgreSQL or MySQL.

📚 API Documentation

Once the backend is running, visit:

• Swagger UI: http://localhost:8000/docs
• ReDoc: http://localhost:8000/redoc

Key Endpoints

• GET /health - Health check
• GET /transactions - List transactions with filtering
• POST /transactions - Create new transaction
• GET /transactions/by-txn-id/{txn_id} - Get transaction by ID
• WS /ws - WebSocket for real-time updates

🏗️ Architecture

TransactionMonitoring/
├── backend/                 # FastAPI backend
│   ├── main.py             # Main application
│   ├── db.py               # Database configuration
│   ├── requirements.txt    # Python dependencies
│   └── README.md           # Backend documentation
├── index.html              # Frontend application
├── DESIGN_SYSTEM.md        # UI/UX design guidelines
├── uses.md                 # Utility scripts and examples
├── docs/                   # Additional documentation
└── README.md               # This file

🧪 Testing

Backend Tests

cd backend
python -m pytest

Frontend Testing

Open the browser developer tools and check the console for any errors. The WebSocket connection should show as connected.

🚀 Deployment

Docker Deployment

1. Build the image:

docker build -t transaction-monitoring .

2. Run the container:

docker run -p 8000:8000 transaction-monitoring

Production Deployment

For production deployment:

1. Use a production-grade database (PostgreSQL/MySQL)
2. Set up reverse proxy (Nginx)
3. Configure HTTPS
4. Set up monitoring and logging
5. Use environment variables for configuration

🤝 Contributing

Please read our Contributing Guidelines before submitting pull requests.

📄 License

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

🔒 Security

For security concerns, please read our Security Policy and report vulnerabilities responsibly.

📞 Support

• 📧 Email: [your-email@example.com]
• 🐛 Issues: GitHub Issues
• 📖 Documentation: Wiki

🙏 Acknowledgments

• FastAPI framework for the robust backend
• Tailwind CSS for the beautiful UI
• All contributors who help improve this project

---

Built with ❤️ for secure transaction monitoring