Dashboard - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Data</title> <style> body { font-family: Arial, sans-serif; margin: 50px; } label, input, button, select { display: block; margin: 10px 0; } .input-group { display: none; } </style> </head> <body> <h2>Enter Information</h2> <form id="urlForm"> <label for="inputType">Select Input Method:</label> <select id="inputType" name="inputType" required> <option value="" disabled selected>Select your option</option> <option value="api">API URL</option> <option value="ecommerce">API of E-commerce Platform</option> <option value="database">Database of Enterprise</option> </select> <!-- API URL Input Field --> <div class="input-group" id="apiGroup"> <label for="apiUrl">API URL:</label> <input type="text" id="apiUrl" name="apiUrl" placeholder="Enter API URL"> </div> <!-- E-commerce API Fields --> <div class="input-group" id="ecommerceGroup"> <label for="apiUrlEcommerce">API URL:</label> <input type="text" id="apiUrlEcommerce" name="apiUrlEcommerce" placeholder="Enter E-commerce API URL"> <label for="partnerId">Partner ID:</label> <input type="text" id="partnerId" name="partnerId" placeholder="Enter Partner ID"> <label for="timestamp">Timestamp:</label> <input type="text" id="timestamp" name="timestamp" placeholder="Enter Timestamp"> <label for="apiKey">API Key:</label> <input type="text" id="apiKey" name="apiKey" placeholder="Enter API Key"> <label for="accessToken">Access Token:</label> <input type="text" id="accessToken" name="accessToken" placeholder="Enter Access Token"> <label for="shopId">Shop ID:</label> <input type="text" id="shopId" name="shopId" placeholder="Enter Shop ID"> <label for="merchantId">Merchant ID:</label> <input type="text" id="merchantId" name="merchantId" placeholder="Enter Merchant ID"> </div> <!-- Database Input Fields --> <div class="input-group" id="dbGroup"> <label for="dbUrl">Database URL:</label> <input type="text" id="dbUrl" name="dbUrl" placeholder="Enter Database URL"> <label for="dbUsername">Username:</label> <input type="text" id="dbUsername" name="dbUsername" placeholder="Enter Database Username"> <label for="dbPassword">Password:</label> <input type="password" id="dbPassword" name="dbPassword" placeholder="Enter Database Password"> <label for="dbName">Database Name:</label> <input type="text" id="dbName" name="dbName" placeholder="Enter Database Name"> </div> <button type="submit">Submit</button> </form> <script> // Hiển thị các nhóm input tương ứng khi chọn phương thức document.getElementById('inputType').addEventListener('change', function() { const apiGroup = document.getElementById('apiGroup'); const ecommerceGroup = document.getElementById('ecommerceGroup'); const dbGroup = document.getElementById('dbGroup'); apiGroup.style.display = 'none'; ecommerceGroup.style.display = 'none'; dbGroup.style.display = 'none'; if (this.value === 'api') { apiGroup.style.display = 'block'; } else if (this.value === 'ecommerce') { ecommerceGroup.style.display = 'block'; } else if (this.value === 'database') { dbGroup.style.display = 'block'; } }); // Gửi request đến n8n workflow document.getElementById('urlForm').addEventListener('submit', function(event) { event.preventDefault(); const inputType = document.getElementById('inputType').value; let data = {}; if (inputType === 'api') { const apiUrl = document.getElementById('apiUrl').value; data = { api_URL: apiUrl }; } else if (inputType === 'ecommerce') { data = { api_URL: document.getElementById('apiUrlEcommerce').value, partner_id: document.getElementById('partnerId').value, timestamp: document.getElementById('timestamp').value, api_key: document.getElementById('apiKey').value, access_token: document.getElementById('accessToken').value, shop_id: document.getElementById('shopId').value, merchant_id: document.getElementById('merchantId').value }; } else if (inputType === 'database') { data = { db_URL: document.getElementById('dbUrl').value, db_username: document.getElementById('dbUsername').value, db_password: document.getElementById('dbPassword').value, db_name: document.getElementById('dbName').value }; } // Gửi dữ liệu đến webhook của n8n fetch('https://pot.app.n8n.cloud/webhook-test/74e37c2c-0d57-4300-8de4-2898094f7e03', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(response => response.json()) .then(data => { alert('Data submitted successfully'); console.log(data); }) .catch(error => { console.error('Error:', error); alert('Failed to submit the data'); }); }); </script> </body> </html> and one more this for dasbroad