setup income and expense statement

app/(home)/reports/page.tsx

@@ -3,9 +3,16 @@ 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)
@@ -13,21 +20,24 @@ const Reports = () => {
       setStatements(statements);
     })();
   }, []);
+
   return (
     <div style={{ padding: 24 }}>
       <h1>Statements</h1>
-      <List
-        itemLayout="horizontal"
-        dataSource={statements}
-        renderItem={(item: any) => (
-          <List.Item>
-            <List.Item.Meta
-              title={<a href="#">{`${moment(item.date_from).format('MM-DD-YYYY')} until ${moment(item.date_to).format('MM-DD-YYYY')}`}</a>}
-              // description="This is the description"
-            />
-          </List.Item>
-        )}
-      />
+      {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;
+}