Hookup endpoints

app/(home)/dashboard/page.tsx

@@ -1,15 +1,14 @@
 'use client';
 import { Button, Table, Upload, message } from "antd";
 import { UploadOutlined } from '@ant-design/icons';
-import React from "react";
-import { data } from '../../lib/data';
-import { UploadChangeParam, UploadFile } from "antd/es/upload";
+import React, { useEffect, useState } from "react";
+import { UploadProps } from "antd/es/upload";
+import { fielUploadEndpoint, transactionsEndpoint } from "@/app/lib/endpoints";
 
-const Dashboard = () => {
-  const transactions = data['transactions'];
-
-  const columns = Object.keys(transactions[0]).map((key: string) => ({ title: key, dataIndex: key, key: key }));
-  function handleUpload(info: UploadChangeParam<UploadFile<any>>) {
+const props: UploadProps = {
+  name: 'upload_file',
+  action: fielUploadEndpoint,
+  onChange(info) {
     if (info.file.status !== 'uploading') {
       console.log(info.file, info.fileList);
     }
@@ -18,11 +17,46 @@ const Dashboard = () => {
     } else if (info.file.status === 'error') {
       message.error(`${info.file.name} file upload failed.`);
     }
-  }
+  },
+};
+
+const Dashboard = () => {
+  const [transactions, setTransactions] = useState([]);
+  useEffect(() => {
+    (async () => {
+      const resp = await fetch(transactionsEndpoint);
+      const t = await resp.json();
+      setTransactions(t);
+    })();
+  }, []);
+  const columns = [
+    {
+      title: 'Date',
+      dataIndex: 'transaction_date',
+      key: 'date',
+    },
+    {
+      title: 'Description',
+      dataIndex: 'name_description',
+      key: 'description',
+    },
+    {
+      title: 'Amount',
+      dataIndex: 'amount',
+      key: 'amount',
+    },
+    {
+      title: 'Category',
+      dataIndex: 'category',
+      key: 'category',
+    },
+  ];
+
+ 
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <Upload onChange={handleUpload}>
+      <Upload {...props}>
         <Button icon={<UploadOutlined />}>Click to Upload</Button>
       </Upload>
       <Table dataSource={transactions} columns={columns} />

app/lib/endpoints/index.ts

@@ -0,0 +1,5 @@
+const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+const url = `${baseUrl}/api/v1`
+
+export const transactionsEndpoint = `${url}/transactions/1`;
+export const fielUploadEndpoint = `${url}/file_upload`;