# santhosh-vj/zoho-to-do architecture

> Architecture diagram of the GitHub repository santhosh-vj/zoho-to-do, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/santhosh-vj/zoho-to-do
- Repository: https://github.com/santhosh-vj/zoho-to-do

## Overview

#### Purpose and Entry Points
This is a browser-based “Shadow” task/workflow application with agenda, personal-task, approval, administration, analytics, settings, and workflow-builder surfaces. Primary HTML entry points are:
- `shadow/index.html` — main application shell.
- `shadow/workflow.html` — workflow management/builder surface.
- `shadow/admin.html` — administration dashboard.
- `shadow/settings.html` — user settings.
- `shadow/playground.html` — isolated experimentation/demo surface.

Netlify deployment configuration is defined in `netlify.toml`.

#### Application Shell and Feature Views
The main client is orchestrated from `shadow/app.js`, with shared UI styling in `shadow/styles.css`. Feature-specific views divide the task experience by context:
- `shadow/agenda-view.js`
- `shadow/myday-view.js`
- `shadow/createdbyme-view.js`

Supporting task capabilities include templates, likes, form corrections, and enhancements in `shadow/task-templates.js`, `shadow/task-likes.js`, and `shadow/task-enhancements.js`. This suggests a modular front-end where views consume common task state/API behavior rather than each owning a backend.

#### Backend and Persistence Boundary
Client/server or persistence integration is centered on:
- `shadow/backend.js`
- `shadow/approval-backend.js`
- `shadow/shadow-workflow-backend.js`

Database and access fixes are separated into patch modules, notably `shadow/shadow-db-patch.js` and `shadow/shadow-user-access.js`. The naming indicates the browser application may load incremental compatibility/patch scripts alongside its core backend adapters. Consumers should treat these modules as the boundary between UI state and remote persisted task, approval, workflow, and user-access data.

#### Identity, Authorization, and Administration
Authentication is explicitly integrated with Supabase through `shadow/auth-supabase.js`, with UI/session handling in `shadow/auth.js` and access gating in `shadow/shadow-auth-gate.js`. Role-based access control is implemented across:
- `shadow/rbac.js`
- `shadow/rbac-ui.js`
- `shadow/admin-dashboard.js`

Administration is exposed through `shadow/admin.html` and `shadow/admin.js`. The core control flow is authentication → user-access validation → role evaluation → conditional exposure of administrative, approval, and workflow operations.

#### Workflow and Approval Pipeline
Workflow authoring, execution, and visualization are distinct stages:
- `shadow/workflow-builder.js` builds/edit workflows.
- `shadow/workflow-engine.js` evaluates or runs workflow logic.
- `shadow/workflow-ui.js` presents workflow interactions.
- `shadow/shadow-workflow-backend.js` persists or retrieves workflow state.

Approvals form an adjacent workflow path via `shadow/approval-ui.js` and `shadow/approval-backend.js`, with targeted rollout/fix scripts in `shadow/shadow-approval-patch.js`. A deployment helper, `shadow/deploy-approval-workflow.sh`, indicates approvals/workflow backend infrastructure may require an explicit deployment step separate from static client publishing.

#### User Preferences, Notifications, and Onboarding
User-facing state and personalization are handled by:
- `shadow/settings.js` and `shadow/settings.html`
- `shadow/theme.js`
- `shadow/notification-settings.js`
- `shadow/notification-bell.js`
- `shadow/onboarding.js`

These modules sit after identity establishment and before normal task/workflow use: authenticated users configure preferences, receive notification UI, and complete onboarding. Analytics and group-oriented functionality are independently surfaced in `shadow/analytics-dashboard.js` and `shadow/group-ui.js`, likely consuming the same authenticated backend boundary rather than defining separate application entry points.

