// Baserow Custom JavaScript - Compliance Management System // Paste this into your Custom JavaScript section (function() { 'use strict'; // Wait for Baserow to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initComplianceApp); } else { initComplianceApp(); } function initComplianceApp() { // Create container for our app const appContainer = document.createElement('div'); appContainer.id = 'compliance-app-container'; appContainer.innerHTML = `

🛡️ Compliance Management Dashboard

⚠️ Using Sample Data

Total Roasters

🏢

Active Programs

📄

Open Risks

⚠️

Remediations

✅

AI-Generated Insights

Add New Roaster

Current Roasters

📝 Submit Compliance Report

Use this form to submit your quarterly compliance report.

📋

Baserow Form Embed Area

Click Configure to add your Baserow form

📋 Form Submissions

Current Risks

`; // Find a good place to inject our app (after Baserow content) const targetElement = document.querySelector('.layout__content') || document.querySelector('main') || document.body; if (targetElement) { targetElement.appendChild(appContainer); } // Initialize the app window.ComplianceApp = new ComplianceManager(); window.ComplianceApp.init(); } // Main Compliance Application Class class ComplianceManager { constructor() { this.data = { roasters: [ { id: 1, name: 'Premium Coffee Co.', country: 'Brazil', created_at: '2024-01-15' }, { id: 2, name: 'Mountain Roasters', country: 'Colombia', created_at: '2024-02-20' }, { id: 3, name: 'Urban Bean Works', country: 'Ethiopia', created_at: '2024-03-10' } ], risks: [ { id: 1, description: 'Supply chain disruption risk in Brazil region' }, { id: 2, description: 'Environmental compliance risk due to new regulations' }, { id: 3, description: 'Labor standard compliance gap in documentation' } ], submissions: [ { id: 'SUB-001', company: 'Premium Coffee Co.', date: '2024-07-20', status: 'pending' }, { id: 'SUB-002', company: 'Mountain Roasters', date: '2024-07-18', status: 'approved' } ] }; this.config = { baseUrl: 'https://api.baserow.io', apiToken: '', tableIds: { roasters: null } }; this.isConnected = false; } init() { this.loadSavedConfig(); this.updateUI(); this.addStyles(); } addStyles() { if (document.getElementById('compliance-styles')) return; const styles = document.createElement('style'); styles.id = 'compliance-styles'; styles.textContent = ` .compliance-app { background: white; border-radius: 8px; padding: 20px; margin: 20px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .compliance-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e5e7eb; } .compliance-header h2 { margin: 0; color: #1f2937; } .compliance-controls { display: flex; gap: 10px; align-items: center; } .compliance-tabs { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 1px solid #e5e7eb; } .tab { padding: 10px 15px; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; font-size: 14px; color: #6b7280; transition: all 0.2s; } .tab.active, .tab:hover { color: #2563eb; border-bottom-color: #2563eb; } .tab-content { display: none; } .tab-content.active { display: block; } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; } .metric-card { background: white; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; } .metric-card.blue { background: #eff6ff; border-color: #93c5fd; } .metric-card.green { background: #f0fdf4; border-color: #86efac; } .metric-card.orange { background: #fff7ed; border-color: #fdba74; } .metric-card.purple { background: #faf5ff; border-color: #c4b5fd; } .metric-text h3 { margin: 0 0 5px 0; font-size: 14px; color: #6b7280; } .metric-text p { margin: 0; font-size: 24px; font-weight: bold; color: #1f2937; } .metric-icon { font-size: 24px; opacity: 0.7; } .compliance-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 20px; } .compliance-card h3 { margin: 0 0 15px 0; color: #1f2937; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .input-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .input { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; flex: 1; min-width: 120px; } .btn-primary, .btn-secondary, .btn-config, .btn-refresh { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.2s; } .btn-primary { background: #2563eb; color: white; } .btn-primary:hover { background: #1d4ed8; } .btn-secondary, .btn-config, .btn-refresh { background: #6b7280; color: white; } .btn-secondary:hover, .btn-config:hover, .btn-refresh:hover { background: #4b5563; } .data-list { max-height: 300px; overflow-y: auto; } .data-item { padding: 10px; border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: 10px; background: white; } .form-placeholder { min-height: 200px; border: 2px dashed #e5e7eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; } .placeholder-content { text-align: center; color: #6b7280; } .placeholder-content h4 { margin: 10px 0; color: #374151; } .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; } .modal-content { background: white; padding: 30px; border-radius: 8px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; } .modal-content h3 { margin: 0 0 20px 0; } .modal-content label { display: block; margin: 10px 0 5px 0; font-weight: 500; } .modal-content .input { width: 100%; margin-bottom: 15px; } .modal-buttons { display: flex; gap: 10px; margin-top: 20px; } .alert { padding: 15px; background: #f3f4f6; border-radius: 6px; border-left: 4px solid #2563eb; margin-top: 15px; } .hidden { display: none !important; } .status-badge { padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; } .status-pending { background: #fef3c7; color: #92400e; } .status-approved { background: #dcfce7; color: #166534; } `; document.head.appendChild(styles); } showTab(tabName) { // Hide all tabs document.querySelectorAll('.tab-content').forEach(tab => { tab.classList.remove('active'); }); document.querySelectorAll('.tab').forEach(tab => { tab.classList.remove('active'); }); // Show selected tab const targetTab = document.getElementById(tabName); if (targetTab) { targetTab.classList.add('active'); } // Update active tab button event.target.classList.add('active'); } updateUI() { // Update metrics document.getElementById('roasters-count').textContent = this.data.roasters.length; document.getElementById('risks-count').textContent = this.data.risks.length; // Update roasters list this.updateRoastersList(); this.updateRisksList(); this.updateSubmissionsList(); } updateRoastersList() { const container = document.getElementById('roasters-list'); if (!container) return; container.innerHTML = this.data.roasters.map(roaster => `

${roaster.name} - ${roaster.country} (${roaster.created_at})

`).join(''); } updateRisksList() { const container = document.getElementById('risks-list'); if (!container) return; container.innerHTML = this.data.risks.map(risk => `

Risk #${risk.id}
${risk.description}

`).join(''); } updateSubmissionsList() { const container = document.getElementById('submissions-list'); if (!container) return; container.innerHTML = this.data.submissions.map(sub => `

${sub.id} - ${sub.company}
${sub.date}

${sub.status.toUpperCase()}

`).join(''); } generateInsights() { const content = document.getElementById('insights-content'); if (content) { content.classList.remove('hidden'); } alert('AI Insights generated! Check the dashboard for analysis.'); } addRoaster() { const name = document.getElementById('roaster-name').value.trim(); const country = document.getElementById('roaster-country').value.trim(); if (!name || !country) { alert('Please fill in both name and country'); return; } const newRoaster = { id: this.data.roasters.length + 1, name: name, country: country, created_at: new Date().toISOString().split('T')[0] }; this.data.roasters.push(newRoaster); this.updateUI(); // Clear form document.getElementById('roaster-name').value = ''; document.getElementById('roaster-country').value = ''; alert(`Welcome ${name} to our compliance network!`); } analyzeRisk(riskId) { alert(`Risk Analysis for Risk #${riskId}: Medium priority. Recommended actions: 1) Monitor closely 2) Develop mitigation plan 3) Review in 30 days.`); } showConfig() { document.getElementById('config-modal').classList.remove('hidden'); } hideConfig() { document.getElementById('config-modal').classList.add('hidden'); } configureForm() { const embedCode = prompt('Paste your Baserow form embed code:'); if (embedCode) { document.getElementById('form-embed-area').innerHTML = embedCode; alert('Form embedded successfully!'); } } configureSubmissions() { alert('Configure your submissions table ID in the main configuration.'); } saveConfig() { const url = document.getElementById('config-url').value.trim(); const token = document.getElementById('config-token').value.trim(); const tableId = document.getElementById('config-roasters').value.trim(); if (!token || !tableId) { alert('Please fill in all fields'); return; } this.config = { baseUrl: url, apiToken: token, tableIds: { roasters: parseInt(tableId) } }; // Save to sessionStorage sessionStorage.setItem('complianceConfig', JSON.stringify(this.config)); this.hideConfig(); alert('Configuration saved!'); } loadSavedConfig() { try { const saved = sessionStorage.getItem('complianceConfig'); if (saved) { this.config = JSON.parse(saved); this.isConnected = true; document.getElementById('connection-status').textContent = '✅ Connected to Baserow'; } } catch (error) { console.log('No saved config found'); } } refreshData() { if (this.isConnected) { // In real implementation, load from Baserow alert('Data refreshed from Baserow!'); } else { location.reload(); } } } // Close modals when clicking outside document.addEventListener('click', function(event) { if (event.target.classList.contains('modal')) { event.target.classList.add('hidden'); } }); })();

La Cosa Compliance Management Dashboard