# Architecture

## Design goals

The original implementation placed markup, styling, user-interface behavior, and payroll formulas in two large standalone HTML files. The modular edition separates those responsibilities while preserving the calculation outputs.

## Layers

### Configuration

`src/js/config/payroll-rates.js` contains editable values such as:

- Working days per month.
- Hours per day.
- Earning multipliers.
- SSS brackets.
- PhilHealth rate and caps.
- Pag-IBIG fixed contribution.
- H2 withholding-tax brackets.

A rate change should normally begin here.

### Calculation core

The files in `src/js/core/` are pure functions. They accept numbers or plain objects and return plain objects. They do not read from or write to the page.

- `money.js`: parsing and two-decimal rounding.
- `earnings.js`: rates and earning components shared by H1 and H2.
- `statutory.js`: H1 SSS, PhilHealth, and Pag-IBIG deductions.
- `withholding-tax.js`: H2 withholding-tax logic.
- `calculate-h1.js`: H1 orchestration.
- `calculate-h2.js`: H2 orchestration.

This separation makes formulas testable without a browser.

### User interface

`src/js/ui/render.js` creates repeated form fields and result rows from configuration metadata.

`src/js/app.js` connects form input to the calculation core, manages H1-to-H2 transfer, displays errors, and updates the monthly summary.

### Styling

`src/styles/main.css` contains all visual rules. The application does not depend on a framework, external font service, image CDN, or third-party stylesheet. Its typography uses a deliberate local system-font stack.

## Data flow

```text
Monthly rate + H1 hours + H1 deductions
                    |
                    v
              calculateH1()
                    |
         +----------+-----------+
         |                      |
         v                      v
   H1 result display      H1 taxable basis
                                |
                                v
Monthly rate + H2 hours + H2 deductions + H1 taxable basis
                                |
                                v
                          calculateH2()
                                |
                                v
                        H2 result + monthly summary
```

## Why no framework

The project is a small deterministic calculator. Native ES modules keep the dependency surface small, allow direct GitHub Pages deployment, and make the underlying formulas easy to inspect.