# 📘 setup-guide.md — NetCop AI Hub Agent Frontend Refactor This guide will help you modularize your AI agent pages using the **Data Analyzer layout as the base template** and build a reusable, theme-driven UI system. --- ## ✅ 1. Define Folder Structure Create the following Django template structure: ``` templates/ ├── base_agent.html ├── agents/ │ ├── data_analyzer.html │ └── weather_reporter.html ├── components/ │ ├── agent_header.html │ ├── wallet_card.html │ ├── how_it_works_widget.html │ ├── quick_agents_panel.html │ ├── results_block.html │ ├── processing_status.html │ └── ... (other shared components) static/ └── css/ └── theme.css ``` --- ## 🎨 2. Create `theme.css` Save this as `static/css/theme.css` and link it in `base_agent.html`. > This file includes unified tokens: spacing, colors, radius, shadows, typography, responsive styles. (Refer to the generated `theme.css` in the conversation.) --- ## 📐 3. Create `base_agent.html` ```django {% extends "base.html" %} {% load static %} {% block title %}{{ agent_title }} - NetCop AI Hub{% endblock %} {% block extra_css %} {% endblock %} {% block content %}
{% include "components/agent_header.html" %} {% block agent_main %}{% endblock %} {% include "components/processing_status.html" %} {% include "components/results_block.html" %} {% include "components/quick_agents_panel.html" %}
{% endblock %} ``` --- ## 🧩 4. Extract Components ### `agent_header.html` ```django

{{ agent_title }}

{{ agent_subtitle }}

{% include "components/wallet_card.html" %}
``` ### `wallet_card.html` ```django

Your Wallet

đŸ’ŗ
{{ user.wallet_balance|floatformat:2 }} AED
Available Balance
``` ### `how_it_works_widget.html` ```django

ℹī¸ How It Works

{% if steps == "data" %}
  1. Upload your data file
  2. Choose analysis type
  3. Get AI-powered insights
  4. Copy or download results
{% elif steps == "weather" %}
  1. Enter any city name worldwide
  2. Choose your preferred report type
  3. Get real-time weather data
  4. Copy or download detailed reports
{% endif %}
``` ### `quick_agents_panel.html` ```django ``` ### `results_block.html` ```django ``` ### `processing_status.html` ```django

âŗ Processing Status

âŗ
Analyzing your data...
Processing file...
``` --- ## 🔁 5. Convert `data_analyzer.html` to Use Base Template ```django {% extends "base_agent.html" %} {% block agent_main %}
...
{% include "components/how_it_works_widget.html" with steps="data" %}
{% endblock %} ``` --- ## 🧠 6. All Other Agents Will: - Extend `base_agent.html` - Use `{% block agent_main %}` for agent-specific content - Include `how_it_works_widget.html` and proper context