# Client Intelligence - Integration Examples
## 3 Ways to Add "View Intelligence" Button to Your UI
### Option 1: Add to Dashboard Client Table (EASIEST)
**Location**: `templates/dashboard.html`, around line 1925
**Current code:**
```javascript
function populateTableClientRef(data) {
const tbody = document.getElementById('tableBodyClientRef');
if (data.length === 0) {
tbody.innerHTML = 'No data found
${escapeHtml(row.Cliente || '')}
${escapeHtml(row.Referencia || '')} ${escapeHtml(row.Código || '')}
${escapeHtml(row.Familia || '')}
${parseInt(row.Quant || 0)}
€ ${parseFloat(row.Faturaçao || 0).toFixed(2)}
`).join('');
// ... rest of code
}
```
**Replace with:**
```javascript
function populateTableClientRef(data) {
const tbody = document.getElementById('tableBodyClientRef');
if (data.length === 0) {
tbody.innerHTML = 'No data found
${escapeHtml(row.Cliente || '')}
${escapeHtml(row.Referencia || '')} ${escapeHtml(row.Código || '')}
${escapeHtml(row.Familia || '')}
${parseInt(row.Quant || 0)}
€ ${parseFloat(row.Faturaçao || 0).toFixed(2)}
`).join('');
// ... rest of code
}
```
**Also update table header** (search for `` in by-client-ref section):
```html
Cliente
Referencia
Código
Familia
Quantity
Faturação
Ações
```
---
### Option 2: Add to Client Details Modal (ELEGANT)
**Location**: `templates/dashboard.html`, in the `openClientDetail` function around line 1975
**Find this section:**
```html
```
**Add buttons to modal footer. Search for existing modal footer or add:**
```html
```
**Then, in `openClientDetail` function, add:**
```javascript
function openClientDetail(clientName) {
console.log('Opening detail for client:', clientName);
// ... existing code ...
// ADD THESE LINES (after modal title is set):
const intelligenceLink = document.getElementById('intelligenceLink');
if (intelligenceLink) {
intelligenceLink.href = `/client-intelligence?cliente=${encodeURIComponent(clientName)}`;
}
// ... rest of existing code ...
}
```
---
### Option 3: Add Context Menu / Dropdown (ADVANCED)
**Location**: Create in dashboard.html script section
**Add this function:**
```javascript
function openClientMenu(clientName, event) {
event.preventDefault();
// Close any existing menu
document.querySelectorAll('.client-menu').forEach(m => m.remove());
const menu = document.createElement('div');
menu.className = 'client-menu';
menu.innerHTML = `
`;
document.body.appendChild(menu);
// Close menu when clicking elsewhere
setTimeout(() => {
document.addEventListener('click', function closeMenu() {
menu.remove();
document.removeEventListener('click', closeMenu);
});
}, 100);
}
```
**Update row click handler:**
```javascript
document.querySelectorAll('#tableBodyClientRef .clickable-row').forEach(row => {
row.addEventListener('contextmenu', function(e) {
e.preventDefault();
const clientName = this.getAttribute('data-client');
openClientMenu(clientName, e);
});
// Keep existing click behavior
row.addEventListener('click', function() {
const clientName = this.getAttribute('data-client');
console.log('Clicked client:', clientName);
openClientDetail(clientName);
});
});
```
---
## Quick Reference: HTML Button Examples
### Standalone Button
```html
```
### Button with Badge (showing new feature)
```html
NOVO
```
### Simple Link
```html
📊 Analytics
```
### Icon Button (compact)
```html
```
### Button with Dropdown
```html
{{ client_name }}
```
---
## JavaScript Code to Auto-Generate URL
If client names have special characters, use this helper:
```javascript
function getIntelligenceUrl(clientName) {
return `/client-intelligence?cliente=${encodeURIComponent(clientName)}`;
}
// Usage:
const url = getIntelligenceUrl("José Silva");
// Returns: /client-intelligence?cliente=Jos%C3%A9%20Silva
// Then create link:
const link = document.createElement('a');
link.href = url;
link.textContent = 'View Intelligence';
link.className = 'btn btn-info';
```
---
## Testing Your Integration
After making changes:
1. **Save the file** (`templates/dashboard.html`)
2. **Refresh Flask** (press Ctrl+C and run `.\run_dev.ps1`)
3. **Load dashboard**: `http://localhost:5000/dashboard`
4. **Click your new button** → Should open Client Intelligence Panel
5. **Check**: Verify client name is loaded correctly
---
## Common Issues & Solutions
| Issue | Solution |
|-------|----------|
| Button appears but does nothing | Check browser console (F12) for JS errors |
| Character encoding issues | Use `encodeURIComponent()` in JavaScript or `\| urlencode` in Jinja2 |
| Link goes to wrong page | Verify route `/client-intelligence` exists in app.py |
| Access denied error | Check if user has permission for that client |
| Button not styling correctly | Add CSS classes: `btn btn-primary` |
---
## Styling Tips
### Match dashboard buttons
```html
```
### Compact inline link
```html
📊 Análise
```
### With hover effect
```css
.intelligence-link {
display: inline-block;
padding: 6px 12px;
background: #f0f4ff;
color: #667eea;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s;
}
.intelligence-link:hover {
background: #667eea;
color: white;
transform: translateY(-2px);
}
```
---
## Mobile Responsive Button
```html
Análise
Ver Análise
```
---
## Recommended: Option 1 (Dashboard Table)
**Why?**
- ✅ Simplest to implement
- ✅ Most visible to users
- ✅ Works with existing table structure
- ✅ Easy to remove if needed
**Steps:**
1. Find `populateTableClientRef` function (line ~1925)
2. Add `, Ações ` to table header
3. Add `, Análise