# nonthaphat-ss/daily-work-log architecture

> Architecture diagram of the GitHub repository nonthaphat-ss/daily-work-log, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nonthaphat-ss/daily-work-log
- Repository: https://github.com/nonthaphat-ss/daily-work-log

## Overview

This is a React daily-work-log application with routed work-log, notes, and 3D knowledge-galaxy experiences. The main workflow is to enter dated work details and tasks, save them to a user-specific Firestore work log, and export a formatted DOCX; the other routes provide note organization and a categorized, time-filterable knowledge visualization. The graph reflects the sampled routing, work-log, authentication, and galaxy code. Notes and the carousel are included as documented-by-the-tree route surfaces, but their internal behavior was not sampled.

Main entry points: [`src/pages/WorkLog.jsx`](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/WorkLog.jsx) (Work log page), [`src/pages/KnowledgeGalaxy/index.jsx`](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/index.jsx) (Galaxy page), [`src/App.jsx`](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/App.jsx) (Route shell), [`src/main.jsx`](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["Application shell"]
  node_entry["React entry<br/>[main.jsx]"]
  node_router["Route shell<br/>[App.jsx]"]
  node_carousel["Main carousel<br/>[MainCarousel.jsx]"]
  node_notes["Notes workspace<br/>[Notes.jsx]"]
end

subgraph group_worklog["Work log"]
  node_worklog["Work log page<br/>[WorkLog.jsx]"]
  node_taskinput["Task input<br/>[TaskInputBar.jsx]"]
  node_floatingmenu["Work-log menu<br/>[FloatingMenu.jsx]"]
  node_docpreview["A4 preview<br/>[A4Document.jsx]"]
  node_dateutils["Thai date utilities<br/>[dateUtils.js]"]
  node_template["DOCX template<br/>[template.docx]"]
  node_download["File download"]
  node_firestore[("Cloud Firestore")]
end

subgraph group_knowledge["Knowledge galaxy"]
  node_galaxy["Galaxy page<br/>[index.jsx]"]
  node_galaxydata["Galaxy data hook<br/>[useGalaxyData.js]"]
  node_control["Galaxy controls<br/>[ControlPanel.jsx]"]
  node_canvas["3D galaxy canvas<br/>[GalaxyCanvas.jsx]"]
  node_starinfo["Star details<br/>[StarInfoPanel.jsx]"]
  node_timeline["Timeline filter<br/>[TimelineSlider.jsx]"]
  node_localstorage[("Browser storage")]
end

subgraph group_identity["Identity"]
  node_authprovider["Auth provider<br/>[AuthContext.jsx]"]
  node_firebase["Firebase setup<br/>[firebase.js]"]
  node_firebaseauth[("Firebase Auth")]
end

node_user(("User"))

node_user -->|"opens app"| node_entry
node_entry -->|"wraps routes"| node_authprovider
node_entry -->|"mounts"| node_router
node_router -->|"routes /"| node_carousel
node_router -->|"routes /work-log"| node_worklog
node_router -->|"routes /notes"| node_notes
node_router -->|"routes /galaxy"| node_galaxy
node_authprovider -->|"uses auth"| node_firebase
node_firebase -->|"configures"| node_firebaseauth
node_authprovider -->|"observes and signs in"| node_firebaseauth
node_worklog -->|"loads and saves"| node_firestore
node_worklog -->|"renders"| node_taskinput
node_worklog -->|"renders"| node_floatingmenu
node_worklog -->|"renders"| node_docpreview
node_taskinput -->|"uses date helpers"| node_dateutils
node_worklog -->|"formats dates"| node_dateutils
node_worklog -->|"loads template"| node_template
node_worklog -->|"exports DOCX"| node_download
node_galaxy -->|"loads and mutates"| node_galaxydata
node_galaxydata -->|"reads and writes"| node_localstorage
node_galaxy -->|"passes category actions"| node_control
node_galaxy -->|"passes filtered stars"| node_canvas
node_galaxy -->|"passes selected star"| node_starinfo
node_galaxy -->|"passes date range"| node_timeline

click node_entry "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/main.jsx"
click node_router "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/App.jsx"
click node_carousel "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/MainCarousel.jsx"
click node_notes "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/Notes.jsx"
click node_worklog "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/WorkLog.jsx"
click node_taskinput "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/components/TaskInputBar.jsx"
click node_floatingmenu "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/components/FloatingMenu.jsx"
click node_docpreview "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/components/A4Document.jsx"
click node_dateutils "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/utils/dateUtils.js"
click node_template "https://github.com/nonthaphat-ss/daily-work-log/blob/main/public/template.docx"
click node_galaxy "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/index.jsx"
click node_galaxydata "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/hooks/useGalaxyData.js"
click node_control "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/components/ControlPanel.jsx"
click node_canvas "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/components/GalaxyCanvas.jsx"
click node_starinfo "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/components/StarInfoPanel.jsx"
click node_timeline "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/components/TimelineSlider.jsx"
click node_authprovider "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/contexts/AuthContext.jsx"
click node_firebase "https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/firebase.js"

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_entry,node_router,node_carousel,node_notes,node_user toneBlue
class node_worklog,node_taskinput,node_floatingmenu,node_docpreview,node_dateutils,node_template,node_download,node_firestore toneAmber
class node_galaxy,node_galaxydata,node_control,node_canvas,node_starinfo,node_timeline,node_localstorage toneMint
class node_authprovider,node_firebase,node_firebaseauth toneRose
```

## Components

### Application shell

- [React entry](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/main.jsx): `src/main.jsx`
- [Route shell](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/App.jsx): `src/App.jsx`
- [Main carousel](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/MainCarousel.jsx): `src/pages/MainCarousel.jsx`
- [Notes workspace](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/Notes.jsx): `src/pages/Notes.jsx`

### Work log

- [Work log page](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/WorkLog.jsx): `src/pages/WorkLog.jsx`
- [Task input](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/components/TaskInputBar.jsx): `src/components/TaskInputBar.jsx`
- [Work-log menu](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/components/FloatingMenu.jsx): `src/components/FloatingMenu.jsx`
- [A4 preview](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/components/A4Document.jsx): `src/components/A4Document.jsx`
- [Thai date utilities](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/utils/dateUtils.js): `src/utils/dateUtils.js`
- [DOCX template](https://github.com/nonthaphat-ss/daily-work-log/blob/main/public/template.docx): `public/template.docx`
- **File download**
- **Cloud Firestore**

### Knowledge galaxy

- [Galaxy page](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/index.jsx): `src/pages/KnowledgeGalaxy/index.jsx`
- [Galaxy data hook](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/hooks/useGalaxyData.js): `src/pages/KnowledgeGalaxy/hooks/useGalaxyData.js`
- [Galaxy controls](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/components/ControlPanel.jsx): `src/pages/KnowledgeGalaxy/components/ControlPanel.jsx`
- [3D galaxy canvas](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/components/GalaxyCanvas.jsx): `src/pages/KnowledgeGalaxy/components/GalaxyCanvas.jsx`
- [Star details](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/components/StarInfoPanel.jsx): `src/pages/KnowledgeGalaxy/components/StarInfoPanel.jsx`
- [Timeline filter](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/pages/KnowledgeGalaxy/components/TimelineSlider.jsx): `src/pages/KnowledgeGalaxy/components/TimelineSlider.jsx`
- **Browser storage**

### Identity

- [Auth provider](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/contexts/AuthContext.jsx): `src/contexts/AuthContext.jsx`
- [Firebase setup](https://github.com/nonthaphat-ss/daily-work-log/blob/main/src/firebase.js): `src/firebase.js`
- **Firebase Auth**

### Other components

- **User**

## Connections

- User → React entry: opens app
- React entry → Auth provider: wraps routes
- React entry → Route shell: mounts
- Route shell → Main carousel: routes /
- Route shell → Work log page: routes /work-log
- Route shell → Notes workspace: routes /notes
- Route shell → Galaxy page: routes /galaxy
- Auth provider → Firebase setup: uses auth
- Firebase setup → Firebase Auth: configures
- Auth provider → Firebase Auth: observes and signs in
- Work log page → Cloud Firestore: loads and saves
- Work log page → Task input: renders
- Work log page → Work-log menu: renders
- Work log page → A4 preview: renders
- Task input → Thai date utilities: uses date helpers
- Work log page → Thai date utilities: formats dates
- Work log page → DOCX template: loads template
- Work log page → File download: exports DOCX
- Galaxy page → Galaxy data hook: loads and mutates
- Galaxy data hook → Browser storage: reads and writes
- Galaxy page → Galaxy controls: passes category actions
- Galaxy page → 3D galaxy canvas: passes filtered stars
- Galaxy page → Star details: passes selected star
- Galaxy page → Timeline filter: passes date range