|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PayGate Commander | Settings</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> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar-collapsed { |
|
|
width: 80px; |
|
|
} |
|
|
.sidebar-collapsed .nav-text { |
|
|
display: none; |
|
|
} |
|
|
.content { |
|
|
transition: margin-left 0.3s ease; |
|
|
} |
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0"> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content flex-1 overflow-auto"> |
|
|
|
|
|
<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">Gateway Settings</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 settings..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center space-x-2"> |
|
|
<i data-feather="save" class="w-4 h-4"></i> |
|
|
<span>Save Changes</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="px-6 pt-6"> |
|
|
<div class="border-b border-gray-200"> |
|
|
<nav class="-mb-px flex space-x-8"> |
|
|
<button id="gatewayTab" class="tab-button border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm active">Gateway Configuration</button> |
|
|
<button id="securityTab" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Security</button> |
|
|
<button id="usersTab" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Users</button> |
|
|
<button id="apiTab" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">API Settings</button> |
|
|
<button id="notificationsTab" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Notifications</button> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="gatewayContent" class="tab-content active px-6 py-6"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h2 class="text-lg font-semibold mb-6">Payment Gateway Settings</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="md:col-span-2 border rounded-lg p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<img src="https://cdn.worldvectorlogo.com/logos/stripe-4.svg" alt="Stripe" class="h-8"> |
|
|
<span class="font-medium">Stripe Integration</span> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
<span class="ml-3 text-sm font-medium text-gray-900">Active</span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Publishable Key</label> |
|
|
<div class="relative"> |
|
|
<input type="password" value="pk_test_51MZ..." class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="eye"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Secret Key</label> |
|
|
<div class="relative"> |
|
|
<input type="password" value="sk_test_51MZ..." class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="eye"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Webhook Secret</label> |
|
|
<div class="relative"> |
|
|
<input type="password" value="whsec_..." class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="eye"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Accepted Payment Methods</label> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 text-sm text-gray-700">Credit Cards</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 text-sm text-gray-700">Apple Pay</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 text-sm text-gray-700">Google Pay</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 text-sm text-gray-700">Bank Transfers</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end space-x-3"> |
|
|
<button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Test Connection</button> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Save</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-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"> |
|
|
<img src="https://cdn.worldvectorlogo.com/logos/paypal-3.svg" alt="PayPal" class="h-6"> |
|
|
<span class="font-medium">PayPal</span> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
<button class="w-full mt-2 px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">Configure</button> |
|
|
</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"> |
|
|
<i data-feather="bank" class="text-blue-500"></i> |
|
|
<span class="font-medium">Bank Transfer</span> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
<button class="w-full mt-2 px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">Configure</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-4 hover:bg-gray-50 cursor-pointer"> |
|
|
<div class="flex flex-col items-center justify-center text-gray-400"> |
|
|
<i data-feather="plus" class="w-6 h-6 mb-2"></i> |
|
|
<span class="text-sm">Add New Gateway</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="securityContent" class="tab-content px-6 py-6"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h2 class="text-lg font-semibold mb-6">Security Settings</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="border rounded-lg p-6"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h3 class="font-medium text-lg">Two-Factor Authentication</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">Add an extra layer of security to your account</p> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="border rounded-lg p-4 text-center"> |
|
|
<i data-feather="smartphone" class="w-8 h-8 mx-auto text-gray-600"></i> |
|
|
<h4 class="font-medium mt-2">Authenticator App</h4> |
|
|
<p class="text-sm text-gray-500 mt-1">Set up using Google Authenticator or similar</p> |
|
|
<button class="mt-3 px-3 py-1 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700">Set Up</button> |
|
|
</div> |
|
|
|
|
|
<div class="border rounded-lg p-4 text-center"> |
|
|
<i data-feather="mail" class="w-8 h-8 mx-auto text-gray-600"></i> |
|
|
<h4 class="font-medium mt-2">Email Verification</h4> |
|
|
<p class="text-sm text-gray-500 mt-1">Receive codes via email</p> |
|
|
<button class="mt-3 px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-lg hover:bg-gray-200">Set Up</button> |
|
|
</div> |
|
|
|
|
|
<div class="border rounded-lg p-4 text-center"> |
|
|
<i data-feather="message-square" class="w-8 h-8 mx-auto text-gray-600"></i> |
|
|
<h4 class="font-medium mt-2">SMS Verification</h4> |
|
|
<p class="text-sm text-gray-500 mt-1">Receive codes via text message</p> |
|
|
<button class="mt-3 px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-lg hover:bg-gray-200">Set Up</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div> |
|
|
<h3 class="font-medium text-lg">Session Management</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">Manage your active login sessions</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i data-feather="monitor" class="text-gray-500"></i> |
|
|
<div> |
|
|
<p class="font-medium">Chrome on Windows</p> |
|
|
<p class="text-xs text-gray-500">192.168.1.1 • Active now</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-red-500 hover:text-red-700"> |
|
|
<i data-feather="log-out"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 rounded-lg"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i data-feather="smartphone" class="text-gray-500"></i> |
|
|
<div> |
|
|
<p class="font-medium">Safari on iPhone</p> |
|
|
<p class="text-xs text-gray-500">192.168.1.2 • 2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-red-500 hover:text-red-700"> |
|
|
<i data-feather="log-out"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="mt-4 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm"> |
|
|
Log out from all devices |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-6"> |
|
|
<h3 class="font-medium text-lg mb-4">Change Password</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label> |
|
|
<div class="relative"> |
|
|
<input type="password" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="eye"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">New Password</label> |
|
|
<div class="relative"> |
|
|
<input type="password" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="eye"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label> |
|
|
<div class="relative"> |
|
|
<input type="password" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="eye"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-2"> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> |
|
|
Update Password |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="usersContent" class="tab-content px-6 py-6"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h2 class="text-lg font-semibold mb-6">User Management</h2> |
|
|
|
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<div class="relative w-64"> |
|
|
<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 users..." class="pl-10 pr-4 py-2 border rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center space-x-2"> |
|
|
<i data-feather="plus" class="w-4 h-4"></i> |
|
|
<span>Add User</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Active</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center"> |
|
|
<i data-feather="user" class="text-gray-400"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Admin User</div> |
|
|
<div class="text-sm text-gray-500">admin@example.com</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Super Admin</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Just now</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button> |
|
|
<button class="text-red-600 hover:text-red-900">Remove</button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex items-center justify-between"> |
|
|
<div> |
|
|
<select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>10 per page</option> |
|
|
<option>25 per page</option> |
|
|
<option>50 per page</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-sm text-gray-700">Showing 1 to 5 of 5 entries</span> |
|
|
<div class="flex space-x-1"> |
|
|
<button class="px-3 py-1 border rounded-lg bg-gray-100 text-gray-400 cursor-not-allowed"> |
|
|
<i data-feather="chevron-left" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="px-3 py-1 border rounded-lg bg-gray-100 text-gray-400 cursor-not-allowed"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="apiContent" class="tab-content px-6 py-6"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h2 class="text-lg font-semibold mb-6">API Settings</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="border rounded-lg p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div> |
|
|
<h3 class="font-medium text-lg">API Keys</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">Manage your API access keys</p> |
|
|
</div> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center space-x-2"> |
|
|
<i data-feather="plus" class="w-4 h-4"></i> |
|
|
<span>Generate New Key</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="font-medium">Production Key</span> |
|
|
<span class="px-2 py-0.5 text-xs bg-green-100 text-green-800 rounded-full">Active</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-1">Last used: 2 hours ago</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="eye"></i> |
|
|
</button> |
|
|
<button class="p-2 text-red-500 hover:text-red-700"> |
|
|
<i data-feather="trash-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-4 rounded-lg border"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="font-medium">Test Key</span> |
|
|
<span class="px-2 py-0.5 text-xs bg-yellow-100 text-yellow-800 rounded-full">Inactive</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-1">Last used: 5 days ago</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="eye"></i> |
|
|
</button> |
|
|
<button class="p-2 text-red-500 hover:text-red-700"> |
|
|
<i data-feather="trash-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div> |
|
|
<h3 class="font-medium text-lg">API Documentation</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">Learn how to integrate with our API</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<a href="#" class="border rounded-lg p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="p-2 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i data-feather="book"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Getting Started</h4> |
|
|
<p class="text-sm text-gray-500">Learn the basics</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="border rounded-lg p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="p-2 rounded-full bg-purple-100 text-purple-600"> |
|
|
<i data-feather="code"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">API Reference</h4> |
|
|
<p class="text-sm text-gray-500">Full endpoint docs</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="border rounded-lg p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="p-2 rounded-full bg-green-100 text-green-600"> |
|
|
<i data-feather="download"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">SDKs & Libraries</h4> |
|
|
<p class="text-sm text-gray-500">Client libraries</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div> |
|
|
<h3 class="font-medium text-lg">Webhooks</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">Configure your webhook endpoints</p> |
|
|
</div> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center space-x-2"> |
|
|
<i data-feather="plus" class="w-4 h-4"></i> |
|
|
<span>Add Webhook</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Events</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Triggered</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">https://api.example.com/webhooks/payments</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">payment.success, payment.failed</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">2 hours ago</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button> |
|
|
<button class="text-red-600 hover:text-red-900">Remove</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="notificationsContent" class="tab-content px-6 py-6"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h2 class="text-lg font-semibold mb-6">Notification Settings</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="border rounded-lg p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div> |
|
|
<h3 class="font-medium text-lg">Email Notifications</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">Configure which email notifications you receive</p> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> |
|
|
<div> |
|
|
<p class="font-medium">Successful Payments</p> |
|
|
<p class="text-sm text-gray-500">Receive notifications for successful payments</p> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 rounded-lg"> |
|
|
<div> |
|
|
<p class="font-medium">Failed Payments</p> |
|
|
<p class="text-sm text-gray-500">Receive notifications for failed payment attempts</p> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> |
|
|
<div> |
|
|
<p class="font-medium">Refunds Issued</p> |
|
|
<p class="text-sm text-gray-500">Receive notifications when refunds are processed</p> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 rounded-lg"> |
|
|
<div> |
|
|
<p class="font-medium">Chargebacks</p> |
|
|
<p class="text-sm text-gray-500">Receive notifications for chargebacks</p> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div> |
|
|
<h3 class="font-medium text-lg">SMS Notifications</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">Configure which SMS notifications you receive</p> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> |
|
|
<div> |
|
|
<p class="font-medium">High-Value Payments</p> |
|
|
<p class="text-sm text-gray-500">Receive SMS for payments above $1,000</p> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 rounded-lg"> |
|
|
<div> |
|
|
<p class="font-medium">System Alerts</p> |
|
|
<p class="text-sm text-gray-500">Receive SMS for system issues</p> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-white border rounded-l-lg pl-3 pr-8 py-2 w-24 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>+1</option> |
|
|
<option>+44</option> |
|
|
<option>+61</option> |
|
|
</select> |
|
|
<i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none"></i> |
|
|
<input type="tel" placeholder="Phone number" class="w-full px-3 py-2 border-t border-b border-r rounded-r-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" style="margin-left: -1px;"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
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(); |
|
|
}); |
|
|
|
|
|
|
|
|
const tabs = ['gateway', 'security', 'users', 'api', 'notifications']; |
|
|
tabs.forEach(tab => { |
|
|
const button = document.getElementById(`${tab}Tab`); |
|
|
const content = document.getElementById(`${tab}Content`); |
|
|
|
|
|
button.addEventListener('click', function() { |
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(el => { |
|
|
el.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-button').forEach(el => { |
|
|
el.classList.remove('active', 'border-indigo-500', 'text-indigo-600'); |
|
|
el.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); |
|
|
}); |
|
|
|
|
|
|
|
|
content.classList.add('active'); |
|
|
|
|
|
|
|
|
this.classList.add('active', 'border-indigo-500', 'text-indigo-600'); |
|
|
this.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('input[type="password"] + button').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const input = this.previousElementSibling; |
|
|
const icon = this.querySelector('i'); |
|
|
|
|
|
if (input.type === 'password') { |
|
|
input.type = 'text'; |
|
|
icon.setAttribute('data-feather', 'eye-off'); |
|
|
} else { |
|
|
input.type = 'password'; |
|
|
icon.setAttribute('data-feather', 'eye'); |
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
