faber-finances/app/pages/test.vue

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 py-8">
      <h1 class="text-2xl font-bold mb-6">Cash Flow Test Page</h1>

      <!-- Test Results -->
      <UCard class="mb-6">
        <template #header>
          <h2 class="text-lg font-semibold">Component Test Results</h2>
        </template>
        <div class="space-y-4">
          <div
            v-for="test in testResults"
            :key="test.name"
            class="flex items-center justify-between">
            <span>{{ test.name }}</span>
            <UBadge :color="test.passed ? 'green' : 'red'">
              {{ test.passed ? "PASS" : "FAIL" }}
            </UBadge>
          </div>
        </div>
      </UCard>

      <!-- Cash Flow Summary -->
      <UCard class="mb-6">
        <template #header>
          <h2 class="text-lg font-semibold">Cash Flow Summary</h2>
        </template>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div class="text-center">
            <p class="text-sm text-gray-600">Current Balance</p>
            <p class="text-xl font-bold">
              {{ formatCurrency(cashFlow.currentBalance.value) }}
            </p>
          </div>
          <div class="text-center">
            <p class="text-sm text-gray-600">Transactions</p>
            <p class="text-xl font-bold">
              {{ cashFlow.transactions.value.length }}
            </p>
          </div>
          <div class="text-center">
            <p class="text-sm text-gray-600">Monthly Burn</p>
            <p class="text-xl font-bold">
              {{ formatCurrency(cashFlow.monthlyBurnRate.value) }}
            </p>
          </div>
          <div class="text-center">
            <p class="text-sm text-gray-600">Runway Days</p>
            <p class="text-xl font-bold">
              {{ Math.round(cashFlow.runwayDays.value) }}
            </p>
          </div>
        </div>
      </UCard>

      <!-- Mini Chart Test -->
      <UCard class="mb-6">
        <template #header>
          <h2 class="text-lg font-semibold">Chart Test (8 weeks)</h2>
        </template>
        <CashFlowChart :data="testProjections" :critical-balance="30000" />
      </UCard>

      <!-- Mini Transaction Manager Test -->
      <UCard>
        <template #header>
          <h2 class="text-lg font-semibold">Transaction Manager Test</h2>
        </template>
        <RecurringTransactionManager
          :transactions="cashFlow.transactions.value"
          @add-transaction="handleAddTransaction"
          @edit-transaction="handleEditTransaction" />
      </UCard>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Transaction } from "~/types/cashflow";

// SEO
useSeoMeta({
  title: "Test Page",
  description: "Testing cash flow functionality",
});

// Initialize cash flow
const cashFlow = useCashFlow();

// Test data
const testTransactions: Transaction[] = [
  {
    id: "test-1",
    date: new Date("2024-01-01"),
    description: "Test Salary",
    amount: 10000,
    category: "Income",
    type: "recurring",
    frequency: "monthly",
    probability: 1.0,
    isConfirmed: true,
    status: "committed",
  },
  {
    id: "test-2",
    date: new Date("2024-01-01"),
    description: "Test Rent",
    amount: -2000,
    category: "Expense: Need",
    type: "recurring",
    frequency: "monthly",
    probability: 1.0,
    isConfirmed: true,
    status: "committed",
  },
];

// Test results
const testResults = computed(() => {
  const results = [];

  // Test 1: Composable loads
  try {
    results.push({
      name: "useCashFlow composable loads",
      passed: !!cashFlow,
    });
  } catch {
    results.push({
      name: "useCashFlow composable loads",
      passed: false,
    });
  }

  // Test 2: Transaction updates work
  try {
    results.push({
      name: "Transaction updates work",
      passed: typeof cashFlow.updateTransactions === "function",
    });
  } catch {
    results.push({
      name: "Transaction updates work",
      passed: false,
    });
  }

  // Test 3: Projections generate
  try {
    const projections = cashFlow.generateWeeklyProjections(4);
    results.push({
      name: "Weekly projections generate",
      passed: Array.isArray(projections) && projections.length > 0,
    });
  } catch {
    results.push({
      name: "Weekly projections generate",
      passed: false,
    });
  }

  // Test 4: Runway calculation works
  try {
    const runway = cashFlow.runwayDays.value;
    results.push({
      name: "Runway calculation works",
      passed: typeof runway === "number",
    });
  } catch {
    results.push({
      name: "Runway calculation works",
      passed: false,
    });
  }

  return results;
});

const testProjections = computed(() => {
  return cashFlow.generateWeeklyProjections(8);
});

const handleAddTransaction = () => {
  console.log("Add transaction test");
};

const handleEditTransaction = (transaction: Transaction) => {
  console.log("Edit transaction test:", transaction.description);
};

const formatCurrency = (amount: number) => {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(amount);
};

// Initialize test data
onMounted(() => {
  cashFlow.setCurrentBalance(75000);
  cashFlow.updateTransactions(testTransactions);
});
</script>