KArtSell.Aegis/frontend/src/features/portfolio/pages/RebalanceForm.vue

<template>
  <div class="rebalance-form">
    <div class="header">
      <h1>Portfolio Rebalancing</h1>
      <p class="subtitle">Adjust target weights and trigger rebalancing</p>
    </div>

    <div class="content">
      <!-- Current Composition -->
      <div class="card">
        <h2>Current Composition</h2>
        <table class="positions-table">
          <thead>
            <tr>
              <th>Symbol</th>
              <th>Quantity</th>
              <th>Market Price</th>
              <th>Market Value</th>
              <th>Weight %</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="pos in currentPositions" :key="pos.symbol">
              <td>{{ pos.symbol }}</td>
              <td>{{ pos.quantity.toLocaleString() }}</td>
              <td>${{ pos.marketPrice.toFixed(2) }}</td>
              <td>${{ pos.marketValue.toLocaleString() }}</td>
              <td>{{ pos.weightPercent.toFixed(1) }}%</td>
            </tr>
          </tbody>
        </table>
        <div class="total">
          <strong>Total Portfolio Value:</strong> ${{ totalValue.toLocaleString() }}
        </div>
      </div>

      <!-- Target Weights Form -->
      <div class="card">
        <h2>Set Target Weights</h2>
        <div class="form-group">
          <div class="drift-threshold">
            <label>Drift Threshold %:</label>
            <input v-model.number="driftThreshold" type="number" min="0" max="50" step="1" />
          </div>
        </div>

        <div class="targets">
          <div v-for="(target, idx) in targetWeights" :key="idx" class="target-row">
            <input v-model="target.symbol" placeholder="Symbol" class="symbol-input" />
            <input v-model.number="target.targetPercent" type="number" min="0" max="100" step="1" placeholder="%" class="percent-input" />
            <button @click="removeTarget(idx)" class="btn-remove">✕</button>
          </div>
        </div>

        <div class="actions">
          <button @click="addTarget" class="btn-secondary">+ Add Symbol</button>
          <button @click="triggerRebalance" class="btn-primary">Trigger Rebalance</button>
        </div>
      </div>

      <!-- Results -->
      <div v-if="jobResult" class="card result">
        <h2>Rebalance Queued</h2>
        <div class="result-item">
          <span>Job ID:</span>
          <span class="mono">{{ jobResult.jobId }}</span>
        </div>
        <div class="result-item">
          <span>Status:</span>
          <span class="status-badge">{{ jobResult.status }}</span>
        </div>
        <div class="result-item">
          <span>Estimated Trades:</span>
          <span>{{ jobResult.estimatedTradeCount }}</span>
        </div>
        <div class="result-item">
          <span>Estimated Cost:</span>
          <span>${{ jobResult.estimatedCost.toFixed(2) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Position {
  symbol: string
  quantity: number
  marketPrice: number
  marketValue: number
  weightPercent: number
}

interface TargetWeight {
  symbol: string
  targetPercent: number
}

interface JobResult {
  jobId: string
  status: string
  estimatedTradeCount: number
  estimatedCost: number
}

// Mock data
const currentPositions = ref<Position[]>([
  { symbol: 'AAPL', quantity: 100, marketPrice: 150.25, marketValue: 15025, weightPercent: 35.3 },
  { symbol: 'MSFT', quantity: 80, marketPrice: 320.50, marketValue: 25640, weightPercent: 60.2 },
  { symbol: 'GOOGL', quantity: 50, marketPrice: 140.75, marketValue: 7037.5, weightPercent: 16.5 },
])

const driftThreshold = ref(5)
const targetWeights = ref<TargetWeight[]>([
  { symbol: 'AAPL', targetPercent: 40 },
  { symbol: 'MSFT', targetPercent: 35 },
  { symbol: 'GOOGL', targetPercent: 25 },
])
const jobResult = ref<JobResult | null>(null)

const totalValue = ref(42700)

const addTarget = () => {
  targetWeights.value.push({ symbol: '', targetPercent: 0 })
}

const removeTarget = (idx: number) => {
  targetWeights.value.splice(idx, 1)
}

const triggerRebalance = async () => {
  // Mock API call
  jobResult.value = {
    jobId: '550e8400-e29b-41d4-a716-446655440001',
    status: 'Queued',
    estimatedTradeCount: 3,
    estimatedCost: 127.35,
  }
}
</script>

<style scoped>
.rebalance-form {
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.header {
  margin-bottom: 2rem;
}

.header h1 {
  font-size: 2rem;
  margin: 0 0 0.5rem 0;
}

.subtitle {
  color: var(--text-secondary);
  margin: 0;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  background: var(--surface-elevated);
}

.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
}

.positions-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.positions-table thead {
  background-color: var(--surface-secondary);
}

.positions-table th {
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
}

.positions-table td {
  padding: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.total {
  padding: 1rem;
  background-color: var(--surface-secondary);
  border-radius: 4px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.drift-threshold {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.drift-threshold label {
  font-weight: 600;
  min-width: 150px;
}

.drift-threshold input {
  width: 100px;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.targets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.target-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.symbol-input {
  flex: 1;
  min-width: 100px;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.percent-input {
  width: 80px;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.btn-remove {
  padding: 0.5rem 0.75rem;
  background-color: #fee2e2;
  color: #991b1b;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.actions {
  display: flex;
  gap: 1rem;
}

.btn-primary {
  flex: 1;
  padding: 0.75rem 1.5rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: #2563eb;
}

.btn-secondary {
  padding: 0.75rem 1.5rem;
  background-color: #e5e7eb;
  color: #1f2937;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.result {
  background-color: #f0fdf4;
  border-color: #10b981;
}

.result-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
}

.result-item:last-child {
  border-bottom: none;
}

.result-item span:first-child {
  font-weight: 600;
}

.mono {
  font-family: monospace;
  color: #6366f1;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 4px;
  font-size: 0.875rem;
}
</style>