ai_upgrade_assistant-0.2.0-alpha2/templates/upgrade-dashboard.html.twig

{#
/**
 * @file
 * Default theme implementation for the upgrade assistant dashboard.
 *
 * Available variables:
 * - project_info: Information about the current project.
 * - recommendations: Upgrade recommendations.
 * - terminal_output: Terminal output from running commands.
 */
#}

<div class="ai-upgrade-container">
  <header class="ai-header">
    <h1 class="ai-header__title">{{ 'AI Upgrade Assistant'|t }}</h1>
    <p class="ai-header__description">{{ 'Intelligent Drupal upgrade analysis and automation'|t }}</p>
  </header>

  <div class="ai-tabs">
    <a href="#overview" class="ai-tabs__item ai-tabs__item--active">{{ 'Overview'|t }}</a>
    <a href="#recommendations" class="ai-tabs__item">{{ 'Recommendations'|t }}</a>
    <a href="#terminal" class="ai-tabs__item">{{ 'Terminal'|t }}</a>
  </div>

  <div class="ai-upgrade-grid">
    {# Project Overview Card #}
    <div class="ai-card">
      <div class="ai-card__header">
        <span class="material-icons">info</span>
        {{ 'Project Information'|t }}
      </div>
      
      <div class="ai-grid-stats">
        <div class="ai-stat-item">
          <span class="ai-stat-label">{{ 'Core Version'|t }}</span>
          <span class="ai-stat-value">{{ project_info.drupal_version }}</span>
        </div>
        
        <div class="ai-stat-item">
          <span class="ai-stat-label">{{ 'Modules'|t }}</span>
          <span class="ai-stat-value">{{ project_info.installed_modules|length }}</span>
        </div>
        
        <div class="ai-stat-item">
          <span class="ai-stat-label">{{ 'Custom'|t }}</span>
          <span class="ai-stat-value">{{ project_info.custom_modules|length }}</span>
        </div>
      </div>

      <div class="ai-card__actions">
        <button class="ai-btn ai-btn--primary start-analysis">
          <span class="material-icons">play_arrow</span>
          {{ 'Start Analysis'|t }}
        </button>
      </div>

      {% if analysis_progress %}
        <div class="ai-progress">
          <div class="ai-progress__bar" style="width: {{ analysis_progress.percentage }}%"></div>
        </div>
        <div class="ai-progress__status">{{ analysis_progress.message }}</div>
      {% endif %}
    </div>

    {# Quick Actions Card #}
    <div class="ai-card">
      <div class="ai-card__header">
        <span class="material-icons">bolt</span>
        {{ 'Quick Actions'|t }}
      </div>
      
      <div class="ai-quick-actions">
        <a href="{{ path('ai_upgrade_assistant.analyze_module') }}" class="ai-quick-action">
          <span class="material-icons">analytics</span>
          <span>{{ 'Analyze Module'|t }}</span>
        </a>
        
        <a href="{{ path('ai_upgrade_assistant.module_patches') }}" class="ai-quick-action">
          <span class="material-icons">build</span>
          <span>{{ 'View Patches'|t }}</span>
        </a>
        
        <a href="{{ path('ai_upgrade_assistant.generate_report') }}" class="ai-quick-action">
          <span class="material-icons">description</span>
          <span>{{ 'Generate Report'|t }}</span>
        </a>
        
        <a href="{{ path('ai_upgrade_assistant.settings') }}" class="ai-quick-action">
          <span class="material-icons">settings</span>
          <span>{{ 'Settings'|t }}</span>
        </a>
      </div>
    </div>

    {# Recommendations Section #}
    <div class="ai-card ai-card--full">
      <div class="ai-card__header">
        <span class="material-icons">lightbulb</span>
        {{ 'AI Recommendations'|t }}
      </div>

      {% if recommendations %}
        <div class="ai-recommendations">
          {% for recommendation in recommendations %}
            <div class="ai-recommendation">
              <div class="ai-recommendation__icon">
                {% if recommendation.priority == 'high' %}
                  <span class="material-icons" style="color: var(--color-red)">priority_high</span>
                {% elseif recommendation.priority == 'medium' %}
                  <span class="material-icons" style="color: var(--color-orange)">warning</span>
                {% else %}
                  <span class="material-icons" style="color: var(--color-blue)">info</span>
                {% endif %}
              </div>
              
              <div class="ai-recommendation__content">
                <div class="ai-recommendation__type">
                  <span class="ai-status-label ai-status-label--{{ recommendation.priority }}">
                    {{ recommendation.type|replace({'_': ' '})|title }}
                  </span>
                </div>
                
                <p class="ai-recommendation__message">{{ recommendation.message }}</p>
                
                {% if recommendation.actions %}
                  <div class="ai-recommendation__actions">
                    {% for action in recommendation.actions %}
                      <a href="{{ action.url }}" class="ai-btn ai-btn--secondary">
                        {{ action.label }}
                      </a>
                    {% endfor %}
                  </div>
                {% endif %}

                {% if recommendation.code_example %}
                  <div class="ai-code">
                    <pre><code class="language-php">{{ recommendation.code_example }}</code></pre>
                  </div>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="ai-message ai-message--info">
          <span class="material-icons">info</span>
          <span>{{ 'No recommendations available. Start an analysis to get personalized suggestions.'|t }}</span>
        </div>
      {% endif %}
    </div>

    {# Terminal Output #}
    <div class="ai-card ai-card--dark">
      <div class="ai-card__header">
        <span class="material-icons">terminal</span>
        {{ 'Terminal Output'|t }}
        <button class="ai-btn ai-btn--icon ai-terminal__clear" title="{{ 'Clear Terminal'|t }}">
          <span class="material-icons">clear_all</span>
        </button>
      </div>

      <div class="ai-terminal" id="terminal-output">
        {% if terminal_output %}
          {% for line in terminal_output %}
            <div class="ai-terminal__line">{{ line }}</div>
          {% endfor %}
        {% else %}
          <div class="ai-terminal__placeholder">
            <span class="ai-terminal__prompt">$</span>
            {{ 'No commands have been run yet.'|t }}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>