PayPilot – Fintech Payment Dashboard

A modern, responsive fintech dashboard inspired by real-world payment platforms. Built with React, TypeScript, Tailwind CSS, and Recharts to simulate a production-level SaaS interface.

---

🚀 Live Demo

👉 View Live Project

---

📸 Preview

---

💡 Project Overview

PayPilot is a fintech dashboard designed to help businesses monitor payments, balances, customers, and integrations.

This project was built to simulate a real SaaS product and demonstrate the ability to:

• build structured application interfaces
• handle user interaction and UI state
• display financial data clearly
• create responsive, production-like layouts

---

✨ Features

• Fully responsive dashboard layout
• Mobile sidebar (slide-in navigation)
• Sticky topbar with responsive behavior
• Balance overview cards
• Interactive revenue chart (Recharts)
• Search functionality (filter payments by name or ID)
• Payment status filtering (Succeeded, Pending, Failed)
• Clickable payment rows with detail modal
• Recent payments table with status badges
• Customer panel (top customers)
• Integration status cards (API & webhook health)

---

🛠️ Tech Stack

• React (Vite)
• TypeScript
• Tailwind CSS
• Recharts (data visualization)
• Vercel (deployment)

---

📂 Project Structure

src/
  components/
    sidebar.tsx
    topbar.tsx
    balanceCards.tsx
    revenueChart.tsx
    quickActions.tsx
    paymentTables.tsx
    customers.tsx
    developer.tsx
  App.tsx
  main.tsx
  index.css

---

⚙️ Installation & Setup

To run this project locally:

# clone the repo
git clone https://github.com/tobyemerald/PayPilot.git

# go into the project folder
cd PayPilot

# install dependencies
npm install

# start development server
npm run dev

---

📊 Data & Interaction

This dashboard includes interactive features such as:

• Search filtering: dynamically filters payments by customer name or ID
• Status filtering: filter payments by status (Succeeded, Pending, Failed)
• Modal interaction: click any payment row to view detailed information
• Responsive charts: payment trends visualized using Recharts

---

🎯 What I Learned

• Building responsive SaaS dashboard layouts
• Managing UI state across components
• Implementing search and filtering logic
• Creating reusable components with TypeScript
• Handling user interaction (modals, events)
• Using Recharts for data visualization
• Designing clean, scalable UI systems

---

📈 Future Improvements

• Add date range filtering for analytics
• Implement dark mode
• Add pagination to payments table
• Connect to a backend API for real data
• Add authentication (login/signup flow)
• Improve accessibility (keyboard navigation, ARIA roles)

---

🤝 Contact

If you'd like to collaborate or have feedback:

• GitHub: https://github.com/tobyemerald
• Email: tobi.atunde@gmail.com

---

⭐️ If you like this project

Give it a star on GitHub — it helps a lot!