Hook transaction endpoint (#3)

- Hookup endpoints (cdfba46637c13a009946e4ca39bd05dd49c43d8c)
- statements list (f81dc3429d9e488ce8867ee6d60c969ab764b189)
- setup income and expense statement (2d4e819921a399a386b4165dfdfef3af7aacf192)

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,51 @@ 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',
+    },
+    {
+      title: 'Type',
+      dataIndex: 'type',
+      key: 'type',
+    },
+  ];
+
+ 
 
   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/(home)/reports/page.tsx

@@ -1,8 +1,44 @@
 'use client';
-import React from "react";
+import { incomeStatements } from "@/app/lib/endpoints";
+import moment from "moment";
+import { List } from "antd";
+import React, { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import IncomeStatement from "@/app/components/IncomeStatement";
+import { DoubleLeftOutlined } from '@ant-design/icons';
+
 const Reports = () => {
+  const searchParams = useSearchParams()
+  const statement_id = searchParams.get('statement_id')
+  const [statements, setStatements] = useState([]);
+  const router = useRouter();
+
+  useEffect(() => {
+    (async () => {
+      const data = await fetch(incomeStatements)
+      const statements = await data.json();
+      setStatements(statements);
+    })();
+  }, []);
+
   return (
-    <div>reports route</div>
+    <div style={{ padding: 24 }}>
+      <h1>Statements</h1>
+      {statement_id ?
+        <IncomeStatement statementData={statements.find(({id}) => id === Number(statement_id))} />
+        :
+        <List
+          itemLayout="horizontal"
+          dataSource={statements}
+          renderItem={(item: any) => (
+            <List.Item>
+              <List.Item.Meta
+                title={<a onClick={() => router.push(`?statement_id=${item.id}`)}>{`${moment(item.date_from).format('MM-DD-YYYY')} until ${moment(item.date_to).format('MM-DD-YYYY')}`}</a>}
+              />
+            </List.Item>
+          )}
+        />}
+    </div>
   );
 }
 

app/components/IncomeStatement/index.tsx

@@ -0,0 +1,132 @@
+import { Flex, Spin, Table, Typography } from 'antd';
+import Title from 'antd/es/typography/Title';
+import { useEffect, useState } from 'react';
+import styles from './styles.module.css'
+
+type Props = {
+  statementData: any | undefined;
+};
+
+const IncomeStatement = ({ statementData }: Props) => {
+  console.log('statementData', statementData);
+  const [data, setData] = useState<any | undefined>(undefined);
+  const [profit, setProfit] = useState(0);
+  const [incomeTotal, setIncomeTotal] = useState(0);
+  const [expensesTotal, setExpensesTotal] = useState(0);
+  const [summaryData, setSummaryData] = useState<any[]>([]);
+
+  useEffect(() => {
+    // (async () => {
+    //   const resp = await fetch(incomeStatements);
+    //   const t = await resp.json();
+    //   setData(t);
+    // })();
+
+    if (statementData) {
+      const calculateTotal = (obj: any) => Object.values(obj).reduce((acc: any, value: any) => acc + value, 0);
+      const aggIncome = calculateTotal(statementData.income);
+      const expensesTotal = calculateTotal(statementData.expenses);
+      const profit = Number(incomeTotal) - Number(expensesTotal);
+
+      const incomeData = Object.keys(statementData.income).map((key) => ({
+        key,
+        category: `Income - ${key.charAt(0).toUpperCase() + key.slice(1)}`,
+        amount: statementData.income[key],
+      }));
+
+      const expensesData = Object.keys(statementData.expenses).map((key) => ({
+        key,
+        category: `Expense - ${key.charAt(0).toUpperCase() + key.slice(1)}`,
+        amount: statementData.expenses[key],
+      }));
+
+      const summaryData = [
+        ...incomeData,
+        ...expensesData,
+        {
+          key: 'total-income',
+          category: 'Total Income',
+          amount: incomeTotal,
+        },
+        {
+          key: 'total-expenses',
+          category: 'Total Expenses',
+          amount: expensesTotal,
+        },
+        {
+          key: 'profit',
+          category: 'Profit',
+          amount: profit,
+        },
+      ];
+
+      setProfit(profit);
+      setIncomeTotal(Number(aggIncome));
+      setSummaryData(summaryData);
+    }
+    setData(statementData);
+  }, []);
+
+
+
+  const columns = [
+    {
+      title: 'Category',
+      dataIndex: 'category',
+      key: 'category',
+    },
+    {
+      title: 'Amount',
+      dataIndex: 'amount',
+      key: 'amount',
+      render: (amount: Number) => `$${amount.toFixed(2)}`,
+    },
+  ];
+
+  const rowClassName = (record: any) => {
+    if (record.key === 'total-income') return styles.totalIncomeRow;
+    if (record.key === 'total-expenses') return styles.totalExpensesRow;
+    if (record.key === 'profit') return styles.profitRow;
+    return '';
+  };
+
+
+
+  if (!data) {
+    return (
+      <Flex align="center" gap="middle">
+        <Spin size="large" />
+      </Flex>
+    )
+  }
+
+  return (
+    <>
+      <Title level={3}>Profit & Loss Statement</Title>
+      <Table
+        columns={columns}
+        dataSource={summaryData}
+        pagination={false}
+        rowClassName={rowClassName}
+        summary={() => (
+          <Table.Summary.Row>
+            <Table.Summary.Cell index={1} colSpan={1}>Net Profit</Table.Summary.Cell>
+            <Table.Summary.Cell index={2}>
+              <span style={{
+                fontWeight: 'bold',
+                backgroundColor: '#f6ffed',
+                padding: '2px 4px',
+                display: 'inline-block',
+              }}>
+                ${profit.toFixed(2)}
+              </span>
+            </Table.Summary.Cell>
+          </Table.Summary.Row>
+        )}
+      />
+    </>
+  );
+};
+
+
+export default IncomeStatement

app/components/IncomeStatement/styles.module.css

@@ -0,0 +1,14 @@
+.totalIncomeRow{
+  background-color: #e6f7ff;
+  font-weight: bold;
+}
+
+.totalExpenseRow {
+  background-color: #fff2e8;
+  font-weight: bold;
+}
+
+.profitRow {
+  background-color: #f6ffed;
+  font-weight: bold;
+}

app/lib/endpoints/index.ts

@@ -0,0 +1,7 @@
+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`;
+export const incomeStatements = `${url}/income_statement/1`;
+export const statementEndpoint = `${url}/statement`;

package-lock.json

@@ -22,6 +22,7 @@
         "dotenv": "^16.3.1",
         "llamaindex": "0.3.13",
         "lucide-react": "^0.294.0",
+        "moment": "^2.30.1",
         "next": "^14.0.3",
         "pdf2json": "3.0.5",
         "react": "^18.2.0",
@@ -9124,6 +9125,14 @@
       "resolved": "https://registry.npmjs.org/module-details-from-path/-/module-details-from-path-1.0.3.tgz",
       "integrity": "sha512-ySViT69/76t8VhE1xXHK6Ch4NcDd26gx0MzKXLO+F7NOtnqH68d9zF94nT8ZWSxXh8ELOERsnJO/sWt1xZYw5A=="
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mongodb": {
       "version": "6.6.2",
       "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.6.2.tgz",

package.json

@@ -25,6 +25,7 @@
     "dotenv": "^16.3.1",
     "llamaindex": "0.3.13",
     "lucide-react": "^0.294.0",
+    "moment": "^2.30.1",
     "next": "^14.0.3",
     "pdf2json": "3.0.5",
     "react": "^18.2.0",