Init commit!

app/pages/test.vue

@@ -0,0 +1,206 @@
+<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>