# elpsycongroo75/rek-ektraktor architecture

> Architecture diagram of the GitHub repository elpsycongroo75/rek-ektraktor, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-07-31). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/elpsycongroo75/rek-ektraktor
- Repository: https://github.com/elpsycongroo75/rek-ektraktor

## Overview

#### Purpose and Entry Points
This is a static browser application for converting Indonesian bank transaction data into a normalized form. The main page is `index.html`; browser behavior is initialized in `js/app.js`. Styling is supplied by `css/style.css`. Deployment is configured for Vercel through `vercel.json`.

#### UI Application Controller
`js/app.js` is the client-side orchestration layer. It connects page inputs/actions to parser selection and conversion results, owns the interactive flow, and renders or exposes normalized output in the browser.
- `index.html`
- `js/app.js`
- `css/style.css`

#### Parser Abstraction Boundary
Bank-specific parsing is isolated behind a common base abstraction, preventing UI code from needing to understand each statement/export format. New banks should be integrated by implementing the shared parser contract and registering the parser.
- `js/parsers/base-parser.js`
- `js/parsers/index.js`

#### Parser Registry and Dispatch
`js/parsers/index.js` is the integration point that aggregates concrete parsers and makes the appropriate implementation available to the application. Control flow is: user-provided bank/source selection or recognizable input → parser registry → bank parser → normalized transaction result.
- `js/parsers/index.js`
- `js/app.js`

#### Bank Format Adapters
Each adapter translates one institution’s raw transaction layout into the shared representation. These are the core domain-specific components; their parsing logic must account for differences in column names, dates, debit/credit conventions, descriptions, and balance formats.
- `js/parsers/bca-parser.js`
- `js/parsers/mandiri-parser.js`
- `js/parsers/bni-parser.js`
- `js/parsers/bsi-parser.js`
- `js/parsers/danamon-parser.js`
- `js/parsers/bankjakarta-parser.js`

#### Conversion Data Flow
The application runs entirely in the browser: raw user data enters through the HTML UI, `js/app.js` delegates conversion to a parser obtained from `js/parsers/index.js`, and the parsed output returns to the UI for display/export/copy handling. The important boundary is between untrusted, bank-specific input and the parser layer’s normalized output; validation and malformed-row handling belong at this boundary.
- `index.html`
- `js/app.js`
- `js/parsers/base-parser.js`

#### Runtime and Infrastructure
There is no indicated backend, database, authentication system, or external API integration. The material runtime is the browser’s JavaScript/DOM environment. `vercel.json` indicates static hosting/deployment via Vercel. `convert-parsers.js` is a repository-level conversion/generation utility rather than part of the browser entry flow.
- `vercel.json`
- `convert-parsers.js`
- `index.html`

