changing some things for reports section
This commit is contained in:
Mann Patel
752
app/internal/templates/smart_reports.html
Normal file
752
app/internal/templates/smart_reports.html
Normal file
@@ -0,0 +1,752 @@
|
||||
{{ define "content" }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{.Title}}</title>
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<div class="min-h-screen w-full flex flex-col">
|
||||
<!-- Header -->
|
||||
<div class="bg-white border-b border-gray-200 w-full">
|
||||
<div class="px-8 py-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 bg-purple-600 flex items-center justify-center rounded"
|
||||
>
|
||||
<i class="fas fa-brain text-white text-sm"></i>
|
||||
</div>
|
||||
<span class="text-xl font-semibold text-gray-900"
|
||||
>Smart Reports & Analytics</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
{{if .SmartQuery}}
|
||||
<button
|
||||
onclick="exportResults()"
|
||||
class="px-6 py-2.5 bg-green-600 text-white text-sm font-medium rounded hover:bg-green-700 transition-colors"
|
||||
>
|
||||
<i class="fas fa-download mr-2"></i>Export Results
|
||||
</button>
|
||||
{{end}}
|
||||
<button
|
||||
onclick="clearQuery()"
|
||||
class="px-6 py-2.5 border border-gray-300 text-gray-700 text-sm font-medium rounded hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<i class="fas fa-eraser mr-2"></i>Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Smart Search Interface -->
|
||||
<div class="bg-white w-full border-b border-gray-200">
|
||||
<div class="px-8 py-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">
|
||||
Ask About Your Data
|
||||
</h2>
|
||||
<p class="text-gray-600 mb-8">
|
||||
Use natural language to query across users, polls, appointments,
|
||||
addresses, and teams
|
||||
</p>
|
||||
|
||||
<form method="GET" action="/smart-reports" class="mb-8">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
|
||||
>
|
||||
<i class="fas fa-magic text-purple-400"></i>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="smart_query"
|
||||
value="{{.SmartQuery}}"
|
||||
placeholder="e.g., 'volunteers who went to Main Street' or 'donations by team 5'"
|
||||
class="w-full pl-10 pr-4 py-4 text-lg border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<button
|
||||
type="submit"
|
||||
class="px-8 py-3 bg-purple-600 text-white font-semibold rounded-lg hover:bg-purple-700 transition-colors"
|
||||
>
|
||||
<i class="fas fa-search mr-2"></i>Search
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick="toggleExamples()"
|
||||
class="text-purple-600 hover:text-purple-800 text-sm font-medium"
|
||||
>
|
||||
<i class="fas fa-lightbulb mr-1"></i>Show Examples
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Query Examples -->
|
||||
<div id="queryExamples" class="hidden">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">
|
||||
Example Queries
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
{{range .QueryExamples}}
|
||||
<div
|
||||
class="p-4 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors cursor-pointer"
|
||||
onclick="useExample('{{.}}')"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-700">{{.}}</span>
|
||||
<i class="fas fa-arrow-right text-purple-500 text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Section -->
|
||||
{{if .Result}} {{if .Result.Error}}
|
||||
<div class="bg-white w-full">
|
||||
<div class="px-8 py-6">
|
||||
<div class="bg-red-50 border border-red-200 rounded-lg p-6">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-exclamation-triangle text-red-600 text-sm"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h3 class="text-lg font-semibold text-red-800">Query Error</h3>
|
||||
<p class="text-red-700 mt-2">{{.Result.Error}}</p>
|
||||
{{if .Result.Query}}
|
||||
<details class="mt-4">
|
||||
<summary class="text-sm text-red-600 cursor-pointer">
|
||||
Show Generated SQL
|
||||
</summary>
|
||||
<pre
|
||||
class="mt-2 p-3 bg-red-100 text-red-800 text-xs rounded overflow-x-auto"
|
||||
>
|
||||
{{.Result.Query}}</pre
|
||||
>
|
||||
</details>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<!-- Successful Results -->
|
||||
<div class="bg-white w-full">
|
||||
<div class="px-8 py-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
Query Results ({{.Result.Count}} records found)
|
||||
</h3>
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
onclick="toggleQueryDetails()"
|
||||
class="text-sm text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<i class="fas fa-code mr-1"></i>Show SQL
|
||||
</button>
|
||||
<button
|
||||
onclick="exportResults()"
|
||||
class="px-4 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700 transition-colors"
|
||||
>
|
||||
<i class="fas fa-download mr-1"></i>Export CSV
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Query Details (Hidden by default) -->
|
||||
<div
|
||||
id="queryDetails"
|
||||
class="hidden mb-6 p-4 bg-gray-50 rounded-lg border"
|
||||
>
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-2">
|
||||
Generated SQL Query:
|
||||
</h4>
|
||||
<pre class="text-xs text-gray-600 overflow-x-auto">
|
||||
{{.Result.Query}}</pre
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Results Table -->
|
||||
{{if gt .Result.Count 0}}
|
||||
<div class="overflow-x-auto rounded-lg border border-gray-200">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
{{range .Result.Columns}}
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200"
|
||||
>
|
||||
{{formatColumnName .}}
|
||||
</th>
|
||||
{{end}}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
{{range .Result.Rows}}
|
||||
<tr class="hover:bg-gray-50 transition-colors">
|
||||
{{range .}}
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{{.}}
|
||||
</td>
|
||||
{{end}}
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="text-center py-12">
|
||||
<div
|
||||
class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"
|
||||
>
|
||||
<i class="fas fa-search text-gray-400 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">
|
||||
No Results Found
|
||||
</h3>
|
||||
<p class="text-gray-500">
|
||||
Try adjusting your query or check the examples below
|
||||
</p>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}} {{end}}
|
||||
|
||||
<!-- Query Builder Assistant -->
|
||||
<div class="bg-white w-full border-t border-gray-200">
|
||||
<div class="px-8 py-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-6">
|
||||
Smart Query Builder
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Common Queries -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="font-medium text-gray-900">
|
||||
User & Volunteer Queries
|
||||
</h4>
|
||||
<div class="space-y-2">
|
||||
<button
|
||||
onclick="useSmartQuery('volunteers who went to')"
|
||||
class="w-full text-left p-3 bg-blue-50 text-blue-800 rounded border hover:bg-blue-100 transition-colors"
|
||||
>
|
||||
<i class="fas fa-user-friends mr-2"></i>Volunteers who went
|
||||
to...
|
||||
</button>
|
||||
<button
|
||||
onclick="useSmartQuery('users with role admin')"
|
||||
class="w-full text-left p-3 bg-blue-50 text-blue-800 rounded border hover:bg-blue-100 transition-colors"
|
||||
>
|
||||
<i class="fas fa-user-shield mr-2"></i>Users by role
|
||||
</button>
|
||||
<button
|
||||
onclick="useSmartQuery('volunteer activity by month')"
|
||||
class="w-full text-left p-3 bg-blue-50 text-blue-800 rounded border hover:bg-blue-100 transition-colors"
|
||||
>
|
||||
<i class="fas fa-chart-line mr-2"></i>Volunteer activity
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Poll & Donation Queries -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="font-medium text-gray-900">
|
||||
Poll & Donation Queries
|
||||
</h4>
|
||||
<div class="space-y-2">
|
||||
<button
|
||||
onclick="useSmartQuery('poll responses for')"
|
||||
class="w-full text-left p-3 bg-green-50 text-green-800 rounded border hover:bg-green-100 transition-colors"
|
||||
>
|
||||
<i class="fas fa-poll mr-2"></i>Poll responses for address
|
||||
</button>
|
||||
<button
|
||||
onclick="useSmartQuery('donations by volunteer')"
|
||||
class="w-full text-left p-3 bg-green-50 text-green-800 rounded border hover:bg-green-100 transition-colors"
|
||||
>
|
||||
<i class="fas fa-donate mr-2"></i>Donations by volunteer
|
||||
</button>
|
||||
<button
|
||||
onclick="useSmartQuery('active polls created after 2024-01-01')"
|
||||
class="w-full text-left p-3 bg-green-50 text-green-800 rounded border hover:bg-green-100 transition-colors"
|
||||
>
|
||||
<i class="fas fa-calendar-check mr-2"></i>Active polls by
|
||||
date
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team & Address Queries -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="font-medium text-gray-900">
|
||||
Team & Address Queries
|
||||
</h4>
|
||||
<div class="space-y-2">
|
||||
<button
|
||||
onclick="useSmartQuery('team with most appointments')"
|
||||
class="w-full text-left p-3 bg-purple-50 text-purple-800 rounded border hover:bg-purple-100 transition-colors"
|
||||
>
|
||||
<i class="fas fa-users mr-2"></i>Top performing teams
|
||||
</button>
|
||||
<button
|
||||
onclick="useSmartQuery('visited addresses')"
|
||||
class="w-full text-left p-3 bg-purple-50 text-purple-800 rounded border hover:bg-purple-100 transition-colors"
|
||||
>
|
||||
<i class="fas fa-map-marked-alt mr-2"></i>Visited addresses
|
||||
</button>
|
||||
<button
|
||||
onclick="useSmartQuery('money made by team')"
|
||||
class="w-full text-left p-3 bg-purple-50 text-purple-800 rounded border hover:bg-purple-100 transition-colors"
|
||||
>
|
||||
<i class="fas fa-dollar-sign mr-2"></i>Team earnings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Query Syntax Help -->
|
||||
<div class="mt-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<h4 class="font-semibold text-gray-900 mb-4">
|
||||
<i class="fas fa-info-circle text-blue-500 mr-2"></i>Smart Query
|
||||
Syntax Guide
|
||||
</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
|
||||
<div>
|
||||
<h5 class="font-medium text-gray-800 mb-2">
|
||||
Entity Keywords:
|
||||
</h5>
|
||||
<ul class="space-y-1 text-gray-600">
|
||||
<li>
|
||||
<code class="bg-gray-200 px-1 rounded"
|
||||
>volunteer, user, admin</code
|
||||
>
|
||||
- User data
|
||||
</li>
|
||||
<li>
|
||||
<code class="bg-gray-200 px-1 rounded">poll, polls</code>
|
||||
- Poll data
|
||||
</li>
|
||||
<li>
|
||||
<code class="bg-gray-200 px-1 rounded"
|
||||
>address, addresses</code
|
||||
>
|
||||
- Address data
|
||||
</li>
|
||||
<li>
|
||||
<code class="bg-gray-200 px-1 rounded"
|
||||
>appointment, appointments</code
|
||||
>
|
||||
- Appointment data
|
||||
</li>
|
||||
<li>
|
||||
<code class="bg-gray-200 px-1 rounded">team, teams</code>
|
||||
- Team data
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="font-medium text-gray-800 mb-2">
|
||||
Action Keywords:
|
||||
</h5>
|
||||
<ul class="space-y-1 text-gray-600">
|
||||
<li>
|
||||
<code class="bg-gray-200 px-1 rounded"
|
||||
>went to, visited</code
|
||||
>
|
||||
- Filter by visits
|
||||
</li>
|
||||
<li>
|
||||
<code class="bg-gray-200 px-1 rounded"
|
||||
>donated, money, amount</code
|
||||
>
|
||||
- Financial data
|
||||
</li>
|
||||
<li>
|
||||
<code class="bg-gray-200 px-1 rounded"
|
||||
>active, inactive</code
|
||||
>
|
||||
- Status filters
|
||||
</li>
|
||||
<li>
|
||||
<code class="bg-gray-200 px-1 rounded"
|
||||
>most, highest, top</code
|
||||
>
|
||||
- Ranking queries
|
||||
</li>
|
||||
<li>
|
||||
<code class="bg-gray-200 px-1 rounded"
|
||||
>from DATE, after DATE</code
|
||||
>
|
||||
- Date filters
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Query Suggestions -->
|
||||
<div class="bg-white w-full border-t border-gray-200">
|
||||
<div class="px-8 py-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">
|
||||
Popular Analysis Questions
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div
|
||||
class="p-4 border border-gray-200 rounded-lg hover:border-purple-300 transition-colors cursor-pointer"
|
||||
onclick="useSmartQuery('which volunteer went to most addresses')"
|
||||
>
|
||||
<h5 class="font-medium text-gray-900 mb-2">
|
||||
Top Performing Volunteers
|
||||
</h5>
|
||||
<p class="text-sm text-gray-600">
|
||||
Find volunteers with most address visits
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-4 border border-gray-200 rounded-lg hover:border-purple-300 transition-colors cursor-pointer"
|
||||
onclick="useSmartQuery('poll responses of visited addresses')"
|
||||
>
|
||||
<h5 class="font-medium text-gray-900 mb-2">
|
||||
Visited Address Polls
|
||||
</h5>
|
||||
<p class="text-sm text-gray-600">
|
||||
Polls from addresses that were visited
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-4 border border-gray-200 rounded-lg hover:border-purple-300 transition-colors cursor-pointer"
|
||||
onclick="useSmartQuery('donations filtered by volunteer Sarah')"
|
||||
>
|
||||
<h5 class="font-medium text-gray-900 mb-2">
|
||||
Volunteer Donations
|
||||
</h5>
|
||||
<p class="text-sm text-gray-600">
|
||||
Total donations by specific volunteer
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-4 border border-gray-200 rounded-lg hover:border-purple-300 transition-colors cursor-pointer"
|
||||
onclick="useSmartQuery('team that did most appointments')"
|
||||
>
|
||||
<h5 class="font-medium text-gray-900 mb-2">Most Active Team</h5>
|
||||
<p class="text-sm text-gray-600">
|
||||
Team with highest appointment count
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-4 border border-gray-200 rounded-lg hover:border-purple-300 transition-colors cursor-pointer"
|
||||
onclick="useSmartQuery('people in team 1')"
|
||||
>
|
||||
<h5 class="font-medium text-gray-900 mb-2">Team Members</h5>
|
||||
<p class="text-sm text-gray-600">
|
||||
View all members of a specific team
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-4 border border-gray-200 rounded-lg hover:border-purple-300 transition-colors cursor-pointer"
|
||||
onclick="useSmartQuery('unvisited addresses with polls')"
|
||||
>
|
||||
<h5 class="font-medium text-gray-900 mb-2">
|
||||
Missed Opportunities
|
||||
</h5>
|
||||
<p class="text-sm text-gray-600">
|
||||
Addresses with polls but no visits
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Queries History -->
|
||||
<div class="bg-gray-50 w-full border-t border-gray-200">
|
||||
<div class="px-8 py-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">
|
||||
Quick Actions
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button
|
||||
onclick="useSmartQuery('all users created today')"
|
||||
class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Today's Users
|
||||
</button>
|
||||
<button
|
||||
onclick="useSmartQuery('donations over 50')"
|
||||
class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
High Donations
|
||||
</button>
|
||||
<button
|
||||
onclick="useSmartQuery('appointments this week')"
|
||||
class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
This Week's Appointments
|
||||
</button>
|
||||
<button
|
||||
onclick="useSmartQuery('inactive polls with donations')"
|
||||
class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Inactive Paid Polls
|
||||
</button>
|
||||
<button
|
||||
onclick="useSmartQuery('teams created this month')"
|
||||
class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
New Teams
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Toggle query examples
|
||||
function toggleExamples() {
|
||||
const examples = document.getElementById("queryExamples");
|
||||
examples.classList.toggle("hidden");
|
||||
}
|
||||
|
||||
// Use example query
|
||||
function useExample(query) {
|
||||
document.querySelector('input[name="smart_query"]').value = query;
|
||||
}
|
||||
|
||||
// Use smart query (for buttons)
|
||||
function useSmartQuery(query) {
|
||||
document.querySelector('input[name="smart_query"]').value = query;
|
||||
document.querySelector("form").submit();
|
||||
}
|
||||
|
||||
// Toggle query details
|
||||
function toggleQueryDetails() {
|
||||
const details = document.getElementById("queryDetails");
|
||||
details.classList.toggle("hidden");
|
||||
}
|
||||
|
||||
// Export results
|
||||
function exportResults() {
|
||||
const query = encodeURIComponent(
|
||||
document.querySelector('input[name="smart_query"]').value
|
||||
);
|
||||
window.location.href = `/smart-reports/export?smart_query=${query}`;
|
||||
}
|
||||
|
||||
// Clear query
|
||||
function clearQuery() {
|
||||
window.location.href = "/smart-reports";
|
||||
}
|
||||
|
||||
// Format column names for display
|
||||
function formatColumnName(name) {
|
||||
return name.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
|
||||
}
|
||||
|
||||
// Auto-complete functionality
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const input = document.querySelector('input[name="smart_query"]');
|
||||
const suggestions = [
|
||||
"volunteers who went to",
|
||||
"poll responses for address",
|
||||
"donations by volunteer",
|
||||
"team with most appointments",
|
||||
"people in team",
|
||||
"money made by team",
|
||||
"visited addresses",
|
||||
"active polls",
|
||||
"appointments for",
|
||||
"users with role",
|
||||
"polls with donations over",
|
||||
"addresses visited by",
|
||||
"team leads with more than",
|
||||
"donations per address",
|
||||
"unvisited addresses with polls",
|
||||
];
|
||||
|
||||
// Simple autocomplete
|
||||
input.addEventListener("input", function () {
|
||||
const value = this.value.toLowerCase();
|
||||
// You could implement autocomplete dropdown here
|
||||
console.log("Typing:", value);
|
||||
});
|
||||
|
||||
// Submit on Enter
|
||||
input.addEventListener("keypress", function (e) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
this.form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
// Focus on load
|
||||
input.focus();
|
||||
});
|
||||
|
||||
// Real-time query validation
|
||||
function validateQuery(query) {
|
||||
const keywords = [
|
||||
"volunteer",
|
||||
"user",
|
||||
"poll",
|
||||
"address",
|
||||
"appointment",
|
||||
"team",
|
||||
"donation",
|
||||
];
|
||||
const hasKeyword = keywords.some((keyword) =>
|
||||
query.toLowerCase().includes(keyword)
|
||||
);
|
||||
|
||||
if (!hasKeyword) {
|
||||
return {
|
||||
valid: false,
|
||||
message:
|
||||
"Query should include at least one entity (volunteer, poll, address, etc.)",
|
||||
};
|
||||
}
|
||||
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Query suggestions based on context
|
||||
function getContextualSuggestions(partialQuery) {
|
||||
const suggestions = [];
|
||||
const query = partialQuery.toLowerCase();
|
||||
|
||||
if (query.includes("volunteer")) {
|
||||
suggestions.push("volunteers who went to Main Street");
|
||||
suggestions.push("volunteers with most donations");
|
||||
suggestions.push("volunteer activity by month");
|
||||
}
|
||||
|
||||
if (query.includes("team")) {
|
||||
suggestions.push("team with most appointments");
|
||||
suggestions.push("people in team 1");
|
||||
suggestions.push("money made by team 2");
|
||||
}
|
||||
|
||||
if (query.includes("address")) {
|
||||
suggestions.push("addresses visited by volunteer John");
|
||||
suggestions.push("poll responses for 123 Oak Street");
|
||||
suggestions.push("unvisited addresses with polls");
|
||||
}
|
||||
|
||||
return suggestions;
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener("keydown", function (e) {
|
||||
// Ctrl/Cmd + Enter to submit
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
|
||||
document.querySelector("form").submit();
|
||||
}
|
||||
|
||||
// Escape to clear
|
||||
if (e.key === "Escape") {
|
||||
clearQuery();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Enhanced styling for smart interface */
|
||||
.smart-query-input:focus {
|
||||
box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
|
||||
border-color: #9333ea;
|
||||
}
|
||||
|
||||
/* Syntax highlighting for code examples */
|
||||
code {
|
||||
background-color: #f3f4f6;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
/* Hover effects for query buttons */
|
||||
.query-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Loading animation */
|
||||
.loading {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Results table styling */
|
||||
.results-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
body {
|
||||
background: white !important;
|
||||
}
|
||||
.border-gray-200 {
|
||||
border-color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.px-8 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.overflow-x-auto {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user