Hugging Face's logo

Spaces:
Acronite
/
undefined
Running

App Files Community
undefined / index.html
Acronite's picture
Acronite
Can you add iDeal as a payment gateway with support for all Dutch Banks.
3145588 verified
Raw History Blame Contribute Delete
23.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PayGate Commander | Dashboard</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.sidebar {
transition: all 0.3s ease;
}
.sidebar-collapsed {
width: 80px;
}
.sidebar-collapsed .nav-text {
display: none;
}
.content {
transition: margin-left 0.3s ease;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>
</head>
<body class="bg-gray-100">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0">
<div class="p-4 flex items-center justify-between border-b border-indigo-700">
<div class="flex items-center space-x-2">
<i data-feather="credit-card" class="w-6 h-6"></i>
<span class="text-xl font-bold">PayGate Commander</span>
</div>
<button id="toggleSidebar" class="text-gray-300 hover:text-white">
<i data-feather="chevron-left"></i>
</button>
</div>
<nav class="p-4">
<div class="mb-8">
<p class="text-xs uppercase text-indigo-300 mb-2">Main</p>
<a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg bg-indigo-700 text-white">
<i data-feather="home"></i>
<span class="nav-text">Dashboard</span>
</a>
</div>
<div class="mb-8">
<p class="text-xs uppercase text-indigo-300 mb-2">Payments</p>
<a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
<i data-feather="dollar-sign"></i>
<span class="nav-text">Transactions</span>
</a>
<a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
<i data-feather="refresh-cw"></i>
<span class="nav-text">Refunds</span>
</a>
<a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
<i data-feather="bar-chart-2"></i>
<span class="nav-text">Analytics</span>
</a>
</div>
<div class="mb-8">
<p class="text-xs uppercase text-indigo-300 mb-2">Settings</p>
<a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
<i data-feather="settings"></i>
<span class="nav-text">Gateway Config</span>
</a>
<a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
<i data-feather="shield"></i>
<span class="nav-text">Security</span>
</a>
<a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
<i data-feather="users"></i>
<span class="nav-text">Users</span>
</a>
</div>
<div class="absolute bottom-4 left-4 right-4">
<div class="bg-indigo-900 p-3 rounded-lg">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-indigo-700 flex items-center justify-center">
<i data-feather="user"></i>
</div>
<div class="nav-text">
<p class="text-sm font-medium">Admin User</p>
<p class="text-xs text-indigo-300">Super Admin</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<!-- Main Content -->
<div class="content flex-1 overflow-auto">
<!-- Top Navigation -->
<header class="bg-white shadow-sm">
<div class="px-6 py-4 flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-800">Dashboard Overview</h1>
<div class="flex items-center space-x-4">
<div class="relative">
<i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
<i data-feather="bell"></i>
</button>
</div>
</div>
</header>
<!-- Stats Cards -->
<div class="px-6 py-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Total Revenue</p>
<h3 class="text-2xl font-bold mt-1">$24,780</h3>
<p class="text-sm text-green-500 mt-1">+12.5% from last month</p>
</div>
<div class="p-3 rounded-full bg-green-100 text-green-600">
<i data-feather="trending-up"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Transactions</p>
<h3 class="text-2xl font-bold mt-1">1,458</h3>
<p class="text-sm text-red-500 mt-1">-2.3% from last month</p>
</div>
<div class="p-3 rounded-full bg-blue-100 text-blue-600">
<i data-feather="credit-card"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Success Rate</p>
<h3 class="text-2xl font-bold mt-1">98.7%</h3>
<p class="text-sm text-green-500 mt-1">+0.8% from last month</p>
</div>
<div class="p-3 rounded-full bg-purple-100 text-purple-600">
<i data-feather="check-circle"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Avg. Processing</p>
<h3 class="text-2xl font-bold mt-1">1.2s</h3>
<p class="text-sm text-green-500 mt-1">-0.4s from last month</p>
</div>
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
<i data-feather="clock"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="px-6 pb-6">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Revenue Chart -->
<div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-semibold">Revenue Overview</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-lg">Monthly</button>
<button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">Quarterly</button>
<button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">Yearly</button>
</div>
</div>
<canvas id="revenueChart" height="300"></canvas>
</div>
<!-- Recent Transactions -->
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-semibold">Recent Transactions</h2>
<button class="text-indigo-600 text-sm font-medium">View All</button>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between p-3 border-b">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
<i data-feather="check-circle"></i>
</div>
<div>
<p class="font-medium">Payment Received</p>
<p class="text-xs text-gray-500">#TXN-4872 • 10 min ago</p>
</div>
</div>
<div class="text-right">
<p class="font-medium">+$128.00</p>
<p class="text-xs text-green-500">Completed</p>
</div>
</div>
<div class="flex items-center justify-between p-3 border-b">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
<i data-feather="credit-card"></i>
</div>
<div>
<p class="font-medium">Payment Processed</p>
<p class="text-xs text-gray-500">#TXN-4871 • 25 min ago</p>
</div>
</div>
<div class="text-right">
<p class="font-medium">+$85.50</p>
<p class="text-xs text-green-500">Completed</p>
</div>
</div>
<div class="flex items-center justify-between p-3 border-b">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
<i data-feather="clock"></i>
</div>
<div>
<p class="font-medium">Pending Payment</p>
<p class="text-xs text-gray-500">#TXN-4870 • 1 hour ago</p>
</div>
</div>
<div class="text-right">
<p class="font-medium">+$42.99</p>
<p class="text-xs text-yellow-500">Processing</p>
</div>
</div>
<div class="flex items-center justify-between p-3">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
<i data-feather="x-circle"></i>
</div>
<div>
<p class="font-medium">Failed Payment</p>
<p class="text-xs text-gray-500">#TXN-4869 • 2 hours ago</p>
</div>
</div>
<div class="text-right">
<p class="font-medium">$64.20</p>
<p class="text-xs text-red-500">Declined</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Gateway Status -->
<div class="px-6 pb-6">
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-lg font-semibold mb-6">Gateway Status</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="font-medium">Stripe</span>
</div>
<span class="text-sm text-gray-500">Primary</span>
</div>
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Last Sync</p>
<p class="text-sm">2 minutes ago</p>
</div>
<div>
<p class="text-sm text-gray-500">Volume</p>
<p class="text-sm">$18,245</p>
</div>
<button class="text-indigo-600 text-sm font-medium">Configure</button>
</div>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="font-medium">PayPal</span>
</div>
<span class="text-sm text-gray-500">Secondary</span>
</div>
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Last Sync</p>
<p class="text-sm">5 minutes ago</p>
</div>
<div>
<p class="text-sm text-gray-500">Volume</p>
<p class="text-sm">$4,873</p>
</div>
<button class="text-indigo-600 text-sm font-medium">Configure</button>
</div>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<span class="font-medium">Bank Transfer</span>
</div>
<span class="text-sm text-gray-500">Inactive</span>
</div>
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Last Sync</p>
<p class="text-sm">3 days ago</p>
</div>
<div>
<p class="text-sm text-gray-500">Volume</p>
<p class="text-sm">$1,662</p>
</div>
<button class="text-indigo-600 text-sm font-medium">Configure</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
feather.replace();
// Toggle sidebar
document.getElementById('toggleSidebar').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('sidebar-collapsed');
document.querySelector('.content').classList.toggle('ml-64');
document.querySelector('.content').classList.toggle('ml-20');
const icon = this.querySelector('i');
if (icon.getAttribute('data-feather') === 'chevron-left') {
icon.setAttribute('data-feather', 'chevron-right');
} else {
icon.setAttribute('data-feather', 'chevron-left');
}
feather.replace();
});
// Revenue Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
const revenueChart = new Chart(revenueCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
label: 'Revenue',
data: [8500, 10200, 9800, 11500, 12000, 14500, 16800],
backgroundColor: 'rgba(99, 102, 241, 0.1)',
borderColor: 'rgba(99, 102, 241, 1)',
borderWidth: 2,
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Simulate real-time data updates
setInterval(() => {
// Generate random data
const randomValue = Math.floor(Math.random() * 2000) + 500;
// Update stats cards
const totalRevenue = document.querySelectorAll('.text-2xl.font-bold')[0];
const currentRevenue = parseInt(totalRevenue.textContent.replace('$', '').replace(',', ''));
totalRevenue.textContent = '$' + (currentRevenue + randomValue).toLocaleString();
// Update transaction count
const transactionCount = document.querySelectorAll('.text-2xl.font-bold')[1];
const currentCount = parseInt(transactionCount.textContent.replace(',', ''));
transactionCount.textContent = (currentCount + Math.floor(Math.random() * 10) + 1).toLocaleString();
// Add a new transaction to the list
if (Math.random() > 0.7) {
const transactionsList = document.querySelector('.space-y-4');
const statuses = ['Completed', 'Processing', 'Failed'];
const icons = ['check-circle', 'clock', 'x-circle'];
const colors = ['green', 'yellow', 'red'];
const statusIndex = Math.floor(Math.random() * 3);
const amount = (Math.random() * 200 + 5).toFixed(2);
const txnId = Math.floor(Math.random() * 9000) + 1000;
const minutesAgo = Math.floor(Math.random() * 120) + 1;
const newTransaction = document.createElement('div');
newTransaction.className = 'flex items-center justify-between p-3 border-b';
newTransaction.innerHTML = `
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-${colors[statusIndex]}-100 flex items-center justify-center text-${colors[statusIndex]}-600">
<i data-feather="${icons[statusIndex]}"></i>
</div>
<div>
<p class="font-medium">Payment ${statuses[statusIndex]}</p>
<p class="text-xs text-gray-500">#TXN-${txnId} • ${minutesAgo} min ago</p>
</div>
</div>
<div class="text-right">
<p class="font-medium">${statusIndex < 2 ? '+' : ''}$${amount}</p>
<p class="text-xs text-${colors[statusIndex]}-500">${statuses[statusIndex]}</p>
</div>
`;
transactionsList.insertBefore(newTransaction, transactionsList.firstChild);
feather.replace();
// Remove oldest transaction if more than 4
if (transactionsList.children.length > 4) {
transactionsList.removeChild(transactionsList.lastChild);
}
}
}, 5000);
</script>
</body>
</html>