Expense Page Module

✨ Expense Page — Full Description

What this part of the Expenses Module is about

In Biz1, money management follows a simple but powerful idea:

Documents = Money Coming In
Expenses = Money Going Out

The Add Expense flow is the primary way users record outgoing money — salaries, supplier payments, office costs, marketing spend, rent, utilities, and any other business expense.

The Sub Category system adds structure to this by allowing users to break broad categories (like “Office Expenses”) into more meaningful groups (like “Electricity”, “Internet”, “Stationery”).

The left-side information panel on the main Expenses page continuously provides financial context — showing trends, comparisons, and the relationship between revenue and expenses — so users always understand their financial position while working with expenses.

The main Expenses page — what you see on the left

When a user opens dashboard/expences, the screen is visually divided into two major parts:

The left side, which is informational and analytical.
The right side, which shows expense categories, sub-categories, and individual expenses.

Statistics — Cost Trend Analysis (Left Block)

On the left side, the first block is titled “Statistics.” This is a line chart that visually tracks how much the business has spent over time.

Across the bottom of the chart, the months of the year are displayed — January through December. Vertically, the chart shows the amount spent, usually in thousands (for example: 2k, 4k, 6k, etc.).

This chart helps users see patterns such as:

Which months were more expensive
Whether costs are rising or falling over time
How this year compares to previous years

At the top of this block is a year selector. When the user chooses a different year, the system sends a request to:

POST dashboard/expences/get_expences_year_for_chart

and reloads the chart based on data from expenses_new and expenses_categories.

Revenue & Expenses — Financial Snapshot (Right of Statistics)

Next to the Statistics chart is a second block called “Revenue & Expenses.” This uses a pie chart to give a quick, visual summary of the business’s financial position for a selected month.

The pie chart typically displays four major values:

Total Income
Total Expenses
Total Revenue
Total Tax

At the top of this block is a month selector that allows switching between:

Current month
Previous month

When the month changes, the system reloads the chart using a backend endpoint that combines data from:

Income (Documents module)
Expenses (Expenses module)
Revenue calculations
Tax records

Together, these two left-side panels give users a real-time financial overview while they work with expenses.

Importantly, when a user opens any modal — such as Add Expense or Add Sub Category — this left-side information remains visible in the background.

The Add Expense Modal — the real “Add Expense page”

Although users may think of it as a page, the Add Expense screen is actually a modal window that opens on top of the Expenses dashboard.

How the Add Expense modal opens

The modal can be opened in two ways:

By clicking the big “+” (Add Expense) button in the toolbar of the Expenses page.
By clicking a calendar icon in certain views, which also opens the same modal.

Technically, this modal has the ID:

#add_expences

When the user clicks Save, the form is submitted to:

POST dashboard/expences/add_expenses

Two modes inside the Add Expense modal

At the top of the modal are two tabs:

EXPENSE (default mode) — used to add or edit a real expense.
CATEGORY — used to create or edit a main category (not a sub-category).

If EXPENSE is selected, the full expense form is shown with category, sub-category, amount, supplier, dates, attachments, etc.

If CATEGORY is selected, all expense-related fields disappear and only two fields are shown:

Category name in English
Category name in Hebrew
Category name in Thai ( lanuage wise shown if you can choosen Thai language shown that wise name)

This is used only for creating or renaming main categories like “Office Expenses,” “Marketing,” or “Salaries.”

The Add Expense form — what each field means

When the modal is in EXPENSE mode, the form contains all the information needed to properly record an expense.

The user can optionally give the expense a name, such as “Electricity Bill – March” or “Google Ads Payment.”

They must choose a Category, such as “Office Expenses” or “Marketing.” Once a category is selected, the Sub Category dropdown is automatically populated with relevant options like “Internet,” “Rent,” or “Advertising.”

The user may link the expense to:

A specific Customer (if this expense is related to a client), or
A Project (if it belongs to a specific internal or client project).

A month is selected to define when this expense belongs in financial reports.

The most important field is Amount, which is required.

A checkbox allows the user to specify whether VAT is already included in the amount or not.

The Payment date records when the money actually left the bank or cash account.

If payment was made by check, the Check number can be recorded.

The user must also select a Document type, such as:

Delivery Invoice
Invoice
Receipt
Receipt Tax Invoice

This choice affects whether the expense is considered “paid” or “unpaid” in the system.

The user can attach files or images as proof — for example, a scanned invoice or a photo of a receipt.

Finally, a Notes field allows the user to explain what this expense was for.

When Save is clicked, all of this information is stored in the expenses_new table.

How sub-categories work inside Add Expense

In the Add Expense modal, sub-categories are not created here — they are only selected.

When the user chooses a category, the system automatically sends a request to:

POST dashboard/expences/get_sub_categories_option

with the selected category ID.

The response returns a list of sub-categories, such as:

Electricity
Internet
Office Supplies

These options are then displayed in the Select Sub Category dropdown.

The selected sub-category is stored in the expenses_new.sub_category field when the expense is saved.

The Add Sub Category modal — a separate screen

Creating or editing sub-categories does not happen inside the Add Expense modal. Instead, there is a separate modal called Add Sub Category.

This modal is opened from the main Expenses list, next to each category name.

For example, next to “Office Expenses,” there is a green + Add Sub Category button. Clicking it opens the modal.

When opened, the system sends:

POST dashboard/expences/get_sub_categories

to load all existing sub-categories for that category into a table.

Inside the Add Sub Category modal

At the top of this modal is a small form with two fields:

Sub-category name in English
Sub-category name in Hebrew
Sub-category name in Thai ( ( lanuage wise shown if you can choosen Thai language shown that wise name)

Below that, a table lists all existing sub-categories for that category, with columns for:

ID
English name
Hebrew name
Action (Edit / Delete)

If the user clicks Save, the form is submitted to:

POST dashboard/expences/add_sub_category

This creates a new row in the expenses_categories table with:

parent_id = category id
name_en
name_he

If the user clicks Edit next to a sub-category, the form is filled with that sub-category’s details, allowing changes.

If they click Delete, the system calls:

POST dashboard/expences/delete_sub_category

and removes it from the database.

How Add Expense and Add Sub Category are connected

These two features work together in a clear way:

The Add Sub Category modal is where sub-categories are created and managed.
The Add Expense modal is where those sub-categories are selected and used.

If a user adds a new sub-category, it will immediately appear in the Add Expense dropdown the next time that category is selected.

Expense actions in the main list (for context)

On the main Expenses page, under each category, individual expenses are listed.

Each expense row has action icons such as:

Edit — which reopens the Add Expense modal in edit mode
Copy — which duplicates the expense
Delete — which removes the expense

The Add Sub Category button is attached to the category header, not to individual expense rows.

Final summary — in simple terms

The left side of the Expenses page always shows financial context through:

A yearly cost trend chart
A monthly Revenue vs Expenses pie chart

The Add Expense flow is a modal that allows users to record all details about an expense, including category, sub-category, amount, supplier, VAT, dates, documents, and attachments.

The Add Sub Category modal is a separate tool used to structure categories properly by adding finer levels of detail.

Together, these features ensure that expenses are:

Well organized
Easy to analyze
Properly categorized
Linked to customers or projects when needed