Main entry points: [`js/parsers/index.js`](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/index.js) (Parser registry), [`js/parsers/base-parser.js`](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/base-parser.js) (Parser contract), [`js/app.js`](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/app.js) (Application controller), [`index.html`](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/index.html) (Main page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Browser UI"]
  node_page["Main page<br/>HTML entry<br/>[index.html]"]
  node_styles["UI styles<br/>CSS<br/>[style.css]"]
  node_app["Application controller<br/>browser JavaScript<br/>[app.js]"]
  node_raw_input["Raw bank data<br/>untrusted input"]
  node_normalized_output["Normalized transactions<br/>conversion result"]
end

subgraph group_parsers["Parser Layer"]
  node_base_parser["Parser contract<br/>base parser<br/>[base-parser.js]"]
  node_registry["Parser registry<br/>parser dispatch<br/>[index.js]"]
  node_bca["BCA parser<br/>bank adapter<br/>[bca-parser.js]"]
  node_mandiri["Mandiri parser<br/>bank adapter<br/>[mandiri-parser.js]"]
  node_bni["BNI parser<br/>bank adapter<br/>[bni-parser.js]"]
  node_bsi["BSI parser<br/>bank adapter<br/>[bsi-parser.js]"]
  node_danamon["Danamon parser<br/>bank adapter<br/>[danamon-parser.js]"]
  node_bankjakarta["Bank Jakarta parser<br/>bank adapter"]
end

subgraph group_deployment["Deployment &amp; Tooling"]
  node_hosting{{"Vercel static hosting<br/>[vercel.json]"}}
  node_converter_tool["Parser conversion utility<br/>repository utility<br/>[convert-parsers.js]"]
end

node_hosting -->|"serves"| node_page
node_page -->|"loads"| node_styles
node_page -->|"initializes"| node_app
node_raw_input -->|"submitted data"| node_app
node_app -->|"selects parser"| node_registry
node_registry -->|"dispatches"| node_bca
node_registry -->|"dispatches"| node_mandiri
node_registry -->|"dispatches"| node_bni
node_registry -->|"dispatches"| node_bsi
node_registry -->|"dispatches"| node_danamon
node_registry -->|"dispatches"| node_bankjakarta
node_bca -.->|"implements"| node_base_parser
node_mandiri -.->|"implements"| node_base_parser
node_bni -.->|"implements"| node_base_parser
node_bsi -.->|"implements"| node_base_parser
node_danamon -.->|"implements"| node_base_parser
node_bankjakarta -.->|"implements"| node_base_parser
node_base_parser -->|"normalized result"| node_normalized_output
node_normalized_output -->|"display, export, or copy"| node_app

click node_hosting "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/vercel.json"
click node_page "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/index.html"
click node_styles "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/css/style.css"
click node_app "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/app.js"
click node_base_parser "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/base-parser.js"
click node_registry "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/index.js"
click node_bca "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/bca-parser.js"
click node_mandiri "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/mandiri-parser.js"
click node_bni "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/bni-parser.js"
click node_bsi "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/bsi-parser.js"
click node_danamon "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/danamon-parser.js"
click node_bankjakarta "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/bankjakarta-parser.js"
click node_converter_tool "https://github.com/elpsycongroo75/rek-ektraktor/blob/main/convert-parsers.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_page,node_styles,node_app,node_raw_input,node_normalized_output toneBlue
class node_base_parser,node_registry,node_bca,node_mandiri,node_bni,node_bsi,node_danamon,node_bankjakarta toneAmber
class node_hosting,node_converter_tool toneMint
```

## Components

### Browser UI

- [Main page](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/index.html): HTML entry · `index.html`
- [UI styles](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/css/style.css): CSS · `css/style.css`
- [Application controller](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/app.js): browser JavaScript · Coordinates input, parser dispatch, and output handling. · `js/app.js`
- **Raw bank data**: untrusted input
- **Normalized transactions**: conversion result

### Parser Layer

- [Parser contract](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/base-parser.js): base parser · Shared normalized parsing abstraction. · `js/parsers/base-parser.js`
- [Parser registry](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/index.js): parser dispatch · Selects and exposes the appropriate bank parser. · `js/parsers/index.js`
- [BCA parser](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/bca-parser.js): bank adapter · `js/parsers/bca-parser.js`
- [Mandiri parser](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/mandiri-parser.js): bank adapter · `js/parsers/mandiri-parser.js`
- [BNI parser](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/bni-parser.js): bank adapter · `js/parsers/bni-parser.js`
- [BSI parser](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/bsi-parser.js): bank adapter · `js/parsers/bsi-parser.js`
- [Danamon parser](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/danamon-parser.js): bank adapter · `js/parsers/danamon-parser.js`
- [Bank Jakarta parser](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/js/parsers/bankjakarta-parser.js): bank adapter · `js/parsers/bankjakarta-parser.js`

### Deployment & Tooling

- [Vercel static hosting](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/vercel.json): hosting · `vercel.json`
- [Parser conversion utility](https://github.com/elpsycongroo75/rek-ektraktor/blob/main/convert-parsers.js): repository utility · Generation/conversion tool outside the browser runtime. · `convert-parsers.js`

## Connections

- Vercel static hosting → Main page: serves
- Main page → UI styles: loads
- Main page → Application controller: initializes
- Raw bank data → Application controller: submitted data
- Application controller → Parser registry: selects parser
- Parser registry → BCA parser: dispatches
- Parser registry → Mandiri parser: dispatches
- Parser registry → BNI parser: dispatches
- Parser registry → BSI parser: dispatches
- Parser registry → Danamon parser: dispatches
- Parser registry → Bank Jakarta parser: dispatches
- BCA parser → Parser contract: implements
- Mandiri parser → Parser contract: implements
- BNI parser → Parser contract: implements
- BSI parser → Parser contract: implements
- Danamon parser → Parser contract: implements
- Bank Jakarta parser → Parser contract: implements
- Parser contract → Normalized transactions: normalized result
- Normalized transactions → Application controller: display, export, or copy