Main entry points: [`shadow/app.js`](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/app.js) (App orchestrator), [`shadow/shadow-auth-gate.js`](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/shadow-auth-gate.js) (User access gate), [`shadow/workflow-builder.js`](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/workflow-builder.js) (Workflow authoring), [`shadow/workflow-engine.js`](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/workflow-engine.js) (Workflow execution)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client application"]
  node_main_shell["Main app shell<br/>browser entry<br/>[index.html]"]
  node_app["App orchestrator<br/>client module<br/>[app.js]"]
  node_task_views["Task context views<br/>feature views<br/>[agenda-view.js]"]
  node_task_features["Task capabilities<br/>feature modules<br/>[task-templates.js]"]
  node_preferences["Preferences &amp; onboarding<br/>client features<br/>[settings.js]"]
  node_analytics_groups["Analytics &amp; groups<br/>client features"]
end

subgraph group_identity["Identity &amp; access"]
  node_auth_ui["Authentication UI<br/>session module<br/>[auth.js]"]
  node_supabase_auth["Supabase authentication<br/>identity adapter<br/>[auth-supabase.js]"]
  node_access_gate{{"User access gate<br/>authorization gate"}}
  node_rbac["Roles &amp; admin controls<br/>RBAC modules<br/>[rbac.js]"]
  node_admin["Administration dashboard<br/>admin surface<br/>[admin.html]"]
end

subgraph group_workflow["Workflow &amp; approvals"]
  node_workflow_surface["Workflow builder surface<br/>browser entry<br/>[workflow.html]"]
  node_workflow_builder["Workflow authoring<br/>builder module"]
  node_workflow_engine["Workflow execution<br/>engine module<br/>[workflow-engine.js]"]
  node_approval_ui["Approval interactions<br/>approval UI<br/>[approval-ui.js]"]
end

subgraph group_data["Data integration"]
  node_backend[("Task data backend<br/>backend adapter<br/>[backend.js]")]
  node_workflow_backend[("Workflow data backend<br/>backend adapter")]
  node_approval_backend[("Approval data backend<br/>backend adapter")]
  node_access_data[("User access data<br/>access patch")]
end

node_deployment["Netlify deployment<br/>deployment config<br/>[netlify.toml]"]

node_main_shell -->|"loads"| node_app
node_app -->|"renders"| node_task_views
node_app -->|"uses"| node_task_features
node_app -->|"uses"| node_preferences
node_app -->|"surfaces"| node_analytics_groups
node_app -->|"establishes session"| node_auth_ui
node_auth_ui -->|"authenticates via"| node_supabase_auth
node_supabase_auth -->|"session enables"| node_access_gate
node_access_gate -->|"validates against"| node_access_data
node_access_gate -->|"permits role evaluation"| node_rbac
node_rbac -->|"controls access to"| node_admin
node_task_views -->|"reads and writes tasks"| node_backend
node_task_features -->|"uses task data"| node_backend
node_workflow_surface -->|"loads"| node_workflow_builder
node_workflow_builder -->|"defines workflows for"| node_workflow_engine
node_workflow_builder -->|"persists workflows"| node_workflow_backend
node_workflow_engine -->|"retrieves workflow state"| node_workflow_backend
node_approval_ui -->|"submits approvals"| node_approval_backend
node_approval_ui -->|"participates in"| node_workflow_engine
node_access_gate -.->|"gates protected access"| node_workflow_surface
node_deployment -.->|"publishes"| node_main_shell

