# akmalkirin-sudo/ezakat-itt588 architecture

> Architecture diagram of the GitHub repository akmalkirin-sudo/ezakat-itt588, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/akmalkirin-sudo/ezakat-itt588
- Repository: https://github.com/akmalkirin-sudo/ezakat-itt588

## Overview

eZakat is a client-side zakat calculator. Users select an asset category, enter values, and receive a receipt indicating whether zakat is due and the amount; navigation, language, and theme controls support that workflow. The README documents four calculation types and their Nisab/Haul rules. Sampled JavaScript confirms navigation, theme and language handling, receipt rendering, and calculation branches; omitted source limits certainty about the exact form-dispatch wiring.

Main entry points: [`index.html`](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/index.html) (Calculator Interface), [`script.js`](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js) (Result Receipt), [`styles.css`](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/styles.css) (Responsive Styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User Interface"]
  node_webpage["Calculator Interface<br/>[index.html]"]
  node_navigation["Page Navigation<br/>[script.js]"]
  node_receipt["Result Receipt<br/>[script.js]"]
end

subgraph group_calculations["Zakat Calculations"]
  node_trade["Trade Calculator<br/>[script.js]"]
  node_income["Income Calculator<br/>[script.js]"]
  node_gold["Gold Calculator<br/>[script.js]"]
  node_savings["Savings Calculator<br/>[script.js]"]
end

subgraph group_guidance["Language And Guidance"]
  node_translations["Translation Dictionary<br/>[script.js]"]
  node_language["Language Toggle<br/>[script.js]"]
end

subgraph group_presentation["Visual Presentation"]
  node_theme["Theme Toggle<br/>[script.js]"]
  node_styles["Responsive Styles<br/>[styles.css]"]
end

node_user(("Visitor"))

node_user -->|"uses"| node_webpage
node_user -->|"selects pages"| node_navigation
node_navigation -->|"updates visibility"| node_webpage
node_webpage -->|"provides inputs"| node_trade
node_webpage -->|"provides inputs"| node_income
node_webpage -->|"provides inputs"| node_gold
node_webpage -->|"provides inputs"| node_savings
node_trade -->|"renders result"| node_receipt
node_income -->|"renders result"| node_receipt
node_gold -->|"renders result"| node_receipt
node_savings -->|"renders result"| node_receipt
node_user -->|"switches language"| node_language
node_language -->|"selects text"| node_translations
node_language -->|"updates text"| node_webpage
node_language -->|"rerenders text"| node_receipt
node_user -->|"switches theme"| node_theme
node_theme -->|"updates theme"| node_webpage
node_styles -->|"styles interface"| node_webpage

click node_webpage "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/index.html"
click node_navigation "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js"
click node_trade "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js"
click node_income "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js"
click node_gold "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js"
click node_savings "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js"
click node_receipt "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js"
click node_translations "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js"
click node_language "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js"
click node_theme "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js"
click node_styles "https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/styles.css"

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_webpage,node_navigation,node_receipt toneBlue
class node_trade,node_income,node_gold,node_savings toneAmber
class node_translations,node_language toneMint
class node_theme,node_styles toneRose
class node_user toneIndigo
```

## Components

### User Interface

- [Calculator Interface](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/index.html): `index.html`
- [Page Navigation](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js): `script.js`
- [Result Receipt](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js): `script.js`

### Zakat Calculations

- [Trade Calculator](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js): `script.js`
- [Income Calculator](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js): `script.js`
- [Gold Calculator](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js): `script.js`
- [Savings Calculator](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js): `script.js`

### Language And Guidance

- [Translation Dictionary](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js): `script.js`
- [Language Toggle](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js): `script.js`

### Visual Presentation

- [Theme Toggle](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/script.js): `script.js`
- [Responsive Styles](https://github.com/akmalkirin-sudo/ezakat-itt588/blob/main/styles.css): `styles.css`

### Other components

- **Visitor**

## Connections

- Visitor → Calculator Interface: uses
- Visitor → Page Navigation: selects pages
- Page Navigation → Calculator Interface: updates visibility
- Calculator Interface → Trade Calculator: provides inputs
- Calculator Interface → Income Calculator: provides inputs
- Calculator Interface → Gold Calculator: provides inputs
- Calculator Interface → Savings Calculator: provides inputs
- Trade Calculator → Result Receipt: renders result
- Income Calculator → Result Receipt: renders result
- Gold Calculator → Result Receipt: renders result
- Savings Calculator → Result Receipt: renders result
- Visitor → Language Toggle: switches language
- Language Toggle → Translation Dictionary: selects text
- Language Toggle → Calculator Interface: updates text
- Language Toggle → Result Receipt: rerenders text
- Visitor → Theme Toggle: switches theme
- Theme Toggle → Calculator Interface: updates theme
- Responsive Styles → Calculator Interface: styles interface