Changing Account/category structure and Adding transactions and splits

gui/app/src/App.tsx

@@ -1,4 +1,4 @@
-import { Refine, type AuthProvider, Authenticated } from "@refinedev/core";
+import { Refine, Authenticated } from "@refinedev/core";
 import {
   ThemedLayoutV2,
   ErrorComponent,
@@ -13,7 +13,6 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import { ThemeProvider } from "@mui/material/styles";
 import { authProvider } from "./providers/auth-provider";
-//import dataProvider from "@refinedev/simple-rest";
 import { dataProvider } from "./providers/data-provider";
 import routerProvider, {
   NavigateToResource,
@@ -24,9 +23,10 @@ import routerProvider, {
 import { BrowserRouter, Routes, Route, Outlet } from "react-router";
 import { useFormContext } from "react-hook-form";
 
-import { PostList, PostCreate, PostEdit } from "../src/pages/posts";
-import { AccountList, AccountCreate, AccountEdit } from "../src/pages/accounts";
-import { CategoryList, CategoryCreate, CategoryEdit } from "../src/pages/categories";
+import { PostList, PostCreate, PostEdit } from "./pages/posts";
+import { AccountList, AccountCreate, AccountEdit } from "./pages/accounts";
+import { PayeeCreate, PayeeEdit, PayeeList } from "./pages/payees";
+import { TransactionCreate, TransactionEdit, TransactionList } from "./pages/transactions";
 
 /**
  *  mock auth credentials to simulate authentication
@@ -82,10 +82,16 @@ const App: React.FC = () => {
                 create: "/accounts/create",
               },
               {
-                name: "categories",
-                list: "/categories",
-                edit: "/categories/edit/:id",
-                create: "/categories/create",
+                name: "payees",
+                list: "/payees",
+                edit: "/payees/edit/:id",
+                create: "/payees/create",
+              },
+              {
+                name: "transactions",
+                list: "/transactions",
+                edit: "/transactions/edit/:id",
+                create: "/transactions/create",
               },
             ]}
             options={{
@@ -123,10 +129,15 @@ const App: React.FC = () => {
                   <Route path="create" element={<AccountCreate />} />
                   <Route path="edit/:id" element={<AccountEdit />} />
                 </Route>
-                <Route path="/categories">
-                  <Route index element={<CategoryList />} />
-                  <Route path="create" element={<CategoryCreate />} />
-                  <Route path="edit/:id" element={<CategoryEdit />} />
+                <Route path="/payees">
+                  <Route index element={<PayeeList />} />
+                  <Route path="create" element={<PayeeCreate />} />
+                  <Route path="edit/:id" element={<PayeeEdit />} />
+                </Route>
+                <Route path="/transactions">
+                  <Route index element={<TransactionList />} />
+                  <Route path="create" element={<TransactionCreate />} />
+                  <Route path="edit/:id" element={<TransactionEdit />} />
                 </Route>
               </Route>
 

gui/app/src/pages/categories/create.tsx

@@ -1,11 +0,0 @@
-import {CrudForm} from "../../common/crud/crud-form";
-
-
-export const CategoryCreate: React.FC = () => {
-  return (
-    <CrudForm
-      schemaName={"CategoryCreate"}
-      resource={"categories"}
-    />
-  );
-};

gui/app/src/pages/payees/create.tsx

@@ -0,0 +1,11 @@
+import {CrudForm} from "../../common/crud/crud-form";
+
+
+export const PayeeCreate: React.FC = () => {
+  return (
+    <CrudForm
+      schemaName={"PayeeCreate"}
+      resource={"payees"}
+    />
+  );
+};

gui/app/src/pages/payees/edit.tsx

@@ -2,13 +2,13 @@ import { CrudForm } from "../../common/crud/crud-form";
 import { useParams } from "react-router"
 
 
-export const CategoryEdit: React.FC = () => {
+export const PayeeEdit: React.FC = () => {
   const { id } = useParams()
 
   return (
     <CrudForm
-      schemaName={"CategoryUpdate"}
-      resource={"categories"}
+      schemaName={"PayeeUpdate"}
+      resource={"payees"}
       id={id}
     />
   );

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

@@ -6,7 +6,7 @@ import { DataGrid, type GridColDef } from "@mui/x-data-grid";
 import type { IAccount } from "../../interfaces";
 import {ButtonGroup} from "@mui/material";
 
-export const CategoryList: React.FC = () => {
+export const PayeeList: React.FC = () => {
   const { dataGridProps } = useDataGrid<IAccount>();
 
   const columns = React.useMemo<GridColDef<IAccount>[]>(

gui/app/src/pages/transactions/create.tsx

@@ -0,0 +1,11 @@
+import {CrudForm} from "../../common/crud/crud-form";
+
+
+export const TransactionCreate: React.FC = () => {
+  return (
+    <CrudForm
+      schemaName={"TransactionCreate"}
+      resource={"transactions"}
+    />
+  );
+};

gui/app/src/pages/transactions/edit.tsx

@@ -0,0 +1,15 @@
+import { CrudForm } from "../../common/crud/crud-form";
+import { useParams } from "react-router"
+
+
+export const TransactionEdit: React.FC = () => {
+  const { id } = useParams()
+
+  return (
+    <CrudForm
+      schemaName={"TransactionUpdate"}
+      resource={"transactions"}
+      id={id}
+    />
+  );
+};

gui/app/src/pages/transactions/index.tsx

@@ -0,0 +1,3 @@
+export * from "./list";
+export * from "./create";
+export * from "./edit";

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

@@ -0,0 +1,48 @@
+import {DeleteButton, EditButton, List, useDataGrid} from "@refinedev/mui";
+import React from "react";
+
+import { DataGrid, type GridColDef } from "@mui/x-data-grid";
+
+import type { IAccount } from "../../interfaces";
+import {ButtonGroup} from "@mui/material";
+
+export const TransactionList: React.FC = () => {
+  const { dataGridProps } = useDataGrid<IAccount>();
+
+  const columns = React.useMemo<GridColDef<IAccount>[]>(
+    () => [
+      { field: "id", headerName: "ID" },
+      { field: "name", headerName: "Name", flex: 1 },
+      {
+        field: "actions",
+        headerName: "Actions",
+        display: "flex",
+        renderCell: function render({ row }) {
+          return (
+            <ButtonGroup>
+              <EditButton hideText recordItemId={row.id} />
+              <DeleteButton hideText recordItemId={row.id} />
+            </ButtonGroup>
+          );
+        },
+        align: "center",
+        headerAlign: "center",
+      },
+    ],
+    [],
+  );
+
+  return (
+    <List>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          maxHeight: "calc(100vh - 320px)",
+        }}
+      >
+        <DataGrid {...dataGridProps} columns={columns} />
+      </div>
+    </List>
+  );
+};