- 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>
97 lines
3.8 KiB
HTML
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 %}
|