Table and upload button ui with dummy data

app/(home)/dashboard/page.tsx

@@ -1,8 +1,32 @@
 '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";
+
 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>>) {
+    if (info.file.status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (info.file.status === 'done') {
+      message.success(`${info.file.name} file uploaded successfully`);
+    } else if (info.file.status === 'error') {
+      message.error(`${info.file.name} file upload failed.`);
+    }
+  }
+
   return (
-    <div>dashboard route</div>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <Upload onChange={handleUpload}>
+        <Button icon={<UploadOutlined />}>Click to Upload</Button>
+      </Upload>
+      <Table dataSource={transactions} columns={columns} />
+    </div>
   );
 }
 

app/lib/data/index.ts

@@ -0,0 +1,75 @@
+
+export const data = {
+  "transactions": [
+    {
+      "transaction_date": "2021-01-01",
+      "category": "Food",
+      "name_description": "McDonalds",
+      "amount": 10.00,
+      "type": "Debit"
+    },
+    {
+      "transaction_date": "2021-01-02",
+      "category": "Transport",
+      "name_description": "Uber",
+      "amount": 15.50,
+      "type": "Debit"
+    },
+    {
+      "transaction_date": "2021-01-03",
+      "category": "Entertainment",
+      "name_description": "Netflix",
+      "amount": 12.99,
+      "type": "Debit"
+    },
+    {
+      "transaction_date": "2021-01-04",
+      "category": "Groceries",
+      "name_description": "Walmart",
+      "amount": 45.23,
+      "type": "Debit"
+    },
+    {
+      "transaction_date": "2021-01-05",
+      "category": "Utilities",
+      "name_description": "Electricity Bill",
+      "amount": 75.00,
+      "type": "Debit"
+    },
+    {
+      "transaction_date": "2021-01-06",
+      "category": "Income",
+      "name_description": "Salary",
+      "amount": 2000.00,
+      "type": "Credit"
+    },
+    {
+      "transaction_date": "2021-01-07",
+      "category": "Health",
+      "name_description": "Pharmacy",
+      "amount": 20.00,
+      "type": "Debit"
+    },
+    {
+      "transaction_date": "2021-01-08",
+      "category": "Entertainment",
+      "name_description": "Movie Theater",
+      "amount": 25.00,
+      "type": "Debit"
+    },
+    {
+      "transaction_date": "2021-01-09",
+      "category": "Transport",
+      "name_description": "Gas Station",
+      "amount": 30.00,
+      "type": "Debit"
+    },
+    {
+      "transaction_date": "2021-01-10",
+      "category": "Food",
+      "name_description": "Starbucks",
+      "amount": 5.75,
+      "type": "Debit"
+    }
+  ]
+}