| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Credit Card Charge Processor</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .vendor-chip { |
| transition: all 0.2s ease; |
| } |
| .vendor-chip:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| .charge-item { |
| transition: background-color 0.2s ease; |
| } |
| .charge-item:hover { |
| background-color: #f8fafc; |
| } |
| .progress-bar { |
| transition: width 0.5s ease; |
| } |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| <div class="min-h-screen flex flex-col"> |
| |
| <header class="bg-blue-600 text-white shadow-md"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-credit-card text-2xl"></i> |
| <h1 class="text-xl font-bold">Charge Processor</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-blue-700 hover:bg-blue-800 px-4 py-2 rounded-lg flex items-center space-x-2"> |
| <i class="fas fa-user"></i> |
| <span>Account</span> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-grow container mx-auto px-4 py-6"> |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> |
| |
| <div class="lg:col-span-1 space-y-6"> |
| <div class="bg-white rounded-lg shadow p-4"> |
| <h2 class="font-semibold text-lg mb-4">Navigation</h2> |
| <ul class="space-y-2"> |
| <li> |
| <a href="#" class="flex items-center space-x-2 p-2 rounded-lg bg-blue-50 text-blue-600"> |
| <i class="fas fa-home"></i> |
| <span>Dashboard</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100"> |
| <i class="fas fa-credit-card"></i> |
| <span>Charge Scanning</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100"> |
| <i class="fas fa-building"></i> |
| <span>Vendor Mapping</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100"> |
| <i class="fas fa-file-export"></i> |
| <span>FinancialEdge Export</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100"> |
| <i class="fas fa-cog"></i> |
| <span>Settings</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
|
|
| <div class="bg-white rounded-lg shadow p-4"> |
| <h2 class="font-semibold text-lg mb-4">Quick Stats</h2> |
| <div class="space-y-4"> |
| <div> |
| <p class="text-sm text-gray-500">Pending Charges</p> |
| <p class="text-xl font-bold">24</p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Mapped Vendors</p> |
| <p class="text-xl font-bold">156</p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Last Export</p> |
| <p class="text-xl font-bold">2 days ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:col-span-3 space-y-6"> |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="p-4 border-b"> |
| <h2 class="font-semibold text-lg">Scan Credit Card Charges</h2> |
| </div> |
| <div class="p-4"> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Select Credit Card</label> |
| <select class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| <option>Corporate Visa (•••• 1234)</option> |
| <option>Corporate Amex (•••• 5678)</option> |
| <option>Travel Mastercard (•••• 9012)</option> |
| </select> |
| </div> |
|
|
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Date Range</label> |
| <div class="grid grid-cols-2 gap-4"> |
| <input type="date" class="p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| <input type="date" class="p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Scan Frequency</label> |
| <div class="flex space-x-4"> |
| <label class="inline-flex items-center"> |
| <input type="radio" name="frequency" class="h-4 w-4 text-blue-600" checked> |
| <span class="ml-2">Daily</span> |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="radio" name="frequency" class="h-4 w-4 text-blue-600"> |
| <span class="ml-2">Weekly</span> |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="radio" name="frequency" class="h-4 w-4 text-blue-600"> |
| <span class="ml-2">Monthly</span> |
| </label> |
| </div> |
| </div> |
|
|
| <button id="scanBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center space-x-2"> |
| <i class="fas fa-search"></i> |
| <span>Scan Charges Now</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="progressSection" class="hidden bg-white rounded-lg shadow overflow-hidden"> |
| <div class="p-4 border-b"> |
| <h2 class="font-semibold text-lg">Scanning Progress</h2> |
| </div> |
| <div class="p-6"> |
| <div class="mb-4"> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Extracting charges...</span> |
| <span class="text-sm font-medium">25%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 25%"></div> |
| </div> |
| </div> |
|
|
| <div class="space-y-4"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Connected to bank API</p> |
| <p class="text-sm text-gray-500">Successfully authenticated</p> |
| </div> |
| </div> |
|
|
| <div class="flex items-center space-x-3"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center animate-pulse"> |
| <i class="fas fa-spinner text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Downloading transactions</p> |
| <p class="text-sm text-gray-500">Processing 24 records</p> |
| </div> |
| </div> |
|
|
| <div class="flex items-center space-x-3 opacity-50"> |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center"> |
| <i class="fas fa-ellipsis-h text-gray-400"></i> |
| </div> |
| <div> |
| <p class="font-medium">Mapping vendors</p> |
| <p class="text-sm text-gray-500">Pending</p> |
| </div> |
| </div> |
|
|
| <div class="flex items-center space-x-3 opacity-50"> |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center"> |
| <i class="fas fa-ellipsis-h text-gray-400"></i> |
| </div> |
| <div> |
| <p class="font-medium">Preparing export</p> |
| <p class="text-sm text-gray-500">Pending</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="resultsSection" class="hidden bg-white rounded-lg shadow overflow-hidden"> |
| <div class="p-4 border-b flex justify-between items-center"> |
| <h2 class="font-semibold text-lg">Scanned Charges</h2> |
| <div class="flex space-x-2"> |
| <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg text-sm flex items-center space-x-1"> |
| <i class="fas fa-filter"></i> |
| <span>Filter</span> |
| </button> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-lg text-sm flex items-center space-x-1"> |
| <i class="fas fa-file-export"></i> |
| <span>Export to FinancialEdge</span> |
| </button> |
| </div> |
| </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">Date</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vendor</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mapped Code</th> |
| <th scope="col" 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" id="chargesTableBody"> |
| |
| </tbody> |
| </table> |
| </div> |
| <div class="p-4 border-t flex justify-between items-center"> |
| <div class="text-sm text-gray-500">Showing 5 of 24 charges</div> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 border rounded-lg text-sm">Previous</button> |
| <button class="px-3 py-1 border rounded-lg bg-blue-600 text-white text-sm">1</button> |
| <button class="px-3 py-1 border rounded-lg text-sm">2</button> |
| <button class="px-3 py-1 border rounded-lg text-sm">3</button> |
| <button class="px-3 py-1 border rounded-lg text-sm">Next</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="p-4 border-b"> |
| <h2 class="font-semibold text-lg">Vendor Code Mapping</h2> |
| </div> |
| <div class="p-4"> |
| <div class="mb-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <label class="block text-sm font-medium text-gray-700">Search Vendors</label> |
| <button class="text-blue-600 text-sm flex items-center"> |
| <i class="fas fa-plus mr-1"></i> |
| <span>Add New Vendor</span> |
| </button> |
| </div> |
| <input type="text" placeholder="Search vendors..." class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6" id="vendorChipsContainer"> |
| |
| </div> |
|
|
| <div class="border rounded-lg p-4"> |
| <h3 class="font-medium mb-3">Edit Vendor Mapping</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Vendor Name</label> |
| <input type="text" value="Amazon Web Services" class="w-full p-2 border rounded-lg"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">FinancialEdge Code</label> |
| <select class="w-full p-2 border rounded-lg"> |
| <option>IT-456 (Cloud Services)</option> |
| <option>IT-789 (Software)</option> |
| <option>OF-123 (Office Supplies)</option> |
| </select> |
| </div> |
| </div> |
| <div class="mt-4 flex justify-end space-x-2"> |
| <button class="px-4 py-2 border rounded-lg text-sm">Cancel</button> |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm">Save Mapping</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-100 border-t py-4"> |
| <div class="container mx-auto px-4 text-center text-sm text-gray-500"> |
| <p>© 2023 Charge Processor. All rights reserved.</p> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| const sampleCharges = [ |
| { date: '2023-06-15', vendor: 'Amazon Web Services', amount: '$149.00', code: 'IT-456', mapped: true }, |
| { date: '2023-06-14', vendor: 'Starbucks #12345', amount: '$12.75', code: 'ME-789', mapped: true }, |
| { date: '2023-06-13', vendor: 'Microsoft Azure', amount: '$89.00', code: 'IT-456', mapped: true }, |
| { date: '2023-06-12', vendor: 'Uber Technologies', amount: '$23.50', code: 'TR-123', mapped: true }, |
| { date: '2023-06-11', vendor: 'Fresh Market', amount: '$56.34', code: 'ME-789', mapped: false } |
| ]; |
| |
| |
| const vendorMappings = [ |
| { name: 'Amazon Web Services', code: 'IT-456', count: 42 }, |
| { name: 'Starbucks', code: 'ME-789', count: 18 }, |
| { name: 'Microsoft Azure', code: 'IT-456', count: 23 }, |
| { name: 'Uber', code: 'TR-123', count: 15 }, |
| { name: 'Fresh Market', code: 'ME-789', count: 7 }, |
| { name: 'Google Cloud', code: 'IT-456', count: 12 }, |
| { name: 'Zoom', code: 'IT-789', count: 8 }, |
| { name: 'FedEx', code: 'OF-456', count: 11 }, |
| { name: 'Adobe', code: 'IT-789', count: 5 } |
| ]; |
| |
| |
| const scanBtn = document.getElementById('scanBtn'); |
| const progressSection = document.getElementById('progressSection'); |
| const resultsSection = document.getElementById('resultsSection'); |
| const chargesTableBody = document.getElementById('chargesTableBody'); |
| const vendorChipsContainer = document.getElementById('vendorChipsContainer'); |
| |
| |
| function populateChargesTable() { |
| chargesTableBody.innerHTML = ''; |
| sampleCharges.forEach(charge => { |
| const row = document.createElement('tr'); |
| row.className = 'charge-item'; |
| row.innerHTML = ` |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${charge.date}</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium text-gray-900">${charge.vendor}</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${charge.amount}</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| ${charge.mapped |
| ? `<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">${charge.code}</span>` |
| : `<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Not Mapped</span>`} |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> |
| <button class="text-red-600 hover:text-red-900">Remove</button> |
| </td> |
| `; |
| chargesTableBody.appendChild(row); |
| }); |
| } |
| |
| |
| function populateVendorChips() { |
| vendorChipsContainer.innerHTML = ''; |
| vendorMappings.forEach(vendor => { |
| const chip = document.createElement('div'); |
| chip.className = 'vendor-chip bg-white border rounded-lg p-3 cursor-pointer hover:border-blue-300'; |
| chip.innerHTML = ` |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="font-medium text-gray-900">${vendor.name}</h3> |
| <p class="text-sm text-gray-500">${vendor.code}</p> |
| </div> |
| <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">${vendor.count} charges</span> |
| </div> |
| `; |
| vendorChipsContainer.appendChild(chip); |
| }); |
| } |
| |
| |
| scanBtn.addEventListener('click', function() { |
| |
| progressSection.classList.remove('hidden'); |
| |
| |
| let progress = 25; |
| const progressBar = document.querySelector('.progress-bar'); |
| const interval = setInterval(() => { |
| progress += Math.floor(Math.random() * 15); |
| if (progress >= 100) { |
| progress = 100; |
| clearInterval(interval); |
| |
| |
| setTimeout(() => { |
| progressSection.classList.add('hidden'); |
| resultsSection.classList.remove('hidden'); |
| populateChargesTable(); |
| }, 1000); |
| } |
| progressBar.style.width = `${progress}%`; |
| document.querySelector('#progressSection .text-sm.font-medium:last-child').textContent = `${progress}%`; |
| }, 800); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| populateVendorChips(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=davidaCARSaccount/charge-processor-mock-up" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
