Ryan Malloy bec1606c86 Add comprehensive documentation system and tool call tracking
## Documentation System
- Create complete documentation hub at /dashboard/docs with:
  - Getting Started guide with quick setup and troubleshooting
  - Hook Setup Guide with platform-specific configurations
  - API Reference with all endpoints and examples
  - FAQ with searchable questions and categories
- Add responsive design with interactive features
- Update navigation in base template

## Tool Call Tracking
- Add ToolCall model for tracking Claude Code tool usage
- Create /api/tool-calls endpoints for recording and analytics
- Add tool_call hook type with auto-session detection
- Include tool calls in project statistics and recalculation
- Track tool names, parameters, execution time, and success rates

## Project Enhancements
- Add project timeline and statistics pages (fix 404 errors)
- Create recalculation script for fixing zero statistics
- Update project stats to include tool call counts
- Enhance session model with tool call relationships

## Infrastructure
- Switch from requirements.txt to pyproject.toml/uv.lock
- Add data import functionality for claude.json files
- Update database connection to include all new models
- Add comprehensive API documentation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-11 05:58:27 -06:00

784 lines
55 KiB
HTML

{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!-- Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/dashboard/docs">Documentation</a></li>
<li class="breadcrumb-item active" aria-current="page">FAQ</li>
</ol>
</nav>
<h2><i class="fas fa-question-circle me-3"></i>Frequently Asked Questions</h2>
<p class="lead text-muted">Common questions and troubleshooting guide</p>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<!-- Search FAQ -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-body">
<div class="input-group">
<span class="input-group-text">
<i class="fas fa-search"></i>
</span>
<input type="text" class="form-control" placeholder="Search FAQ..." id="faqSearch">
</div>
</div>
</div>
<!-- General Questions -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-primary text-white">
<h3 class="mb-0"><i class="fas fa-info-circle me-2"></i>General Questions</h3>
</div>
<div class="card-body">
<div class="accordion" id="generalAccordion">
<!-- Q1 -->
<div class="accordion-item border-0 faq-item" data-keywords="what is claude code tracker purpose features">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#general1">
<i class="fas fa-question me-2 text-primary"></i>
What is Claude Code Tracker and what does it do?
</button>
</h2>
<div id="general1" class="accordion-collapse collapse" data-bs-parent="#generalAccordion">
<div class="accordion-body">
<p>Claude Code Tracker is a development intelligence system that helps you understand and analyze your coding activity when using Claude Code. It provides:</p>
<ul>
<li><strong>Session Tracking:</strong> Monitor your development sessions and time spent</li>
<li><strong>Conversation History:</strong> Search and browse through all your Claude conversations</li>
<li><strong>Project Analytics:</strong> Get insights into file modifications, lines changed, and productivity patterns</li>
<li><strong>Timeline Visualization:</strong> See your development progress over time</li>
<li><strong>Data Privacy:</strong> All data stays local on your machine</li>
</ul>
</div>
</div>
</div>
<!-- Q2 -->
<div class="accordion-item border-0 faq-item" data-keywords="data privacy local cloud storage security">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#general2">
<i class="fas fa-shield-alt me-2 text-success"></i>
Is my data secure? Where is it stored?
</button>
</h2>
<div id="general2" class="accordion-collapse collapse" data-bs-parent="#generalAccordion">
<div class="accordion-body">
<div class="alert alert-success">
<i class="fas fa-check-circle me-2"></i>
<strong>Yes, your data is completely secure!</strong>
</div>
<p>Claude Code Tracker prioritizes your privacy:</p>
<ul>
<li><strong>Local Storage:</strong> All data is stored locally in an SQLite database on your machine</li>
<li><strong>No Cloud Services:</strong> No data is sent to external servers or cloud services</li>
<li><strong>No Network Dependencies:</strong> Works completely offline after initial setup</li>
<li><strong>Your Control:</strong> You have full control over your data and can delete it anytime</li>
</ul>
<p class="mb-0"><strong>Database Location:</strong> <code>./data/tracker.db</code> in your installation directory</p>
</div>
</div>
</div>
<!-- Q3 -->
<div class="accordion-item border-0 faq-item" data-keywords="requirements system python version dependencies">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#general3">
<i class="fas fa-server me-2 text-info"></i>
What are the system requirements?
</button>
</h2>
<div id="general3" class="accordion-collapse collapse" data-bs-parent="#generalAccordion">
<div class="accordion-body">
<div class="row">
<div class="col-md-6">
<h6>Minimum Requirements:</h6>
<ul>
<li>Python 3.8 or higher</li>
<li>2GB RAM</li>
<li>100MB free disk space</li>
<li>Modern web browser</li>
</ul>
</div>
<div class="col-md-6">
<h6>Supported Platforms:</h6>
<ul>
<li>Windows 10/11</li>
<li>macOS 10.15+</li>
<li>Linux (Ubuntu, CentOS, etc.)</li>
</ul>
</div>
</div>
<div class="alert alert-info mt-3">
<i class="fas fa-info-circle me-2"></i>
Claude Code CLI must be installed and configured separately.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Setup & Installation -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-success text-white">
<h3 class="mb-0"><i class="fas fa-download me-2"></i>Setup & Installation</h3>
</div>
<div class="card-body">
<div class="accordion" id="setupAccordion">
<!-- Q4 -->
<div class="accordion-item border-0 faq-item" data-keywords="installation setup install getting started first time">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#setup1">
<i class="fas fa-play-circle me-2 text-success"></i>
How do I install and set up Claude Code Tracker?
</button>
</h2>
<div id="setup1" class="accordion-collapse collapse" data-bs-parent="#setupAccordion">
<div class="accordion-body">
<ol>
<li class="mb-2"><strong>Download:</strong> Clone or download the repository</li>
<li class="mb-2"><strong>Install Dependencies:</strong> Run <code>pip install -r requirements.txt</code></li>
<li class="mb-2"><strong>Start Server:</strong> Run <code>python main.py</code></li>
<li class="mb-2"><strong>Access Dashboard:</strong> Open <code>http://localhost:8000/dashboard</code></li>
<li class="mb-2"><strong>Import Data:</strong> Use the <a href="/dashboard/import">Import Data</a> page to load your existing Claude data</li>
</ol>
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
See the <a href="/dashboard/docs/getting-started">Getting Started Guide</a> for detailed instructions.
</div>
</div>
</div>
</div>
<!-- Q5 -->
<div class="accordion-item border-0 faq-item" data-keywords="claude json file location find import data">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#setup2">
<i class="fas fa-file-code me-2 text-warning"></i>
Where can I find my claude.json file?
</button>
</h2>
<div id="setup2" class="accordion-collapse collapse" data-bs-parent="#setupAccordion">
<div class="accordion-body">
<p>The claude.json file contains your Claude Code conversation history. Location varies by operating system:</p>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card border-0 bg-light">
<div class="card-body p-3 text-center">
<i class="fab fa-apple fa-2x text-secondary mb-2"></i>
<h6>macOS</h6>
<code class="small">~/.claude.json</code>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card border-0 bg-light">
<div class="card-body p-3 text-center">
<i class="fab fa-linux fa-2x text-warning mb-2"></i>
<h6>Linux</h6>
<code class="small">~/.claude.json</code>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card border-0 bg-light">
<div class="card-body p-3 text-center">
<i class="fab fa-windows fa-2x text-primary mb-2"></i>
<h6>Windows</h6>
<code class="small">%USERPROFILE%\.claude.json</code>
</div>
</div>
</div>
</div>
<div class="bg-dark text-light p-3 rounded mt-3">
<h6 class="text-light">Quick commands to locate the file:</h6>
<p class="mb-2"><strong>macOS/Linux:</strong> <code>ls -la ~/.claude.json</code></p>
<p class="mb-0"><strong>Windows:</strong> <code>dir %USERPROFILE%\.claude.json</code></p>
</div>
</div>
</div>
</div>
<!-- Q6 -->
<div class="accordion-item border-0 faq-item" data-keywords="hooks setup configuration not working automatic tracking">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#setup3">
<i class="fas fa-link me-2 text-info"></i>
How do I set up hooks for automatic tracking?
</button>
</h2>
<div id="setup3" class="accordion-collapse collapse" data-bs-parent="#setupAccordion">
<div class="accordion-body">
<p>Hooks enable real-time tracking of your Claude Code sessions. Here's the quick setup:</p>
<ol>
<li class="mb-2">Locate your Claude Code settings file:
<ul>
<li>macOS/Linux: <code>~/.config/claude/settings.json</code></li>
<li>Windows: <code>%APPDATA%\claude\settings.json</code></li>
</ul>
</li>
<li class="mb-2">Add hook configuration to the settings file</li>
<li class="mb-2">Ensure Claude Code Tracker server is running</li>
<li>Test by starting a new Claude Code session</li>
</ol>
<div class="alert alert-success">
<i class="fas fa-book me-2"></i>
<strong>Detailed Instructions:</strong> See the <a href="/dashboard/docs/hook-setup">Hook Setup Guide</a> for complete configuration examples.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Troubleshooting -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-warning text-dark">
<h3 class="mb-0"><i class="fas fa-tools me-2"></i>Troubleshooting</h3>
</div>
<div class="card-body">
<div class="accordion" id="troubleshootingAccordion">
<!-- Q7 -->
<div class="accordion-item border-0 faq-item" data-keywords="import fails error upload data corrupted file">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#trouble1">
<i class="fas fa-exclamation-triangle me-2 text-danger"></i>
Data import is failing. What should I do?
</button>
</h2>
<div id="trouble1" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
<div class="accordion-body">
<p><strong>Common causes and solutions:</strong></p>
<div class="row">
<div class="col-md-6">
<h6><i class="fas fa-file-alt me-2 text-warning"></i>File Issues:</h6>
<ul>
<li>Verify the JSON file is valid</li>
<li>Check file permissions (readable)</li>
<li>Ensure file is not corrupted</li>
<li>Try with a smaller JSON file first</li>
</ul>
</div>
<div class="col-md-6">
<h6><i class="fas fa-server me-2 text-info"></i>System Issues:</h6>
<ul>
<li>Check available disk space (need ~100MB)</li>
<li>Verify database permissions</li>
<li>Restart the server and try again</li>
<li>Check server logs for detailed errors</li>
</ul>
</div>
</div>
<div class="bg-dark text-light p-3 rounded mt-3">
<h6 class="text-light">Validate your JSON file:</h6>
<code>python -m json.tool ~/.claude.json > /dev/null && echo "Valid JSON" || echo "Invalid JSON"</code>
</div>
</div>
</div>
</div>
<!-- Q8 -->
<div class="accordion-item border-0 faq-item" data-keywords="statistics zero empty projects showing wrong data recalculate">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#trouble2">
<i class="fas fa-chart-line me-2 text-primary"></i>
Project statistics are showing zeros. How to fix?
</button>
</h2>
<div id="trouble2" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
<div class="accordion-body">
<p>This commonly happens after importing data. The statistics need to be recalculated.</p>
<div class="alert alert-success">
<i class="fas fa-wrench me-2"></i>
<strong>Quick Fix:</strong> Run the recalculation script
</div>
<div class="bg-dark text-light p-3 rounded mb-3">
<h6 class="text-light">Run this command in your installation directory:</h6>
<code>python recalculate_project_stats.py</code>
</div>
<p>This script will:</p>
<ul>
<li>Recalculate session counts and duration</li>
<li>Count file modifications and line changes</li>
<li>Update last session times</li>
<li>Fix all project statistics</li>
</ul>
<p class="mb-0"><strong>Note:</strong> The process may take a few minutes for large datasets.</p>
</div>
</div>
</div>
<!-- Q9 -->
<div class="accordion-item border-0 faq-item" data-keywords="hooks not working automatic tracking session start end">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#trouble3">
<i class="fas fa-unlink me-2 text-warning"></i>
Hooks are not working. Sessions aren't being tracked automatically.
</button>
</h2>
<div id="trouble3" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
<div class="accordion-body">
<p><strong>Checklist to troubleshoot hooks:</strong></p>
<div class="row">
<div class="col-md-6">
<h6>Server Status:</h6>
<ul>
<li>✅ Tracker server is running</li>
<li>✅ Server accessible at localhost:8000</li>
<li>✅ No firewall blocking connections</li>
<li>✅ Check server logs for errors</li>
</ul>
</div>
<div class="col-md-6">
<h6>Configuration:</h6>
<ul>
<li>✅ Settings.json file exists</li>
<li>✅ Hook URLs are correct</li>
<li>✅ JSON syntax is valid</li>
<li>✅ curl is installed</li>
</ul>
</div>
</div>
<div class="bg-dark text-light p-3 rounded mt-3">
<h6 class="text-light">Test hook manually:</h6>
<code>curl -X POST http://localhost:8000/api/sessions/start -H 'Content-Type: application/json' -d '{"project_path": "/test", "start_time": "2024-01-01T12:00:00"}'</code>
</div>
<div class="alert alert-info mt-3">
<i class="fas fa-book me-2"></i>
See the <a href="/dashboard/docs/hook-setup">Hook Setup Guide</a> for detailed troubleshooting steps.
</div>
</div>
</div>
</div>
<!-- Q10 -->
<div class="accordion-item border-0 faq-item" data-keywords="server won't start port error permission database">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#trouble4">
<i class="fas fa-server me-2 text-danger"></i>
The server won't start. What's wrong?
</button>
</h2>
<div id="trouble4" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
<div class="accordion-body">
<p><strong>Common issues and solutions:</strong></p>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Error</th>
<th>Cause</th>
<th>Solution</th>
</tr>
</thead>
<tbody>
<tr>
<td>Port 8000 in use</td>
<td>Another service using port</td>
<td>Kill process or use different port</td>
</tr>
<tr>
<td>Permission denied</td>
<td>Insufficient file permissions</td>
<td>Check directory permissions</td>
</tr>
<tr>
<td>Module not found</td>
<td>Missing dependencies</td>
<td>Run <code>pip install -r requirements.txt</code></td>
</tr>
<tr>
<td>Database error</td>
<td>Corrupted database</td>
<td>Delete <code>data/tracker.db</code> and restart</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-dark text-light p-3 rounded mt-3">
<h6 class="text-light">Check what's using port 8000:</h6>
<p class="mb-2"><strong>macOS/Linux:</strong> <code>lsof -i :8000</code></p>
<p class="mb-0"><strong>Windows:</strong> <code>netstat -ano | findstr :8000</code></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Usage Questions -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-info text-white">
<h3 class="mb-0"><i class="fas fa-users me-2"></i>Usage Questions</h3>
</div>
<div class="card-body">
<div class="accordion" id="usageAccordion">
<!-- Q11 -->
<div class="accordion-item border-0 faq-item" data-keywords="search conversations find messages history filter">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#usage1">
<i class="fas fa-search me-2 text-primary"></i>
How do I search through my conversations?
</button>
</h2>
<div id="usage1" class="accordion-collapse collapse" data-bs-parent="#usageAccordion">
<div class="accordion-body">
<p>The <a href="/dashboard/conversations">Conversations</a> page provides powerful search capabilities:</p>
<div class="row">
<div class="col-md-6">
<h6>Search Options:</h6>
<ul>
<li><strong>Text Search:</strong> Search message content</li>
<li><strong>Project Filter:</strong> Filter by specific project</li>
<li><strong>Date Range:</strong> Filter by time period</li>
<li><strong>Role Filter:</strong> User vs Assistant messages</li>
</ul>
</div>
<div class="col-md-6">
<h6>Search Tips:</h6>
<ul>
<li>Use quotes for exact phrases</li>
<li>Search is case-insensitive</li>
<li>Combine filters for precise results</li>
<li>Use wildcards (*) for partial matches</li>
</ul>
</div>
</div>
<div class="alert alert-info">
<i class="fas fa-lightbulb me-2"></i>
<strong>Pro Tip:</strong> Use the project filter to focus on conversations from specific coding projects.
</div>
</div>
</div>
</div>
<!-- Q12 -->
<div class="accordion-item border-0 faq-item" data-keywords="export data backup conversations sessions save">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#usage2">
<i class="fas fa-download me-2 text-success"></i>
Can I export my data or create backups?
</button>
</h2>
<div id="usage2" class="accordion-collapse collapse" data-bs-parent="#usageAccordion">
<div class="accordion-body">
<p><strong>Yes! You have full control over your data:</strong></p>
<div class="row">
<div class="col-md-6">
<h6>Database Backup:</h6>
<p>The complete database is stored in:</p>
<code class="d-block p-2 bg-light rounded">./data/tracker.db</code>
<p class="mt-2 small text-muted">Simply copy this file to create a complete backup.</p>
</div>
<div class="col-md-6">
<h6>API Export:</h6>
<p>Use the API to export specific data:</p>
<ul class="small">
<li>GET /api/projects (all projects)</li>
<li>GET /api/sessions (all sessions)</li>
<li>GET /api/conversations (all conversations)</li>
</ul>
</div>
</div>
<div class="alert alert-success">
<i class="fas fa-shield-alt me-2"></i>
<strong>Recommendation:</strong> Regularly backup the <code>data/</code> directory to preserve your development history.
</div>
</div>
</div>
</div>
<!-- Q13 -->
<div class="accordion-item border-0 faq-item" data-keywords="delete remove data project session conversation clear">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#usage3">
<i class="fas fa-trash me-2 text-danger"></i>
How do I delete specific projects or conversations?
</button>
</h2>
<div id="usage3" class="accordion-collapse collapse" data-bs-parent="#usageAccordion">
<div class="accordion-body">
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle me-2"></i>
<strong>Note:</strong> Currently, there's no built-in UI for deleting individual items. This feature is planned for future releases.
</div>
<p><strong>Workarounds:</strong></p>
<ol>
<li class="mb-2"><strong>Database Access:</strong> Use an SQLite client to directly modify the database</li>
<li class="mb-2"><strong>Fresh Start:</strong> Delete the entire database file and re-import</li>
<li class="mb-2"><strong>API (Advanced):</strong> Use custom scripts with the API endpoints</li>
</ol>
<div class="bg-dark text-light p-3 rounded">
<h6 class="text-light">Nuclear option - Clear all data:</h6>
<code>rm data/tracker.db && python main.py</code>
<br><small class="text-muted">This will create a fresh database on next startup</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Performance & Optimization -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-secondary text-white">
<h3 class="mb-0"><i class="fas fa-tachometer-alt me-2"></i>Performance & Optimization</h3>
</div>
<div class="card-body">
<div class="accordion" id="performanceAccordion">
<!-- Q14 -->
<div class="accordion-item border-0 faq-item" data-keywords="slow performance large datasets optimize speed">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#perf1">
<i class="fas fa-clock me-2 text-warning"></i>
The dashboard is slow with large amounts of data. How to optimize?
</button>
</h2>
<div id="perf1" class="accordion-collapse collapse" data-bs-parent="#performanceAccordion">
<div class="accordion-body">
<p><strong>Optimization strategies for large datasets:</strong></p>
<div class="row">
<div class="col-md-6">
<h6>Quick Fixes:</h6>
<ul>
<li>Use date filters to limit results</li>
<li>Filter by specific projects</li>
<li>Close unused browser tabs</li>
<li>Restart the server periodically</li>
</ul>
</div>
<div class="col-md-6">
<h6>Advanced Options:</h6>
<ul>
<li>Increase server memory allocation</li>
<li>Use pagination for large results</li>
<li>Consider archiving old data</li>
<li>Run server on more powerful hardware</li>
</ul>
</div>
</div>
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
<strong>Typical Performance:</strong> The system handles 10,000+ conversations efficiently. Performance degrades with 50,000+ entries.
</div>
</div>
</div>
</div>
<!-- Q15 -->
<div class="accordion-item border-0 faq-item" data-keywords="disk space database size storage cleanup">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#perf2">
<i class="fas fa-hdd me-2 text-info"></i>
How much disk space does the tracker use?
</button>
</h2>
<div id="perf2" class="accordion-collapse collapse" data-bs-parent="#performanceAccordion">
<div class="accordion-body">
<p><strong>Typical storage requirements:</strong></p>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Data Size</th>
<th>Conversations</th>
<th>Disk Usage</th>
<th>Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small</td>
<td>< 1,000</td>
<td>< 10MB</td>
<td>Excellent</td>
</tr>
<tr>
<td>Medium</td>
<td>1,000 - 10,000</td>
<td>10-100MB</td>
<td>Good</td>
</tr>
<tr>
<td>Large</td>
<td>10,000 - 50,000</td>
<td>100MB-1GB</td>
<td>Fair</td>
</tr>
<tr>
<td>Very Large</td>
<td>> 50,000</td>
<td>> 1GB</td>
<td>Consider archiving</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-dark text-light p-3 rounded mt-3">
<h6 class="text-light">Check current database size:</h6>
<p class="mb-2"><strong>Unix:</strong> <code>du -h data/tracker.db</code></p>
<p class="mb-0"><strong>Windows:</strong> <code>dir data\tracker.db</code></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="col-lg-4">
<div class="sticky-top" style="top: 2rem;">
<!-- Quick Help -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-primary text-white">
<h5 class="mb-0"><i class="fas fa-life-ring me-2"></i>Quick Help</h5>
</div>
<div class="card-body">
<div class="d-grid gap-2">
<a href="/dashboard/docs/getting-started" class="btn btn-outline-primary btn-sm">
<i class="fas fa-rocket me-1"></i>
Getting Started
</a>
<a href="/dashboard/docs/hook-setup" class="btn btn-outline-success btn-sm">
<i class="fas fa-link me-1"></i>
Hook Setup Guide
</a>
<a href="/dashboard/docs/api-reference" class="btn btn-outline-info btn-sm">
<i class="fas fa-code me-1"></i>
API Reference
</a>
</div>
</div>
</div>
<!-- Categories -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-light">
<h6 class="mb-0"><i class="fas fa-tags me-2"></i>Categories</h6>
</div>
<div class="card-body">
<div class="d-flex flex-wrap gap-2">
<span class="badge bg-primary" data-filter="general">General</span>
<span class="badge bg-success" data-filter="setup">Setup</span>
<span class="badge bg-warning" data-filter="troubleshooting">Troubleshooting</span>
<span class="badge bg-info" data-filter="usage">Usage</span>
<span class="badge bg-secondary" data-filter="performance">Performance</span>
</div>
</div>
</div>
<!-- Common Issues -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-warning text-dark">
<h6 class="mb-0"><i class="fas fa-exclamation-triangle me-2"></i>Top Issues</h6>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-2">
<i class="fas fa-circle text-danger me-2" style="font-size: 0.5rem;"></i>
<a href="#trouble2" class="text-decoration-none small">Statistics showing zeros</a>
</li>
<li class="mb-2">
<i class="fas fa-circle text-warning me-2" style="font-size: 0.5rem;"></i>
<a href="#trouble1" class="text-decoration-none small">Import failing</a>
</li>
<li class="mb-2">
<i class="fas fa-circle text-info me-2" style="font-size: 0.5rem;"></i>
<a href="#trouble3" class="text-decoration-none small">Hooks not working</a>
</li>
<li class="mb-0">
<i class="fas fa-circle text-secondary me-2" style="font-size: 0.5rem;"></i>
<a href="#trouble4" class="text-decoration-none small">Server won't start</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// FAQ Search functionality
document.getElementById('faqSearch').addEventListener('input', function(e) {
const searchTerm = e.target.value.toLowerCase();
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const keywords = item.dataset.keywords.toLowerCase();
const text = item.textContent.toLowerCase();
if (keywords.includes(searchTerm) || text.includes(searchTerm) || searchTerm === '') {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
// Category filtering
document.querySelectorAll('[data-filter]').forEach(badge => {
badge.addEventListener('click', function() {
const filter = this.dataset.filter.toLowerCase();
const faqItems = document.querySelectorAll('.faq-item');
// Toggle active state
document.querySelectorAll('[data-filter]').forEach(b => b.classList.remove('active'));
this.classList.add('active');
faqItems.forEach(item => {
const keywords = item.dataset.keywords.toLowerCase();
if (keywords.includes(filter) || filter === '') {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
</script>
{% endblock %}