secubox-openwrt/secubox-tools/webui/templates/partials/workspace_overview.html
CyberMind-FR 0d6aaa1111 feat(webui): add Project Hub workspace and remove Command Center glow effects
- Add complete Project Hub & Workspace Interface implementation
  - New data models: Project, ModuleKit, Workspace
  - 3 fixture projects (cybermind.fr, cybermood.eu, secubox-c3)
  - 4 module kits (Security, Network, Automation, Media)
  - Workspace routes with project switching and kit installation
  - 4 workspace tabs: Overview, Module Kits, Devices, Composer
  - New navigation item: Workspace (7th section)

- Remove all glowing effects from UI
  - Remove Command Center widget glow and backdrop blur
  - Remove device status indicator glow
  - Remove toggle button glow effects

- Extend DataStore with 13 new methods for workspace management
- Add 270+ lines of workspace-specific CSS with responsive layouts
- Create workspace templates and result partials

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-03 08:10:22 +01:00

97 lines
3.8 KiB
HTML

<!-- Project Dashboard Overview -->
{% set active_project = projects|selectattr('active')|first %}
{% if active_project %}
<section class="panel">
<div class="panel-head">
<div>
<h2>{{ active_project.emoji }} {{ active_project.name }}</h2>
<p>{{ active_project.description }}</p>
</div>
</div>
<!-- Project Stats Grid -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
<div class="stat-card">
<div class="stat-value">{{ active_project.devices|length }}</div>
<div class="stat-label">Devices</div>
</div>
<div class="stat-card">
<div class="stat-value">{{ active_project.modules|length }}</div>
<div class="stat-label">Modules</div>
</div>
<div class="stat-card">
<div class="stat-value">{{ active_project.profiles|length }}</div>
<div class="stat-label">Profiles</div>
</div>
<div class="stat-card">
<div class="stat-value">{{ active_project.project_type }}</div>
<div class="stat-label">Type</div>
</div>
</div>
<!-- Devices Status -->
<div class="card" style="margin-bottom: 1rem;">
<div class="card-header">
<h3>🌐 Devices Status</h3>
</div>
<div class="card-body">
{% if active_project.devices %}
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem;">
{% for device_id in active_project.devices %}
{% set device = devices|selectattr('id', 'equalto', device_id)|first %}
{% if device %}
<div class="device-card">
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
<span class="device-status {% if device.active %}online{% else %}offline{% endif %}"></span>
<strong>{{ device.emoji }} {{ device.name }}</strong>
</div>
<p class="muted" style="font-size: 0.9rem;">{{ device.host }}:{{ device.port }}</p>
{% if device.last_connected %}
<p class="muted" style="font-size: 0.8rem;">Last: {{ device.last_connected }}</p>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
{% else %}
<p class="muted">No devices configured for this project.</p>
{% endif %}
</div>
</div>
<!-- Installed Modules -->
<div class="card">
<div class="card-header">
<h3>🧩 Installed Modules</h3>
</div>
<div class="card-body">
{% if active_project.modules %}
<div class="tag-row">
{% for module_id in active_project.modules %}
<span class="chip">{{ module_id }}</span>
{% endfor %}
</div>
{% else %}
<p class="muted">No modules installed. Browse the Module Kits tab to get started!</p>
{% endif %}
</div>
</div>
<!-- Quick Actions -->
<div class="card-footer" style="display: flex; gap: 0.5rem; margin-top: 1rem;">
<button class="btn primary" disabled>🔄 Sync Modules</button>
<button class="btn ghost" disabled>💾 Backup Config</button>
<button class="btn ghost" disabled>📊 View Analytics</button>
</div>
</section>
{% else %}
<section class="panel">
<div style="text-align: center; padding: 3rem; color: var(--text-muted);">
<h2>No Active Project</h2>
<p>Select a project from the dropdown above to get started.</p>
</div>
</section>
{% endif %}