|
|
```html |
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Commands - TransferFlow Pro</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3B82F6', |
|
|
secondary: '#10B981', |
|
|
accent: '#8B5CF6', |
|
|
dark: '#1F2937', |
|
|
light: '#F9FAFB' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
|
|
|
.sidebar.open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="flex h-screen"> |
|
|
|
|
|
<div class="sidebar bg-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out z-30"> |
|
|
<div class="flex items-center space-x-2 px-4"> |
|
|
<i data-feather="send" class="text-primary h-8 w-8"></i> |
|
|
<span class="text-2xl font-extrabold text-dark">TransferFlow</span> |
|
|
</div> |
|
|
|
|
|
<nav> |
|
|
<a href="dashboard.html" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 text-gray-600"> |
|
|
<i data-feather="home" class="inline-block w-5 h-5 mr-2"></i> |
|
|
Dashboard |
|
|
</a> |
|
|
<a href="commands.html" class="block py-2.5 px-4 rounded transition duration-200 bg-primary text-white"> |
|
|
<i data-feather="list" class="inline-block w-5 h-5 mr-2"></i> |
|
|
Commands |
|
|
</a> |
|
|
<a href="devices.html" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 text-gray-600"> |
|
|
<i data-feather="smartphone" class="inline-block w-5 h-5 mr-2"></i> |
|
|
Devices |
|
|
</a> |
|
|
<a href="analytics.html" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 text-gray-600"> |
|
|
<i data-feather="bar-chart-2" class="inline-block w-5 h-5 mr-2"></i> |
|
|
Analytics |
|
|
</a> |
|
|
<a href="users.html" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 text-gray-600"> |
|
|
<i data-feather="users" class="inline-block w-5 h-5 mr-2"></i> |
|
|
Users |
|
|
</a> |
|
|
<a href="settings.html" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 text-gray-600"> |
|
|
<i data-feather="settings" class="inline-block w-5 h-5 mr-2"></i> |
|
|
Settings |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="flex items-center justify-between px-6 py-4 bg-white border-b"> |
|
|
<div class="flex items-center"> |
|
|
<button class="text-gray-500 focus:outline-none lg:hidden" id="menu-toggle"> |
|
|
<i data-feather="menu" class="h-6 w-6"></i> |
|
|
</button> |
|
|
|
|
|
<div class="ml-4"> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Command Management</h1> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-500 focus:outline-none"> |
|
|
<i data-feather="bell" class="h-6 w-6"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="flex items-center text-sm focus:outline-none"> |
|
|
<div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white font-semibold">S</div> |
|
|
<span class="ml-2 text-gray-700">stidjani@proconsulting-info.com</span> |
|
|
<i data-feather="chevron-down" class="ml-1 h-4 w-4 text-gray-500"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 p-6"> |
|
|
|
|
|
<div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-semibold text-gray-800">Commands</h2> |
|
|
<p class="text-gray-600">Manage and monitor all transfer commands</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-3"> |
|
|
|
|
|
<select class="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white"> |
|
|
<option>All Status</option> |
|
|
<option>Pending</option> |
|
|
<option>Dispatched</option> |
|
|
<option>In Progress</option> |
|
|
<option>Completed</option> |
|
|
<option>Failed</option> |
|
|
</select> |
|
|
|
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<input type="date" class="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"> |
|
|
<input type="date" class="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-primary flex items-center"> |
|
|
<i data-feather="plus" class="h-4 w-4 mr-2"></i> |
|
|
New Command |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beneficiary</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th> |
|
|
<th class="px-6 py-3 text-left 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 text-sm font-medium text-gray-900">CMD-001</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> |
|
|
Transfer |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">John Doe</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$150.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+1234567890</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
|
|
Completed |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-12-01 14:30</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-primary hover:text-blue-700 mr-3"> |
|
|
<i data-feather="eye" class="h-4 w-4"></i> |
|
|
</button> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 mr-3"> |
|
|
<i data-feather="edit" class="h-4 w-4"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800"> |
|
|
<i data-feather="trash-2" class="h-4 w-4"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CMD-002</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> |
|
|
Bill Payment |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Electricity Company</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$75.50</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+1234567891</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> |
|
|
In Progress |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-12-01 14:25</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-primary hover:text-blue-700 mr-3"> |
|
|
<i data-feather="eye" class="h-4 w-4"></i> |
|
|
</button> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 mr-3"> |
|
|
<i data-feather="edit" class="h-4 w-4"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800"> |
|
|
<i data-feather="trash-2" class="h-4 w-4"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CMD-003</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> |
|
|
Deposit |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Jane Smith</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$200.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+1234567892</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> |
|
|
Pending |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-12-01 14:20</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-primary hover:text-blue-700 mr-3"> |
|
|
<i data-feather="eye" class="h-4 w-4"></i> |
|
|
</button> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 mr-3"> |
|
|
<i data-feather="edit" class="h-4 w-4"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800"> |
|
|
<i data-feather="trash-2" class="h-4 w-4"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CMD-004</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"> |
|
|
Transfer |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Bob Johnson</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$300.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+1234567893</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"> |
|
|
Failed |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-12-01 14:15</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-primary hover:text-blue-700 mr-3"> |
|
|
<i data-feather="eye" class="h-4 w-4"></i> |
|
|
</button> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 mr-3"> |
|
|
<i data-feather="edit" class="h-4 w-4"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800"> |
|
|
<i data-feather="trash-2" class="h-4 w-4"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> |
|
|
<div class="flex-1 flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700"> |
|
|
Showing |
|
|
<span class="font-medium">1</span> |
|
|
to |
|
|
<span class="font-medium">4</span> |
|
|
of |
|
|
<span class="font-medium">12</span> |
|
|
results |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Previous</span> |
|
|
<i data-feather="chevron-left" class="h-4 w-4"></i> |
|
|
</a> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</a> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a> |
|
|
<a href="#" class="relative inline-flex items |
