Adding first draft of ledger component

gui/app/src/App.tsx

@@ -28,6 +28,7 @@ import { AccountList, AccountCreate, AccountEdit } from "./pages/accounts";
 import { CategoryList, CategoryCreate, CategoryEdit } from "./pages/categories";
 import { PayeeCreate, PayeeEdit, PayeeList } from "./pages/payees";
 import { TransactionCreate, TransactionEdit, TransactionList } from "./pages/transactions";
+import {AccountLedger} from "./pages/accounts/ledger";
 
 /**
  *  mock auth credentials to simulate authentication
@@ -135,6 +136,7 @@ const App: React.FC = () => {
                   <Route index element={<AccountList />} />
                   <Route path="create" element={<AccountCreate />} />
                   <Route path="edit/:id" element={<AccountEdit />} />
+                  <Route path="ledger/:id" element={<AccountLedger />} />
                 </Route>
                 <Route path="/categories">
                   <Route index element={<CategoryList />} />

gui/app/src/pages/accounts/ledger.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+
+
+import { useParams } from "react-router";
+import {useList, useOne} from "@refinedev/core";
+
+
+
+export const AccountLedger: React.FC = () => {
+  const { id } = useParams()
+
+  const { data, isLoading, isError } = useOne({
+    resource: `ledgers`,
+    id: id
+  });
+  if (isLoading) {
+      return <div>Loading</div>
+  }
+  return (
+      <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell></TableCell>
+            <TableCell align="right">Date</TableCell>
+            <TableCell align="right">Deposit</TableCell>
+            <TableCell align="right">Payment</TableCell>
+            <TableCell align="right">Balance</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data?.data.map((row: any) => {
+            const is_expense: boolean = row.account_split.amount < 0
+            const destination_accounts = []
+            for (const split of row.transaction.splits) {
+              if ((is_expense && split.amount >= 0) || (!is_expense && split.amount < 0)) {
+                destination_accounts.push(split)
+              }
+            }
+            let is_split = false;
+            if (destination_accounts) {
+                if (destination_accounts.length > 1) {
+                    is_split = true;
+                }
+            }
+            return(
+                <TableRow
+                  key={row.name}
+                  sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                >
+                  <TableCell component="th" scope="row"></TableCell>
+                  <TableCell align="right">{row.transaction.transaction_date}</TableCell>
+                  <TableCell align="right">{ is_expense ? "" : row.account_split.amount }</TableCell>
+                  <TableCell align="right">{ is_expense ? row.account_split.amount : "" }</TableCell>
+                  <TableCell align="right">{ row.balance }</TableCell>
+                </TableRow>)
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

gui/app/src/pages/accounts/list.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 
-import { ButtonGroup } from "@mui/material";
+import { Button, ButtonGroup } from "@mui/material";
 import { DataGrid, type GridColDef } from "@mui/x-data-grid";
+import RequestQuoteIcon from '@mui/icons-material/RequestQuote';
 
 import { DeleteButton, EditButton, List, useDataGrid}  from "@refinedev/mui";
 
@@ -15,7 +16,7 @@ export const AccountList: React.FC = () => {
       { field: "id", headerName: "ID" },
       { field: "name", headerName: "Name", flex: 1 },
       { field: "path", headerName: "path", flex: 1 },
-      { field: "type", headerName: "Type", flex: 0.3 },
+      { field: "type", headerName: "Type", flex: 1 },
       {
         field: "actions",
         headerName: "Actions",
@@ -23,6 +24,7 @@ export const AccountList: React.FC = () => {
         renderCell: function render({ row }) {
           return (
             <ButtonGroup>
+              <Button href={`/accounts/ledger/${row.id}`}><RequestQuoteIcon /></Button>
               <EditButton hideText recordItemId={row.id} />
               <DeleteButton hideText recordItemId={row.id} />
             </ButtonGroup>
@@ -30,6 +32,7 @@ export const AccountList: React.FC = () => {
         },
         align: "center",
         headerAlign: "center",
+        flex: 1,
       },
     ],
     [],