# hsai-rohit/task-glitch architecture

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

- Interactive diagram: https://gitdiagram.com/hsai-rohit/task-glitch
- Repository: https://github.com/hsai-rohit/task-glitch

## Overview

TaskGlitch is a sales-team task management app centered on creating, editing, filtering, and deleting tasks, with undo and ROI-based productivity views. The visible runtime flow runs through the React app, task table, context, and task hook; analytics, activity logging, and CSV export are additional capabilities. The hook and several UI modules were not sampled, so their internal behavior and data source are not asserted. The README mentions CSV import, but the sampled CSV utility shows export only.

Main entry points: [`src/App.tsx`](https://github.com/hsai-rohit/task-glitch/blob/main/src/App.tsx) (TaskGlitch App), [`src/components/TaskTable.tsx`](https://github.com/hsai-rohit/task-glitch/blob/main/src/components/TaskTable.tsx) (Task Table), [`src/context/TasksContext.tsx`](https://github.com/hsai-rohit/task-glitch/blob/main/src/context/TasksContext.tsx) (Task Context), [`src/components/MetricsBar.tsx`](https://github.com/hsai-rohit/task-glitch/blob/main/src/components/MetricsBar.tsx) (Metrics Bar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["TaskGlitch App<br/>[App.tsx]"]
  node_user_state["User Context<br/>[UserContext.tsx]"]
end

subgraph group_tasks["Task Management"]
  node_task_table["Task Table<br/>[TaskTable.tsx]"]
  node_task_form["Task Form<br/>[TaskForm.tsx]"]
  node_task_details["Task Details"]
  node_task_context["Task Context<br/>[TasksContext.tsx]"]
  node_task_hook["Task State Hook<br/>[useTasks.ts]"]
  node_undo["Undo Snackbar<br/>[UndoSnackbar.tsx]"]
end

subgraph group_insights["Productivity Insights"]
  node_metrics["Metrics Bar<br/>[MetricsBar.tsx]"]
  node_charts["Charts Dashboard"]
  node_analytics["Analytics Dashboard"]
  node_activity["Activity Log<br/>[ActivityLog.tsx]"]
end

subgraph group_shared["Shared Services"]
  node_logic["ROI and Analytics Logic<br/>[logic.ts]"]
  node_csv["CSV Utilities<br/>[csv.ts]"]
  node_theme["App Theme<br/>[theme.ts]"]
end

node_sales_user(("Sales Team User"))

node_sales_user -->|"uses"| node_app
node_app -->|"reads user"| node_user_state
node_app -->|"reads task state"| node_task_context
node_app -->|"renders"| node_task_table
node_app -->|"renders"| node_undo
node_app -->|"renders"| node_metrics
node_app -->|"renders"| node_charts
node_app -->|"renders"| node_analytics
node_app -->|"renders"| node_activity
node_app -->|"exports filtered tasks"| node_csv
node_app -->|"computes metrics"| node_logic
node_task_table -->|"renders"| node_task_form
node_task_table -->|"renders"| node_task_details
node_task_context -->|"gets task state"| node_task_hook
node_metrics -->|"reads metrics"| node_task_context
node_analytics -->|"uses analytics"| node_logic
node_app -.->|"configured by"| node_theme

click node_app "https://github.com/hsai-rohit/task-glitch/blob/main/src/App.tsx"
click node_user_state "https://github.com/hsai-rohit/task-glitch/blob/main/src/context/UserContext.tsx"
click node_task_table "https://github.com/hsai-rohit/task-glitch/blob/main/src/components/TaskTable.tsx"
click node_task_form "https://github.com/hsai-rohit/task-glitch/blob/main/src/components/TaskForm.tsx"
click node_task_details "https://github.com/hsai-rohit/task-glitch/blob/main/src/components/TaskDetailsDialog.tsx"
click node_task_context "https://github.com/hsai-rohit/task-glitch/blob/main/src/context/TasksContext.tsx"
click node_task_hook "https://github.com/hsai-rohit/task-glitch/blob/main/src/hooks/useTasks.ts"
click node_undo "https://github.com/hsai-rohit/task-glitch/blob/main/src/components/UndoSnackbar.tsx"
click node_metrics "https://github.com/hsai-rohit/task-glitch/blob/main/src/components/MetricsBar.tsx"
click node_charts "https://github.com/hsai-rohit/task-glitch/blob/main/src/components/ChartsDashboard.tsx"
click node_analytics "https://github.com/hsai-rohit/task-glitch/blob/main/src/components/AnalyticsDashboard.tsx"
click node_activity "https://github.com/hsai-rohit/task-glitch/blob/main/src/components/ActivityLog.tsx"
click node_logic "https://github.com/hsai-rohit/task-glitch/blob/main/src/utils/logic.ts"
click node_csv "https://github.com/hsai-rohit/task-glitch/blob/main/src/utils/csv.ts"
click node_theme "https://github.com/hsai-rohit/task-glitch/blob/main/src/theme.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_user_state,node_sales_user toneBlue
class node_task_table,node_task_form,node_task_details,node_task_context,node_task_hook,node_undo toneAmber
class node_metrics,node_charts,node_analytics,node_activity toneMint
class node_logic,node_csv,node_theme toneRose
```

## Components

### Application

- [TaskGlitch App](https://github.com/hsai-rohit/task-glitch/blob/main/src/App.tsx): `src/App.tsx`
- [User Context](https://github.com/hsai-rohit/task-glitch/blob/main/src/context/UserContext.tsx): `src/context/UserContext.tsx`

### Task Management

- [Task Table](https://github.com/hsai-rohit/task-glitch/blob/main/src/components/TaskTable.tsx): `src/components/TaskTable.tsx`
- [Task Form](https://github.com/hsai-rohit/task-glitch/blob/main/src/components/TaskForm.tsx): `src/components/TaskForm.tsx`
- [Task Details](https://github.com/hsai-rohit/task-glitch/blob/main/src/components/TaskDetailsDialog.tsx): `src/components/TaskDetailsDialog.tsx`
- [Task Context](https://github.com/hsai-rohit/task-glitch/blob/main/src/context/TasksContext.tsx): `src/context/TasksContext.tsx`
- [Task State Hook](https://github.com/hsai-rohit/task-glitch/blob/main/src/hooks/useTasks.ts): `src/hooks/useTasks.ts`
- [Undo Snackbar](https://github.com/hsai-rohit/task-glitch/blob/main/src/components/UndoSnackbar.tsx): `src/components/UndoSnackbar.tsx`

### Productivity Insights

- [Metrics Bar](https://github.com/hsai-rohit/task-glitch/blob/main/src/components/MetricsBar.tsx): `src/components/MetricsBar.tsx`
- [Charts Dashboard](https://github.com/hsai-rohit/task-glitch/blob/main/src/components/ChartsDashboard.tsx): `src/components/ChartsDashboard.tsx`
- [Analytics Dashboard](https://github.com/hsai-rohit/task-glitch/blob/main/src/components/AnalyticsDashboard.tsx): `src/components/AnalyticsDashboard.tsx`
- [Activity Log](https://github.com/hsai-rohit/task-glitch/blob/main/src/components/ActivityLog.tsx): `src/components/ActivityLog.tsx`

### Shared Services

- [ROI and Analytics Logic](https://github.com/hsai-rohit/task-glitch/blob/main/src/utils/logic.ts): `src/utils/logic.ts`
- [CSV Utilities](https://github.com/hsai-rohit/task-glitch/blob/main/src/utils/csv.ts): `src/utils/csv.ts`
- [App Theme](https://github.com/hsai-rohit/task-glitch/blob/main/src/theme.ts): `src/theme.ts`

### Other components

- **Sales Team User**

## Connections

- Sales Team User → TaskGlitch App: uses (evidence: `README.md`)
- TaskGlitch App → User Context: reads user (evidence: `src/App.tsx`)
- TaskGlitch App → Task Context: reads task state (evidence: `src/App.tsx`)
- TaskGlitch App → Task Table: renders (evidence: `src/App.tsx`)
- TaskGlitch App → Undo Snackbar: renders (evidence: `src/App.tsx`)
- TaskGlitch App → Metrics Bar: renders (evidence: `src/App.tsx`)
- TaskGlitch App → Charts Dashboard: renders (evidence: `src/App.tsx`)
- TaskGlitch App → Analytics Dashboard: renders (evidence: `src/App.tsx`)
- TaskGlitch App → Activity Log: renders (evidence: `src/App.tsx`)
- TaskGlitch App → CSV Utilities: exports filtered tasks (evidence: `src/App.tsx`)
- TaskGlitch App → ROI and Analytics Logic: computes metrics (evidence: `src/App.tsx`)
- Task Table → Task Form: renders (evidence: `src/components/TaskTable.tsx`)
- Task Table → Task Details: renders (evidence: `src/components/TaskTable.tsx`)
- Task Context → Task State Hook: gets task state (evidence: `src/context/TasksContext.tsx`)
- Metrics Bar → Task Context: reads metrics (evidence: `src/components/MetricsBar.tsx`)
- Analytics Dashboard → ROI and Analytics Logic: uses analytics (evidence: `src/components/AnalyticsDashboard.tsx`)
- TaskGlitch App → App Theme: configured by