# mohammed-donia/athar_project architecture

> Architecture diagram of the GitHub repository mohammed-donia/athar_project, 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/mohammed-donia/athar_project
- Repository: https://github.com/mohammed-donia/athar_project

## Overview

Athar is a personal activity and goal-tracking app: users create trackers, record dated values, then review progress and activity. Its routes also provide dashboard and statistics views, plus settings for appearance and data management. The sampled pages show tracker and entry interactions, activity filtering, and settings import/export; source for the dashboard, statistics page, and store implementations was not sampled, so their internal wiring is left unspecified.

Main entry points: [`src/app/router.tsx`](https://github.com/mohammed-donia/athar_project/blob/main/src/app/router.tsx) (Route map), [`src/pages/Settings/Settings.tsx`](https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Settings/Settings.tsx) (Settings), [`src/pages/Trackers/Trackers.tsx`](https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Trackers/Trackers.tsx) (Tracker list), [`src/pages/TrackerDetails/TrackerDetails.tsx`](https://github.com/mohammed-donia/athar_project/blob/main/src/pages/TrackerDetails/TrackerDetails.tsx) (Tracker details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["App entry<br/>[App.tsx]"]
  node_router["Route map<br/>[router.tsx]"]
  node_layout["App layout<br/>[Layout.tsx]"]
end

subgraph group_tracking["Trackers and entries"]
  node_trackers["Tracker list<br/>[Trackers.tsx]"]
  node_details["Tracker details<br/>[TrackerDetails.tsx]"]
  node_tracker_components["Tracker forms and cards<br/>[TrackerForm.tsx]"]
  node_entry_components["Entry forms and lists<br/>[EntryForm.tsx]"]
  node_templates["Tracker templates<br/>[templates.ts]"]
end

subgraph group_insights["Progress and insights"]
  node_dashboard["Dashboard<br/>[Dashboard.tsx]"]
  node_activity["Activity feed<br/>[Activity.tsx]"]
  node_statistics["Statistics<br/>[Statistics.tsx]"]
  node_timeline["Timeline groups<br/>[TimelineGroup.tsx]"]
  node_charts["Charts<br/>[TrendLineChart.tsx]"]
  node_statistics_utils["Date and totals<br/>[statistics.ts]"]
end

subgraph group_state["State and settings"]
  node_settings["Settings<br/>[Settings.tsx]"]
  node_tracker_store["Tracker state<br/>[trackerStore.ts]"]
  node_entry_store["Entry state<br/>[entryStore.ts]"]
  node_ui_store["Appearance state<br/>[uiStore.ts]"]
  node_toast_store["Notifications<br/>[toastStore.ts]"]
  node_demo_data["Demo data<br/>[demoData.ts]"]
  node_storage["Browser storage helper<br/>[storage.ts]"]
end

node_user(("User"))
node_browser_storage[("Browser local storage")]

node_user -->|"opens"| node_app
node_app -->|"provides routes"| node_router
node_router -->|"renders"| node_layout
node_router -->|"routes to"| node_dashboard
node_router -->|"routes to"| node_trackers
node_router -->|"routes to"| node_details
node_router -->|"routes to"| node_activity
node_router -->|"routes to"| node_statistics
node_router -->|"routes to"| node_settings
node_trackers -->|"reads and updates"| node_tracker_store
node_trackers -->|"reads"| node_entry_store
node_trackers -->|"renders forms"| node_tracker_components
node_trackers -->|"selects from"| node_templates
node_details -->|"reads and updates"| node_tracker_store
node_details -->|"reads and updates"| node_entry_store
node_details -->|"renders forms"| node_entry_components
node_details -->|"calculates progress"| node_statistics_utils
node_activity -->|"reads"| node_tracker_store
node_activity -->|"reads"| node_entry_store
node_activity -->|"groups entries"| node_statistics_utils
node_activity -->|"renders groups"| node_timeline
node_settings -->|"imports and exports"| node_tracker_store
node_settings -->|"imports and exports"| node_entry_store
node_settings -->|"changes theme"| node_ui_store
node_settings -->|"shows messages"| node_toast_store
node_settings -->|"loads sample data"| node_demo_data
node_storage -->|"reads and writes"| node_browser_storage

click node_app "https://github.com/mohammed-donia/athar_project/blob/main/src/app/App.tsx"
click node_router "https://github.com/mohammed-donia/athar_project/blob/main/src/app/router.tsx"
click node_layout "https://github.com/mohammed-donia/athar_project/blob/main/src/components/layout/Layout.tsx"
click node_dashboard "https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Dashboard/Dashboard.tsx"
click node_trackers "https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Trackers/Trackers.tsx"
click node_details "https://github.com/mohammed-donia/athar_project/blob/main/src/pages/TrackerDetails/TrackerDetails.tsx"
click node_activity "https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Activity/Activity.tsx"
click node_statistics "https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Statistics/Statistics.tsx"
click node_settings "https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Settings/Settings.tsx"
click node_tracker_components "https://github.com/mohammed-donia/athar_project/blob/main/src/components/trackers/TrackerForm.tsx"
click node_entry_components "https://github.com/mohammed-donia/athar_project/blob/main/src/components/entries/EntryForm.tsx"
click node_timeline "https://github.com/mohammed-donia/athar_project/blob/main/src/components/entries/TimelineGroup.tsx"
click node_charts "https://github.com/mohammed-donia/athar_project/blob/main/src/components/charts/TrendLineChart.tsx"
click node_tracker_store "https://github.com/mohammed-donia/athar_project/blob/main/src/stores/trackerStore.ts"
click node_entry_store "https://github.com/mohammed-donia/athar_project/blob/main/src/stores/entryStore.ts"
click node_ui_store "https://github.com/mohammed-donia/athar_project/blob/main/src/stores/uiStore.ts"
click node_toast_store "https://github.com/mohammed-donia/athar_project/blob/main/src/stores/toastStore.ts"
click node_statistics_utils "https://github.com/mohammed-donia/athar_project/blob/main/src/utils/statistics.ts"
click node_templates "https://github.com/mohammed-donia/athar_project/blob/main/src/data/templates.ts"
click node_demo_data "https://github.com/mohammed-donia/athar_project/blob/main/src/data/demoData.ts"
click node_storage "https://github.com/mohammed-donia/athar_project/blob/main/src/lib/storage/storage.ts"

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_app,node_router,node_layout,node_user toneBlue
class node_trackers,node_details,node_tracker_components,node_entry_components,node_templates,node_browser_storage toneAmber
class node_dashboard,node_activity,node_statistics,node_timeline,node_charts,node_statistics_utils toneMint
class node_settings,node_tracker_store,node_entry_store,node_ui_store,node_toast_store,node_demo_data,node_storage toneRose
```

## Components

### App navigation

- [App entry](https://github.com/mohammed-donia/athar_project/blob/main/src/app/App.tsx): `src/app/App.tsx`
- [Route map](https://github.com/mohammed-donia/athar_project/blob/main/src/app/router.tsx): `src/app/router.tsx`
- [App layout](https://github.com/mohammed-donia/athar_project/blob/main/src/components/layout/Layout.tsx): `src/components/layout/Layout.tsx`

### Trackers and entries

- [Tracker list](https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Trackers/Trackers.tsx): `src/pages/Trackers/Trackers.tsx`
- [Tracker details](https://github.com/mohammed-donia/athar_project/blob/main/src/pages/TrackerDetails/TrackerDetails.tsx): `src/pages/TrackerDetails/TrackerDetails.tsx`
- [Tracker forms and cards](https://github.com/mohammed-donia/athar_project/blob/main/src/components/trackers/TrackerForm.tsx): `src/components/trackers/TrackerForm.tsx`
- [Entry forms and lists](https://github.com/mohammed-donia/athar_project/blob/main/src/components/entries/EntryForm.tsx): `src/components/entries/EntryForm.tsx`
- [Tracker templates](https://github.com/mohammed-donia/athar_project/blob/main/src/data/templates.ts): `src/data/templates.ts`

### Progress and insights

- [Dashboard](https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Dashboard/Dashboard.tsx): `src/pages/Dashboard/Dashboard.tsx`
- [Activity feed](https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Activity/Activity.tsx): `src/pages/Activity/Activity.tsx`
- [Statistics](https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Statistics/Statistics.tsx): `src/pages/Statistics/Statistics.tsx`
- [Timeline groups](https://github.com/mohammed-donia/athar_project/blob/main/src/components/entries/TimelineGroup.tsx): `src/components/entries/TimelineGroup.tsx`
- [Charts](https://github.com/mohammed-donia/athar_project/blob/main/src/components/charts/TrendLineChart.tsx): `src/components/charts/TrendLineChart.tsx`
- [Date and totals](https://github.com/mohammed-donia/athar_project/blob/main/src/utils/statistics.ts): `src/utils/statistics.ts`

### State and settings

- [Settings](https://github.com/mohammed-donia/athar_project/blob/main/src/pages/Settings/Settings.tsx): `src/pages/Settings/Settings.tsx`
- [Tracker state](https://github.com/mohammed-donia/athar_project/blob/main/src/stores/trackerStore.ts): `src/stores/trackerStore.ts`
- [Entry state](https://github.com/mohammed-donia/athar_project/blob/main/src/stores/entryStore.ts): `src/stores/entryStore.ts`
- [Appearance state](https://github.com/mohammed-donia/athar_project/blob/main/src/stores/uiStore.ts): `src/stores/uiStore.ts`
- [Notifications](https://github.com/mohammed-donia/athar_project/blob/main/src/stores/toastStore.ts): `src/stores/toastStore.ts`
- [Demo data](https://github.com/mohammed-donia/athar_project/blob/main/src/data/demoData.ts): `src/data/demoData.ts`
- [Browser storage helper](https://github.com/mohammed-donia/athar_project/blob/main/src/lib/storage/storage.ts): `src/lib/storage/storage.ts`

### Other components

- **User**
- **Browser local storage**

## Connections

- User → App entry: opens
- App entry → Route map: provides routes
- Route map → App layout: renders
- Route map → Dashboard: routes to
- Route map → Tracker list: routes to
- Route map → Tracker details: routes to
- Route map → Activity feed: routes to
- Route map → Statistics: routes to
- Route map → Settings: routes to
- Tracker list → Tracker state: reads and updates
- Tracker list → Entry state: reads
- Tracker list → Tracker forms and cards: renders forms
- Tracker list → Tracker templates: selects from
- Tracker details → Tracker state: reads and updates
- Tracker details → Entry state: reads and updates
- Tracker details → Entry forms and lists: renders forms
- Tracker details → Date and totals: calculates progress
- Activity feed → Tracker state: reads
- Activity feed → Entry state: reads
- Activity feed → Date and totals: groups entries
- Activity feed → Timeline groups: renders groups
- Settings → Tracker state: imports and exports
- Settings → Entry state: imports and exports
- Settings → Appearance state: changes theme
- Settings → Notifications: shows messages
- Settings → Demo data: loads sample data
- Browser storage helper → Browser local storage: reads and writes