{% extends 'base.html' %} {% load static %} {% block title %}Dashboard -
AIBOTXCHANGE{% endblock %} {% block extra_head %}
<style>
  .stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  .stat-card-green {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  }
  .stat-card-orange {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  }
  .stat-card-red {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  }
</style>
{% endblock %} {% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Welcome Header -->
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">
      Welcome back, {{ user.first_name|default:user.username }}!
    </h1>
    <p class="mt-2 text-gray-600">Here's your trading portfolio overview</p>
  </div>

  <!-- Statistics Cards -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="stat-card rounded-lg shadow-lg p-6 text-white">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <i class="fas fa-chart-line text-2xl"></i>
        </div>
        <div class="ml-4">
          <div class="text-sm font-medium opacity-80">Total Profit</div>
          <div class="text-2xl font-bold">
            ${{ total_profit|floatformat:2 }}
          </div>
        </div>
      </div>
    </div>

    <div class="stat-card-green rounded-lg shadow-lg p-6 text-white">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <i class="fas fa-wallet text-2xl"></i>
        </div>
        <div class="ml-4">
          <div class="text-sm font-medium opacity-80">MT5 Accounts</div>
          <div class="text-2xl font-bold">{{ stats.total_accounts }}</div>
        </div>
      </div>
    </div>

    <div class="stat-card-orange rounded-lg shadow-lg p-6 text-white">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <i class="fas fa-robot text-2xl"></i>
        </div>
        <div class="ml-4">
          <div class="text-sm font-medium opacity-80">Active Strategies</div>
          <div class="text-2xl font-bold">{{ stats.active_subscriptions }}</div>
        </div>
      </div>
    </div>

    <div class="stat-card-red rounded-lg shadow-lg p-6 text-white">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <i class="fas fa-percentage text-2xl"></i>
        </div>
        <div class="ml-4">
          <div class="text-sm font-medium opacity-80">Average ROI</div>
          <div class="text-2xl font-bold">{{ avg_roi|floatformat:1 }}%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Main Content -->
    <div class="lg:col-span-2 space-y-8">
      <!-- Active Subscriptions -->
      <div class="bg-white shadow rounded-lg">
        <div
          class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"
        >
          <h2 class="text-lg font-medium text-gray-900">
            Active Subscriptions
          </h2>
          <a
            href="{% url 'strategies:marketplace' %}"
            class="text-sm text-blue-600 hover:text-blue-500"
          >
            Browse More Strategies
          </a>
        </div>
        <div class="px-6 py-6">
          {% if active_subscriptions %}
          <div class="space-y-4">
            {% for subscription in active_subscriptions %}
            <div
              class="border rounded-lg p-4 hover:shadow-md transition duration-300"
            >
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  {{ subscription.strategy.name }}
                </h3>
                <span class="status-badge status-{{ subscription.status }}">
                  {{ subscription.get_status_display }}
                </span>
              </div>
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div>
                  <span class="text-gray-500">Asset:</span>
                  <div class="font-semibold">
                    {{ subscription.strategy.primary_asset }}
                  </div>
                </div>
                <div>
                  <span class="text-gray-500">Profit:</span>
                  <div
                    class="font-semibold {% if subscription.total_profit >= 0 %}text-green-600{% else %}text-red-600{% endif %}"
                  >
                    ${{ subscription.total_profit|floatformat:2 }}
                  </div>
                </div>
                <div>
                  <span class="text-gray-500">ROI:</span>
                  <div
                    class="font-semibold {% if subscription.roi_percent >= 0 %}text-green-600{% else %}text-red-600{% endif %}"
                  >
                    {{ subscription.roi_percent|floatformat:1 }}%
                  </div>
                </div>
                <div>
                  <span class="text-gray-500">Account:</span>
                  <div class="font-semibold">
                    {{ subscription.mt5_account.account_name }}
                  </div>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="text-center py-8">
            <i class="fas fa-robot text-4xl text-gray-400 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">
              No Active Subscriptions
            </h3>
            <p class="text-gray-600 mb-4">
              Start copy trading by subscribing to a profitable strategy
            </p>
            <a href="{% url 'strategies:marketplace' %}" class="btn-primary">
              Browse Strategies
            </a>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- MT5 Accounts -->
      <div class="bg-white shadow rounded-lg">
        <div
          class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"
        >
          <h2 class="text-lg font-medium text-gray-900">MT5 Accounts</h2>
          <a
            href="{% url 'accounts:add_mt5_account' %}"
            class="text-sm text-blue-600 hover:text-blue-500"
          >
            Add Account
          </a>
        </div>
        <div class="px-6 py-6">
          {% if mt5_accounts %}
          <div class="space-y-4">
            {% for account in mt5_accounts %}
            <div class="border rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  {{ account.account_name }}
                </h3>
                <span class="status-badge status-{{ account.status }}">
                  {{ account.get_status_display }}
                </span>
              </div>
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div>
                  <span class="text-gray-500">Login:</span>
                  <div class="font-semibold">{{ account.login_id }}</div>
                </div>
                <div>
                  <span class="text-gray-500">Broker:</span>
                  <div class="font-semibold">
                    {{ account.get_broker_display }}
                  </div>
                </div>
                <div>
                  <span class="text-gray-500">Balance:</span>
                  <div class="font-semibold">
                    ${{ account.balance|floatformat:2 }}
                  </div>
                </div>
                <div>
                  <span class="text-gray-500">Equity:</span>
                  <div class="font-semibold">
                    ${{ account.equity|floatformat:2 }}
                  </div>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="text-center py-8">
            <i class="fas fa-chart-line text-4xl text-gray-400 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">
              No MT5 Accounts
            </h3>
            <p class="text-gray-600 mb-4">
              Connect your MetaTrader 5 account to start trading
            </p>
            <a href="{% url 'accounts:add_mt5_account' %}" class="btn-primary">
              Add MT5 Account
            </a>
          </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="space-y-8">
      <!-- Recent Messages -->
      <div class="bg-white shadow rounded-lg">
        <div
          class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"
        >
          <h2 class="text-lg font-medium text-gray-900">Recent Messages</h2>
          <a
            href="{% url 'accounts:messages' %}"
            class="text-sm text-blue-600 hover:text-blue-500"
          >
            View All
          </a>
        </div>
        <div class="px-6 py-6">
          {% if recent_messages %}
          <div class="space-y-4">
            {% for message in recent_messages %}
            <div class="border-l-4 border-blue-400 pl-4">
              <div class="flex justify-between items-start">
                <h4 class="text-sm font-medium text-gray-900">
                  {{ message.subject }}
                </h4>
                <span class="text-xs text-gray-500"
                  >{{ message.created_at|timesince }} ago</span
                >
              </div>
              <p class="text-sm text-gray-600 mt-1">
                {{ message.message|truncatechars:100 }}
              </p>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="text-center py-4">
            <i class="fas fa-envelope text-2xl text-gray-400 mb-2"></i>
            <p class="text-sm text-gray-500">No messages</p>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Recent Payments -->
      <div class="bg-white shadow rounded-lg">
        <div
          class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"
        >
          <h2 class="text-lg font-medium text-gray-900">Recent Payments</h2>
          <a
            href="{% url 'payments:history' %}"
            class="text-sm text-blue-600 hover:text-blue-500"
          >
            View All
          </a>
        </div>
        <div class="px-6 py-6">
          {% if recent_payments %}
          <div class="space-y-4">
            {% for payment in recent_payments %}
            <div class="flex justify-between items-center">
              <div>
                <div class="text-sm font-medium text-gray-900">
                  {{ payment.strategy.name }}
                </div>
                <div class="text-xs text-gray-500">
                  {{ payment.created_at|date:"M d, Y" }}
                </div>
              </div>
              <div class="text-right">
                <div class="text-sm font-semibold text-gray-900">
                  ${{ payment.amount|floatformat:2 }}
                </div>
                <div class="text-xs status-badge status-{{ payment.status }}">
                  {{ payment.get_status_display }}
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="text-center py-4">
            <i class="fas fa-credit-card text-2xl text-gray-400 mb-2"></i>
            <p class="text-sm text-gray-500">No payments yet</p>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Quick Actions -->
      <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
          <h2 class="text-lg font-medium text-gray-900">Quick Actions</h2>
        </div>
        <div class="px-6 py-6">
          <div class="space-y-3">
            <a
              href="{% url 'strategies:marketplace' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-shopping-cart text-blue-600 mr-3"></i>
              <span class="text-sm font-medium text-gray-900"
                >Browse Strategies</span
              >
            </a>
            <a
              href="{% url 'accounts:add_mt5_account' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-plus text-green-600 mr-3"></i>
              <span class="text-sm font-medium text-gray-900"
                >Add MT5 Account</span
              >
            </a>
            <a
              href="{% url 'payments:dashboard' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-credit-card text-purple-600 mr-3"></i>
              <span class="text-sm font-medium text-gray-900"
                >Manage Payments</span
              >
            </a>
            <a
              href="{% url 'accounts:profile' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-user text-orange-600 mr-3"></i>
              <span class="text-sm font-medium text-gray-900"
                >Edit Profile</span
              >
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block extra_scripts %}
<script>
  // Auto-refresh data every 30 seconds
  setInterval(function () {
    // This would typically update real-time data via AJAX
    console.log("Auto-refreshing dashboard data...");
  }, 30000);
</script>
{% endblock %}