fix: Use absolute API URL for dashboard fetch

Author: derekchisholm

frontend/src/Dashboard.tsx

@@ -1,35 +1,17 @@
 import React, { useEffect, useState } from 'react';
+import { getTransactions, type Transaction } from './api';
 import './App.css';
 
-// Match the Backend Schema
-interface Transaction {
-  id: string;
-  type: '850' | '940' | '997';
-  direction: 'IN' | 'OUT';
-  validation: 'Valid' | 'Invalid';
-  stream: 'Test' | 'Live';
-  businessNum: string;
-  partner: string;
-  ackStatus: 'Accepted' | 'Rejected' | 'Not Acknowledged';
-  createdAt: string;
-}
-
 export const Dashboard: React.FC = () => {
   const [transactions, setTransactions] = useState<Transaction[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        // Note: Ensure your Vite proxy points /api to your backend
-        // or use the full URL if hardcoded.
-        const res = await fetch('/api/v1/transactions');
-        if (res.ok) {
-          const data = await res.json();
-          setTransactions(data);
-        }
+        const data = await getTransactions();
+        setTransactions(data);
       } catch (err) {
-        console.error("Failed to fetch dashboard data", err);
       } finally {
         setLoading(false);
       }

frontend/src/api.ts

@@ -2,7 +2,6 @@ import axios from 'axios';
 
 const BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
 
-// The shape of the data we send (must match your Zod schema)
 export interface OrderData {
   poNumber: string;
   shipTo: {
@@ -23,6 +22,18 @@ export interface AckData {
   accepted: boolean;
 }
 
+export interface Transaction {
+  id: string;
+  type: '850' | '940' | '997';
+  direction: 'IN' | 'OUT';
+  validation: 'Valid' | 'Invalid';
+  stream: 'Test' | 'Live';
+  businessNum: string;
+  partner: string;
+  ackStatus: 'Accepted' | 'Rejected' | 'Not Acknowledged';
+  createdAt: string;
+}
+
 export const generateEdi940 = async (order: OrderData) => {
   const response = await axios.post(`${BASE_URL}/api/v1/generate-940`, order, {
     responseType: 'text'
@@ -44,3 +55,13 @@ export const parseEdi850 = async (x12Raw: string) => {
   });
   return response.data;
 };
+
+export const getTransactions = async (): Promise<Transaction[]> => {
+  try {
+    const response = await axios.get(`${BASE_URL}/api/v1/transactions`);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching transactions:', error);
+    throw error;
+  }
+};