click node_main_shell "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/index.html"
click node_app "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/app.js"
click node_task_views "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/agenda-view.js"
click node_task_features "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/task-templates.js"
click node_preferences "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/settings.js"
click node_analytics_groups "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/analytics-dashboard.js"
click node_auth_ui "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/auth.js"
click node_supabase_auth "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/auth-supabase.js"
click node_access_gate "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/shadow-auth-gate.js"
click node_rbac "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/rbac.js"
click node_admin "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/admin.html"
click node_workflow_surface "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/workflow.html"
click node_workflow_builder "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/workflow-builder.js"
click node_workflow_engine "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/workflow-engine.js"
click node_approval_ui "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/approval-ui.js"
click node_backend "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/backend.js"
click node_workflow_backend "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/shadow-workflow-backend.js"
click node_approval_backend "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/approval-backend.js"
click node_access_data "https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/shadow-user-access.js"
click node_deployment "https://github.com/santhosh-vj/zoho-to-do/blob/main/netlify.toml"

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_main_shell,node_app,node_task_views,node_task_features,node_preferences,node_analytics_groups toneBlue
class node_auth_ui,node_supabase_auth,node_access_gate,node_rbac,node_admin toneAmber
class node_workflow_surface,node_workflow_builder,node_workflow_engine,node_approval_ui toneMint
class node_backend,node_workflow_backend,node_approval_backend,node_access_data toneRose
class node_deployment toneNeutral
```

## Components

### Client application

- [Main app shell](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/index.html): browser entry · Primary task application entry point. · `shadow/index.html`
- [App orchestrator](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/app.js): client module · `shadow/app.js`
- [Task context views](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/agenda-view.js): feature views · Agenda, personal, and created-task views. · `shadow/agenda-view.js`
- [Task capabilities](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/task-templates.js): feature modules · Templates, likes, corrections, and enhancements. · `shadow/task-templates.js`
- [Preferences & onboarding](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/settings.js): client features · Settings, theme, notifications, and onboarding. · `shadow/settings.js`
- [Analytics & groups](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/analytics-dashboard.js): client features · `shadow/analytics-dashboard.js`

### Identity & access

- [Authentication UI](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/auth.js): session module · `shadow/auth.js`
- [Supabase authentication](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/auth-supabase.js): identity adapter · `shadow/auth-supabase.js`
- [User access gate](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/shadow-auth-gate.js): authorization gate · Validates user access before protected operations. · `shadow/shadow-auth-gate.js`
- [Roles & admin controls](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/rbac.js): RBAC modules · Role evaluation and role-aware UI. · `shadow/rbac.js`
- [Administration dashboard](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/admin.html): admin surface · `shadow/admin.html`

### Workflow & approvals

- [Workflow builder surface](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/workflow.html): browser entry · `shadow/workflow.html`
- [Workflow authoring](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/workflow-builder.js): builder module · `shadow/workflow-builder.js`
- [Workflow execution](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/workflow-engine.js): engine module · Evaluates and runs workflow logic. · `shadow/workflow-engine.js`
- [Approval interactions](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/approval-ui.js): approval UI · `shadow/approval-ui.js`

### Data integration

- [Task data backend](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/backend.js): backend adapter · Client boundary for persisted task data. · `shadow/backend.js`
- [Workflow data backend](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/shadow-workflow-backend.js): backend adapter · Persists and retrieves workflow state. · `shadow/shadow-workflow-backend.js`
- [Approval data backend](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/approval-backend.js): backend adapter · `shadow/approval-backend.js`
- [User access data](https://github.com/santhosh-vj/zoho-to-do/blob/main/shadow/shadow-user-access.js): access patch · Database/access compatibility boundary. · `shadow/shadow-user-access.js`

### Other components

- [Netlify deployment](https://github.com/santhosh-vj/zoho-to-do/blob/main/netlify.toml): deployment config · `netlify.toml`

## Connections

- Main app shell → App orchestrator: loads
- App orchestrator → Task context views: renders
- App orchestrator → Task capabilities: uses
- App orchestrator → Preferences & onboarding: uses
- App orchestrator → Analytics & groups: surfaces
- App orchestrator → Authentication UI: establishes session
- Authentication UI → Supabase authentication: authenticates via
- Supabase authentication → User access gate: session enables
- User access gate → User access data: validates against
- User access gate → Roles & admin controls: permits role evaluation
- Roles & admin controls → Administration dashboard: controls access to
- Task context views → Task data backend: reads and writes tasks
- Task capabilities → Task data backend: uses task data
- Workflow builder surface → Workflow authoring: loads
- Workflow authoring → Workflow execution: defines workflows for
- Workflow authoring → Workflow data backend: persists workflows
- Workflow execution → Workflow data backend: retrieves workflow state
- Approval interactions → Approval data backend: submits approvals
- Approval interactions → Workflow execution: participates in
- User access gate → Workflow builder surface: gates protected access
- Netlify deployment → Main app shell: publishes