# hajra-khattak/taskflow-ai architecture

> Architecture diagram of the GitHub repository hajra-khattak/taskflow-ai, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/hajra-khattak/taskflow-ai
- Repository: https://github.com/hajra-khattak/taskflow-ai

## Overview

TaskFlow AI is a React task-and-habit planner. A signed-in user works through the protected dashboard: task and habit screens use hooks to subscribe to user-scoped data and send changes to Firebase; dashboard views also expose search, statistics, streaks, and AI task breakdown. The README documents Firestore live updates, date and streak behavior, and the serverless Gemini flow. Edges rely on the shown entry point, excerpts, indexed references, or README; unsampled implementation details are not inferred.

Main entry points: [`src/pages/Dashboard/DashboardLayout.jsx`](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/DashboardLayout.jsx) (Dashboard shell), [`src/hooks/useTasks.js`](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/hooks/useTasks.js) (Task hook), [`src/main.jsx`](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/main.jsx) (App router), [`src/pages/Dashboard/HabitsPage.jsx`](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/HabitsPage.jsx) (Habits page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and identity"]
  node_router["App router<br/>[main.jsx]"]
  node_authui["Sign-in pages<br/>[Login.jsx]"]
  node_auth["Auth context<br/>[AuthContext.jsx]"]
end

subgraph group_tasks["Task planning"]
  node_dashboard["Dashboard shell"]
  node_taskspage["Tasks page<br/>[TasksPage.jsx]"]
  node_taskboard["Task board<br/>[TaskBoard.jsx]"]
  node_taskhook["Task hook<br/>[useTasks.js]"]
  node_aimodal["AI breakdown dialog"]
end

subgraph group_habits["Habits and streaks"]
  node_habitpage["Habits page<br/>[HabitsPage.jsx]"]
  node_weeklyhabits["Weekly habit grid<br/>[WeeklyHabits.jsx]"]
  node_habithook["Habit hook<br/>[useHabits.js]"]
  node_activity["Activity heatmap<br/>[ActivityStreak.jsx]"]
end

subgraph group_insights["Search and insights"]
  node_stats["Stats views<br/>[StatsPage.jsx]"]
  node_statsutil["Stats calculations<br/>[stats.js]"]
  node_search["Global search<br/>[SearchPage.jsx]"]
end

subgraph group_integrations["Data and preferences"]
  node_collection["User collection hook"]
  node_taskservice["Task service<br/>[taskService.js]"]
  node_firestore[("Cloud Firestore")]
  node_habitservice["Habit service<br/>[habitService.js]"]
  node_aiservice["AI client service<br/>[aiService.js]"]
  node_api["Breakdown endpoint<br/>[breakdown.js]"]
  node_preferences["Theme and timezone"]
end

node_user(("User"))
node_gemini{{"Gemini API"}}

node_user -->|"uses app"| node_router
node_router -->|"routes to"| node_authui
node_router -->|"routes to"| node_dashboard
node_authui -->|"authenticates with"| node_auth
node_dashboard -->|"uses"| node_taskhook
node_taskspage -->|"renders"| node_taskboard
node_taskboard -.->|"changes tasks through"| node_taskhook
node_taskhook -->|"subscribes through"| node_collection
node_taskhook -->|"calls"| node_taskservice
node_collection -->|"gets user from"| node_auth
node_taskservice -->|"reads and writes"| node_firestore
node_dashboard -.->|"hosts"| node_habitpage
node_habitpage -->|"renders"| node_weeklyhabits
node_habitpage -.->|"uses"| node_habithook
node_habithook -->|"subscribes through"| node_collection
node_habithook -->|"calls"| node_habitservice
node_habitservice -->|"reads and writes"| node_firestore
node_dashboard -->|"renders"| node_activity
node_dashboard -.->|"hosts"| node_stats
node_stats -.->|"calculates with"| node_statsutil
node_dashboard -.->|"hosts"| node_search
node_taskspage -->|"opens via dashboard"| node_aimodal
node_aimodal -.->|"requests breakdown"| node_aiservice
node_aiservice -->|"posts task text and token"| node_api
node_api -->|"requests suggestions"| node_gemini
node_dashboard -->|"uses timezone"| node_preferences
node_preferences -->|"sets calendar zone"| node_user

click node_router "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/main.jsx"
click node_authui "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Login/Login.jsx"
click node_auth "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/context/AuthContext.jsx"
click node_dashboard "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/DashboardLayout.jsx"
click node_taskspage "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/TasksPage.jsx"
click node_taskboard "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/components/Dashboard/TaskBoard.jsx"
click node_taskhook "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/hooks/useTasks.js"
click node_collection "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/hooks/useUserCollection.js"
click node_taskservice "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/services/taskService.js"
click node_habitpage "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/HabitsPage.jsx"
click node_weeklyhabits "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/components/Dashboard/WeeklyHabits.jsx"
click node_habithook "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/hooks/useHabits.js"
click node_habitservice "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/services/habitService.js"
click node_activity "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/components/Dashboard/ActivityStreak.jsx"
click node_stats "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/StatsPage.jsx"
click node_statsutil "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/utils/stats.js"
click node_search "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/SearchPage.jsx"
click node_aimodal "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/components/Dashboard/AiBreakdownModal.jsx"
click node_aiservice "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/services/aiService.js"
click node_api "https://github.com/hajra-khattak/taskflow-ai/blob/main/api/breakdown.js"
click node_preferences "https://github.com/hajra-khattak/taskflow-ai/blob/main/src/context/TimeZoneContext.jsx"

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_router,node_authui,node_auth,node_user toneBlue
class node_dashboard,node_taskspage,node_taskboard,node_taskhook,node_aimodal toneAmber
class node_habitpage,node_weeklyhabits,node_habithook,node_activity,node_gemini toneMint
class node_stats,node_statsutil,node_search toneRose
class node_collection,node_taskservice,node_firestore,node_habitservice,node_aiservice,node_api,node_preferences toneIndigo
```

## Components

### App and identity

- [App router](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/main.jsx): `src/main.jsx`
- [Sign-in pages](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Login/Login.jsx): `src/pages/Login/Login.jsx`
- [Auth context](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`

### Task planning

- [Dashboard shell](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/DashboardLayout.jsx): `src/pages/Dashboard/DashboardLayout.jsx`
- [Tasks page](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/TasksPage.jsx): `src/pages/Dashboard/TasksPage.jsx`
- [Task board](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/components/Dashboard/TaskBoard.jsx): `src/components/Dashboard/TaskBoard.jsx`
- [Task hook](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/hooks/useTasks.js): `src/hooks/useTasks.js`
- [AI breakdown dialog](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/components/Dashboard/AiBreakdownModal.jsx): `src/components/Dashboard/AiBreakdownModal.jsx`

### Habits and streaks

- [Habits page](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/HabitsPage.jsx): `src/pages/Dashboard/HabitsPage.jsx`
- [Weekly habit grid](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/components/Dashboard/WeeklyHabits.jsx): `src/components/Dashboard/WeeklyHabits.jsx`
- [Habit hook](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/hooks/useHabits.js): `src/hooks/useHabits.js`
- [Activity heatmap](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/components/Dashboard/ActivityStreak.jsx): `src/components/Dashboard/ActivityStreak.jsx`

### Search and insights

- [Stats views](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/StatsPage.jsx): `src/pages/Dashboard/StatsPage.jsx`
- [Stats calculations](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/utils/stats.js): `src/utils/stats.js`
- [Global search](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/pages/Dashboard/SearchPage.jsx): `src/pages/Dashboard/SearchPage.jsx`

### Data and preferences

- [User collection hook](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/hooks/useUserCollection.js): `src/hooks/useUserCollection.js`
- [Task service](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/services/taskService.js): `src/services/taskService.js`
- **Cloud Firestore**
- [Habit service](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/services/habitService.js): `src/services/habitService.js`
- [AI client service](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/services/aiService.js): `src/services/aiService.js`
- [Breakdown endpoint](https://github.com/hajra-khattak/taskflow-ai/blob/main/api/breakdown.js): `api/breakdown.js`
- [Theme and timezone](https://github.com/hajra-khattak/taskflow-ai/blob/main/src/context/TimeZoneContext.jsx): `src/context/TimeZoneContext.jsx`

### Other components

- **User**
- **Gemini API**

## Connections

- User → App router: uses app
- App router → Sign-in pages: routes to (evidence: `src/main.jsx`)
- App router → Dashboard shell: routes to (evidence: `src/main.jsx`)
- Sign-in pages → Auth context: authenticates with (evidence: `src/pages/Login/Login.jsx`)
- Dashboard shell → Task hook: uses (evidence: `src/pages/Dashboard/DashboardLayout.jsx`)
- Tasks page → Task board: renders (evidence: `src/pages/Dashboard/TasksPage.jsx`)
- Task board → Task hook: changes tasks through
- Task hook → User collection hook: subscribes through (evidence: `src/hooks/useTasks.js`)
- Task hook → Task service: calls (evidence: `src/hooks/useTasks.js`)
- User collection hook → Auth context: gets user from (evidence: `src/hooks/useUserCollection.js`)
- Task service → Cloud Firestore: reads and writes (evidence: `src/services/taskService.js`)
- Dashboard shell → Habits page: hosts
- Habits page → Weekly habit grid: renders (evidence: `src/pages/Dashboard/HabitsPage.jsx`)
- Habits page → Habit hook: uses
- Habit hook → User collection hook: subscribes through (evidence: `src/hooks/useHabits.js`)
- Habit hook → Habit service: calls (evidence: `src/hooks/useHabits.js`)
- Habit service → Cloud Firestore: reads and writes (evidence: `src/services/habitService.js`)
- Dashboard shell → Activity heatmap: renders
- Dashboard shell → Stats views: hosts
- Stats views → Stats calculations: calculates with
- Dashboard shell → Global search: hosts
- Tasks page → AI breakdown dialog: opens via dashboard
- AI breakdown dialog → AI client service: requests breakdown
- AI client service → Breakdown endpoint: posts task text and token
- Breakdown endpoint → Gemini API: requests suggestions
- Dashboard shell → Theme and timezone: uses timezone (evidence: `src/pages/Dashboard/DashboardLayout.jsx`)
- Theme and timezone → User: sets calendar zone