Impl: QuickBooks-Style SPA with Dashboard, Invoices, Expenses, Reconciliation, and Audit Logging

[rakesh0x]

Summary of Changes

• Implemented QuickBooks-style single-page application (SPA) using React + TypeScript + Vite.

• Core features implemented:

  • Financial Dashboard: Displays cash flow, profit & loss, and outstanding invoices.
  • Invoice Management: Table with filters, detail view, mark-as-paid, send reminder, edit line items.
  • Expense Tracking: Add expenses, categorize, and reflect totals in dashboard.
  • Bank Reconciliation: Stepper UI to match bank transactions with invoices/expenses and summary of unmatched items.
  • Audit Notes Sidebar: Logs every state mutation for RL agent verification.

• State Management: Implemented using @chakra-dev/dojo-hooks (useDojoState + dojo.setState) with seed data for offline usage.

• Responsive Layouts: Tested for 1280px and 1440px widths.

• Offline Ready: App boots fully with local seed data (invoices, expenses, bankTransactions).

Screenshots / GIF

2025-10-24.20-35-34.mp4

How to Test

1. Clone the repo and checkout this branch.
2. Install dependencies:

   npm install
   

3 Run it locally

npm run dev

[0xnirmal]

Quick feedback based on video:

The end deliverable needs to be as close to the real quickbooks as possible. Check out online resources to help: https://quickbooks.intuit.com/learn-support/en-us/help-article/product-setup/get-started-quickbooks-desktop/L5bYVSY73_US_en_US

Ideally the end user cannot tell the difference between your SPA and the real thing. Thanks

[0xnirmal]

hey @rakesh0x - do you mind re-recording a video demonstration?

[rakesh0x]

yeah, ofcourse let me :)

[rakesh0x]

quickbook_demo.mp4

hey @0xnirmal if any changes is need, pls let me know, this is half build will be done in within a week or so

[0xnirmal]

quickbook_demo.mp4
hey @0xnirmal if any changes is need, pls let me know, this is half build will be done in within a week or so

Looks great - one thing to just consider is I tried running dojo.getState() in the UI and errored out. Are the dojo hooks properly configured across the entire project here? For ex, try running the Linear one locally and observe the outputs of dojo.getState() and dojo.setState()

[rakesh0x]

quickbook_demo.mp4
hey @0xnirmal if any changes is need, pls let me know, this is half build will be done in within a week or so

Looks great - one thing to just consider is I tried running dojo.getState() in the UI and errored out. Are the dojo hooks properly configured across the entire project here? For ex, try running the Linear one locally and observe the outputs of dojo.getState() and dojo.setState()

thanx for the review , fixed this error :)

[rakesh0x]

2025-11-04.20-47-24.mp4

review needed sir @0xnirmal, would love to do more changes into it

[0xnirmal]

@Dzaka-athif - can you review this and once completed, get it added to the community section as the first contribution? thank you!

[Dzaka-athif]

@rakesh0x hey, can you use vite-plugin-singlefile? It's going to make it way easier to add your app to the dojo community section.

Ideally we want the css and the js are contained in the single .html file.

Can you also change the way you store the initial data from .json file to just .ts const file and import it. Otherwise we need to put create a folder called src/data/ and put the .json file there to make it run.

[rakesh0x]

hey @Dzaka-athif , I have updated the code, now its using vite-plugin-singlefile and builds are now in a single .html file

i have also converted those JSON files into .ts file in the following src/data directory

[Dzaka-athif]

lgtm!