Spaces:
Running
Running
sync data from https://192.168.1.241/ap and create for me a funstion dashboard - Initial Deployment
c5cc7b1
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AP Analytics - SYSPRO ERP Dashboard Extension</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"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 70px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .main-content { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed + .main-content { | |
| margin-left: 70px; | |
| } | |
| .glow { | |
| box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .data-card:hover { | |
| transform: translateY(-5px); | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-blue-800 text-white w-64 flex flex-col"> | |
| <div class="p-4 flex items-center justify-between border-b border-blue-700"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calculator text-2xl mr-3"></i> | |
| <span class="sidebar-text font-bold text-xl">AP Analytics</span> | |
| </div> | |
| <button id="toggleSidebar" class="text-white focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 border-b border-blue-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="sidebar-text"> | |
| <div class="font-medium">Accounts Payable</div> | |
| <div class="text-xs text-blue-200">Admin Access</div> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <div class="sidebar-text text-xs uppercase text-blue-400 mb-2 px-2">Main</div> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 mb-1"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span class="sidebar-text">Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 mb-1"> | |
| <i class="fas fa-file-invoice-dollar mr-3"></i> | |
| <span class="sidebar-text">Invoices</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 mb-1"> | |
| <i class="fas fa-hand-holding-usd mr-3"></i> | |
| <span class="sidebar-text">Payments</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 mb-1"> | |
| <i class="fas fa-exchange-alt mr-3"></i> | |
| <span class="sidebar-text">Transactions</span> | |
| </a> | |
| </div> | |
| <div class="p-2"> | |
| <div class="sidebar-text text-xs uppercase text-blue-400 mb-2 px-2">Analysis</div> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 mb-1"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span class="sidebar-text">Trends</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 mb-1"> | |
| <i class="fas fa-exclamation-triangle mr-3"></i> | |
| <span class="sidebar-text">Anomalies</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 mb-1"> | |
| <i class="fas fa-calendar-check mr-3"></i> | |
| <span class="sidebar-text">Due Dates</span> | |
| </a> | |
| </div> | |
| <div class="p-2"> | |
| <div class="sidebar-text text-xs uppercase text-blue-400 mb-2 px-2">Settings</div> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 mb-1"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span class="sidebar-text">Preferences</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 mb-1"> | |
| <i class="fas fa-plug mr-3"></i> | |
| <span class="sidebar-text">SYSPRO Connection</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-blue-700"> | |
| <button class="w-full bg-blue-700 hover:bg-blue-600 text-white py-2 px-4 rounded flex items-center justify-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> | |
| <span class="sidebar-text">Refresh Data</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content flex-1 overflow-y-auto"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-6 py-4 flex items-center justify-between"> | |
| <h1 class="text-2xl font-semibold text-gray-800">Accounts Payable Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="p-6"> | |
| <!-- Connection Status --> | |
| <div class="mb-6 bg-white rounded-lg shadow p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-plug text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Connected to SYSPRO ERP</h3> | |
| <p class="text-sm text-gray-500">Last sync: 2 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Sync Now | |
| </button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Summary Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="data-card bg-white rounded-lg shadow p-6 hover:shadow-md"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Pending Invoices</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">142</h3> | |
| <p class="text-sm text-red-500 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 12% from last month | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600"> | |
| <i class="fas fa-file-invoice text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-card bg-white rounded-lg shadow p-6 hover:shadow-md"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Overdue Payments</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">23</h3> | |
| <p class="text-sm text-green-500 mt-1"> | |
| <i class="fas fa-arrow-down mr-1"></i> 8% from last month | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-exclamation-triangle text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-card bg-white rounded-lg shadow p-6 hover:shadow-md"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Payable</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">$245,789</h3> | |
| <p class="text-sm text-red-500 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 15% from last month | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-dollar-sign text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-card bg-white rounded-lg shadow p-6 hover:shadow-md"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Early Payment Discounts</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">$12,450</h3> | |
| <p class="text-sm text-green-500 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> Potential savings | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-percentage text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- Invoice Status Chart --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg">Invoice Status</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded">Month</button> | |
| <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded">Quarter</button> | |
| <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded">Year</button> | |
| </div> | |
| </div> | |
| <canvas id="invoiceStatusChart" height="250"></canvas> | |
| </div> | |
| <!-- Payment Trend Chart --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg">Payment Trends</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded">Month</button> | |
| <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded">Quarter</button> | |
| <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded">Year</button> | |
| </div> | |
| </div> | |
| <canvas id="paymentTrendChart" height="250"></canvas> | |
| </div> | |
| </div> | |
| <!-- Vendor Analysis and Alerts --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- Top Vendors --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="font-semibold text-lg mb-4">Top Vendors by Payable Amount</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-building"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">ABC Suppliers Inc.</p> | |
| <p class="text-sm text-gray-500">3 invoices pending</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-semibold">$45,670</p> | |
| <p class="text-sm text-red-500">Due in 5 days</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-warehouse"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">XYZ Manufacturing</p> | |
| <p class="text-sm text-gray-500">2 invoices pending</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-semibold">$32,450</p> | |
| <p class="text-sm text-yellow-500">Due in 10 days</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-truck"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Global Logistics</p> | |
| <p class="text-sm text-gray-500">1 invoice pending</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-semibold">$28,900</p> | |
| <p class="text-sm text-green-500">Due in 15 days</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| View all vendors <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <!-- Critical Alerts --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="font-semibold text-lg mb-4">Critical Alerts</h3> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-red-50 border-l-4 border-red-500 rounded-r-lg flex items-start"> | |
| <div class="mr-3 text-red-500"> | |
| <i class="fas fa-exclamation-circle"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Overdue payment to Tech Solutions Ltd.</p> | |
| <p class="text-sm text-gray-600">Invoice #INV-2023-0456 is 7 days overdue. Late fee may apply.</p> | |
| <button class="mt-2 text-sm text-red-600 hover:text-red-800 font-medium">Take action</button> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-yellow-50 border-l-4 border-yellow-500 rounded-r-lg flex items-start"> | |
| <div class="mr-3 text-yellow-500"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Early payment discount available</p> | |
| <p class="text-sm text-gray-600">Pay Office Supplies Co. within 2 days to save $450.</p> | |
| <button class="mt-2 text-sm text-yellow-600 hover:text-yellow-800 font-medium">Schedule payment</button> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-blue-50 border-l-4 border-blue-500 rounded-r-lg flex items-start"> | |
| <div class="mr-3 text-blue-500"> | |
| <i class="fas fa-percentage"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Duplicate invoice detected</p> | |
| <p class="text-sm text-gray-600">Invoice #INV-2023-0512 from Print Masters matches previous payment.</p> | |
| <button class="mt-2 text-sm text-blue-600 hover:text-blue-800 font-medium">Review</button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| View all alerts <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h3 class="font-semibold text-lg mb-4">Recent Payment Activity</h3> | |
| <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">Vendor</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice #</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">Due Date</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">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <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-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-building"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Office Supplies Co.</div> | |
| <div class="text-sm text-gray-500">PO #45678</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">INV-2023-0512</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">$2,450.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</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">Approved</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900">Process</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <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-green-100 flex items-center justify-center text-green-600"> | |
| <i class="fas fa-warehouse"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Tech Solutions Ltd.</div> | |
| <div class="text-sm text-gray-500">PO #45679</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">INV-2023-0456</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">$8,750.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 5, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Overdue</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900">Process</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <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-purple-100 flex items-center justify-center text-purple-600"> | |
| <i class="fas fa-truck"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Print Masters</div> | |
| <div class="text-sm text-gray-500">PO #45680</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">INV-2023-0515</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">$1,245.50</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 20, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending Approval</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900">Review</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| View all transactions <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <!-- Data Interpretation --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="font-semibold text-lg mb-4">Data Interpretation</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-blue-50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="mr-3 text-blue-500"> | |
| <i class="fas fa-lightbulb text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-blue-800 mb-2">Cash Flow Optimization</h4> | |
| <p class="text-sm text-blue-700">Based on payment terms analysis, you could save approximately $8,200 this month by strategically scheduling payments to take advantage of early payment discounts while maintaining positive cash flow.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="mr-3 text-green-500"> | |
| <i class="fas fa-chart-pie text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-green-800 mb-2">Vendor Concentration</h4> | |
| <p class="text-sm text-green-700">Top 5 vendors account for 62% of total payables. Consider negotiating better terms with these key suppliers to improve working capital.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="mr-3 text-yellow-500"> | |
| <i class="fas fa-exclamation-triangle text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-yellow-800 mb-2">Anomaly Detected</h4> | |
| <p class="text-sm text-yellow-700">Invoice amounts from "Office Supplies Co." have increased by 45% compared to last quarter without corresponding PO increases. Recommend review for potential errors or unauthorized purchases.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="mr-3 text-purple-500"> | |
| <i class="fas fa-calendar-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-purple-800 mb-2">Payment Timing</h4> | |
| <p class="text-sm text-purple-700">72% of payments are processed in the last week of the month, creating processing bottlenecks. Consider spreading payments throughout the month for efficiency.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // SYSPRO API Configuration | |
| const sysproConfig = { | |
| baseUrl: 'https://192.168.1.241/ap', | |
| credentials: { | |
| username: 'YOUR_USERNAME', | |
| password: 'YOUR_PASSWORD' | |
| } | |
| }; | |
| // Function to fetch AP data from SYSPRO | |
| async function fetchAPData(endpoint) { | |
| try { | |
| const authString = btoa(`${sysproConfig.credentials.username}:${sysproConfig.credentials.password}`); | |
| const response = await fetch(`${sysproConfig.baseUrl}/${endpoint}`, { | |
| headers: { | |
| 'Authorization': `Basic ${authString}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| return await response.json(); | |
| } catch (error) { | |
| console.error('Error fetching data from SYSPRO:', error); | |
| return null; | |
| } | |
| } | |
| // Function to update dashboard with real data | |
| async function updateDashboard() { | |
| // Fetch all necessary data | |
| const [invoices, payments, vendors] = await Promise.all([ | |
| fetchAPData('invoices'), | |
| fetchAPData('payments'), | |
| fetchAPData('vendors') | |
| ]); | |
| if (invoices && payments && vendors) { | |
| // Update summary cards | |
| document.querySelectorAll('.data-card h3')[0].textContent = invoices.pendingCount; | |
| document.querySelectorAll('.data-card h3')[1].textContent = invoices.overdueCount; | |
| document.querySelectorAll('.data-card h3')[2].textContent = `${invoices.totalPayable.toLocaleString()}`; | |
| document.querySelectorAll('.data-card h3')[3].textContent = `${payments.potentialSavings.toLocaleString()}`; | |
| // Update charts | |
| updateCharts(invoices, payments); | |
| // Update vendor list | |
| updateVendorList(vendors); | |
| // Update recent activity | |
| updateRecentActivity(invoices.recent); | |
| // Update connection status | |
| document.querySelector('.connection-status p').textContent = `Last sync: ${new Date().toLocaleTimeString()}`; | |
| } | |
| } | |
| // Toggle sidebar | |
| document.getElementById('toggleSidebar').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('collapsed'); | |
| }); | |
| // Function to update charts with real data | |
| function updateCharts(invoices, payments) { | |
| // Invoice Status Chart | |
| invoiceStatusChart.data.datasets[0].data = [ | |
| invoices.paidCount, | |
| invoices.pendingApprovalCount, | |
| invoices.approvedCount, | |
| invoices.overdueCount, | |
| invoices.disputedCount | |
| ]; | |
| invoiceStatusChart.update(); | |
| // Payment Trend Chart | |
| paymentTrendChart.data.datasets[0].data = payments.totalPayableTrend; | |
| paymentTrendChart.data.datasets[1].data = payments.earlyPaymentsTrend; | |
| paymentTrendChart.update(); | |
| } | |
| // Function to update vendor list | |
| function updateVendorList(vendors) { | |
| const vendorContainer = document.querySelector('.vendor-list-container'); | |
| vendorContainer.innerHTML = vendors.slice(0, 3).map(vendor => ` | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-building"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">${vendor.name}</p> | |
| <p class="text-sm text-gray-500">${vendor.pendingInvoices} invoices pending</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-semibold">${vendor.amount.toLocaleString()}</p> | |
| <p class="text-sm ${getDueDateColor(vendor.dueInDays)}">Due in ${vendor.dueInDays} days</p> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| function getDueDateColor(days) { | |
| if (days <= 5) return 'text-red-500'; | |
| if (days <= 10) return 'text-yellow-500'; | |
| return 'text-green-500'; | |
| } | |
| // Function to update recent activity | |
| function updateRecentActivity(transactions) { | |
| const tbody = document.querySelector('tbody'); | |
| tbody.innerHTML = transactions.slice(0, 3).map(transaction => ` | |
| <tr> | |
| <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-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-building"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">${transaction.vendor}</div> | |
| <div class="text-sm text-gray-500">PO #${transaction.poNumber}</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${transaction.invoiceNumber}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${transaction.amount.toLocaleString()}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${new Date(transaction.dueDate).toLocaleDateString()}</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusClass(transaction.status)}">${transaction.status}</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900">${transaction.status === 'Overdue' ? 'Process' : 'Review'}</button> | |
| </td> | |
| </tr> | |
| `).join(''); | |
| } | |
| function getStatusClass(status) { | |
| switch(status) { | |
| case 'Approved': return 'bg-green-100 text-green-800'; | |
| case 'Overdue': return 'bg-red-100 text-red-800'; | |
| case 'Pending Approval': return 'bg-yellow-100 text-yellow-800'; | |
| default: return 'bg-gray-100 text-gray-800'; | |
| } | |
| } | |
| // Invoice Status Chart | |
| const invoiceStatusCtx = document.getElementById('invoiceStatusChart').getContext('2d'); | |
| const invoiceStatusChart = new Chart(invoiceStatusCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Paid', 'Pending Approval', 'Approved', 'Overdue', 'Disputed'], | |
| datasets: [{ | |
| data: [320, 142, 85, 23, 12], | |
| backgroundColor: [ | |
| '#10B981', | |
| '#3B82F6', | |
| '#6366F1', | |
| '#F59E0B', | |
| '#EF4444' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| cutout: '70%', | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| const label = context.label || ''; | |
| const value = context.raw || 0; | |
| const total = context.dataset.data.reduce((a, b) => a + b, 0); | |
| const percentage = Math.round((value / total) * 100); | |
| return `${label}: ${value} (${percentage}%)`; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Payment Trend Chart | |
| const paymentTrendCtx = document.getElementById('paymentTrendChart').getContext('2d'); | |
| const paymentTrendChart = new Chart(paymentTrendCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], | |
| datasets: [ | |
| { | |
| label: 'Total Payable', | |
| data: [185000, 195000, 210000, 225000, 245000, 235000], | |
| borderColor: '#3B82F6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.05)', | |
| borderWidth: 2, | |
| fill: true, | |
| tension: 0.4 | |
| }, | |
| { | |
| label: 'Early Payments', | |
| data: [45000, 52000, 48000, 55000, 62000, 58000], | |
| borderColor: '#10B981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.05)', | |
| borderWidth: 2, | |
| fill: true, | |
| tension: 0.4 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| grid: { | |
| drawBorder: false | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return '$' + (value / 1000) + 'k'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false, | |
| drawBorder: false | |
| } | |
| } | |
| }, | |
| plugins: { | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.dataset.label || ''; | |
| if (label) { | |
| label += ': '; | |
| } | |
| label += '$' + context.raw.toLocaleString(); | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Set up refresh functionality | |
| document.querySelector('.refresh-btn').addEventListener('click', async () => { | |
| const cards = document.querySelectorAll('.data-card'); | |
| cards.forEach(card => { | |
| card.classList.add('pulse'); | |
| setTimeout(() => card.classList.remove('pulse'), 2000); | |
| }); | |
| await updateDashboard(); | |
| }); | |
| // Initial data load | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| await updateDashboard(); | |
| // Auto-refresh every 5 minutes | |
| setInterval(updateDashboard, 300000); | |
| }); | |
| </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=WritingGuru/ap-analytics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |